-
Notifications
You must be signed in to change notification settings - Fork 745
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: #1792 Migrate 'components/Inputs/' tests to React Testing Libra…
…ry (#1891) * [1792] migrate InputCheckbox tests to rtl, add afterEach to reset spy * [1792] migrate InputCheckboxGroup tests to use RTL, reset spy afterEach, remove unused act; fix hasError test prop; add more detailed hasError prop flow type * [1792] migrate InputError tests to use RTL * [1792] migrate InputLabel tests to use RTL * [1792] migrate InputLocation tests to use RTL * [1792] migrate InputRadioGroup tests to use RTL, remove unused beforeEach spy on window.alert * [1792] migrate InputSelect tests to use RTL; add further tests; add afterEach to reset spy * [1792] migrate InputSubmit tests to use RTL, add further tests, add afterEach to reset spy * [1792] migrate InputTag tests to use RTL * replace InputSwitch deprecated keypress handler with keydown, migrate spec to RTL, minor: remove unused type prop * [1792] minor: replace deprecated InputTag keypress; minor version update for RTL; comment InputSwitch keyDown test * [1792] migrate InputDefault tests to use RTL * [1792] migrate InputPassword tests to use RTL * [1792] migrate Input.spec.jsx tests to use RTL * [1792] add InputTextarea tests using RTL * [1792] small input tests cleanups * [1792] code review updates: refine checkbox group assertions, cleanup test cleanup
- Loading branch information
1 parent
62d1a6a
commit c2aadce
Showing
19 changed files
with
567 additions
and
288 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,119 +1,143 @@ | ||
| // @flow | ||
| import { mount } from 'enzyme'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { InputMocks } from 'mocks/InputMocks'; | ||
| import css from '../Input.scss'; | ||
|
|
||
| /** | ||
| * TODO: Follow up on an issue when using the matcher `.toBeVisible()` on the inputs directly. | ||
| * The components behave correctly, but the computed styles don't seem to correspond. | ||
| * Even if the accordion is closed, and uses the class 'accordionClose', the actual style returns | ||
| * a visible value for the 'display' property, as opposed to the expected value 'none'. | ||
| * This is also seen with the helper `.toHaveStyle()` (in @testing-library/[email protected]). | ||
| * For now, checking whether div["role='region'"] from Accordion has the class 'accordionClose'. | ||
| */ | ||
|
|
||
| describe('Input', () => { | ||
| describe('InputDefault', () => { | ||
| describe('with accordion prop', () => { | ||
| it('toggles correctly', () => { | ||
| const wrapper = mount( | ||
| const { label } = InputMocks.inputTextProps; | ||
| render( | ||
| InputMocks.createInput(InputMocks.inputTextProps, { | ||
| accordion: true, | ||
| }), | ||
| ); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('input').exists(), | ||
| ).toEqual(false); | ||
| wrapper.find('.accordion').simulate('click'); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('input').exists(), | ||
| ).toEqual(true); | ||
| wrapper.find('.accordion').simulate('click'); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('input').exists(), | ||
| ).toEqual(false); | ||
|
|
||
| const input = screen.getByRole('textbox'); | ||
| const button = screen.getByRole('button', { name: new RegExp(label) }); | ||
| const accordionContainer = screen.getByRole('region'); | ||
|
|
||
| expect(input).toBeInTheDocument(); | ||
|
|
||
| expect(accordionContainer).toHaveClass(css.accordionClose); | ||
| userEvent.click(button); | ||
| expect(accordionContainer).not.toHaveClass(css.accordionClose); | ||
| userEvent.click(button); | ||
| expect(accordionContainer).toHaveClass(css.accordionClose); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('CheckboxGroup', () => { | ||
| describe('with accordion prop', () => { | ||
| it('toggles correctly', () => { | ||
| const wrapper = mount( | ||
| const { | ||
| label: groupLabel, | ||
| checkboxes: [{ label }], | ||
| } = InputMocks.inputCheckboxGroupProps; | ||
| render( | ||
| InputMocks.createInput(InputMocks.inputCheckboxGroupProps, { | ||
| accordion: true, | ||
| }), | ||
| ); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('input').exists(), | ||
| ).toEqual(false); | ||
| wrapper.find('.accordion').simulate('click'); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('input').exists(), | ||
| ).toEqual(true); | ||
| wrapper.find('.accordion').simulate('click'); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('input').exists(), | ||
| ).toEqual(false); | ||
|
|
||
| const checkbox = screen.getByRole('checkbox', { name: label }); | ||
| const button = screen.getByRole('button', { name: groupLabel }); | ||
| const accordionContainer = screen.getByRole('region'); | ||
|
|
||
| expect(checkbox).toBeInTheDocument(); | ||
|
|
||
| expect(accordionContainer).toHaveClass(css.accordionClose); | ||
| userEvent.click(button); | ||
| expect(accordionContainer).not.toHaveClass(css.accordionClose); | ||
| userEvent.click(button); | ||
| expect(accordionContainer).toHaveClass(css.accordionClose); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Select', () => { | ||
| describe('with accordion prop', () => { | ||
| it('toggles correctly', () => { | ||
| const wrapper = mount( | ||
| const { label } = InputMocks.inputSelectProps; | ||
| render( | ||
| InputMocks.createInput(InputMocks.inputSelectProps, { | ||
| accordion: true, | ||
| }), | ||
| ); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('select').exists(), | ||
| ).toEqual(false); | ||
| wrapper.find('.accordion').simulate('click'); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('select').exists(), | ||
| ).toEqual(true); | ||
| wrapper.find('.accordion').simulate('click'); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('select').exists(), | ||
| ).toEqual(false); | ||
|
|
||
| const combobox = screen.getByRole('combobox'); | ||
| const button = screen.getByRole('button', { name: label }); | ||
| const accordionContainer = screen.getByRole('region'); | ||
|
|
||
| expect(combobox).toBeInTheDocument(); | ||
|
|
||
| expect(accordionContainer).toHaveClass(css.accordionClose); | ||
| userEvent.click(button); | ||
| expect(accordionContainer).not.toHaveClass(css.accordionClose); | ||
| userEvent.click(button); | ||
| expect(accordionContainer).toHaveClass(css.accordionClose); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Tag', () => { | ||
| describe('with accordion prop', () => { | ||
| it('toggles correctly', () => { | ||
| const wrapper = mount( | ||
| const { label } = InputMocks.inputTagProps; | ||
| render( | ||
| InputMocks.createInput(InputMocks.inputTagProps, { | ||
| accordion: true, | ||
| }), | ||
| ); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('input').exists(), | ||
| ).toEqual(false); | ||
| wrapper.find('.accordion').simulate('click'); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('input').exists(), | ||
| ).toEqual(true); | ||
| wrapper.find('.accordion').simulate('click'); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('input').exists(), | ||
| ).toEqual(false); | ||
|
|
||
| const combobox = screen.getByRole('combobox'); | ||
| const button = screen.getByRole('button', { name: new RegExp(label) }); | ||
| const accordionContainer = screen.getByRole('region'); | ||
|
|
||
| expect(combobox).toBeInTheDocument(); | ||
|
|
||
| expect(accordionContainer).toHaveClass(css.accordionClose); | ||
| userEvent.click(button); | ||
| expect(accordionContainer).not.toHaveClass(css.accordionClose); | ||
| userEvent.click(button); | ||
| expect(accordionContainer).toHaveClass(css.accordionClose); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Switch', () => { | ||
| describe('with accordion prop', () => { | ||
| it('toggles correctly', () => { | ||
| const wrapper = mount( | ||
| const { label } = InputMocks.inputSwitchProps; | ||
| render( | ||
| InputMocks.createInput(InputMocks.inputSwitchProps, { | ||
| accordion: true, | ||
| }), | ||
| ); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('.switch').exists(), | ||
| ).toEqual(false); | ||
| wrapper.find('.accordion').simulate('click'); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('.switch').exists(), | ||
| ).toEqual(true); | ||
| wrapper.find('.accordion').simulate('click'); | ||
| expect( | ||
| wrapper.find('.accordionContent').find('.switch').exists(), | ||
| ).toEqual(false); | ||
|
|
||
| const switchInput = screen.getByRole('switch'); | ||
| const button = screen.getByRole('button', { name: new RegExp(label) }); | ||
| const accordionContainer = screen.getByRole('region'); | ||
|
|
||
| expect(switchInput).toBeInTheDocument(); | ||
|
|
||
| expect(accordionContainer).toHaveClass(css.accordionClose); | ||
| userEvent.click(button); | ||
| expect(accordionContainer).not.toHaveClass(css.accordionClose); | ||
| userEvent.click(button); | ||
| expect(accordionContainer).toHaveClass(css.accordionClose); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.