From 354c1d9b4bae25271084514b1059674e8c6046f9 Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Wed, 10 Apr 2024 11:57:42 -0400 Subject: [PATCH] update cypress tests --- cypress/integration/multi-pdf/navigations.ts | 39 +++-- cypress/integration/multi-pdf/render-app.ts | 4 +- cypress/integration/single-pdf/settings.ts | 4 +- cypress/support/commands.ts | 2 +- package-lock.json | 159 +++++++++++++++---- package.json | 14 +- src/ui/Footer.tsx | 4 +- src/ui/PageButton.tsx | 6 +- 8 files changed, 172 insertions(+), 60 deletions(-) diff --git a/cypress/integration/multi-pdf/navigations.ts b/cypress/integration/multi-pdf/navigations.ts index 10a8b376..51210f8f 100644 --- a/cypress/integration/multi-pdf/navigations.ts +++ b/cypress/integration/multi-pdf/navigations.ts @@ -33,19 +33,27 @@ describe('Multi PDF navigation', () => { }); it('should navigate forward and backwards with page buttons', () => { - cy.findByText('Anthropology without Informants').should('be.visible'); + cy.findByText( + 'Anthropology without Informants: Collected Works in Paleoanthropology by L.G. Freeman.' + ).should('be.visible'); cy.findByRole('button', { name: 'Next Page' }).click(); cy.get('#mainContent') - .find('div[class="react-pdf__Page__textContent"]') + .find('.react-pdf__Page__textContent') .children() .should('have.length', 0); - cy.findByText('Anthropology without Informants').should('not.exist'); + cy.findByText( + 'Anthropology without Informants: Collected Works in Paleoanthropology by L.G. Freeman.' + ).should('not.exist'); cy.findByRole('button', { name: 'Previous Page' }).click(); - cy.findByText('Anthropology without Informants').should('be.visible'); + cy.findByText( + 'Anthropology without Informants: Collected Works in Paleoanthropology by L.G. Freeman.' + ).should('be.visible'); }); it('should switch to scrolling mode', () => { - cy.findByText('Anthropology without Informants').should('be.visible'); + cy.findByText( + 'Anthropology without Informants: Collected Works in Paleoanthropology by L.G. Freeman.' + ).should('be.visible'); cy.findByRole('button', { name: 'Settings' }).click(); cy.findByText('Scrolling').click(); cy.findByRole('button', { name: 'Next Page' }).click(); @@ -56,27 +64,36 @@ describe('Multi PDF navigation', () => { }); it('should navigate between resources with page buttons on scrolling mode', () => { - cy.findByText('Anthropology without Informants').should('be.visible'); + cy.findByText( + 'Anthropology without Informants: Collected Works in Paleoanthropology by L.G. Freeman.' + ).should('be.visible'); cy.findByText('Settings').click(); cy.findByText('Scrolling').click(); cy.findByRole('button', { name: 'Next Page' }).click(); - cy.findByText('Anthropology without Informants').should('not.exist'); + cy.findByText( + 'Anthropology without Informants: Collected Works in Paleoanthropology by L.G. Freeman.' + ).should('not.exist'); cy.log('switch from paginated to scrolling'); cy.findByText('Settings').click(); cy.findByText('Paginated').click(); cy.findByRole('button', { name: 'Next Page' }).click(); - cy.findByText('Anthropology without Informants').should('not.exist'); + cy.findByText( + 'Anthropology without Informants: Collected Works in Paleoanthropology by L.G. Freeman.' + ).should('not.exist'); cy.findByText('Settings').click(); cy.findByText('Scrolling').click(); cy.findByRole('button', { name: 'Previous Page' }).click(); cy.wait('@pdf'); + cy.findByText('Settings').click(); + cy.findByText('Zoom Out').click(); - cy.findByText('Anthropology without Informants', { timeout: 10000 }).should( - 'be.visible' - ); + cy.findByText( + 'Anthropology without Informants: Collected Works in Paleoanthropology by L.G. Freeman.', + { timeout: 10000 } + ).should('be.visible'); }); }); diff --git a/cypress/integration/multi-pdf/render-app.ts b/cypress/integration/multi-pdf/render-app.ts index 71dc3bb3..44f2878d 100644 --- a/cypress/integration/multi-pdf/render-app.ts +++ b/cypress/integration/multi-pdf/render-app.ts @@ -10,6 +10,8 @@ describe('Renders multi PDF', () => { cy.findByRole('button', { name: 'Next Page' }).should('not.be.disabled'); cy.findByRole('button', { name: 'Previous Page' }).should('be.disabled'); - cy.findByText('Anthropology without Informants').should('be.visible'); + cy.findByText( + 'Anthropology without Informants: Collected Works in Paleoanthropology by L.G. Freeman.' + ).should('be.visible'); }); }); diff --git a/cypress/integration/single-pdf/settings.ts b/cypress/integration/single-pdf/settings.ts index 424932d3..412905d4 100644 --- a/cypress/integration/single-pdf/settings.ts +++ b/cypress/integration/single-pdf/settings.ts @@ -25,11 +25,11 @@ describe('Single PDF display settings', () => { }); it('should zoom in and out', () => { - cy.get('div[class="react-pdf__Page__textContent"]') + cy.get('.react-pdf__Page__textContent') .find('span') .should( 'have.text', - 'ECONOMICS – WORKING PAPERS 2021/03Assessing climate change risks at the country level: the EIB scoring model' + 'ECONOMICS – WORKING PAPERS 2021/03Assessing climate changerisks at the country level:the EIB scoring model' ); cy.get('.react-pdf__Page').then(($elm) => { diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 124c4d33..ec85ad1e 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -171,7 +171,7 @@ Cypress.Commands.add( }); cy.wait('@pdf', { timeout: 50000 }); cy.get('#mainContent') - .find('div[class="react-pdf__Page__textContent"]', { timeout: 10000 }) + .find('.react-pdf__Page__textContent', { timeout: 10000 }) .should('have.attr', 'style'); } ); diff --git a/package-lock.json b/package-lock.json index d128a277..22d24267 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@babel/core": "7.24.3", "@emotion/jest": "11.11.0", "@parcel/transformer-typescript-tsc": "2.12.0", - "@testing-library/cypress": "10.0.1", + "@testing-library/cypress": "8.0.2", "@testing-library/jest-dom": "6.1.3", "@testing-library/react": "14.0.0", "@types/debounce": "1.2.4", @@ -38,7 +38,7 @@ "@typescript-eslint/parser": "4.33.0", "babel-jest": "29.7.0", "babel-loader": "8.3.0", - "cypress": "^13.7.2", + "cypress": "9.5.1", "esbuild-jest": "0.5.0", "eslint": "7.32.0", "eslint-config-prettier": "8.10.0", @@ -52,12 +52,12 @@ "husky": "7.0.4", "jest": "29.4.3", "jest-axe": "5.0.1", - "jest-environment-jsdom": "^29.7.0", + "jest-environment-jsdom": "29.7.0", "jest-watch-typeahead": "2.2.0", "lint-staged": "11.2.6", "parcel": "2.12.0", "parcel-config-precache-manifest": "0.0.4", - "parcel-plugin-static-files-copy": "^2.6.0", + "parcel-plugin-static-files-copy": "2.6.0", "parcel-reporter-static-files-copy": "1.5.3", "prettier": "2.2.1", "r2-shared-js": "1.0.72", @@ -66,11 +66,11 @@ "react-dom": "18.2.0", "react-is": "18.2.0", "react-router-dom": "5.3.4", - "release-it": "^17.1.1", + "release-it": "17.1.1", "request": "2.88.2", "size-limit": "4.12.0", - "start-server-and-test": "^2.0.3", - "swr": "^2.2.5", + "start-server-and-test": "2.0.3", + "swr": "2.2.5", "ts-jest": "29.0.5", "ts-node": "10.9.2", "tslib": "2.6.2", @@ -1818,9 +1818,9 @@ } }, "node_modules/@cypress/request": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz", - "integrity": "sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==", + "version": "2.88.12", + "resolved": "https://registry.npmjs.org/@cypress/request/-/request-2.88.12.tgz", + "integrity": "sha512-tOn+0mDZxASFM+cuAP9szGUGPI1HwWVSvdzm7V4cCsPdFTx6qMj29CwaQmRAMIEhORIUBFBsYROYJcveK4uOjA==", "dev": true, "dependencies": { "aws-sign2": "~0.7.0", @@ -1836,7 +1836,7 @@ "json-stringify-safe": "~5.0.1", "mime-types": "~2.1.19", "performance-now": "^2.1.0", - "qs": "6.10.4", + "qs": "~6.10.3", "safe-buffer": "^5.1.2", "tough-cookie": "^4.1.3", "tunnel-agent": "^0.6.0", @@ -5612,20 +5612,109 @@ } }, "node_modules/@testing-library/cypress": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/@testing-library/cypress/-/cypress-10.0.1.tgz", - "integrity": "sha512-e8uswjTZIBhaIXjzEcrQQ8nHRWHgZH7XBxKuIWxZ/T7FxfWhCR48nFhUX5nfPizjVOKSThEfOSv67jquc1ASkw==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@testing-library/cypress/-/cypress-8.0.2.tgz", + "integrity": "sha512-KVdm7n37sg/A4e3wKMD4zUl0NpzzVhx06V9Tf0hZHZ7nrZ4yFva6Zwg2EFF1VzHkEfN/ahUzRtT1qiW+vuWnJw==", "dev": true, "dependencies": { "@babel/runtime": "^7.14.6", - "@testing-library/dom": "^9.0.0" + "@testing-library/dom": "^8.1.0" }, "engines": { "node": ">=12", "npm": ">=6" }, "peerDependencies": { - "cypress": "^12.0.0 || ^13.0.0" + "cypress": "^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0" + } + }, + "node_modules/@testing-library/cypress/node_modules/@testing-library/dom": { + "version": "8.20.1", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz", + "integrity": "sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.1.3", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@testing-library/cypress/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/cypress/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/cypress/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@testing-library/cypress/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/@testing-library/cypress/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@testing-library/cypress/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" } }, "node_modules/@testing-library/dom": { @@ -8675,9 +8764,9 @@ "integrity": "sha512-+1dlx0aY5Jo1vHy/tSsIGpSkN4tS9rZSW8FIhG0JH/crs9wwweswIo/POr451r7bZww3hFbPAKnTpimzL/mm4Q==" }, "node_modules/commander": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz", - "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", + "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==", "dev": true, "engines": { "node": ">= 6" @@ -9197,50 +9286,50 @@ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/cypress": { - "version": "13.7.2", - "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.7.2.tgz", - "integrity": "sha512-FF5hFI5wlRIHY8urLZjJjj/YvfCBrRpglbZCLr/cYcL9MdDe0+5usa8kTIrDHthlEc9lwihbkb5dmwqBDNS2yw==", + "version": "9.5.1", + "resolved": "https://registry.npmjs.org/cypress/-/cypress-9.5.1.tgz", + "integrity": "sha512-H7lUWB3Svr44gz1rNnj941xmdsCljXoJa2cDneAltjI9leKLMQLm30x6jLlpQ730tiVtIbW5HdUmBzPzwzfUQg==", "dev": true, "hasInstallScript": true, "dependencies": { - "@cypress/request": "^3.0.0", + "@cypress/request": "^2.88.10", "@cypress/xvfb": "^1.2.4", + "@types/node": "^14.14.31", "@types/sinonjs__fake-timers": "8.1.1", "@types/sizzle": "^2.3.2", "arch": "^2.2.0", "blob-util": "^2.0.2", "bluebird": "^3.7.2", - "buffer": "^5.7.1", + "buffer": "^5.6.0", "cachedir": "^2.3.0", "chalk": "^4.1.0", "check-more-types": "^2.24.0", "cli-cursor": "^3.1.0", "cli-table3": "~0.6.1", - "commander": "^6.2.1", + "commander": "^5.1.0", "common-tags": "^1.8.0", "dayjs": "^1.10.4", - "debug": "^4.3.4", + "debug": "^4.3.2", "enquirer": "^2.3.6", - "eventemitter2": "6.4.7", + "eventemitter2": "^6.4.3", "execa": "4.1.0", "executable": "^4.1.1", "extract-zip": "2.0.1", "figures": "^3.2.0", "fs-extra": "^9.1.0", "getos": "^3.2.1", - "is-ci": "^3.0.1", + "is-ci": "^3.0.0", "is-installed-globally": "~0.4.0", "lazy-ass": "^1.6.0", "listr2": "^3.8.3", "lodash": "^4.17.21", "log-symbols": "^4.0.0", - "minimist": "^1.2.8", + "minimist": "^1.2.5", "ospath": "^1.2.2", "pretty-bytes": "^5.6.0", - "process": "^0.11.10", "proxy-from-env": "1.0.0", "request-progress": "^3.0.0", - "semver": "^7.5.3", + "semver": "^7.3.2", "supports-color": "^8.1.1", "tmp": "~0.2.1", "untildify": "^4.0.0", @@ -9250,7 +9339,7 @@ "cypress": "bin/cypress" }, "engines": { - "node": "^16.0.0 || ^18.0.0 || >=20.0.0" + "node": ">=12.0.0" } }, "node_modules/cypress/node_modules/ansi-styles": { @@ -11467,9 +11556,9 @@ } }, "node_modules/eventemitter2": { - "version": "6.4.7", - "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz", - "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.9.tgz", + "integrity": "sha512-JEPTiaOt9f04oa6NOkc4aH+nVp5I3wEjpHbIPqfgCdD5v5bUzy7xQqwcVO2aDQgOWhI28da57HksMrzK9HlRxg==", "dev": true }, "node_modules/events": { diff --git a/package.json b/package.json index d19c7af4..56ebe164 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "@babel/core": "7.24.3", "@emotion/jest": "11.11.0", "@parcel/transformer-typescript-tsc": "2.12.0", - "@testing-library/cypress": "10.0.1", + "@testing-library/cypress": "8.0.2", "@testing-library/jest-dom": "6.1.3", "@testing-library/react": "14.0.0", "@types/debounce": "1.2.4", @@ -77,7 +77,7 @@ "@typescript-eslint/parser": "4.33.0", "babel-jest": "29.7.0", "babel-loader": "8.3.0", - "cypress": "^13.7.2", + "cypress": "9.5.1", "esbuild-jest": "0.5.0", "eslint": "7.32.0", "eslint-config-prettier": "8.10.0", @@ -91,12 +91,12 @@ "husky": "7.0.4", "jest": "29.4.3", "jest-axe": "5.0.1", - "jest-environment-jsdom": "^29.7.0", + "jest-environment-jsdom": "29.7.0", "jest-watch-typeahead": "2.2.0", "lint-staged": "11.2.6", "parcel": "2.12.0", "parcel-config-precache-manifest": "0.0.4", - "parcel-plugin-static-files-copy": "^2.6.0", + "parcel-plugin-static-files-copy": "2.6.0", "parcel-reporter-static-files-copy": "1.5.3", "prettier": "2.2.1", "r2-shared-js": "1.0.72", @@ -105,11 +105,11 @@ "react-dom": "18.2.0", "react-is": "18.2.0", "react-router-dom": "5.3.4", - "release-it": "^17.1.1", + "release-it": "17.1.1", "request": "2.88.2", "size-limit": "4.12.0", - "start-server-and-test": "^2.0.3", - "swr": "^2.2.5", + "start-server-and-test": "2.0.3", + "swr": "2.2.5", "ts-jest": "29.0.5", "ts-node": "10.9.2", "tslib": "2.6.2", diff --git a/src/ui/Footer.tsx b/src/ui/Footer.tsx index ce273de1..df5b239c 100644 --- a/src/ui/Footer.tsx +++ b/src/ui/Footer.tsx @@ -40,7 +40,7 @@ const Footer: React.FC = ({ Previous @@ -48,7 +48,7 @@ const Footer: React.FC = ({ Next diff --git a/src/ui/PageButton.tsx b/src/ui/PageButton.tsx index 81f4b77a..4a4fff58 100644 --- a/src/ui/PageButton.tsx +++ b/src/ui/PageButton.tsx @@ -11,7 +11,11 @@ function PageButton( ): React.ReactElement { const { children, onClick, ...rest } = props; const circleColor = useColorModeValue('ui.black', 'ui.white', 'ui.black'); - const circleBgColor = useColorModeValue('ui.white', 'gray.700', 'ui.white'); + const circleBgColor = useColorModeValue( + 'ui.gray.light-warm', + 'ui.black', + 'ui.sepia' + ); return (