From 264ded02a70c78ad6902672d6c2503c932537030 Mon Sep 17 00:00:00 2001 From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> Date: Wed, 14 Aug 2024 16:56:24 +0100 Subject: [PATCH] Updating tests --- package-lock.json | 28 +-- package.json | 6 +- .../src/BpkBottomSheet-test.tsx | 113 ++++----- .../BpkBottomSheet-test.tsx.snap | 218 ------------------ .../__snapshots__/useMediaQuery-test.tsx.snap | 7 - .../src/useMediaQuery-test.tsx | 16 +- .../withInfiniteScroll-test.js.snap | 88 ++++--- packages/bpk-component-text/src/BpkText.tsx | 2 +- packages/bpk-react-utils/src/Portal-test.tsx | 32 ++- scripts/jest/setup.js | 4 +- 10 files changed, 146 insertions(+), 368 deletions(-) delete mode 100644 packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap delete mode 100644 packages/bpk-component-breakpoint/src/__snapshots__/useMediaQuery-test.tsx.snap diff --git a/package-lock.json b/package-lock.json index a0b3718b42..0fa55e2a21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,7 +41,7 @@ "@types/jest": "^29.5.12", "@types/jest-axe": "^3.5.9", "@types/lodash.clamp": "^4.0.9", - "@types/react": "^18.3.0", + "@types/react": "^18.3.1", "@types/react-dom": "^18.3.0", "@types/react-window": "^1.8.8", "@types/webpack-env": "^1.18.4", @@ -75,8 +75,8 @@ "postcss-loader": "^8.1.1", "prop-types": "^15.7.2", "raf": "^3.4.1", - "react": "18.3.0", - "react-dom": "18.3.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", "react-svg-loader": "^3.0.1", "sass-embedded": "^1.77.1", "sass-loader": "^14.2.1", @@ -9871,9 +9871,9 @@ "license": "MIT" }, "node_modules/@types/react": { - "version": "18.3.0", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.0.tgz", - "integrity": "sha512-DiUcKjzE6soLyln8NNZmyhcQjVv+WsUIFSqetMN0p8927OztKT4VTfFTqsbAi5oAGIcgOmOajlfBqyptDDjZRw==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", + "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", "dev": true, "dependencies": { "@types/prop-types": "*", @@ -26323,9 +26323,9 @@ } }, "node_modules/react": { - "version": "18.3.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.0.tgz", - "integrity": "sha512-RPutkJftSAldDibyrjuku7q11d3oy6wKOyPe5K1HA/HwwrXcEqBdHsLypkC2FFYjP7bPUa6gbzSBhw4sY2JcDg==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "dev": true, "dependencies": { "loose-envify": "^1.1.0" @@ -26413,16 +26413,16 @@ } }, "node_modules/react-dom": { - "version": "18.3.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.0.tgz", - "integrity": "sha512-zaKdLBftQJnvb7FtDIpZtsAIb2MZU087RM8bRDZU8LVCCFYjPTsDZJNFUWPcVz3HFSN1n/caxi0ca4B/aaVQGQ==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "dev": true, "dependencies": { "loose-envify": "^1.1.0", - "scheduler": "^0.23.1" + "scheduler": "^0.23.2" }, "peerDependencies": { - "react": "^18.3.0" + "react": "^18.3.1" } }, "node_modules/react-element-to-jsx-string": { diff --git a/package.json b/package.json index c3a7b8e965..3dd4114478 100644 --- a/package.json +++ b/package.json @@ -140,7 +140,7 @@ "@types/jest": "^29.5.12", "@types/jest-axe": "^3.5.9", "@types/lodash.clamp": "^4.0.9", - "@types/react": "^18.3.0", + "@types/react": "^18.3.1", "@types/react-dom": "^18.3.0", "@types/react-window": "^1.8.8", "@types/webpack-env": "^1.18.4", @@ -174,8 +174,8 @@ "postcss-loader": "^8.1.1", "prop-types": "^15.7.2", "raf": "^3.4.1", - "react": "18.3.0", - "react-dom": "18.3.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", "react-svg-loader": "^3.0.1", "sass-embedded": "^1.77.1", "sass-loader": "^14.2.1", diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx b/packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx index f4ac9f2ab5..e0a4974991 100644 --- a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx +++ b/packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx @@ -16,28 +16,27 @@ * limitations under the License. */ -import { renderToString } from 'react-dom/server'; - -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import BpkBottomSheet from './BpkBottomSheet'; // mock breakpoint to always match -jest.mock('../../bpk-component-breakpoint/src/useMediaQuery', () => jest.fn(() => true)); +jest.mock('../../bpk-component-breakpoint/src/useMediaQuery', () => + jest.fn(() => true), +); describe('BpkBottomSheet', () => { - const props = { ariaLabelledby: 'bottom-sheet', - id: "my-bottom-sheet", + id: 'my-bottom-sheet', isOpen: true, onClose: jest.fn(), - } + }; it('renders without crashing with all props', () => { - expect(() => renderToString( + render( { wide > Bottom Sheet content - - )).not.toThrow(); + , + ); + expect(screen.getByText('Bottom Sheet content')).toBeInTheDocument(); + expect(screen.getByText('Bottom sheet title')).toBeInTheDocument(); + }); + it('renders without crashing with minimum props', () => { - expect(() => renderToString( - - Bottom Sheet content - - )).not.toThrow(); - }); - it('renders correctly with minimum prop', () => { - const { asFragment } = render( - - Bottom Sheet content - - ); - expect(asFragment()).toMatchSnapshot(); + render( + Bottom Sheet content + ,); + expect(screen.getByText('Bottom Sheet content')).toBeInTheDocument(); + expect(screen.queryByText('Bottom sheet title')).not.toBeInTheDocument(); }); + it('renders correctly with wide prop', () => { - const { asFragment } = render( - + const { container } = render( + Bottom Sheet content - + , ); - expect(asFragment()).toMatchSnapshot(); + expect(container.querySelector('.bpk-bottom-sheet--wide')).toBeInTheDocument(); }); + it('renders correctly with action props', () => { - const { asFragment } = render( - + render( + Bottom Sheet content - + , ); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByText('Action')).toBeInTheDocument(); }); + it('renders correctly with ariaLabelledBy prop', () => { const { container } = render( - + Bottom Sheet content - + , ); - expect(container.querySelector('dialog[aria-labelledby="my-bottomsheet-title-id"]')).toBeInTheDocument(); + expect( + container.querySelector( + 'dialog[aria-labelledby="my-bottomsheet-title-id"]', + ), + ).toBeInTheDocument(); }); + it('renders correctly with ariaLabel prop', () => { const { container } = render( - + Bottom Sheet content - - + , ); - expect(container.querySelector('dialog[aria-label="my a11y title"]')).toBeInTheDocument(); + expect( + container.querySelector('dialog[aria-label="my a11y title"]'), + ).toBeInTheDocument(); }); }); diff --git a/packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap b/packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap deleted file mode 100644 index 18563fabfe..0000000000 --- a/packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap +++ /dev/null @@ -1,218 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BpkBottomSheet renders correctly with action props 1`] = ` - -
- -
-
- -
-
- Bottom Sheet content -
-
- -
- -`; - -exports[`BpkBottomSheet renders correctly with minimum prop 1`] = ` - -
- -
-
- -
-
- Bottom Sheet content -
-
- -
- -`; - -exports[`BpkBottomSheet renders correctly with wide prop 1`] = ` - -
- -
-
- -
-
- Bottom Sheet content -
-
- -
- -`; diff --git a/packages/bpk-component-breakpoint/src/__snapshots__/useMediaQuery-test.tsx.snap b/packages/bpk-component-breakpoint/src/__snapshots__/useMediaQuery-test.tsx.snap deleted file mode 100644 index b03d797313..0000000000 --- a/packages/bpk-component-breakpoint/src/__snapshots__/useMediaQuery-test.tsx.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`useMediaQuery SSR mode should match when matchSSR=true 1`] = `"
matches
"`; - -exports[`useMediaQuery SSR mode should not match when matchSSR not explicitly set 1`] = `"
no match
"`; - -exports[`useMediaQuery SSR mode should not match when matchSSR=false 1`] = `"
no match
"`; diff --git a/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx b/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx index 0a972b895e..c7e7ff0302 100644 --- a/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx +++ b/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx @@ -31,17 +31,17 @@ describe('useMediaQuery', () => { it('should match when matchSSR=true', () => { const html = renderToString(); - expect(html).toMatchSnapshot(); + expect(html).toMatch(/matches/); }); it('should not match when matchSSR=false', () => { const html = renderToString(); - expect(html).toMatchSnapshot(); + expect(html).toMatch(/no match/); }); it('should not match when matchSSR not explicitly set', () => { const html = renderToString(); - expect(html).toMatchSnapshot(); + expect(html).toMatch(/no match/); }); }); @@ -66,10 +66,8 @@ describe('useMediaQuery', () => { })); const view = renderHook(() => useMediaQuery('(min-width: 768px)')); - - expect(view.result.all.length).toBe(1); - - expect(view.result.all[0]).toBe(true); + + expect(view.result.current).toBe(true); }); it('should return false if media query doesn`t match', () => { @@ -81,8 +79,6 @@ describe('useMediaQuery', () => { const view = renderHook(() => useMediaQuery('(min-width: 1024px)')); - expect(view.result.all.length).toBe(1); - - expect(view.result.all[0]).toBe(false); + expect(view.result.current).toBe(false); }); }); diff --git a/packages/bpk-component-infinite-scroll/src/__snapshots__/withInfiniteScroll-test.js.snap b/packages/bpk-component-infinite-scroll/src/__snapshots__/withInfiniteScroll-test.js.snap index ac18efb020..999b90ed89 100644 --- a/packages/bpk-component-infinite-scroll/src/__snapshots__/withInfiniteScroll-test.js.snap +++ b/packages/bpk-component-infinite-scroll/src/__snapshots__/withInfiniteScroll-test.js.snap @@ -27,6 +27,19 @@ exports[`withInfiniteScroll renders correctly with different initial and onScrol `; exports[`withInfiniteScroll renders items after the first render 1`] = ` + +
+
+
+
+ +`; + +exports[`withInfiniteScroll should finish the list when array changes to empty 1`] = `
`; -exports[`withInfiniteScroll should finish the list when array changes to empty 1`] = ` - -
-
-
- -`; - exports[`withInfiniteScroll should finish the list when data source returns less than the number of elements requested 1`] = `
@@ -111,40 +114,29 @@ exports[`withInfiniteScroll should refresh data when data changes 1`] = ` id="list" >
- 1 + Element 0
- 2 + Element 1
- 3 -
-
-
- -`; - -exports[`withInfiniteScroll should refresh data when data changes from an empty Array 1`] = ` - -
-
-
- 1 + Element 2
- 2 + Element 3
- 3 + Element 4
+
`; -exports[`withInfiniteScroll should render correctly when no more elements 1`] = ` +exports[`withInfiniteScroll should refresh data when data changes from an empty Array 1`] = `
+
+
+ +`; + +exports[`withInfiniteScroll should render correctly when no more elements 1`] = ` + +
+
+
`; @@ -205,16 +213,10 @@ exports[`withInfiniteScroll should render correctly with a "renderSeeMoreCompone
-
- Element 0 -
-
- + /> +
`; @@ -224,11 +226,7 @@ exports[`withInfiniteScroll should render correctly with an "elementsPerScroll"
-
- Element 0 -
-
+ />
diff --git a/packages/bpk-component-text/src/BpkText.tsx b/packages/bpk-component-text/src/BpkText.tsx index 4daa20926f..5544629317 100644 --- a/packages/bpk-component-text/src/BpkText.tsx +++ b/packages/bpk-component-text/src/BpkText.tsx @@ -16,7 +16,7 @@ * limitations under the License. */ -import type { ReactNode, ReactElement } from 'react'; +import type { ReactNode } from 'react'; import { cssModules } from '../../bpk-react-utils'; diff --git a/packages/bpk-react-utils/src/Portal-test.tsx b/packages/bpk-react-utils/src/Portal-test.tsx index b55a32de2e..b424906d43 100644 --- a/packages/bpk-react-utils/src/Portal-test.tsx +++ b/packages/bpk-react-utils/src/Portal-test.tsx @@ -310,7 +310,11 @@ describe('Portal', () => { it('does not have a race condition if the portal is opened then closed quickly', async () => { const renderTarget = document.createElement('div'); - const target = document.createElement('div'); + const target = ( +
+ target +
+ ); const onCloseSpy = jest.fn(); const MyApp = () => { @@ -663,7 +667,6 @@ describe('Portal', () => { }); describe('lifecycle methods', () => { - // @ts-expect-error ts-migrate(7034) FIXME: Variable 'rerender' implicitly has type 'any' in s... Remove this comment to see the full error message let rerender; const openSpy = jest.fn(); @@ -694,8 +697,17 @@ describe('Portal', () => { it('should close the portal when isOpen is removed', () => { expect(openSpy).toHaveBeenCalledTimes(0); expect(closeSpy).toHaveBeenCalledTimes(0); + ({ rerender } = render( + +
My portal content
+ , + )); - // @ts-expect-error ts-migrate(7005) FIXME: Variable 'rerender' implicitly has an 'any' type. rerender( { it('should open the portal again when isOpen is added', () => { expect(openSpy).toHaveBeenCalledTimes(0); expect(closeSpy).toHaveBeenCalledTimes(0); - - // @ts-expect-error ts-migrate(7005) FIXME: Variable 'rerender' implicitly has an 'any' type. + + ({ rerender } = render( + +
My portal content
+ , + )); + rerender( { } return mockActualReact; }); - +global.TextEncoder = TextEncoder; registerRequireContextHook();