From 270a59456ae6b709bfdd6fb5c18df5dede7fb36c Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Tue, 24 Aug 2021 16:03:50 -0400 Subject: [PATCH] Modernized tests for Pane, Section, PositionedOverlay, SingleThumb, RangeSlider and ConnectedFilter --- UNRELEASED.md | 1 + .../tests/ConnectedFilterControl.test.tsx | 66 ++++---- .../components/Pane/tests/Pane.test.tsx | 31 ++-- .../components/Section/tests/Section.test.tsx | 12 +- .../tests/PositionedOverlay.test.tsx | 107 ++++++------ .../SingleThumb/tests/SingleThumb.test.tsx | 160 ++++++++++-------- .../RangeSlider/tests/RangeSlider.test.tsx | 65 ++++--- 7 files changed, 229 insertions(+), 213 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 7bdb15feae4..cc1d32e37c2 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -69,5 +69,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for MediaCard, and Layout components ([#4393](https://github.com/Shopify/polaris-react/pull/4393)) - Modernized tests for Image and Icon components ([#4418](https://github.com/Shopify/polaris-react/pull/4418)) - 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)) ### Deprecations diff --git a/src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx b/src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx index 37ebf0bb6b1..9018d318bca 100644 --- a/src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx +++ b/src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx @@ -1,9 +1,8 @@ import React from 'react'; import {Popover, Button} from 'components'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, ReactWrapper} from 'test-utilities/legacy'; import {mountWithApp} from 'test-utilities'; +import styles from '../ConnectedFilterControl.scss'; import { ConnectedFilterControl, ConnectedFilterControlProps, @@ -40,7 +39,7 @@ const mockRightAction = ; describe('', () => { it('mounts', () => { expect(() => { - mountWithAppProvider( + mountWithApp( , @@ -49,27 +48,27 @@ describe('', () => { }); it('does not render buttons without right actions or right popoverable actions', () => { - const connectedFilterControl = mountWithAppProvider( + const connectedFilterControl = mountWithApp( , ); - expect(connectedFilterControl.find(Button).exists()).toBe(false); + expect(connectedFilterControl).not.toContainReactComponent(Button); }); it('does not render popovers without right popoverable actions', () => { - const connectedFilterControl = mountWithAppProvider( + const connectedFilterControl = mountWithApp( , ); - expect(connectedFilterControl.find(Popover).exists()).toBe(false); + expect(connectedFilterControl).not.toContainReactComponent(Popover); }); it('always render a RightAction if forceShowMorefiltersButton is true', () => { - const connectedFilterControl = mountWithAppProvider( + const connectedFilterControl = mountWithApp( ', () => { , ); - expect(connectedFilterControl.find(Button).exists()).toBe(true); + expect(connectedFilterControl).toContainReactComponent(Button); }); it('renders a RightAction if forceShowMorefiltersButton is false and rightPopoverableActions do not fit on the "right action" container', () => { - const connectedFilterControl = mountWithAppProvider( + const connectedFilterControl = mountWithApp( ', () => { , ); - expect(connectedFilterControl.find(Button).exists()).toBe(true); + expect(connectedFilterControl).toContainReactComponent(Button); }); it('does not render a RightAction there are no actions hidden', () => { - const connectedFilterControl = mountWithAppProvider( + const connectedFilterControl = mountWithApp( ', () => { , ); - expect(connectedFilterControl.find(Button).exists()).toBe(false); + expect(connectedFilterControl).not.toContainReactComponent(Button); }); it('renders rightActionMarkup if rightAction is not null', () => { @@ -139,7 +138,7 @@ describe('', () => { }); it('does render a button with a popoverable action', () => { - const connectedFilterControl = mountWithAppProvider( + const connectedFilterControl = mountWithApp( @@ -147,11 +146,11 @@ describe('', () => { , ); - expect(connectedFilterControl.find(Button)).toHaveLength(1); + expect(connectedFilterControl).toContainReactComponentTimes(Button, 1); }); it('renders three buttons with two popoverable actions and a right action', () => { - const connectedFilterControl = mountWithAppProvider( + const connectedFilterControl = mountWithApp( ', () => { , ); - expect(connectedFilterControl.find(Button)).toHaveLength(3); + expect(connectedFilterControl).toContainReactComponentTimes(Button, 3); }); it('hides an action if it does not fit', () => { - const connectedFilterControl = mountWithAppProvider( + const connectedFilterControl = mountWithApp( ', () => { , ); - connectedFilterControl.setState({availableWidth: 100}); + connectedFilterControl.instance.setState({availableWidth: 100}); + + connectedFilterControl.forceUpdate(); - expect(findActions(connectedFilterControl)).toHaveLength(2); + const wrapper = connectedFilterControl.find('div', { + className: styles.Wrapper, + })!; + + expect(wrapper).toContainReactComponentTimes(Button, 2); }); it('renders auxiliary content', () => { - const connectedFilterControl = mountWithAppProvider( + const connectedFilterControl = mountWithApp( }> , ); - expect(connectedFilterControl.find(MockAux).exists()).toBe(true); + expect(connectedFilterControl).toContainReactComponent(MockAux); }); it('only disables activators of inactive rightPopoverableActions', () => { @@ -234,27 +239,26 @@ describe('', () => { }); it('does not render CenterContainer when no child element is "null"', () => { - const connectedFilterControl = mountWithAppProvider( + const connectedFilterControl = mountWithApp( {null}, ); - expect(connectedFilterControl.find('.CenterContainer')).toHaveLength(0); + expect(connectedFilterControl).not.toContainReactComponent('div', { + className: expect.stringContaining('CenterContainer'), + }); }); it('renders CenterContainer when no child element is not "null"', () => { - const connectedFilterControl = mountWithAppProvider( + const connectedFilterControl = mountWithApp( , ); - expect(connectedFilterControl.find('.CenterContainer')).toHaveLength(1); + expect(connectedFilterControl).toContainReactComponentTimes('div', 1, { + className: expect.stringContaining('CenterContainer'), + }); }); }); function noop() {} - -function findActions(wrapper: ReactWrapper) { - // this omits the invisible proxy actions used for measuring width - return wrapper.find('.Wrapper Button'); -} diff --git a/src/components/Popover/components/Pane/tests/Pane.test.tsx b/src/components/Popover/components/Pane/tests/Pane.test.tsx index a696dd7b8b8..db2790c8472 100644 --- a/src/components/Popover/components/Pane/tests/Pane.test.tsx +++ b/src/components/Popover/components/Pane/tests/Pane.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import {TextContainer, Scrollable} from 'components'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {Pane} from '../Pane'; import {Section} from '../../Section'; @@ -15,13 +14,13 @@ describe('', () => { ); - const popoverPane = mountWithAppProvider( + const popoverPane = mountWithApp( , ); - expect(popoverPane.find(Scrollable)).toHaveLength(0); + expect(popoverPane).not.toContainReactComponent(Scrollable); }); it('renders content in a Scrollable when set to false', () => { @@ -31,13 +30,13 @@ describe('', () => { ); - const popoverPane = mountWithAppProvider( + const popoverPane = mountWithApp( , ); - expect(popoverPane.find(Scrollable)).toHaveLength(1); + expect(popoverPane).toContainReactComponentTimes(Scrollable, 1); }); it('renders content in a Scrollable when unset', () => { @@ -47,13 +46,13 @@ describe('', () => { ); - const popoverPane = mountWithAppProvider( + const popoverPane = mountWithApp( , ); - expect(popoverPane.find(Scrollable)).toHaveLength(1); + expect(popoverPane).toContainReactComponentTimes(Scrollable, 1); }); }); @@ -65,13 +64,13 @@ describe('', () => { ); - const popoverPane = mountWithAppProvider( + const popoverPane = mountWithApp( , ); - expect(popoverPane.find(Section)).toHaveLength(1); + expect(popoverPane).toContainReactComponentTimes(Section, 1); }); it('does not render content in a Section when set to false', () => { @@ -81,13 +80,13 @@ describe('', () => { ); - const popoverPane = mountWithAppProvider( + const popoverPane = mountWithApp( , ); - expect(popoverPane.find(Section)).toHaveLength(0); + expect(popoverPane).not.toContainReactComponent(Section); }); it('does not render content in a Section when unset', () => { @@ -97,13 +96,13 @@ describe('', () => { ); - const popoverPane = mountWithAppProvider( + const popoverPane = mountWithApp( , ); - expect(popoverPane.find(Section)).toHaveLength(0); + expect(popoverPane).not.toContainReactComponent(Section); }); }); @@ -116,13 +115,13 @@ describe('', () => { ); - const popoverPane = mountWithAppProvider( + const popoverPane = mountWithApp( , ); - trigger(popoverPane.find(Scrollable).first(), 'onScrolledToBottom'); + popoverPane.find(Scrollable)!.trigger('onScrolledToBottom'); expect(onScrolledToBottom).toHaveBeenCalled(); }); diff --git a/src/components/Popover/components/Section/tests/Section.test.tsx b/src/components/Popover/components/Section/tests/Section.test.tsx index 607d27d8537..5eeb9d1228d 100644 --- a/src/components/Popover/components/Section/tests/Section.test.tsx +++ b/src/components/Popover/components/Section/tests/Section.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/react-testing'; import {TextContainer} from 'components'; import {Section} from '../Section'; @@ -11,12 +10,15 @@ describe('
', () => {

Content

); - const section = mountWithAppProvider(
{children}
); it('renders its children', () => { - expect(section.contains(children)).toBe(true); + const section = mountWithApp(
{children}
); + + expect(section.find(TextContainer)).toContainReactHtml('

Content

'); }); it('renders a div', () => { - expect(section.find('div').exists()).toBe(true); + const section = mountWithApp(
{children}
); + + expect(section).toContainReactComponent('div'); }); }); diff --git a/src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx b/src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx index 9795e34c48a..a2db2abcec5 100644 --- a/src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx +++ b/src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx @@ -1,6 +1,4 @@ import React, {useRef} from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; import {mountWithApp} from 'test-utilities/react-testing'; import {EventListener} from '../../EventListener'; @@ -18,10 +16,10 @@ describe('', () => { describe('render', () => { it('renders the provided children', () => { - const positionedOverlay = mountWithAppProvider( + const positionedOverlay = mountWithApp( , ); - expect(positionedOverlay.text()).toBe('overlay content'); + expect(positionedOverlay).toContainReactText('overlay content'); }); }); @@ -41,7 +39,7 @@ describe('', () => { it('observers the activator', () => { const activator = document.createElement('button'); - mountWithAppProvider( + mountWithApp( ', () => { it('positions above if preferredPosition is given', () => { const spy = jest.fn(); - mountWithAppProvider( + mountWithApp( ', () => { it('positions below if no preferredPosition is given', () => { const spy = jest.fn(); - mountWithAppProvider(); + mountWithApp(); expect(spy).toHaveBeenCalledWith({ activatorRect: {height: 0, left: 0, top: 0, width: 0}, @@ -111,96 +109,98 @@ describe('', () => { describe('preferredAlignment', () => { it('aligns left if preferredAlignment is given', () => { - const positionedOverlay = mountWithAppProvider( + const positionedOverlay = mountWithApp( , ); - expect((positionedOverlay.find('div').prop('style') as any).left).toBe(0); - expect( - (positionedOverlay.find('div').prop('style') as any).right, - ).toBeUndefined(); + expect(positionedOverlay).toContainReactComponent('div', { + style: expect.objectContaining({left: 0, right: undefined}), + }); }); it('aligns right if preferredAlignment is given', () => { - const positionedOverlay = mountWithAppProvider( + const positionedOverlay = mountWithApp( , ); - expect((positionedOverlay.find('div').prop('style') as any).right).toBe( - 0, - ); - expect( - (positionedOverlay.find('div').prop('style') as any).left, - ).toBeUndefined(); + expect(positionedOverlay).toContainReactComponent('div', { + style: expect.objectContaining({left: undefined, right: 0}), + }); }); }); describe('fullWidth', () => { it('is set to full width if fullWidth is true', () => { - const positionedOverlay = mountWithAppProvider( + const positionedOverlay = mountWithApp( , ); - expect((positionedOverlay.find('div').prop('style') as any).width).toBe( - 0, - ); + expect(positionedOverlay).toContainReactComponent('div', { + style: expect.objectContaining({width: 0}), + }); }); }); describe('zIndex', () => { it('is undefined if no state or prop override exist', () => { - const positionedOverlay = mountWithAppProvider( + const positionedOverlay = mountWithApp( , ); - expect( - (positionedOverlay.find('div').prop('style') as any).zIndex, - ).toBeUndefined(); + + expect(positionedOverlay).toContainReactComponent('div', { + style: expect.objectContaining({zIndex: undefined}), + }); }); it('is set to state calculated value if no override prop is given', () => { - const positionedOverlay = mountWithAppProvider( + const positionedOverlay = mountWithApp( , ); - positionedOverlay.setState({zIndex: 200}); - expect((positionedOverlay.find('div').prop('style') as any).zIndex).toBe( - 200, - ); + positionedOverlay.instance.setState({zIndex: 200}); + + positionedOverlay.forceUpdate(); + expect(positionedOverlay).toContainReactComponent('div', { + style: expect.objectContaining({zIndex: 200}), + }); }); it('is set to value of zIndexOverride prop if given', () => { - const positionedOverlay = mountWithAppProvider( + const positionedOverlay = mountWithApp( , ); - positionedOverlay.setState({zIndex: 200}); - expect((positionedOverlay.find('div').prop('style') as any).zIndex).toBe( - 100, - ); + positionedOverlay.instance.setState({zIndex: 200}); + + positionedOverlay.forceUpdate(); + expect(positionedOverlay).toContainReactComponent('div', { + style: expect.objectContaining({zIndex: 100}), + }); }); }); describe('preventInteraction', () => { it('passes preventInteraction to PositionedOverlay when preventInteraction is true', () => { - const positionedOverlay = mountWithAppProvider( + const positionedOverlay = mountWithApp( , ); - expect(positionedOverlay.find('div').prop('className')).toContain( - styles.preventInteraction, - ); + expect(positionedOverlay).toContainReactComponent('div', { + className: expect.stringContaining(styles.preventInteraction), + }); }); it('does not pass preventInteraction to PositionedOverlay by default', () => { - const positionedOverlay = mountWithAppProvider( + const positionedOverlay = mountWithApp( , ); - expect(positionedOverlay.find('div').prop('className')).not.toContain( - styles.preventInteraction, - ); + + expect(positionedOverlay).not.toContainReactComponent('div', { + className: expect.stringContaining(styles.preventInteraction), + }); }); }); describe('lifecycle', () => { it('updates safely', () => { - const positionedOverlay = mountWithAppProvider( + const positionedOverlay = mountWithApp( , ); @@ -210,7 +210,7 @@ describe('', () => { }); it('unmounts safely', () => { - const positionedOverlay = mountWithAppProvider( + const positionedOverlay = mountWithApp( , ); @@ -222,13 +222,12 @@ describe('', () => { describe('', () => { it('sets an event listener for resize', () => { - const positionedOverlay = mountWithAppProvider( + const positionedOverlay = mountWithApp( , ); - expect(positionedOverlay.find(EventListener).exists()).toBe(true); - expect(positionedOverlay.find(EventListener).prop('event')).toBe( - 'resize', - ); + expect(positionedOverlay).toContainReactComponent(EventListener, { + event: 'resize', + }); }); }); @@ -244,7 +243,7 @@ describe('', () => { const input = document.createElement('input'); activator.appendChild(input); - mountWithAppProvider( + mountWithApp( ', () => { const input = document.createElement('input'); activator.appendChild(input); - mountWithAppProvider( + mountWithApp( ', () => { it('allows specific props to pass through properties on the input', () => { - const input = mountWithAppProvider( - , - ).find('input'); - - expect(input.prop('value')).toBe(15); - expect(input.prop('min')).toBe(10); - expect(input.prop('max')).toBe(20); - expect(input.prop('step')).toBe(0.5); - expect(input.prop('disabled')).toBe(true); + const wrapper = mountWithApp(); + + expect(wrapper).toContainReactComponent('input', { + value: 15, + min: 10, + max: 20, + step: 0.5, + disabled: true, + }); }); describe('onChange()', () => { it('is called when the input changes', () => { const onChangeSpy = jest.fn(); const {onChange, ...rest} = mockProps; - const element = mountWithAppProvider( + const element = mountWithApp( , ); - const singleThumb = element.find(SingleThumb); - singleThumb.find('input').simulate('change'); + const input = element.find('input')!; + + input.trigger('onChange', { + currentTarget: input!.domNode as HTMLInputElement, + }); + expect(onChangeSpy).toHaveBeenCalledTimes(1); }); it('is called with a new value', () => { const onChangeSpy = jest.fn(); const {onChange, ...rest} = mockProps; - const element = mountWithAppProvider( + const element = mountWithApp( , ); - const singleThumb = element.find(SingleThumb); - (element.find('input') as any).instance().value = 40; - singleThumb.find('input').simulate('change'); + const input = element.find('input')!; + + (input as any).instance.value = 40; + input!.trigger('onChange', { + currentTarget: input!.domNode as HTMLInputElement, + }); expect(onChangeSpy).toHaveBeenCalledWith(40, 'MyRangeSlider'); }); }); @@ -57,9 +64,11 @@ describe('', () => { describe('onFocus()', () => { it('is called when the input is focused', () => { const onFocusSpy = jest.fn(); - mountWithAppProvider() - .find('input') - .simulate('focus'); + const wrapper = mountWithApp( + , + ); + + wrapper.find('input')!.trigger('onFocus'); expect(onFocusSpy).toHaveBeenCalledTimes(1); }); }); @@ -67,12 +76,11 @@ describe('', () => { describe('onBlur()', () => { it('is called when the input is blurred', () => { const onBlurSpy = jest.fn(); - const element = mountWithAppProvider( + const element = mountWithApp( , ); - element.find('input').simulate('focus'); - element.find('input').simulate('blur'); + element.find('input')!.trigger('onBlur'); expect(onBlurSpy).toHaveBeenCalledTimes(1); }); @@ -80,92 +88,95 @@ describe('', () => { describe('id', () => { it('sets the id on the input', () => { - const id = mountWithAppProvider() - .find('input') - .prop('id'); + const wrapper = mountWithApp(); - expect(id).toBe('MyRangeSlider'); + expect(wrapper).toContainReactComponent('input', {id: 'MyRangeSlider'}); }); }); describe('output', () => { it('connects the input to the output', () => { - const element = mountWithAppProvider( - , - ); - const inputId = element.find('input').prop('id'); + const wrapper = mountWithApp(); + const inputId = wrapper.find('input')!.prop('id'); expect(typeof inputId).toBe('string'); - expect(element.find('output').prop('htmlFor')).toBe(inputId); + + expect(wrapper).toContainReactComponent('output', {htmlFor: inputId}); }); it('contains the value as text', () => { - const element = mountWithAppProvider( - , - ); - const outputText = element.find('output').find('span'); + const wrapper = mountWithApp(); - expect(outputText.text()).toBe('15'); + expect(wrapper.find('output')).toContainReactText('15'); }); }); describe('helpText', () => { it('connects the input to the help text', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - const helpTextID = element.find('input').prop('aria-describedby'); + const helpTextID = element.find('input')!.prop('aria-describedby'); expect(typeof helpTextID).toBe('string'); - expect(element.find(`#${helpTextID}`).text()).toBe('Some help'); + + expect(element.find('div', {id: helpTextID})).toContainReactText( + 'Some help', + ); }); }); describe('error', () => { it('marks the input as invalid', () => { - const element = mountWithAppProvider( + const element = mountWithApp( Invalid} {...mockProps} />, ); - expect(element.find('input').prop('aria-invalid')).toBe(true); + expect(element).toContainReactComponent('input', {'aria-invalid': true}); element.setProps({error: 'Some error'}); - expect(element.find('input').prop('aria-invalid')).toBe(true); + expect(element).toContainReactComponent('input', {'aria-invalid': true}); }); it('connects the input to the error', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - const errorID = element.find('input').prop('aria-describedby'); + const errorID = element.find('input')!.prop('aria-describedby'); expect(typeof errorID).toBe('string'); - expect(element.find(`#${errorID}`).text()).toBe('Some error'); + expect(element).toContainReactComponent(InlineError, { + message: 'Some error', + }); }); it('connects the input to both an error and help text', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); const descriptions = element - .find('input') - .prop('aria-describedby') + .find('input')! + .prop('aria-describedby')! .split(' '); - expect(descriptions).toHaveLength(2); - expect(element.find(`#${descriptions[1]}`).text()).toBe('Some help'); - expect(element.find(`#${descriptions[0]}`).text()).toBe('Some error'); + + expect(element).toContainReactComponent(InlineError, { + message: 'Some error', + }); + expect(element.find('div', {id: descriptions[1]})).toContainReactText( + 'Some help', + ); }); describe('prefix', () => { const text = 'prefix text'; it('outputs the provided prefix element', () => { - const element = mountWithAppProvider( + const element = mountWithApp( {text}

} />, ); - const prefixElement = element.find('p'); + const prefixElement = element.find('p')!; - expect(prefixElement.text()).toBe(text); + expect(prefixElement).toContainReactText(text); }); }); }); @@ -173,18 +184,18 @@ describe('', () => { describe('suffix', () => { const text = 'suffix text'; it('outputs the provided suffix element', () => { - const element = mountWithAppProvider( + const element = mountWithApp( {text}

} />, ); const suffixElement = element.find('p'); - expect(suffixElement.text()).toBe(text); + expect(suffixElement).toContainReactText(text); }); }); describe('CSS custom properties', () => { it('gets set on the parent element', () => { - const element = mountWithAppProvider(); + const element = mountWithApp(); const expected = { '--Polaris-RangeSlider-min': 10, '--Polaris-RangeSlider-max': 20, @@ -192,9 +203,10 @@ describe('', () => { '--Polaris-RangeSlider-progress': '50%', '--Polaris-RangeSlider-output-factor': '0', }; - const actual = element.find('[style]').prop('style'); - expect(expected).toStrictEqual(actual || {}); + expect(element).toContainReactComponent('div', { + style: expect.objectContaining(expected), + }); }); }); @@ -202,52 +214,58 @@ describe('', () => { it('gets adjusted to be at least the min', () => { const value = 9; const min = 10; - const singleThumb = mountWithAppProvider( + const wrapper = mountWithApp( , ); - expect(singleThumb.find('input').prop('value')).toBe(min); + expect(wrapper).toContainReactComponent('input', {value: min}); }); it('gets adjusted to be no more than the max', () => { const value = 101; const max = 100; - const singleThumb = mountWithAppProvider( + const wrapper = mountWithApp( , ); - expect(singleThumb.find('input').prop('value')).toBe(max); + expect(wrapper).toContainReactComponent('input', {value: max}); }); }); describe('aria-valuenow', () => { it('gets passed the value', () => { const value = 15; - const singleThumb = mountWithAppProvider( + const wrapper = mountWithApp( , ); - expect(singleThumb.find('input').prop('aria-valuenow')).toBe(value); + expect(wrapper).toContainReactComponent('input', { + 'aria-valuenow': value, + }); }); it('gets adjusted to be at least the min', () => { const value = 9; const min = 10; - const singleThumb = mountWithAppProvider( + const wrapper = mountWithApp( , ); - expect(singleThumb.find('input').prop('aria-valuenow')).toBe(min); + expect(wrapper).toContainReactComponent('input', { + 'aria-valuenow': min, + }); }); it('gets adjusted to be no more than the max', () => { const value = 101; const max = 100; - const singleThumb = mountWithAppProvider( + const wrapper = mountWithApp( , ); - expect(singleThumb.find('input').prop('aria-valuenow')).toBe(max); + expect(wrapper).toContainReactComponent('input', { + 'aria-valuenow': max, + }); }); }); }); diff --git a/src/components/RangeSlider/tests/RangeSlider.test.tsx b/src/components/RangeSlider/tests/RangeSlider.test.tsx index 8cf8028e4d6..73457e5e059 100644 --- a/src/components/RangeSlider/tests/RangeSlider.test.tsx +++ b/src/components/RangeSlider/tests/RangeSlider.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/react-testing'; import {RangeSlider} from '../RangeSlider'; import {DualThumb, SingleThumb} from '../components'; @@ -13,21 +12,23 @@ const mockRangeSliderProps = { describe('', () => { describe('', () => { it('renders a dual thumb if value is a tuple', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - expect(element.find(DualThumb)).toHaveLength(1); + expect(element).toContainReactComponentTimes(DualThumb, 1); }); it('passes default props to dual thumb', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - const {min, max, step} = element.find(DualThumb).props(); - - expect({min, max, step}).toStrictEqual({min: 0, max: 100, step: 1}); + expect(element).toContainReactComponent(DualThumb, { + min: 0, + max: 100, + step: 1, + }); }); it('passes overrides to default props to dual thumb', () => { @@ -38,7 +39,7 @@ describe('', () => { step: 9, }; - const element = mountWithAppProvider( + const element = mountWithApp( ', () => { />, ); - const {min, max, id, step} = element.find(DualThumb).props(); - - expect({ - min, - max, - step, - id, - }).toStrictEqual(overrideProps); + expect(element).toContainReactComponent(DualThumb, overrideProps); }); it('passes an id to dual thumb', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - expect(element.find(DualThumb).props().id).not.toBeNull(); + expect(element).toContainReactComponent(DualThumb, { + id: expect.anything(), + }); }); }); describe('', () => { it('renders a single thumb if value is a single number', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - expect(element.find(SingleThumb)).toHaveLength(1); + expect(element).toContainReactComponentTimes(SingleThumb, 1); }); it('passes default props to single thumb', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - const {min, max, step} = element.find(SingleThumb).props(); - - expect({min, max, step}).toStrictEqual({min: 0, max: 100, step: 1}); + expect(element).toContainReactComponent(SingleThumb, { + min: 0, + max: 100, + step: 1, + }); }); it('passes an id to single thumb', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - expect(element.find(SingleThumb).props().id).not.toBeNull(); + expect(element).toContainReactComponent(SingleThumb, { + id: expect.anything(), + }); }); it('passes overrides to default props to single thumb', () => { @@ -99,18 +99,11 @@ describe('', () => { step: 9, }; - const element = mountWithAppProvider( + const element = mountWithApp( , ); - const {min, max, id, step} = element.find(SingleThumb).props(); - - expect({ - min, - max, - step, - id, - }).toStrictEqual(overrideProps); + expect(element).toContainReactComponent(SingleThumb, overrideProps); }); }); });