From d2c41a957e4ead453b29392675325701b9b545ea Mon Sep 17 00:00:00 2001 From: Karol Rzotki Date: Thu, 4 Jul 2024 12:34:00 +0200 Subject: [PATCH 01/22] upgrade React to 17.0.2 --- package.json | 10 +++---- yarn.lock | 85 ++++++++++++++++++++++++++++++++++------------------ 2 files changed, 61 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index bb17e8651..f1a5901b6 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "@codesandbox/sandpack-react": "^1.17.0", "@codesandbox/sandpack-themes": "^1.17.0", "@floating-ui/react": "^0.21.1", - "@types/react": "^16.2.0", + "@types/react": "17.0.40", "chalk": "4.1.2", "classnames": "^2.3.2", "glob": "^7.2.0", @@ -69,7 +69,7 @@ "@testing-library/react": "^12.1.2", "@testing-library/react-hooks": "^8.0.0", "@testing-library/user-event": "^13.5.0", - "@types/react-dom": "^16.2.0", + "@types/react-dom": "17.0.13", "@typescript-eslint/eslint-plugin": "^5.48.0", "@typescript-eslint/parser": "^5.48.0", "@typescript/vfs": "^1.4.0", @@ -121,13 +121,13 @@ "progress-estimator": "^0.3.0", "query-string": "^6.5.0", "raw-loader": "^4.0.2", - "react": "^16.2.0", - "react-dom": "^16.2.0", + "react": "17.0.2", + "react-dom": "17.0.2", "react-github-btn": "^1.2.0", "react-hot-loader": "^4.12.8", "react-router-dom": "^5.0.1", "react-router-hash-link": "^1.2.2", - "react-test-renderer": "^16.2.0", + "react-test-renderer": "17.0.2", "rev-file": "3.0.0", "rev-hash": "1.0.0", "rimraf": "^3.0.0", diff --git a/yarn.lock b/yarn.lock index a2e960aba..523e44858 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5432,6 +5432,13 @@ resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw== +"@types/react-dom@17.0.13": + version "17.0.13" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.13.tgz#a3323b974ee4280070982b3112351bb1952a7809" + integrity sha512-wEP+B8hzvy6ORDv1QBhcQia4j6ea4SFIBttHYpXKPFZRviBvknq0FRh3VrIxeXUmsPkwuXVZrVGG7KUVONmXCQ== + dependencies: + "@types/react" "*" + "@types/react-dom@<18.0.0": version "17.0.18" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.18.tgz#8f7af38f5d9b42f79162eea7492e5a1caff70dc2" @@ -5439,17 +5446,18 @@ dependencies: "@types/react" "^17" -"@types/react-dom@^16.2.0": - version "16.9.17" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.17.tgz#29100cbcc422d7b7dba7de24bb906de56680dd34" - integrity sha512-qSRyxEsrm5btPXnowDOs5jSkgT8ldAA0j6Qp+otHUh+xHzy3sXmgNfyhucZjAjkgpdAUw9rJe0QRtX/l+yaS4g== +"@types/react@*": + version "18.3.3" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f" + integrity sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw== dependencies: - "@types/react" "^16" + "@types/prop-types" "*" + csstype "^3.0.2" -"@types/react@^16", "@types/react@^16.2.0": - version "16.14.34" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.34.tgz#d129324ffda312044e1c47aab18696e4ed493282" - integrity sha512-b99nWeGGReLh6aKBppghVqp93dFJtgtDOzc8NXM6hewD8PQ2zZG5kBLgbx+VJr7Q7WBMjHxaIl3dwpwwPIUgyA== +"@types/react@17.0.40": + version "17.0.40" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.40.tgz#dc010cee6254d5239a138083f3799a16638e6bad" + integrity sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -16945,15 +16953,14 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" -react-dom@^16.2.0: - version "16.13.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f" - integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag== +react-dom@17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" - scheduler "^0.19.1" + scheduler "^0.20.2" react-element-to-jsx-string@^14.3.4: version "14.3.4" @@ -17006,7 +17013,12 @@ react-is@17.0.2, react-is@^17.0.1, react-is@^17.0.2: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6: +"react-is@^16.12.0 || ^17.0.0 || ^18.0.0": + version "18.3.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" + integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== + +react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -17062,6 +17074,14 @@ react-router@5.2.0: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" +react-shallow-renderer@^16.13.1: + version "16.15.0" + resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457" + integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA== + dependencies: + object-assign "^4.1.1" + react-is "^16.12.0 || ^17.0.0 || ^18.0.0" + react-sizeme@^3.0.1: version "3.0.2" resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-3.0.2.tgz#4a2f167905ba8f8b8d932a9e35164e459f9020e4" @@ -17072,24 +17092,23 @@ react-sizeme@^3.0.1: shallowequal "^1.1.0" throttle-debounce "^3.0.1" -react-test-renderer@^16.2.0: - version "16.13.1" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.13.1.tgz#de25ea358d9012606de51e012d9742e7f0deabc1" - integrity sha512-Sn2VRyOK2YJJldOqoh8Tn/lWQ+ZiKhyZTPtaO0Q6yNj+QDbmRkVFap6pZPy3YQk8DScRDfyqm/KxKYP9gCMRiQ== +react-test-renderer@17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c" + integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ== dependencies: object-assign "^4.1.1" - prop-types "^15.6.2" - react-is "^16.8.6" - scheduler "^0.19.1" + react-is "^17.0.2" + react-shallow-renderer "^16.13.1" + scheduler "^0.20.2" -react@^16.2.0: - version "16.13.1" - resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" - integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w== +react@17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" read-pkg-up@^1.0.1: version "1.0.1" @@ -17943,7 +17962,7 @@ sax@>=0.6.0, sax@^1.2.4, sax@~1.2.1: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@^0.19.0, scheduler@^0.19.1: +scheduler@^0.19.0: version "0.19.1" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196" integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA== @@ -17951,6 +17970,14 @@ scheduler@^0.19.0, scheduler@^0.19.1: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.20.2: + version "0.20.2" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" + integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@2.7.0: version "2.7.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7" From dfe868a01c722e46ce1ea6130102c3ab394e8e9e Mon Sep 17 00:00:00 2001 From: Karol Rzotki Date: Thu, 4 Jul 2024 14:33:23 +0200 Subject: [PATCH 02/22] fix tests --- package.json | 3 + src/components/accordion/Accordion.spec.tsx | 7 ++ src/components/popover/Popover.spec.tsx | 88 ++++++++++----------- src/components/rating/Rating.tsx | 1 + src/components/tooltip/Tooltip.spec.tsx | 80 ++++++++++--------- yarn.lock | 23 +++--- 6 files changed, 105 insertions(+), 97 deletions(-) diff --git a/package.json b/package.json index f1a5901b6..27b67ee74 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,9 @@ "node": ">=8.0.0", "yarn": "^1.0.0" }, + "resolutions": { + "@types/react": "^17.0.40" + }, "dependencies": { "@aws-sdk/client-lambda": "^3.210.0", "@codesandbox/sandpack-react": "^1.17.0", diff --git a/src/components/accordion/Accordion.spec.tsx b/src/components/accordion/Accordion.spec.tsx index 283698d3d..c803b2c12 100644 --- a/src/components/accordion/Accordion.spec.tsx +++ b/src/components/accordion/Accordion.spec.tsx @@ -226,7 +226,14 @@ describe('', () => { expect(item.getAttribute('aria-expanded')).toEqual('false'); expect(accordion.queryByRole('region')).toBeNull(); + + // This one does not trigger onFocus method in React 17 accordion.getByRole('button').focus(); + + // This one does not set document.activeElement + // https://github.com/jsdom/jsdom/issues/2586 + fireEvent.focus(accordion.getByRole('button')); + expect(item).toEqual(document.activeElement); userEvent.keyboard('{enter}'); expect(item.getAttribute('aria-expanded')).toEqual('true'); diff --git a/src/components/popover/Popover.spec.tsx b/src/components/popover/Popover.spec.tsx index 84cce7a1e..ad30c2ba0 100644 --- a/src/components/popover/Popover.spec.tsx +++ b/src/components/popover/Popover.spec.tsx @@ -50,23 +50,21 @@ export function RenderPopover(props: { ); } - describe('', () => { it('does not display popover by default', () => { render(); - expect(screen.queryByText(POPOVER_TEXT)).not.toBeInTheDocument(); }); it('displays popover when trigger is hovered', async () => { - const popover = render(); + render(); const button = screen.getByTestId('button1'); expect(button).toBeInTheDocument(); userEvent.hover(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); }); it('does not display popover when opening with hover is disabled and trigger is hovered', async () => { @@ -78,148 +76,148 @@ describe('', () => { }); it('does not keep popover open when click opening is disabled and trigger is clicked, then unhovered', async () => { - const popover = render(); + render(); const button = screen.getByTestId('button1'); userEvent.hover(button); userEvent.click(button); - expect(screen.queryByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); userEvent.unhover(button); - await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT)); + await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT)); }); it('hides popover when trigger is no longer hovered', async () => { - const popover = render(); + render(); const button = screen.getByTestId('button1'); userEvent.hover(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); userEvent.unhover(button); - await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT)); + await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT)); }); it('does not hide popover when hover leaves if trigger was clicked', async () => { - const popover = render(); + render(); const button = screen.getByTestId('button1'); userEvent.hover(button); fireEvent.click(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); userEvent.unhover(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(screen.getByText(POPOVER_TEXT)).toBeInTheDocument(); }); - it('displays popover when trigger is focused', () => { - const popover = render(); + it('displays popover when trigger is focused', async () => { + render(); const button = screen.getByTestId('button1'); fireEvent.focus(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); }); it('hides popover when trigger loses focus', async () => { - const popover = render(); + render(); const button = screen.getByTestId('button1'); fireEvent.focus(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); fireEvent.blur(button); - await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT)); + await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT)); }); it('hides popover if hover leaves, even when trigger is focused', async () => { - const popover = render(); + render(); const button = screen.getByTestId('button1'); fireEvent.focus(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); userEvent.hover(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); userEvent.unhover(button); - await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT)); + await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT)); }); it('hides popover if focus leaves, even when trigger is hovered', async () => { - const popover = render(); + render(); const button = screen.getByTestId('button1'); fireEvent.focus(button); userEvent.hover(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); fireEvent.blur(button); - await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT)); + await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT)); }); it('hides popover when Esc key is hit, when popover is triggered by focus', async () => { - const popover = render(); + render(); const button = screen.getByTestId('button1'); fireEvent.focus(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); fireEvent.keyDown(document.activeElement, {key: 'Escape'}); - await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT)); + await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT)); }); it('hides popover when Esc key is hit, when popover is triggered by hover', async () => { - const popover = render(); + render(); const button = screen.getByTestId('button1'); userEvent.hover(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); fireEvent.keyDown(document.activeElement, {key: 'Escape'}); - await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT)); + await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT)); }); it('hides popover when Esc key is hit, when popover is both focused and hovered', async () => { - const popover = render(); + render(); const button = screen.getByTestId('button1'); fireEvent.focus(button); userEvent.hover(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); fireEvent.keyDown(document.activeElement, {key: 'Escape'}); - await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT)); + await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT)); }); - it('displays popover initally when set as default open', async () => { - const popover = render(); + it('displays popover initially when set as default open', async () => { + render(); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); }); it('can hide default open popover by clicking somewhere in the document', async () => { - const {queryByText} = render(); + render(); userEvent.click(document.body); - await waitForElementToBeRemoved(() => queryByText(POPOVER_TEXT)); + await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT)); }); it('popover shows up and hides properly when set as default open', async () => { - const popover = render(); + render(); const button = screen.getByTestId('button1'); expect(button).toBeInTheDocument(); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); userEvent.hover(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); userEvent.unhover(button); - await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT)); + await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT)); userEvent.hover(button); - expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument(); + expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument(); }); }); diff --git a/src/components/rating/Rating.tsx b/src/components/rating/Rating.tsx index a49af835e..b780b53b8 100644 --- a/src/components/rating/Rating.tsx +++ b/src/components/rating/Rating.tsx @@ -83,6 +83,7 @@ class Rating extends React.Component { (arg0: React.MouseEvent) => unknown > = []; + // It's a typo, should be componentWillReceiveProps (UNSAFE_componentWillReceiveProps) componentWillReciveProps(nextProps: RatingPropsType) { if (this.props.metricSize !== nextProps.metricSize) { this.createStarsOnChangeFunctions(nextProps.metricSize); diff --git a/src/components/tooltip/Tooltip.spec.tsx b/src/components/tooltip/Tooltip.spec.tsx index 662dbe983..007ae1ed0 100644 --- a/src/components/tooltip/Tooltip.spec.tsx +++ b/src/components/tooltip/Tooltip.spec.tsx @@ -46,7 +46,7 @@ describe('', () => { }); it('displays tooltip when trigger is hovered', async () => { - const tooltip = render( + render(