diff --git a/UNRELEASED.md b/UNRELEASED.md index d3d18828fe4..2e0c8f92a0b 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -72,5 +72,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for EventListener and EmptySearch components([#4423](https://github.com/Shopify/polaris-react/pull/4423)) - Modernized tests for Pane, Section, PositionedOverlay, SingleThumb, RangeSlider, and ConnectedFilter components ([#4429](https://github.com/Shopify/polaris-react/pull/4429)) - Modernized tests for ContextualSaveBar and DataTable and its subcomponents ([#4397](https://github.com/Shopify/polaris-react/pull/4397)) +- Modernized tests for IndexTable, Indicator, InlineError, KeyboardKey, and KeypressListener components([#4431](https://github.com/Shopify/polaris-react/pull/4431)) ### Deprecations diff --git a/src/components/IndexTable/tests/IndexTable.test.tsx b/src/components/IndexTable/tests/IndexTable.test.tsx index 64aa34f20e6..3b0ec3e82be 100644 --- a/src/components/IndexTable/tests/IndexTable.test.tsx +++ b/src/components/IndexTable/tests/IndexTable.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 {Sticky} from 'components/Sticky'; import {EventListener} from 'components/EventListener'; @@ -83,13 +81,13 @@ describe('', () => { }); it('renders a row for each item using renderItem', () => { - const index = mountWithAppProvider( + const index = mountWithApp( {mockTableItems.map(mockRenderRow)} , ); - expect(index.find(Component)).toHaveLength(2); + expect(index).toContainReactComponentTimes(Component, 2); }); it('renders a spinner if loading is passed', () => { diff --git a/src/components/Indicator/tests/Indicator.test.tsx b/src/components/Indicator/tests/Indicator.test.tsx index 19c8c1f4016..9495bcad915 100644 --- a/src/components/Indicator/tests/Indicator.test.tsx +++ b/src/components/Indicator/tests/Indicator.test.tsx @@ -1,14 +1,13 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {Indicator} from '../Indicator'; describe('', () => { describe('accessibilityLabel', () => { it('renders a span', () => { - const indicator = mountWithAppProvider(); - expect(indicator.find('span')).toHaveLength(1); + const indicator = mountWithApp(); + expect(indicator).toContainReactComponentTimes('span', 1); }); }); }); diff --git a/src/components/InlineError/tests/InlineError.test.tsx b/src/components/InlineError/tests/InlineError.test.tsx index 5043f81eb71..e512d822773 100644 --- a/src/components/InlineError/tests/InlineError.test.tsx +++ b/src/components/InlineError/tests/InlineError.test.tsx @@ -1,6 +1,5 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {InlineError, errorTextID} from '../InlineError'; @@ -8,28 +7,31 @@ describe('', () => { describe('fieldID', () => { it('renders with an ID generated from the fieldID', () => { const fieldId = 'ProductTitle'; - const expectedId = `#${errorTextID(fieldId)}`; + const expectedId = `${errorTextID(fieldId)}`; - const error = mountWithAppProvider( + const error = mountWithApp( , ); - expect(error.find(expectedId)).toHaveLength(1); + expect(error).toContainReactComponent('div', {id: expectedId}); }); }); describe('message', () => { it('only renders error markup when message is truthy', () => { - const error = mountWithAppProvider( + const error = mountWithApp( , ); - expect(error.find('#ProductTitleError').text()).toContain( + expect(error.find('div', {id: 'ProductTitleError'})).toContainReactText( 'Title can’t be blank', ); error.setProps({message: ''}); - expect(error.find('#ProductTitleError')).toHaveLength(0); + + expect(error).not.toContainReactComponent('div', { + id: 'ProductTitleError', + }); }); }); }); diff --git a/src/components/KeyboardKey/tests/KeyboardKey.test.tsx b/src/components/KeyboardKey/tests/KeyboardKey.test.tsx index 69214616d97..62fbd8ff9b7 100644 --- a/src/components/KeyboardKey/tests/KeyboardKey.test.tsx +++ b/src/components/KeyboardKey/tests/KeyboardKey.test.tsx @@ -1,27 +1,26 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {KeyboardKey} from '../KeyboardKey'; describe('', () => { it('renders a kbd element', () => { - const keyboardKey = mountWithAppProvider(k); - expect(keyboardKey.find('kbd')).toHaveLength(1); + const keyboardKey = mountWithApp(k); + expect(keyboardKey).toContainReactComponent('kbd'); }); it('renders the uppercase version of its children if one character', () => { - const keyboardKey = mountWithAppProvider(k); - expect(keyboardKey.find('kbd').contains('K')).toBe(true); + const keyboardKey = mountWithApp(k); + expect(keyboardKey.find('kbd')).toContainReactText('K'); }); it('renders the lowercase version of its children if more than one character', () => { - const keyboardKey = mountWithAppProvider(tab); - expect(keyboardKey.find('kbd').contains('tab')).toBe(true); + const keyboardKey = mountWithApp(tab); + expect(keyboardKey.find('kbd')).toContainReactText('tab'); }); it('renders an empty string as children when none are provided', () => { - const keyboardKey = mountWithAppProvider(); - expect(keyboardKey.text()).toBe(''); + const keyboardKey = mountWithApp(); + expect(keyboardKey).toContainReactText(''); }); }); diff --git a/src/components/KeypressListener/tests/KeypressListener.test.tsx b/src/components/KeypressListener/tests/KeypressListener.test.tsx index b8ea3f20baf..00d49cb81dc 100644 --- a/src/components/KeypressListener/tests/KeypressListener.test.tsx +++ b/src/components/KeypressListener/tests/KeypressListener.test.tsx @@ -1,6 +1,5 @@ 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'; import {KeypressListener} from '../KeypressListener'; @@ -30,9 +29,7 @@ describe('', () => { it('attaches a listener for the given key on mount', () => { const spy = jest.fn(); - mountWithAppProvider( - , - ); + mountWithApp(); listenerMap.keyup({keyCode: Key.Escape}); listenerMap.keyup({keyCode: Key.Enter}); @@ -42,7 +39,7 @@ describe('', () => { it('removes listener for the given key on unmount', () => { const spy = jest.fn(); - mountWithAppProvider( + mountWithApp( , ).unmount();