From 37f432d929e80fd4aff7b7b664b96a23869a9cf5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karen=20Pinz=C3=A1s=20Morrongiello?= <45268098+kpinzas-sh@users.noreply.github.com> Date: Wed, 1 Sep 2021 13:47:10 -0400 Subject: [PATCH 1/2] Modernized tests for Checkbox and Choicelist --- UNRELEASED.md | 1 + .../Checkbox/tests/Checkbox.test.tsx | 215 ++++++++++-------- .../ChoiceList/tests/ChoiceList.test.tsx | 178 +++++++-------- 3 files changed, 213 insertions(+), 181 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index d52eb064574..3aec373ebfb 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -83,6 +83,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for Pagination, FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#4438](https://github.com/Shopify/polaris-react/pull/4438)) - Modernized tests for PopoverOverlay component([#4430](https://github.com/Shopify/polaris-react/pull/4430)) - Modernized tests for Dropzone, ExceptionList, and ConnectedFilterControl > Item components([#4412](https://github.com/Shopify/polaris-react/pull/4412)) +- Modernized tests for Checkbox and Choicelist ([#4457](https://github.com/Shopify/polaris-react/pull/4457)) - Modernized tests for DatePicker, DescriptionList, and DisplayText ([#4360](https://github.com/Shopify/polaris-react/pull/4360)) ### Deprecations diff --git a/src/components/Checkbox/tests/Checkbox.test.tsx b/src/components/Checkbox/tests/Checkbox.test.tsx index 66716140640..278ed470e26 100644 --- a/src/components/Checkbox/tests/Checkbox.test.tsx +++ b/src/components/Checkbox/tests/Checkbox.test.tsx @@ -1,6 +1,4 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; import {mountWithApp} from 'test-utilities'; import {Key} from '../../../types'; @@ -9,51 +7,59 @@ import {Checkbox} from '../Checkbox'; describe('', () => { it('sets pass through properties on the input', () => { - const input = mountWithAppProvider( + const input = mountWithApp( , - ).find('input'); + ); - expect(input.prop('checked')).toBe(true); - expect(input.prop('name')).toBe('Checkbox'); - expect(input.prop('value')).toBe('Some value'); + expect(input).toContainReactComponent('input', { + checked: true, + name: 'Checkbox', + value: 'Some value', + }); }); it('does not change checked states when onChange is not provided', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - element.simulate('click'); - expect(element.find('input').prop('checked')).toBe(true); + + element.find('input')!.domNode!.click; + + expect(element).toContainReactComponent('input', { + checked: true, + }); }); it('does not propagate click events from input element', () => { const spy = jest.fn(); - const element = mountWithAppProvider( + const element = mountWithApp( , ); - element.find('input').simulate('click'); + element.find('input')!.domNode!.click; expect(spy).not.toHaveBeenCalled(); }); describe('onChange()', () => { it('is called with the updated checked value of the input on click', () => { const spy = jest.fn(); - const element = mountWithAppProvider( + const element = mountWithApp( , ); - (element.find('input') as any).instance().checked = true; - element.simulate('click'); + + (element.find('input')!.domNode as HTMLInputElement).checked = true; + element.find(Choice)?.trigger('onClick'); + expect(spy).toHaveBeenCalledWith(false, 'MyCheckbox'); }); it('is called when space is pressed', () => { const spy = jest.fn(); - const element = mountWithAppProvider( + const element = mountWithApp( , ); - element.find('input').simulate('keyup', { + element.find('input')!.trigger('onKeyUp', { keyCode: Key.Space, }); @@ -62,11 +68,11 @@ describe('', () => { it('is not from keys other than space', () => { const spy = jest.fn(); - const element = mountWithAppProvider( + const element = mountWithApp( , ); - element.find('input').simulate('keyup', { + element.find('input')!.trigger('onKeyUp', { keyCode: Key.Enter, }); @@ -84,10 +90,10 @@ describe('', () => { it('is not called from keyboard events when disabled', () => { const spy = jest.fn(); - const checkbox = mountWithAppProvider( + const checkbox = mountWithApp( , ); - checkbox.find('input').simulate('keyup', { + checkbox.find('input')!.trigger('onKeyUp', { keyCode: Key.Enter, }); expect(spy).not.toHaveBeenCalled(); @@ -95,10 +101,10 @@ describe('', () => { it('is not called from click events when disabled', () => { const spy = jest.fn(); - const checkbox = mountWithAppProvider( + const checkbox = mountWithApp( , ); - checkbox.find('input').simulate('click'); + checkbox.find('input')!.domNode!.click; expect(spy).not.toHaveBeenCalled(); }); }); @@ -106,10 +112,8 @@ describe('', () => { describe('onFocus()', () => { it('is called when the input is focused', () => { const spy = jest.fn(); - const element = mountWithAppProvider( - , - ); - element.find('input').simulate('focus'); + const element = mountWithApp(); + element.find('input')!.trigger('onFocus'); expect(spy).toHaveBeenCalled(); }); }); @@ -117,151 +121,177 @@ describe('', () => { describe('onBlur()', () => { it('is called when the input is focused', () => { const spy = jest.fn(); - const element = mountWithAppProvider( - , - ); - element.find('input').simulate('blur'); + const element = mountWithApp(); + element.find('input')!.trigger('onBlur'); expect(spy).toHaveBeenCalled(); }); }); describe('id', () => { it('sets the id on the input', () => { - const id = mountWithAppProvider( + const element = mountWithApp( , - ) - .find('input') - .prop('id'); - expect(id).toBe('MyCheckbox'); + ); + + expect(element).toContainReactComponent('input', { + id: 'MyCheckbox', + }); }); it('sets a random id on the input when none is passed', () => { - const id = mountWithAppProvider() - .find('input') - .prop('id'); - expect(typeof id).toBe('string'); - expect(id).toBeTruthy(); + const element = mountWithApp(); + + expect(element).toContainReactComponent('input', { + id: 'PolarisCheckbox1', + }); }); }); describe('disabled', () => { it('sets the disabled attribute on the input', () => { - const button = mountWithAppProvider( - , - ); + const element = mountWithApp(); - expect(button.find('input').prop('disabled')).toBe(true); + expect(element).toContainReactComponent('input', { + disabled: true, + }); }); it('is only disabled when disabled is explicitly set to true', () => { - let element = mountWithAppProvider(); - expect(element.find('input').prop('disabled')).toBeFalsy(); + let element = mountWithApp(); - element = mountWithAppProvider( - , - ); - expect(element.find('input').prop('disabled')).toBeFalsy(); + expect(element).toContainReactComponent('input', { + disabled: undefined, + }); + + element = mountWithApp(); + + expect(element).toContainReactComponent('input', { + disabled: false, + }); }); it('can change values when disabled', () => { const spy = jest.fn(); - const checkbox = mountWithAppProvider( + const checkbox = mountWithApp( , ); - checkbox.find('input').simulate('keyup', { + + checkbox.find('input')!.trigger('onKeyUp', { keyCode: Key.Enter, }); checkbox.setProps({checked: true}); - expect(checkbox.find('input').prop('checked')).toBe(true); + + expect(checkbox).toContainReactComponent('input', { + checked: true, + }); }); }); describe('helpText', () => { it('connects the input to the help text', () => { - const checkbox = mountWithAppProvider( + const checkbox = mountWithApp( , ); - const helpTextID = checkbox - .find('input') - .prop('aria-describedby'); - expect(typeof helpTextID).toBe('string'); - expect(checkbox.find(`#${helpTextID}`).text()).toBe('Some help'); + + expect(checkbox).toContainReactComponent('input', { + 'aria-describedby': 'PolarisCheckbox1HelpText', + }); + + expect(checkbox.find('div')).toContainReactText('Some help'); }); }); describe('error', () => { it('marks the input as invalid', () => { - const checkbox = mountWithAppProvider( + const checkbox = mountWithApp( Error} label="Checkbox" />, ); - expect(checkbox.find('input').prop('aria-invalid')).toBe(true); + + expect(checkbox).toContainReactComponent('input', { + 'aria-invalid': true, + }); checkbox.setProps({error: 'Some error'}); - expect(checkbox.find('input').prop('aria-invalid')).toBe(true); + + expect(checkbox).toContainReactComponent('input', { + 'aria-invalid': true, + }); }); it('connects the input to the error if the error is not boolean', () => { - const checkbox = mountWithAppProvider( + const checkbox = mountWithApp( , ); - const errorID = checkbox.find('input').prop('aria-describedby'); - expect(typeof errorID).toBe('string'); - expect(checkbox.find(`#${errorID}`).text()).toBe('Some error'); + + expect(checkbox).toContainReactComponent('input', { + 'aria-describedby': 'PolarisCheckbox1Error', + }); + + expect(checkbox.find('div')).toContainReactText('Some error'); }); it('does not connect the input to the error if the error is boolean', () => { - const checkbox = mountWithAppProvider( - , - ); - const errorID = checkbox.find('input').prop('aria-describedby'); - expect(errorID).toBeUndefined(); + const checkbox = mountWithApp(); + + expect(checkbox).toContainReactComponent('input', { + 'aria-describedby': undefined, + }); }); it('connects the input to both an error and help text', () => { - const checkbox = mountWithAppProvider( + const checkbox = mountWithApp( , ); - const descriptions = checkbox - .find('input') - .prop('aria-describedby') - .split(' '); - expect(descriptions).toHaveLength(2); - expect(checkbox.find(`#${descriptions[0]}`).text()).toBe('Some error'); - expect(checkbox.find(`#${descriptions[1]}`).text()).toBe('Some help'); + + expect(checkbox).toContainReactComponent('input', { + 'aria-describedby': 'PolarisCheckbox1Error PolarisCheckbox1HelpText', + }); + expect(checkbox.find('div')).toContainReactText('Some error'); + expect(checkbox.find('div')).toContainReactText('Some help'); }); }); describe('indeterminate', () => { it('sets the indeterminate attribute to be true on the input when checked is "indeterminate"', () => { - const checkbox = mountWithAppProvider( + const checkbox = mountWithApp( , ); - expect(checkbox.find('input').prop('indeterminate')).toBe('true'); + + expect(checkbox).toContainReactComponent('input', { + indeterminate: 'true', + }); }); it('sets the aria-checked attribute on the input as mixed when checked is "indeterminate"', () => { - const checkbox = mountWithAppProvider( + const checkbox = mountWithApp( , ); - expect(checkbox.find('input').prop('aria-checked')).toBe('mixed'); + + expect(checkbox).toContainReactComponent('input', { + 'aria-checked': 'mixed', + }); }); it('sets the checked attribute on the input to false when checked is "indeterminate"', () => { - const checkbox = mountWithAppProvider( + const checkbox = mountWithApp( , ); - expect(checkbox.find('input').prop('checked')).toBe(false); + + expect(checkbox).toContainReactComponent('input', { + checked: false, + }); }); }); describe('ariaDescribedBy', () => { it('sets the aria-describedBy attribute on the input', () => { - const checkBox = mountWithAppProvider( + const checkBox = mountWithApp( , ); - const ariaDescribedBy = checkBox.find('input').prop('aria-describedby'); - expect(ariaDescribedBy).toBe('SomeId'); + expect(checkBox).toContainReactComponent('input', { + 'aria-describedby': 'SomeId', + }); }); }); @@ -293,10 +323,11 @@ describe('', () => { describe('Focus className', () => { it('on keyUp adds a keyFocused class to the input', () => { const checkbox = mountWithApp(); - const event: KeyboardEventInit & {keyCode: Key} = { + + checkbox.find('input')!.trigger('onKeyUp', { keyCode: Key.Space, - }; - checkbox.find('input')!.trigger('onKeyUp', event); + }); + expect(checkbox).toContainReactComponent('input', { className: 'Input keyFocused', }); diff --git a/src/components/ChoiceList/tests/ChoiceList.test.tsx b/src/components/ChoiceList/tests/ChoiceList.test.tsx index 5e8c2969b59..4ad72b3cf55 100644 --- a/src/components/ChoiceList/tests/ChoiceList.test.tsx +++ b/src/components/ChoiceList/tests/ChoiceList.test.tsx @@ -1,8 +1,6 @@ import React from 'react'; import {mountWithApp} from 'test-utilities'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, ReactWrapper} from 'test-utilities/legacy'; -import {RadioButton, Checkbox, InlineError, errorTextID} from 'components'; +import {RadioButton, Checkbox, InlineError} from 'components'; import {ChoiceList, ChoiceListProps} from '../ChoiceList'; @@ -18,18 +16,18 @@ describe('', () => { }); it('renders a fieldset', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - expect(element.find('fieldset').exists()).toBe(true); + expect(element).toContainReactComponent('fieldset'); }); describe('title', () => { it('renders a legend for the fieldset', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - expect(element.find('legend').text()).toBe('My title'); + expect(element.find('legend')).toContainReactText('My title'); }); it('renders a legend containing JSX for the fieldset', () => { @@ -58,11 +56,11 @@ describe('', () => { {...choices[2], helpText: 'Some help text'}, ]; - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( , - ).find(RadioButton); + ); - choiceElements.forEach((choiceElement, index) => { + choiceElements.findAll(RadioButton).forEach((choiceElement, index) => { expect(choiceElement.prop('label')).toBe(choices[index].label); expect(choiceElement.prop('value')).toBe(choices[index].value); expect(choiceElement.prop('helpText')).toBe(choices[index].helpText); @@ -83,11 +81,11 @@ describe('', () => { {...choices[2], helpText: 'Some help text'}, ]; - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( , - ).find(RadioButton); + ); - choiceElements.forEach((choiceElement, index) => { + choiceElements.findAll(RadioButton).forEach((choiceElement, index) => { expect(choiceElement.prop('label')).toBe(choices[index].label); expect(choiceElement.prop('value')).toBe(choices[index].value); expect(choiceElement.prop('helpText')).toBe(choices[index].helpText); @@ -108,7 +106,7 @@ describe('', () => { }, ] as any; - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( ', () => { ); expect(renderChildrenSpy).toHaveBeenCalled(); - expect(choiceElements.contains(children)).toBe(true); + expect(choiceElements).toContainReactComponent('span', { + children: 'Child', + }); }); }); @@ -139,7 +139,7 @@ describe('', () => { }, ] as any; - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( ', () => { ); expect(renderChildrenSpy).toHaveBeenCalled(); - expect(choiceElements.contains(children)).toBe(true); + expect(choiceElements).toContainReactComponent('span', { + children: 'Child', + }); }); it('renders a choice with children wrapper div when choice is selected', () => { @@ -168,7 +170,7 @@ describe('', () => { }, ] as any; - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( ', () => { expect(renderChildrenSpy).toHaveBeenCalled(); expect( - choiceElements.find('li').at(selectedIndex).find('div').exists(), - ).toBeTruthy(); + choiceElements.findAll('li')[selectedIndex], + ).toContainReactComponent('div'); }); it('does not render a choice with children content when choice is not selected', () => { @@ -196,7 +198,7 @@ describe('', () => { }, ] as any; - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( ', () => { ); expect(renderChildrenSpy).toHaveBeenCalled(); - expect(choiceElements.contains(children)).toBe(false); + expect(choiceElements).not.toContainReactComponent('span', { + children: 'Child', + }); }); it('does not render a choice with children wrapper div when choice is not selected', () => { @@ -226,7 +230,7 @@ describe('', () => { }, ] as any; - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( ', () => { expect(renderChildrenSpy).toHaveBeenCalled(); expect( - choiceElements.find('li').at(indexWithChildren).find('div').exists(), - ).toBeFalsy(); + choiceElements.findAll('li')[indexWithChildren], + ).not.toContainReactComponent('div'); }); }); @@ -254,7 +258,7 @@ describe('', () => { }, ] as any; - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( ', () => { />, ); - expect(choiceElements.contains(children)).toBe(false); + expect(choiceElements).not.toContainReactComponent('span', { + children: 'Child', + }); }); }); }); @@ -271,15 +277,15 @@ describe('', () => { it('sets the provided choices to be selected', () => { const selectedIndexes = [0, 2]; const selected = selectedIndexes.map((index) => choices[index].value); - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( , - ).find(RadioButton); + ); - choiceElements.forEach((choiceElement, index) => { + choiceElements.findAll(RadioButton).forEach((choiceElement, index) => { expect(choiceElement.prop('checked')).toBe( selectedIndexes.includes(index), ); @@ -293,7 +299,7 @@ describe('', () => { const spy = jest.fn((newSelected: string[]) => { selected = newSelected; }); - const choiceList = mountWithAppProvider( + const choiceList = mountWithApp( ', () => { choices={choices} />, ); - const choiceElements = choiceList.find(Checkbox); + const choiceElements = choiceList.findAll(Checkbox); + choiceElements[1]!.trigger('onChange'); - changeCheckedForChoice(choiceElements.at(1)); expect(spy).toHaveBeenLastCalledWith(['one', 'two'], 'MyChoiceList'); + choiceList.setProps({selected}); + choiceElements[2]!.trigger('onChange'); - changeCheckedForChoice(choiceElements.at(2)); expect(spy).toHaveBeenLastCalledWith( ['one', 'two', 'three'], 'MyChoiceList', ); + choiceList.setProps({selected}); + choiceElements[0]!.trigger('onChange'); - changeCheckedForChoice(choiceElements.at(0)); expect(spy).toHaveBeenLastCalledWith(['two', 'three'], 'MyChoiceList'); choiceList.setProps({selected}); }); - - function changeCheckedForChoice(choice: ReactWrapper) { - choice.simulate('click'); - } }); describe('name', () => { it('provides a unique name when none is provided', () => { - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( , - ).find(RadioButton); - const name = choiceElements.at(0).prop('name'); - expect(typeof name).toBe('string'); + ); - choiceElements.forEach((choiceElement) => { - expect(choiceElement.prop('name')).toBe(name); + const radioButtons = choiceElements.findAll(RadioButton); + + const buttonName = radioButtons[0]!.prop('name'); + + radioButtons.forEach((choiceElement) => { + expect(choiceElement.prop('name')).toBe(buttonName); }); }); it('uses the same name for choices', () => { const name = 'MyChoiceList'; - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( , - ).find(RadioButton); - choiceElements.forEach((choiceElement) => { + ); + choiceElements.findAll(RadioButton).forEach((choiceElement) => { expect(choiceElement.prop('name')).toBe(name); }); }); it('postpends [] when multiple options are allowed', () => { const name = 'MyChoiceList'; - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( ', () => { selected={[]} choices={choices} />, - ).find(RadioButton); + ); - choiceElements.forEach((choiceElement) => { + choiceElements.findAll(RadioButton).forEach((choiceElement) => { expect(choiceElement.prop('name')).toBe(`${name}[]`); }); }); @@ -374,13 +380,14 @@ describe('', () => { describe('allowMultiple', () => { it('renders a radio button for each option when allowMultiple is not true', () => { - let element = mountWithAppProvider( + let element = mountWithApp( , ); - expect(element.find(RadioButton)).toHaveLength(choices.length); - expect(element.find(Checkbox).exists()).toBe(false); - element = mountWithAppProvider( + expect(element).toContainReactComponentTimes(RadioButton, choices.length); + expect(element).not.toContainReactComponent(Checkbox); + + element = mountWithApp( ', () => { allowMultiple={false} />, ); - expect(element.find(RadioButton)).toHaveLength(choices.length); - expect(element.find(Checkbox).exists()).toBe(false); + + expect(element).toContainReactComponentTimes(RadioButton, choices.length); + expect(element).not.toContainReactComponent(Checkbox); }); it('renders a checkbox each option when allowMultiple is true', () => { - const element = mountWithAppProvider( + const element = mountWithApp( ', () => { choices={choices} />, ); - expect(element.find(RadioButton).exists()).toBe(false); - expect(element.find(Checkbox)).toHaveLength(choices.length); + + expect(element).toContainReactComponentTimes(Checkbox, choices.length); + expect(element).not.toContainReactComponent(RadioButton); }); }); @@ -415,7 +424,7 @@ describe('', () => { }); it('marks the fieldset as invalid', () => { - const element = mountWithAppProvider( + const element = mountWithApp( ', () => { error="Error message" />, ); - expect(element.find('fieldset').prop('aria-invalid')).toBe(true); + + expect(element).toContainReactComponent('fieldset', { + 'aria-invalid': true, + }); }); it('renders an InlineError markup when truthy', () => { - const element = mountWithAppProvider( + const element = mountWithApp( ', () => { />, ); - const error = element.find(InlineError); - expect(error.prop('message')).toBe('Error message'); + expect(element.find(InlineError)).toContainReactText('Error message'); }); it("connects the InlineError to the choice, with the describedByError key's, ariaDescribedBy prop", () => { - const element = mountWithAppProvider( + const element = mountWithApp( ', () => { />, ); - const fieldId = element.find(InlineError).prop('fieldID'); - const expectedErrorFieldId = errorTextID(fieldId); - - const radioButtonDescribeBy = element - .find(RadioButton) - .last() - .prop('ariaDescribedBy'); + const fieldId = `${element.find(InlineError)!.prop('fieldID')}Error`; - expect(radioButtonDescribeBy).toBe(expectedErrorFieldId); + expect(element.find(RadioButton)!.prop('ariaDescribedBy')).toBe(fieldId); }); it('does not provide the choice, with the describedByError key, with ariaDescribedBy prop if no error is provided', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - const radioButtonDescribeBy = element - .find(RadioButton) - .last() - .prop('ariaDescribedBy'); - - expect(radioButtonDescribeBy).toBeNull(); + expect(element.find(RadioButton)!.prop('ariaDescribedBy')).toBeNull(); }); it('does not render an InlineError when falsy', () => { - const element = mountWithAppProvider( + const element = mountWithApp( ', () => { />, ); - expect(element.find(InlineError)).toHaveLength(0); + expect(element).not.toContainReactComponent(InlineError); }); }); describe('disabled', () => { it('disables choices', () => { - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( , - ).find(RadioButton); + ); - choiceElements.forEach((choiceElement) => { + choiceElements.findAll(RadioButton)!.forEach((choiceElement) => { expect(choiceElement.prop('disabled')).toBe(true); }); }); @@ -502,11 +502,11 @@ describe('', () => { it('preserves disabled choices', () => { choices = [choices[0], choices[1], {...choices[2], disabled: true}]; - const choiceElements = mountWithAppProvider( + const choiceElements = mountWithApp( , - ).find(RadioButton); + ); - choiceElements.forEach((choiceElement) => { + choiceElements.findAll(RadioButton).forEach((choiceElement) => { expect(choiceElement.prop('disabled')).toBe(true); }); }); From e66f56af8d4f764f9c0c0faacc3d36df1c45cbb3 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Thu, 2 Sep 2021 12:46:49 -0400 Subject: [PATCH 2/2] Fix a couple of tests --- src/components/Checkbox/tests/Checkbox.test.tsx | 16 +++++++++++----- .../ChoiceList/tests/ChoiceList.test.tsx | 16 ++++++++++------ 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/components/Checkbox/tests/Checkbox.test.tsx b/src/components/Checkbox/tests/Checkbox.test.tsx index 278ed470e26..f720e709926 100644 --- a/src/components/Checkbox/tests/Checkbox.test.tsx +++ b/src/components/Checkbox/tests/Checkbox.test.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {AllHTMLAttributes} from 'react'; import {mountWithApp} from 'test-utilities'; import {Key} from '../../../types'; @@ -23,7 +23,9 @@ describe('', () => { , ); - element.find('input')!.domNode!.click; + element.find('input')!.trigger('onClick', { + stopPropagation: () => {}, + }); expect(element).toContainReactComponent('input', { checked: true, @@ -36,7 +38,9 @@ describe('', () => { , ); - element.find('input')!.domNode!.click; + element.find('input')!.trigger('onClick', { + stopPropagation: () => {}, + }); expect(spy).not.toHaveBeenCalled(); }); @@ -104,7 +108,9 @@ describe('', () => { const checkbox = mountWithApp( , ); - checkbox.find('input')!.domNode!.click; + checkbox.find('input')!.trigger('onClick', { + stopPropagation: () => {}, + }); expect(spy).not.toHaveBeenCalled(); }); }); @@ -259,7 +265,7 @@ describe('', () => { expect(checkbox).toContainReactComponent('input', { indeterminate: 'true', - }); + } as AllHTMLAttributes); }); it('sets the aria-checked attribute on the input as mixed when checked is "indeterminate"', () => { diff --git a/src/components/ChoiceList/tests/ChoiceList.test.tsx b/src/components/ChoiceList/tests/ChoiceList.test.tsx index 4ad72b3cf55..67fdf420909 100644 --- a/src/components/ChoiceList/tests/ChoiceList.test.tsx +++ b/src/components/ChoiceList/tests/ChoiceList.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {mountWithApp} from 'test-utilities'; import {RadioButton, Checkbox, InlineError} from 'components'; +import {Choice} from '../../Choice'; import {ChoiceList, ChoiceListProps} from '../ChoiceList'; describe('', () => { @@ -309,24 +310,25 @@ describe('', () => { choices={choices} />, ); - const choiceElements = choiceList.findAll(Checkbox); - choiceElements[1]!.trigger('onChange'); + const getChoiceElement = (index: number) => + choiceList.findAll(Checkbox)[index]; + + getChoiceElement(1).find(Choice)!.trigger('onClick'); expect(spy).toHaveBeenLastCalledWith(['one', 'two'], 'MyChoiceList'); choiceList.setProps({selected}); - choiceElements[2]!.trigger('onChange'); + getChoiceElement(2).find(Choice)!.trigger('onClick'); expect(spy).toHaveBeenLastCalledWith( ['one', 'two', 'three'], 'MyChoiceList', ); choiceList.setProps({selected}); - choiceElements[0]!.trigger('onChange'); + getChoiceElement(0).find(Choice)!.trigger('onClick'); expect(spy).toHaveBeenLastCalledWith(['two', 'three'], 'MyChoiceList'); - choiceList.setProps({selected}); }); }); @@ -463,7 +465,9 @@ describe('', () => { const fieldId = `${element.find(InlineError)!.prop('fieldID')}Error`; - expect(element.find(RadioButton)!.prop('ariaDescribedBy')).toBe(fieldId); + expect(element).toContainReactComponent(RadioButton, { + ariaDescribedBy: fieldId, + }); }); it('does not provide the choice, with the describedByError key, with ariaDescribedBy prop if no error is provided', () => {