diff --git a/UNRELEASED.md b/UNRELEASED.md index 84ea52d6572..95a74b5bf65 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -83,5 +83,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - 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 DatePicker, DescriptionList, and DisplayText ([#4360](https://github.com/Shopify/polaris-react/pull/4360)) +- Modernized tests for TextField ([#4456](https://github.com/Shopify/polaris-react/pull/4456)). ### Deprecations diff --git a/src/components/TextField/tests/TextField.test.tsx b/src/components/TextField/tests/TextField.test.tsx index e70f7a62abc..41414fa70c3 100644 --- a/src/components/TextField/tests/TextField.test.tsx +++ b/src/components/TextField/tests/TextField.test.tsx @@ -1,17 +1,16 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy'; import {InlineError, Labelled, Connected, Select} from 'components'; import {mountWithApp} from 'test-utilities'; import {Resizer, Spinner} from '../components'; import {TextField} from '../TextField'; +import styles from '../TextField.scss'; describe('', () => { it('allows specific props to pass through properties on the input', () => { const pattern = '\\d\\d'; const inputMode = 'numeric'; - const input = mountWithAppProvider( + const input = mountWithApp( ', () => { align="left" autoComplete="name" />, - ).find('input'); - - expect(input.prop('disabled')).toBe(true); - expect(input.prop('readOnly')).toBe(false); - expect(input.prop('autoFocus')).toBe(true); - expect(input.prop('name')).toBe('TextField'); - expect(input.prop('placeholder')).toBe('A placeholder'); - expect(input.prop('value')).toBe('Some value'); - expect(input.prop('min')).toBe(20); - expect(input.prop('max')).toBe(50); - expect(input.prop('minLength')).toBe(2); - expect(input.prop('maxLength')).toBe(2); - expect(input.prop('spellCheck')).toBe(false); - expect(input.prop('pattern')).toBe(pattern); - expect(input.prop('inputMode')).toBe(inputMode); - expect(input.prop('autoComplete')).toBe('name'); + ); + + expect(input).toContainReactComponent('input', { + disabled: true, + readOnly: false, + autoFocus: true, + placeholder: 'A placeholder', + value: 'Some value', + max: 50, + minLength: 2, + maxLength: 2, + name: 'TextField', + spellCheck: false, + pattern, + min: 20, + inputMode, + autoComplete: 'name', + }); }); it('blocks props not listed as component props to pass on the input', () => { - const input = mountWithAppProvider( + const input = mountWithApp( ', () => { prefix="test-prefix" autoComplete="off" />, - ).find('input'); + ); - expect(input.prop('prefix')).toBeUndefined(); + expect(input).toContainReactComponent('input', { + prefix: undefined, + }); }); it('always has an `aria-labelledby` property', () => { - const textField = mountWithAppProvider( + const textField = mountWithApp( , ); - const property = textField.find('input').prop('aria-labelledby'); - expect(property).not.toHaveLength(0); + expect(textField).toContainReactComponent('input', { + 'aria-labelledby': 'PolarisTextField1Label', + }); }); describe('onChange()', () => { it('is called with the new value', () => { const spy = jest.fn(); - const element = mountWithAppProvider( + const element = mountWithApp( ', () => { autoComplete="off" />, ); - (element.find('input') as any).instance().value = 'two'; - element.find('input').simulate('change'); + + element.find('input')!.trigger('onChange', { + currentTarget: { + value: 'two', + }, + }); expect(spy).toHaveBeenCalledWith('two', 'MyTextField'); }); }); @@ -113,7 +121,7 @@ describe('', () => { describe('onBlur()', () => { it('is called when the input is blurred', () => { const spy = jest.fn(); - const element = mountWithAppProvider( + const element = mountWithApp( ', () => { autoComplete="off" />, ); - element.find('input').simulate('focus'); - element.find('input').simulate('blur'); + element.find('input')!.trigger('onBlur'); expect(spy).toHaveBeenCalled(); }); }); describe('id', () => { it('sets the id on the input', () => { - const id = mountWithAppProvider( + const textField = mountWithApp( , - ) - .find('input') - .prop('id'); - expect(id).toBe('MyField'); + ); + + expect(textField).toContainReactComponent('input', { + id: 'MyField', + }); }); it('sets a random id on the input when none is passed', () => { - const id = mountWithAppProvider( + const textField = mountWithApp( , - ) - .find('input') - .prop('id'); - expect(typeof id).toBe('string'); - expect(id).toBeTruthy(); + ); + + expect(textField).toContainReactComponent('input', { + id: 'PolarisTextField1', + }); }); it('updates with the new id from props', () => { const id = 'input field'; - const textField = mountWithAppProvider( + const textField = mountWithApp( , ); textField.setProps({id}); - expect(textField.find('input').prop('id')).toBe(id); + expect(textField).toContainReactComponent('input', { + id, + }); }); it('updates with the previous id after the id prop has been removed', () => { const id = 'input field'; - const textField = mountWithAppProvider( + const textField = mountWithApp( ', () => { />, ); textField.setProps({}); - expect(textField.find('input').prop('id')).toBe(id); + expect(textField).toContainReactComponent('input', { + id, + }); }); }); @@ -218,21 +230,22 @@ describe('', () => { describe('autoComplete', () => { it('is passed to input as autoComplete', () => { - const textField = mountWithAppProvider( + const textField = mountWithApp( , ); - - expect(textField.find('input').prop('autoComplete')).toBe('firstName'); + expect(textField).toContainReactComponent('input', { + autoComplete: 'firstName', + }); }); }); describe('helpText', () => { it('connects the input to the help text', () => { - const textField = mountWithAppProvider( + const textField = mountWithApp( ', () => { autoComplete="off" />, ); - const helpTextID = textField - .find('input') - .prop('aria-describedby'); - expect(typeof helpTextID).toBe('string'); - expect(textField.find(`#${helpTextID}`).text()).toBe('Some help'); + + expect(textField).toContainReactComponent('input', { + 'aria-describedby': 'PolarisTextField1HelpText', + }); + expect(textField.find('div')).toContainReactText('Some help'); }); }); describe('error', () => { it('marks the input as invalid', () => { - const textField = mountWithAppProvider( + const textField = mountWithApp( Invalid} label="TextField" @@ -258,14 +271,20 @@ describe('', () => { autoComplete="off" />, ); - expect(textField.find('input').prop('aria-invalid')).toBe(true); + + expect(textField).toContainReactComponent('input', { + 'aria-invalid': true, + }); textField.setProps({error: 'Some error'}); - expect(textField.find('input').prop('aria-invalid')).toBe(true); + + expect(textField).toContainReactComponent('input', { + 'aria-invalid': true, + }); }); it('connects the input to the error', () => { - const textField = mountWithAppProvider( + const textField = mountWithApp( ', () => { autoComplete="off" />, ); - const errorID = textField.find('input').prop('aria-describedby'); - expect(typeof errorID).toBe('string'); - expect(textField.find(`#${errorID}`).text()).toBe('Some error'); + + expect(textField).toContainReactComponent('input', { + 'aria-describedby': 'PolarisTextField1Error', + }); }); it('connects the input to an error rendered separately', () => { const errorMessage = 'Some error'; const textFieldID = 'collectionRuleType'; - const fieldGroup = mountWithAppProvider( + const fieldGroup = mountWithApp(
', () => {
, ); - const textField = fieldGroup.find(TextField).first(); - const errorID = textField.find('input').prop('aria-describedby'); - - expect(textField.find('input').prop('aria-invalid')).toBe(true); - expect(typeof errorID).toBe('string'); - expect(fieldGroup.find(`#${errorID}`).text()).toBe('Some error'); + expect(fieldGroup.find(TextField)).toContainReactComponent('input', { + 'aria-describedby': 'collectionRuleTypeError', + 'aria-invalid': true, + }); }); it('connects the input to both an error and help text', () => { - const textField = mountWithAppProvider( + const textField = mountWithApp( ', () => { autoComplete="off" />, ); - const descriptions = textField - .find('input') - .prop('aria-describedby') - .split(' '); - expect(descriptions).toHaveLength(2); - expect(textField.find(`#${descriptions[0]}`).text()).toBe('Some error'); - expect(textField.find(`#${descriptions[1]}`).text()).toBe('Some help'); + + expect(textField).toContainReactComponent('input', { + 'aria-describedby': 'PolarisTextField1Error PolarisTextField1HelpText', + }); + + expect(textField.find('div')).toContainReactText('Some error'); + expect(textField.find('div')).toContainReactText('Some help'); }); it('only renders error markup when not a boolean', () => { - const textField = mountWithAppProvider( + const textField = mountWithApp( ', () => { />, ); - expect(textField.find(InlineError)).toHaveLength(0); + expect(textField).not.toContainReactComponent(InlineError); textField.setProps({error: 'Some error'}); - expect(textField.find(InlineError)).toHaveLength(1); + expect(textField).toContainReactComponent(InlineError); }); }); describe('prefix', () => { it('connects the input to the prefix and label', () => { - const textField = mountWithAppProvider( + const textField = mountWithApp( ', () => { autoComplete="off" />, ); + const labels = textField - .find('input') - .prop('aria-labelledby') + .find('input')! + .prop('aria-labelledby')! .split(' '); expect(labels).toHaveLength(2); - expect(textField.find(`#${labels[0]}`).text()).toBe('TextField'); - expect(textField.find(`#${labels[1]}`).text()).toBe('$'); + + expect( + textField.find('label', { + id: `${labels[0]}`, + }), + )!.toContainReactText('TextField'); + + expect( + textField.find('div', { + id: `${labels[1]}`, + }), + )!.toContainReactText('$'); }); it('connects the input to the prefix, suffix, and label', () => { - const textField = mountWithAppProvider( + const textField = mountWithApp( ', () => { />, ); const labels = textField - .find('input') - .prop('aria-labelledby') + .find('input')! + .prop('aria-labelledby')! .split(' '); expect(labels).toHaveLength(3); - expect(textField.find(`#${labels[0]}`).text()).toBe('TextField'); - expect(textField.find(`#${labels[1]}`).text()).toBe('$'); - expect(textField.find(`#${labels[2]}`).text()).toBe('.00'); + + expect( + textField.find('label', { + id: `${labels[0]}`, + }), + )!.toContainReactText('TextField'); + + expect( + textField.find('div', { + id: `${labels[1]}`, + }), + )!.toContainReactText('$'); + + expect( + textField.find('div', { + id: `${labels[2]}`, + }), + )!.toContainReactText('.00'); }); it('does not set focus `onClick` for the if the `target` is the `prefix`', () => { - const onClickSpy = jest.fn(); const mockButtonId = 'MockPrefix'; - const mockPrefixButton = ( -