From 3f9c5462bf87fd6acb2e19107bb579cc920479b9 Mon Sep 17 00:00:00 2001 From: Danielle DSouza Date: Wed, 4 Aug 2021 15:46:29 -0400 Subject: [PATCH] Modernize tests --- UNRELEASED.md | 1 + .../components/Day/tests/Day.test.tsx | 30 ++++--- .../components/Month/tests/Month.test.tsx | 46 +++++----- .../components/Weekday/tests/Weekday.test.tsx | 11 +-- .../DatePicker/tests/DatePicker.test.tsx | 85 +++++++++---------- .../tests/DescriptionList.test.tsx | 13 +-- 6 files changed, 93 insertions(+), 93 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 7b4f4dd09b0..6093c4c5402 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -81,5 +81,6 @@ 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 DatePicker, DescriptionList, and DisplayText ([#4360](https://github.com/Shopify/polaris-react/pull/4360)) ### Deprecations diff --git a/src/components/DatePicker/components/Day/tests/Day.test.tsx b/src/components/DatePicker/components/Day/tests/Day.test.tsx index ebb2652f1f9..f2026ea0775 100644 --- a/src/components/DatePicker/components/Day/tests/Day.test.tsx +++ b/src/components/DatePicker/components/Day/tests/Day.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 {Day} from '../Day'; @@ -18,33 +16,37 @@ function MockTable({children}: {children: React.ReactNode}) { describe('', () => { it('renders a button', () => { const currentDay = new Date(2017, 1, 1, 0, 0); - const day = mountWithAppProvider( + const day = mountWithApp( , ); - expect(day.find('button')).toHaveLength(1); + expect(day).toContainReactComponentTimes('button', 1); }); describe('tabIndex', () => { it('sets the tabIndex to 0 if day is today', () => { const currentDay = new Date(); - const day = mountWithAppProvider( + const day = mountWithApp( , ); - expect(day.find('button').prop('tabIndex')).toBe(0); + expect(day).toContainReactComponent('button', { + tabIndex: 0, + }); }); it('sets the tabIndex to -1 if day is disabled', () => { const currentDay = new Date(); - const day = mountWithAppProvider( + const day = mountWithApp( , ); - expect(day.find('button').prop('tabIndex')).toBe(-1); + expect(day).toContainReactComponent('button', { + tabIndex: -1, + }); }); }); @@ -52,7 +54,7 @@ describe('', () => { it('gets called if button is not disabled', () => { const spy = jest.fn(); const currentDay = new Date(); - const day = mountWithAppProvider( + const day = mountWithApp( ', () => { /> , ); - day.find('button').simulate('click'); + day.find('button')!.trigger('onClick'); expect(spy).toHaveBeenCalledTimes(1); }); it('does not get called if button is disabled', () => { const spy = jest.fn(); const currentDay = new Date(); - const day = mountWithAppProvider( + const day = mountWithApp( , ); - day.find('button').simulate('click'); + day.find('button')!.trigger('onClick'); expect(spy).not.toHaveBeenCalled(); }); }); @@ -84,12 +86,12 @@ describe('', () => { it('gets called if button is focused', () => { const spy = jest.fn(); const currentDay = new Date(); - const day = mountWithAppProvider( + const day = mountWithApp( , ); - day.find('button').simulate('focus'); + day.find('button')!.trigger('onFocus'); expect(spy).toHaveBeenCalledTimes(1); }); }); diff --git a/src/components/DatePicker/components/Month/tests/Month.test.tsx b/src/components/DatePicker/components/Month/tests/Month.test.tsx index 0d5a93873f3..b86b142178d 100644 --- a/src/components/DatePicker/components/Month/tests/Month.test.tsx +++ b/src/components/DatePicker/components/Month/tests/Month.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 {Weekday} from '../../Weekday'; @@ -17,11 +15,13 @@ describe('', () => { describe('title', () => { it('passes the label and abbreviated value to Weekday', () => { - const month = mountWithAppProvider( + const month = mountWithApp( , ); - expect(month.find(Weekday).first().prop('title')).toBe('Mo'); - expect(month.find(Weekday).first().prop('label')).toBe('Monday'); + expect(month.findAll(Weekday)[0]).toHaveReactProps({ + title: 'Mo', + label: 'Monday', + }); }); }); @@ -29,31 +29,35 @@ describe('', () => { const currentDay = new Date().getDay(); const currentMonth = new Date().getMonth(); const currentYear = new Date().getFullYear(); - const month = mountWithAppProvider( - , - ); it('passes true to Weekday if month year and weekStartsOn are today', () => { - expect(month.find(Weekday).first().prop('current')).toBe(true); + const month = mountWithApp( + , + ); + expect(month.findAll(Weekday)[0]).toHaveReactProps({ + current: true, + }); }); it('passes false to Weekday if month year and weekStartsOn are not today', () => { - const month = mountWithAppProvider( + const month = mountWithApp( , ); - expect(month.find(Weekday).first().prop('current')).toBe(false); + expect(month.findAll(Weekday)[0]).toHaveReactProps({ + current: false, + }); }); }); describe('with allowRange prop to true', () => { it('range can be created even if start and end have different references', () => { const hoverDate = new Date('05 Jan 2018 00:00:00 GMT'); - const month = mountWithAppProvider( + const month = mountWithApp( ', () => { }} />, ); - - expect(month.find(Day).get(2).props.inHoveringRange).toBeTruthy(); - expect(month.find(Day).get(10).props.inHoveringRange).toBeFalsy(); + const days = month.findAll(Day); + expect(days[1]).toHaveReactProps({inHoveringRange: true}); + expect(days[9]).toHaveReactProps({inHoveringRange: false}); }); }); @@ -105,7 +109,7 @@ describe('', () => { }); }); - it('passes the first accessibility label prefix to day when allowRange is not true & first accessibility label prefix is defined', () => { + it('passes the first accessibility label prefix to day when allowRange is not true & first accessibility label prefix is defined', () => { const accessibilityLabelPrefixes = ['Custom start', 'Custom end'] as [ string, string, diff --git a/src/components/DatePicker/components/Weekday/tests/Weekday.test.tsx b/src/components/DatePicker/components/Weekday/tests/Weekday.test.tsx index 8fdb3b0e9c5..0202148eedb 100644 --- a/src/components/DatePicker/components/Weekday/tests/Weekday.test.tsx +++ b/src/components/DatePicker/components/Weekday/tests/Weekday.test.tsx @@ -1,12 +1,11 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {Weekday} from '../Weekday'; describe('', () => { it('sets the text and label', () => { - const weekday = mountWithAppProvider( + const weekday = mountWithApp( @@ -15,7 +14,9 @@ describe('', () => {
, ); - expect(weekday.text()).toBe('Su'); - expect(weekday.find('th').prop('aria-label')).toBe('Sunday'); + expect(weekday).toContainReactText('Su'); + expect(weekday.find('th'))!.toHaveReactProps({ + 'aria-label': 'Sunday', + }); }); }); diff --git a/src/components/DatePicker/tests/DatePicker.test.tsx b/src/components/DatePicker/tests/DatePicker.test.tsx index 354abf97079..f45913e29c6 100644 --- a/src/components/DatePicker/tests/DatePicker.test.tsx +++ b/src/components/DatePicker/tests/DatePicker.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 {Day, Month, Weekday} from '../components'; @@ -17,12 +15,10 @@ describe('', () => { const defaultProps = {month, year}; it('renders Sunday as first day of the week by default', () => { - const datePicker = mountWithAppProvider( - , - ); + const datePicker = mountWithApp(); const weekday = datePicker.find(Weekday); - expect(weekday.first().text()).toStrictEqual('Su'); + expect(weekday).toContainReactText('Su'); }); describe('accessibility label', () => { @@ -53,66 +49,64 @@ describe('', () => { describe('when weekStartsOn is passed', () => { it('renders Monday as first day of the week', () => { - const datePicker = mountWithAppProvider( + const datePicker = mountWithApp( , ); const weekday = datePicker.find(Weekday); - expect(weekday.first().text()).toStrictEqual('Mo'); + expect(weekday).toContainReactText('Mo'); }); it('renders Saturday as first day of the week', () => { - const datePicker = mountWithAppProvider( + const datePicker = mountWithApp( , ); const weekday = datePicker.find(Weekday); - expect(weekday.first().text()).toStrictEqual('Sa'); + expect(weekday).toContainReactText('Sa'); }); }); describe('month', () => { it('passes the month value to Month', () => { - const datePicker = mountWithAppProvider( - , - ); + const datePicker = mountWithApp(); const month = datePicker.find(Month); - expect(month.prop('month')).toStrictEqual(1); + expect(month).toHaveReactProps({ + month: 1, + }); }); }); describe('year', () => { it('passes the year value to Month', () => { - const datePicker = mountWithAppProvider( - , - ); + const datePicker = mountWithApp(); const year = datePicker.find(Month); - expect(year.prop('year')).toStrictEqual(2016); + expect(year).toHaveReactProps({ + year: 2016, + }); }); }); describe('multiMonth', () => { it('shows a second month when true', () => { - const datePicker = mountWithAppProvider( + const datePicker = mountWithApp( , ); - expect(datePicker.find(Month)).toHaveLength(2); + expect(datePicker.findAll(Month)).toHaveLength(2); }); it('shows only one month when false', () => { - const datePicker = mountWithAppProvider( - , - ); - expect(datePicker.find(Month)).toHaveLength(1); + const datePicker = mountWithApp(); + expect(datePicker.findAll(Month)).toHaveLength(1); }); }); describe('onChange()', () => { it('is called when Day datePicker is clicked', () => { const spy = jest.fn(); - const datePicker = mountWithAppProvider( + const datePicker = mountWithApp( ', () => { weekStartsOn={0} />, ); - const day = datePicker.find(Day); - day.first().find('button').simulate('click'); + const day = datePicker.findAll(Day); + day[0].find('button')!.trigger('onClick'); expect(spy).toHaveBeenCalled(); }); it('does not submit an enclosing form', () => { const spy = jest.fn(); - const datePicker = mountWithAppProvider( + const datePicker = mountWithApp(
, ); - const day = datePicker.find(Day); - day.first().simulate('click'); + datePicker.findAll(Day)[1]!.trigger('onClick'); expect(spy).not.toHaveBeenCalled(); }); }); describe('focusDate', () => { it('passes the focused month value to Month if day has focus', () => { - const datePicker = mountWithAppProvider( - , - ); + const datePicker = mountWithApp(); const dateObject = new Date('2018-04-01T00:00:00'); - datePicker.find(Day).first().find('button').simulate('focus'); - expect(datePicker.find(Month).prop('focusedDate')).toStrictEqual( - dateObject, - ); + datePicker.findAll(Day)[0]!.find('button')!.trigger('onFocus'); + expect(datePicker).toContainReactComponent(Month, { + focusedDate: dateObject, + }); }); }); describe('id', () => { it('is passed down to the first child', () => { const id = 'MyID'; - const datePicker = mountWithAppProvider( + const datePicker = mountWithApp( , ); - expect(datePicker.childAt(0).prop('id')).toBe(id); + expect(datePicker.find('div'))!.toHaveReactProps({ + id, + }); }); }); @@ -175,7 +168,7 @@ describe('', () => { const month = 0; const year = 2017; - const datePicker = mountWithAppProvider( + const datePicker = mountWithApp( ', () => { />, ); - datePicker.find(Day).find('button').first().simulate('click'); + datePicker.find(Day)!.find('button')!.trigger('onClick'); - expect(datePicker.find(Day).first().prop('focused')).toBe(true); + expect(datePicker.find(Day)).toHaveReactProps({ + focused: true, + }); - datePicker.setProps({selected: new Date(2016, 11, 8)}).update(); + datePicker.setProps({selected: new Date(2016, 11, 8)}); - expect(datePicker.find(Day).first().prop('focused')).toBe(false); + expect(datePicker.find(Day)).toHaveReactProps({ + focused: false, + }); }); it('passes isLastSelectedDay to Day when there is a range', () => { diff --git a/src/components/DescriptionList/tests/DescriptionList.test.tsx b/src/components/DescriptionList/tests/DescriptionList.test.tsx index ea96d01d68a..ba243d61902 100644 --- a/src/components/DescriptionList/tests/DescriptionList.test.tsx +++ b/src/components/DescriptionList/tests/DescriptionList.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 {DescriptionList} from '../DescriptionList'; @@ -21,14 +20,10 @@ describe('', () => { }, ]; - const descriptionList = mountWithAppProvider( - , - ); + const descriptionList = mountWithApp(); - expect(descriptionList.find('dt').first().contains('Term 1')).toBe(true); + expect(descriptionList.find('dt')).toContainReactText('Term 1'); - expect(descriptionList.find('dd').first().contains('Description 1')).toBe( - true, - ); + expect(descriptionList.find('dd')).toContainReactText('Description 1'); }); });