From a3a6806f0e2143c02f44c1f91405b16a42c37d02 Mon Sep 17 00:00:00 2001 From: orest-s Date: Fri, 7 Jun 2024 19:27:11 +0300 Subject: [PATCH 1/7] test: moved `ExpandCollapsePanel` tests to React Testing Library --- .../ExpandCollapsePanel.js | 267 ------------------ .../ExpandCollapsePanel.test.tsx | 255 +++++++++++++++++ 2 files changed, 255 insertions(+), 267 deletions(-) delete mode 100644 packages/react/__tests__/src/components/ExpandCollapsePanel/ExpandCollapsePanel.js create mode 100644 packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx diff --git a/packages/react/__tests__/src/components/ExpandCollapsePanel/ExpandCollapsePanel.js b/packages/react/__tests__/src/components/ExpandCollapsePanel/ExpandCollapsePanel.js deleted file mode 100644 index 00b066108..000000000 --- a/packages/react/__tests__/src/components/ExpandCollapsePanel/ExpandCollapsePanel.js +++ /dev/null @@ -1,267 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import { - default as ExpandCollapsePanel, - PanelTrigger -} from 'src/components/ExpandCollapsePanel'; -import { createSandbox } from 'sinon'; -import * as stylesheets from 'src/utils/stylesheets'; - -const sandbox = createSandbox(); -const noop = () => {}; -const matchMedia = { - matches: false -}; - -let matchMediaStub; - -beforeEach(() => { - window.matchMedia = window.matchMedia || noop; - matchMediaStub = sandbox.stub(window, 'matchMedia').returns(matchMedia); -}); - -afterEach(() => { - jest.resetAllMocks(); - sandbox.restore(); -}); - -const isVisible = element => { - const node = element.getDOMNode().parentNode; - // Ideally we would test against actual DOM, but short-cutting to use `is-hidden` - // which should have the appropriate styles to be actually hidden - return !node.classList.contains('is--hidden'); -}; - -test('should render children', () => { - const children =
Hello World
; - const wrapper = mount({children}); - - expect(wrapper.contains(children)).toBeTruthy(); -}); - -test('should render multiple children', () => { - const wrapper = mount( - -
blue
-
green
- - ); - - expect(wrapper.contains('blue')).toBeTruthy(); - expect(wrapper.contains('green')).toBeTruthy(); -}); - -test('should passthrough props', () => { - const wrapper = mount( - -
- - ); - - expect( - wrapper - .find('[data-test]') - .parent() - .props().foo - ).toBe('bar'); -}); - -test('should have hidden content when collapsed', () => { - const wrapper = mount( - -
foo
- - ); - - expect(isVisible(wrapper.find('[data-test]'))).toBeFalsy(); -}); - -test('should have visible content when expanded', done => { - const wrapper = mount( - -
foo
- - ); - wrapper.instance().setState({ isOpen: true }); - - setTimeout(() => { - expect(isVisible(wrapper.find('[data-test]'))).toBeTruthy(); - done(); - }); -}); - -test('should render PanelTrigger', () => { - const wrapper = mount( - - - - ); - const trigger = wrapper.find(PanelTrigger); - expect(trigger).toBeTruthy(); - expect(trigger.props().open).toBeFalsy(); - expect(trigger.props().onClick).toBeTruthy(); -}); - -test('should call onToggle when toggled', () => { - const handleToggle = jest.fn(); - const wrapper = mount( - - Click Me -
- - ); - - // Manually calling the `onClick` prop here because of Enzyme oddness - wrapper - .find(PanelTrigger) - .props() - .onClick({ which: 1 }); - expect(handleToggle).toBeCalledWith(expect.objectContaining({ which: 1 })); -}); - -test('trigger should open panel collapsed panel', () => { - const wrapper = mount( - - -
- - ); - - wrapper - .find(PanelTrigger) - .props() - .onClick(); - - setTimeout(() => { - expect(isVisible(wrapper.find('[data-test]'))).toBeTruthy(); - }); -}); - -test('trigger should close expanded panel', done => { - const wrapper = mount( - - -
- - ); - - wrapper.setState({ isOpen: true }); - wrapper - .find(PanelTrigger) - .props() - .onClick(); - - setTimeout(() => { - expect(isVisible(wrapper.find('[data-test]'))).toBeFalsy(); - done(); - }); -}); - -test('should clean up injected styletags', done => { - const cleanup = jest.spyOn(stylesheets, 'removeStyleTag'); - const wrapper = mount( - - -
- - ); - wrapper.setState({ isOpen: true }); - - setTimeout(() => { - wrapper.unmount(); - expect(cleanup).toBeCalled(); - done(); - }); -}); - -test('should not run open animations if timing is not set', done => { - const setStyle = jest.spyOn(stylesheets, 'setStyle'); - const wrapper = mount( - - -
- - ); - wrapper - .find(PanelTrigger) - .props() - .onClick(); - - setTimeout(() => { - expect(setStyle).not.toBeCalled(); - expect(isVisible(wrapper.find('[data-test]'))).toBeTruthy(); - done(); - }); -}); - -test('should not run close animations if timing is not set', done => { - const setStyle = jest.spyOn(stylesheets, 'setStyle'); - const wrapper = mount( - - -
- - ); - wrapper.setState({ isOpen: true }); - wrapper - .find(PanelTrigger) - .props() - .onClick(); - - setTimeout(() => { - expect(setStyle).not.toBeCalled(); - expect(isVisible(wrapper.find('[data-test]'))).toBeFalsy(); - done(); - }); -}); - -test('should allow for controlled component', () => { - const wrapper = mount( - - -
- - ); - expect(wrapper.state()).toEqual({ controlled: true, isOpen: true }); - expect(isVisible(wrapper.find('[data-test]'))).toBeTruthy(); -}); - -test('should be able to switch between controlled and uncontrolled component', () => { - const wrapper = mount( - - -
- - ); - expect(wrapper.state('controlled')).toBeFalsy(); - wrapper.setProps({ open: true }); - expect(wrapper.state('controlled')).toBeTruthy(); -}); - -test('should not animate open when prefers reduced motion is enabled', () => { - matchMediaStub - .withArgs('(prefers-reduced-motion: reduce)') - .returns({ matches: true }); - const wrapper = mount( - -
foo
- - ); - - wrapper.instance().setState({ isOpen: true }); - expect(wrapper.state('isAnimating')).toBeFalsy(); -}); - -test('should not animate close when prefers reduced motion is enabled', () => { - matchMediaStub - .withArgs('(prefers-reduced-motion: reduce)') - .returns({ matches: true }); - const wrapper = mount( - -
foo
- - ); - - wrapper.instance().setState({ isOpen: false }); - expect(wrapper.state('isAnimating')).toBeFalsy(); -}); diff --git a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx new file mode 100644 index 000000000..226e5aa8f --- /dev/null +++ b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx @@ -0,0 +1,255 @@ +import React, { useState } from 'react'; +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import { + default as ExpandCollapsePanel, + PanelTrigger, + type ExpandCollapsePanelProps +} from './'; +import { SinonStub, createSandbox } from 'sinon'; +import axe from '../../axe'; +import * as stylesheets from '../../utils/stylesheets'; + +const sandbox = createSandbox(); +const noop = () => { + // not empty +}; + +let matchMediaStub: SinonStub; + +beforeEach(() => { + window.matchMedia = window.matchMedia || noop; + matchMediaStub = sandbox.stub(window, 'matchMedia').returns({ + matches: false + } as MediaQueryList); +}); + +afterEach(() => { + jest.resetAllMocks(); + sandbox.restore(); +}); + +export const isVisible = (element: HTMLElement): boolean => { + const node = element.parentElement; + if (!node) { + throw new Error('Element has no parent'); + } + // Assuming that the 'is--hidden' class is used to hide the element0и + return !node.classList.contains('is--hidden'); +}; + +test('should render children', () => { + render( + +
Hello World
+ + ); + + expect(screen.getByText('Hello World')).toBeInTheDocument(); +}); + +test('should render multiple children', () => { + render( + +
blue
+
green
+ + ); + + expect(screen.getByText('blue')).toBeInTheDocument(); + expect(screen.getByText('green')).toBeInTheDocument(); +}); + +test('should passthrough props', () => { + const props = { foo: 'bar' }; + render( + +
+ + ); + + const testDiv = screen.getByTestId('test-div'); + const parent = testDiv.parentElement; + + expect(parent).not.toBeNull(); + expect(parent).toHaveAttribute('foo', 'bar'); +}); + +test('should have hidden content when collapsed', () => { + render( + +
foo
+ + ); + + expect(isVisible(screen.getByTestId('test-div'))).toBeFalsy(); +}); + +test('should have visible content when expanded', () => { + render( + +
foo
+ + ); + + expect(isVisible(screen.getByTestId('test-div'))).toBeTruthy(); +}); + +test('should render PanelTrigger', () => { + render( + + + + ); + + const trigger = screen.getByTestId('panel-trigger'); + + expect(trigger).toBeInTheDocument(); + expect(trigger).toHaveAttribute('aria-expanded', 'false'); +}); + +test('should call onToggle when toggled', () => { + const handleToggle = jest.fn(); + render( + + Click Me +
+ + ); + + fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + + expect(handleToggle).toHaveBeenCalledTimes(1); +}); + +test('trigger should open panel collapsed panel', async () => { + render( + + Click Me +
+ + ); + + fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + + await waitFor(() => { + expect(isVisible(screen.getByTestId('test-div'))).toBeTruthy(); + }); +}); + +test('trigger should close expanded panel', async () => { + render( + + Click Me +
+ + ); + + fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + + await waitFor(() => { + expect(isVisible(screen.getByTestId('test-div'))).toBeTruthy(); + }); + + fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + + await waitFor(() => { + expect(isVisible(screen.getByTestId('test-div'))).toBeFalsy(); + }); +}); + +test('should clean up injected styletags', async () => { + const cleanup = jest.spyOn(stylesheets, 'removeStyleTag'); + + const { unmount } = render( + + Click Me +
+ + ); + + fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + + unmount(); + + await waitFor(() => { + expect(cleanup).toBeCalled(); + }); +}); + +test('should not run open animations if timing is not set', async () => { + const setStyle = jest.spyOn(stylesheets, 'setStyle'); + + render( + + Click Me +
+ + ); + + fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + + await waitFor(() => { + expect(setStyle).not.toBeCalled(); + expect(isVisible(screen.getByTestId('test-div'))).toBeTruthy(); + }); +}); + +test('should not run close animations if timing is not set', async () => { + const setStyle = jest.spyOn(stylesheets, 'setStyle'); + + render( + + Click Me +
+ + ); + + fireEvent.doubleClick(screen.getByRole('button', { name: 'Click Me' })); + + await waitFor(() => { + expect(setStyle).not.toBeCalled(); + expect(isVisible(screen.getByTestId('test-div'))).toBeFalsy(); + }); +}); + +test('should allow for controlled component', () => { + render( + + +
+ + ); + + expect(isVisible(screen.getByTestId('test-div'))).toBeTruthy(); +}); + +test('should not run open/close animations when prefers reduced motion is enabled', async () => { + const setStyle = jest.spyOn(stylesheets, 'setStyle'); + + matchMediaStub + .withArgs('(prefers-reduced-motion: reduce)') + .returns({ matches: true }); + + render( + + Click Me +
foo
+ + ); + + // open animation + fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + + await waitFor(() => { + expect(setStyle).not.toBeCalled(); + expect(isVisible(screen.getByTestId('test-div'))).toBeTruthy(); + }); + + // close animation + fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + + await waitFor(() => { + expect(setStyle).not.toBeCalled(); + expect(isVisible(screen.getByTestId('test-div'))).toBeFalsy(); + }); +}); From 0d9811e9bcee2c32b2821dbbfacbb0fd63026c18 Mon Sep 17 00:00:00 2001 From: orest-s Date: Fri, 7 Jun 2024 20:26:17 +0300 Subject: [PATCH 2/7] fix: improved `branches` test coverage --- .../ExpandCollapsePanel.test.tsx | 29 +++++++------------ 1 file changed, 10 insertions(+), 19 deletions(-) diff --git a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx index 226e5aa8f..e98f0c60e 100644 --- a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx +++ b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx @@ -1,12 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; import { render, screen, fireEvent, waitFor } from '@testing-library/react'; -import { - default as ExpandCollapsePanel, - PanelTrigger, - type ExpandCollapsePanelProps -} from './'; +import { default as ExpandCollapsePanel, PanelTrigger } from './'; import { SinonStub, createSandbox } from 'sinon'; -import axe from '../../axe'; import * as stylesheets from '../../utils/stylesheets'; const sandbox = createSandbox(); @@ -86,7 +81,7 @@ test('should have hidden content when collapsed', () => { test('should have visible content when expanded', () => { render( - +
foo
 ); @@ -137,23 +132,19 @@ test('trigger should open panel collapsed panel', async () => { }); test('trigger should close expanded panel', async () => { - render( - + const Component = ({ isOpen }: { isOpen: boolean }) => ( + Click Me
); - fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + const { rerender, getByTestId } = render(); - await waitFor(() => { - expect(isVisible(screen.getByTestId('test-div'))).toBeTruthy(); - }); - - fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + rerender(); await waitFor(() => { - expect(isVisible(screen.getByTestId('test-div'))).toBeFalsy(); + expect(isVisible(getByTestId('test-div'))).toBeFalsy(); }); }); @@ -212,9 +203,9 @@ test('should not run close animations if timing is not set', async () => { }); }); -test('should allow for controlled component', () => { +test.only('should allow for controlled component', () => { render( - +
From ba093bdf11f278cf48e8add0044263d279d7679c Mon Sep 17 00:00:00 2001 From: orest-s Date: Tue, 11 Jun 2024 14:54:27 +0300 Subject: [PATCH 3/7] fix: changed on actual prop --- .../ExpandCollapsePanel/ExpandCollapsePanel.test.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx index e98f0c60e..3be205da9 100644 --- a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx +++ b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx @@ -55,9 +55,8 @@ test('should render multiple children', () => { }); test('should passthrough props', () => { - const props = { foo: 'bar' }; render( - +
); @@ -66,7 +65,7 @@ test('should passthrough props', () => { const parent = testDiv.parentElement; expect(parent).not.toBeNull(); - expect(parent).toHaveAttribute('foo', 'bar'); + expect(parent).toHaveAttribute('title', 'foo'); }); test('should have hidden content when collapsed', () => { @@ -203,7 +202,7 @@ test('should not run close animations if timing is not set', async () => { }); }); -test.only('should allow for controlled component', () => { +test('should allow for controlled component', () => { render( From 5e503b5d9c4ad594730c9f2ecd6323b828d19d6d Mon Sep 17 00:00:00 2001 From: orest-s Date: Thu, 13 Jun 2024 14:59:00 +0300 Subject: [PATCH 4/7] fix: avoid using `getByTestId` --- .../ExpandCollapsePanel.test.tsx | 60 ++++++++++--------- 1 file changed, 33 insertions(+), 27 deletions(-) diff --git a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx index 3be205da9..14b7d268b 100644 --- a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx +++ b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx @@ -1,5 +1,11 @@ import React from 'react'; -import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import { + render, + screen, + fireEvent, + waitFor, + getByText +} from '@testing-library/react'; import { default as ExpandCollapsePanel, PanelTrigger } from './'; import { SinonStub, createSandbox } from 'sinon'; import * as stylesheets from '../../utils/stylesheets'; @@ -57,11 +63,11 @@ test('should render multiple children', () => { test('should passthrough props', () => { render( -
+
Test Div
); - const testDiv = screen.getByTestId('test-div'); + const testDiv = screen.getByText(/test div/i); const parent = testDiv.parentElement; expect(parent).not.toBeNull(); @@ -71,31 +77,31 @@ test('should passthrough props', () => { test('should have hidden content when collapsed', () => { render( -
foo
+
foo
 ); - expect(isVisible(screen.getByTestId('test-div'))).toBeFalsy(); + expect(isVisible(screen.getByText(/foo/i))).toBeFalsy(); }); test('should have visible content when expanded', () => { render( -
foo
+
foo
 ); - expect(isVisible(screen.getByTestId('test-div'))).toBeTruthy(); + expect(isVisible(screen.getByText(/foo/))).toBeTruthy(); }); test('should render PanelTrigger', () => { render( - + Trigger ); - const trigger = screen.getByTestId('panel-trigger'); + const trigger = screen.getByRole('button', { name: /trigger/i }); expect(trigger).toBeInTheDocument(); expect(trigger).toHaveAttribute('aria-expanded', 'false'); @@ -110,7 +116,7 @@ test('should call onToggle when toggled', () => { ); - fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + fireEvent.click(screen.getByRole('button', { name: /click me/i })); expect(handleToggle).toHaveBeenCalledTimes(1); }); @@ -119,14 +125,14 @@ test('trigger should open panel collapsed panel', async () => { render( Click Me -
+
Test Div
); - fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + fireEvent.click(screen.getByRole('button', { name: /click me/i })); await waitFor(() => { - expect(isVisible(screen.getByTestId('test-div'))).toBeTruthy(); + expect(isVisible(screen.getByText(/test div/i))).toBeTruthy(); }); }); @@ -134,16 +140,16 @@ test('trigger should close expanded panel', async () => { const Component = ({ isOpen }: { isOpen: boolean }) => ( Click Me -
+
Test Div
); - const { rerender, getByTestId } = render(); + const { rerender, getByText } = render(); rerender(); await waitFor(() => { - expect(isVisible(getByTestId('test-div'))).toBeFalsy(); + expect(isVisible(getByText(/test div/i))).toBeFalsy(); }); }); @@ -172,7 +178,7 @@ test('should not run open animations if timing is not set', async () => { render( Click Me -
+
Test Div
); @@ -180,7 +186,7 @@ test('should not run open animations if timing is not set', async () => { await waitFor(() => { expect(setStyle).not.toBeCalled(); - expect(isVisible(screen.getByTestId('test-div'))).toBeTruthy(); + expect(isVisible(screen.getByText(/test div/i))).toBeTruthy(); }); }); @@ -190,7 +196,7 @@ test('should not run close animations if timing is not set', async () => { render( Click Me -
+
Test Div
); @@ -198,7 +204,7 @@ test('should not run close animations if timing is not set', async () => { await waitFor(() => { expect(setStyle).not.toBeCalled(); - expect(isVisible(screen.getByTestId('test-div'))).toBeFalsy(); + expect(isVisible(screen.getByText(/test div/i))).toBeFalsy(); }); }); @@ -206,11 +212,11 @@ test('should allow for controlled component', () => { render( -
+
Test Div
); - expect(isVisible(screen.getByTestId('test-div'))).toBeTruthy(); + expect(isVisible(screen.getByText(/test div/i))).toBeTruthy(); }); test('should not run open/close animations when prefers reduced motion is enabled', async () => { @@ -223,23 +229,23 @@ test('should not run open/close animations when prefers reduced motion is enable render( Click Me -
foo
+
foo
 ); // open animation - fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + fireEvent.click(screen.getByRole('button', { name: /click me/i })); await waitFor(() => { expect(setStyle).not.toBeCalled(); - expect(isVisible(screen.getByTestId('test-div'))).toBeTruthy(); + expect(isVisible(screen.getByText(/foo/i))).toBeTruthy(); }); // close animation - fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + fireEvent.click(screen.getByRole('button', { name: /click me/i })); await waitFor(() => { expect(setStyle).not.toBeCalled(); - expect(isVisible(screen.getByTestId('test-div'))).toBeFalsy(); + expect(isVisible(screen.getByText(/foo/i))).toBeFalsy(); }); }); From 4139052ebfb80129524da178adda8fce6cbf1073 Mon Sep 17 00:00:00 2001 From: orest-s Date: Fri, 14 Jun 2024 16:01:13 +0300 Subject: [PATCH 5/7] fix: flaky test and improved using `RTL` --- .../ExpandCollapsePanel.test.tsx | 68 +++++++++---------- 1 file changed, 31 insertions(+), 37 deletions(-) diff --git a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx index 14b7d268b..56e0d5617 100644 --- a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx +++ b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx @@ -1,11 +1,5 @@ import React from 'react'; -import { - render, - screen, - fireEvent, - waitFor, - getByText -} from '@testing-library/react'; +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import { default as ExpandCollapsePanel, PanelTrigger } from './'; import { SinonStub, createSandbox } from 'sinon'; import * as stylesheets from '../../utils/stylesheets'; @@ -34,7 +28,7 @@ export const isVisible = (element: HTMLElement): boolean => { if (!node) { throw new Error('Element has no parent'); } - // Assuming that the 'is--hidden' class is used to hide the element0и + // Assuming that the 'is--hidden' class is used to hide the element return !node.classList.contains('is--hidden'); }; @@ -131,9 +125,9 @@ test('trigger should open panel collapsed panel', async () => { fireEvent.click(screen.getByRole('button', { name: /click me/i })); - await waitFor(() => { - expect(isVisible(screen.getByText(/test div/i))).toBeTruthy(); - }); + await waitFor(() => + expect(isVisible(screen.getByText(/test div/i))).toBeTruthy() + ); }); test('trigger should close expanded panel', async () => { @@ -148,9 +142,7 @@ test('trigger should close expanded panel', async () => { rerender(); - await waitFor(() => { - expect(isVisible(getByText(/test div/i))).toBeFalsy(); - }); + await waitFor(() => expect(isVisible(getByText(/test div/i))).toBeFalsy()); }); test('should clean up injected styletags', async () => { @@ -159,17 +151,19 @@ test('should clean up injected styletags', async () => { const { unmount } = render( Click Me -
+
Test Div
); - fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + fireEvent.click(screen.getByRole('button', { name: /click me/i })); + + await waitFor(() => + expect(isVisible(screen.getByText(/test div/i))).toBeTruthy() + ); unmount(); - await waitFor(() => { - expect(cleanup).toBeCalled(); - }); + await waitFor(() => expect(cleanup).toBeCalled()); }); test('should not run open animations if timing is not set', async () => { @@ -182,12 +176,15 @@ test('should not run open animations if timing is not set', async () => { ); - fireEvent.click(screen.getByRole('button', { name: 'Click Me' })); + expect(isVisible(screen.getByText(/test div/i))).toBeFalsy(); - await waitFor(() => { - expect(setStyle).not.toBeCalled(); - expect(isVisible(screen.getByText(/test div/i))).toBeTruthy(); - }); + fireEvent.click(screen.getByRole('button', { name: /click me/i })); + + await waitFor(() => + expect(isVisible(screen.getByText(/test div/i))).toBeTruthy() + ); + + expect(setStyle).not.toBeCalled(); }); test('should not run close animations if timing is not set', async () => { @@ -200,12 +197,13 @@ test('should not run close animations if timing is not set', async () => { ); - fireEvent.doubleClick(screen.getByRole('button', { name: 'Click Me' })); + fireEvent.click(screen.getByRole('button', { name: /click me/i })); + + await waitFor(() => + expect(isVisible(screen.getByText(/test div/i))).toBeFalsy() + ); - await waitFor(() => { - expect(setStyle).not.toBeCalled(); - expect(isVisible(screen.getByText(/test div/i))).toBeFalsy(); - }); + expect(setStyle).not.toBeCalled(); }); test('should allow for controlled component', () => { @@ -236,16 +234,12 @@ test('should not run open/close animations when prefers reduced motion is enable // open animation fireEvent.click(screen.getByRole('button', { name: /click me/i })); - await waitFor(() => { - expect(setStyle).not.toBeCalled(); - expect(isVisible(screen.getByText(/foo/i))).toBeTruthy(); - }); + await waitFor(() => expect(isVisible(screen.getByText(/foo/i))).toBeTruthy()); + expect(setStyle).not.toBeCalled(); // close animation fireEvent.click(screen.getByRole('button', { name: /click me/i })); - await waitFor(() => { - expect(setStyle).not.toBeCalled(); - expect(isVisible(screen.getByText(/foo/i))).toBeFalsy(); - }); + await waitFor(() => expect(isVisible(screen.getByText(/foo/i))).toBeFalsy()); + expect(setStyle).not.toBeCalled(); }); From 3603081a43267c2bfb75e1cd8ef41a0aecf54b82 Mon Sep 17 00:00:00 2001 From: orest-s Date: Fri, 14 Jun 2024 16:20:23 +0300 Subject: [PATCH 6/7] fix: tests after cleaning PR --- .../components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx index 56e0d5617..9687eb732 100644 --- a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx +++ b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx @@ -197,7 +197,7 @@ test('should not run close animations if timing is not set', async () => { ); - fireEvent.click(screen.getByRole('button', { name: /click me/i })); + fireEvent.doubleClick(screen.getByRole('button', { name: /click me/i })); await waitFor(() => expect(isVisible(screen.getByText(/test div/i))).toBeFalsy() From 8db19485a7483614b01660793613d876b38ecf48 Mon Sep 17 00:00:00 2001 From: orest-s Date: Wed, 19 Jun 2024 17:30:19 +0300 Subject: [PATCH 7/7] feat: added test for axe violations --- .../ExpandCollapsePanel.test.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx index 9687eb732..430e455bd 100644 --- a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx +++ b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import { default as ExpandCollapsePanel, PanelTrigger } from './'; import { SinonStub, createSandbox } from 'sinon'; +import axe from '../../axe'; import * as stylesheets from '../../utils/stylesheets'; const sandbox = createSandbox(); @@ -243,3 +244,15 @@ test('should not run open/close animations when prefers reduced motion is enable await waitFor(() => expect(isVisible(screen.getByText(/foo/i))).toBeFalsy()); expect(setStyle).not.toBeCalled(); }); + +test('should return no axe violations', async () => { + const { container } = render( + + Click Me +
foo
+ + ); + + const results = await axe(container); + expect(results).toHaveNoViolations(); +});