From 6a9c61b181637934db37f7f4be3c10737df0c0d2 Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Wed, 25 Aug 2021 15:13:45 -0400 Subject: [PATCH 1/3] Modernized tests for FilterControl, FilterCreator, FilterValueSelector, and DateSelector --- UNRELEASED.md | 1 + .../DateSelector/tests/DateSelector.test.tsx | 192 +++++++++-------- .../tests/FilterCreator.test.tsx | 195 +++++++---------- .../tests/FilterValueSelector.test.tsx | 152 +++++++------- .../tests/FilterControl.test.tsx | 196 +++++++++--------- 5 files changed, 355 insertions(+), 381 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 1d46baf2d3c..ae231d6ef7c 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -76,5 +76,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for Modal ([#4433](https://github.com/Shopify/polaris-react/pull/4433)) - Modernized tests for Navigation and Navigation.Section ([#4440](https://github.com/Shopify/polaris-react/pull/4440)) - Modernized tests for EmptyState component ([#4427](https://github.com/Shopify/polaris-react/pull/4427)) +- Modernized tests for FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#](https://github.com/Shopify/polaris-react/pull/)) ### Deprecations diff --git a/src/components/ResourceList/components/FilterControl/components/DateSelector/tests/DateSelector.test.tsx b/src/components/ResourceList/components/FilterControl/components/DateSelector/tests/DateSelector.test.tsx index d3c0ddf9c28..516d65911e2 100644 --- a/src/components/ResourceList/components/FilterControl/components/DateSelector/tests/DateSelector.test.tsx +++ b/src/components/ResourceList/components/FilterControl/components/DateSelector/tests/DateSelector.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import {DatePicker, Select, TextField} from 'components'; -// eslint-disable-next-line no-restricted-imports -import {trigger, mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import { DateSelector, @@ -62,50 +61,48 @@ describe('', () => { describe('dateOptionType', () => { it('builds date filters Select options for past option type', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); const expectOptionValues = dateOptionType.past; expect( - getOptionsValuesList(wrapper.find(Select).prop('options')), + getOptionsValuesList(wrapper.find(Select)!.prop('options')), ).toStrictEqual(expectOptionValues); }); it('builds date filters Select options for future option type', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); const expectOptionValues = dateOptionType.future; expect( - getOptionsValuesList(wrapper.find(Select).prop('options')), + getOptionsValuesList(wrapper.find(Select)!.prop('options')), ).toStrictEqual(expectOptionValues); }); it('builds date filters Select options for full option type', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); const expectOptionValues = dateOptionType.full; expect( - getOptionsValuesList(wrapper.find(Select).prop('options')), + getOptionsValuesList(wrapper.find(Select)!.prop('options')), ).toStrictEqual(expectOptionValues); }); it('defaults to full date filters Select options when option type is missing', () => { - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); const expectOptionValues = dateOptionType.full; expect( - getOptionsValuesList(wrapper.find(Select).prop('options')), + getOptionsValuesList(wrapper.find(Select)!.prop('options')), ).toStrictEqual(expectOptionValues); }); }); @@ -114,49 +111,51 @@ describe('', () => { it('sets option in date filters Select', () => { const dateFilterValue = DateFilterOption.PastMonth; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - expect(wrapper.find(Select).prop('value')).toBe(dateFilterValue); + expect(wrapper).toContainReactComponent(Select, { + value: dateFilterValue, + }); }); it('displays DatePicker when filterValue is filter with minimum date predicate (on or after)', () => { const dateFilterValue = DateFilterOption.OnOrAfter; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - expect(wrapper.find(DatePicker).exists()).toBe(true); + expect(wrapper).toContainReactComponent(DatePicker); }); it('displays DatePicker when filterValue is filter with maximum date predicate (on or before)', () => { const dateFilterValue = DateFilterOption.OnOrBefore; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - expect(wrapper.find(DatePicker).exists()).toBe(true); + expect(wrapper).toContainReactComponent(DatePicker); }); it('does not display DatePicker when filterValue is filter without date predicate', () => { const dateFilterValue = DateFilterOption.PastMonth; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - expect(wrapper.find(DatePicker).exists()).toBe(false); + expect(wrapper).not.toContainReactComponent(DatePicker); }); it('is used to calculate dateFilterOption and gets passed to Select as value', () => { const filterValue = 'filter value'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - expect(wrapper.find(Select).prop('value')).toBe(filterValue); + expect(wrapper).toContainReactComponent(Select, {value: filterValue}); }); }); @@ -165,7 +164,7 @@ describe('', () => { const filterValue = 'filter value'; const filterKey = 'before'; const filterMaxKey = 'before'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { filterMaxKey={filterMaxKey} />, ); - expect(wrapper.find(Select).prop('value')).toBe('on_or_before'); + expect(wrapper).toContainReactComponent(Select, {value: 'on_or_before'}); }); }); @@ -184,18 +183,18 @@ describe('', () => { const timezoneOffsetInHours = Math.abs(timezoneOffset / 60); getTimezoneOffset.mockImplementation(() => timezoneOffset); - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - trigger(wrapper.find(TextField), 'onChange', nextUserInputDate); - trigger(wrapper.find(TextField), 'onBlur'); + wrapper.find(TextField)!.trigger('onChange', nextUserInputDate); + wrapper.find(TextField)!.trigger('onBlur'); - const selectedDate = wrapper.find(DatePicker).prop('selected') as Date; - const selectedInputDate = wrapper.find(TextField).prop('value'); + const selectedDate = wrapper.find(DatePicker)!.prop('selected') as Date; + const selectedInputDate = wrapper.find(TextField)!.prop('value'); expect(selectedDate.toISOString()).toBe( `2019-01-01T0${timezoneOffsetInHours}:00:00.000Z`, @@ -207,18 +206,18 @@ describe('', () => { const nextUserInputDate = '2019-01-01'; getTimezoneOffset.mockImplementation(() => -720); - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - trigger(wrapper.find(TextField), 'onChange', nextUserInputDate); - trigger(wrapper.find(TextField), 'onBlur'); + wrapper.find(TextField)!.trigger('onChange', nextUserInputDate); + wrapper.find(TextField)!.trigger('onBlur'); - const selectedDate = wrapper.find(DatePicker).prop('selected') as Date; - const selectedInputDate = wrapper.find(TextField).prop('value'); + const selectedDate = wrapper.find(DatePicker)!.prop('selected') as Date; + const selectedInputDate = wrapper.find(TextField)!.prop('value'); expect(selectedDate.toISOString()).toContain(nextUserInputDate); expect(selectedInputDate).toBe(nextUserInputDate); @@ -230,18 +229,18 @@ describe('', () => { const timezoneOffsetInHours = Math.abs(timezoneOffset / 60); getTimezoneOffset.mockImplementation(() => timezoneOffset); - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - trigger(wrapper.find(TextField), 'onChange', nextUserInputDate); - trigger(wrapper.find(TextField), 'onBlur'); + wrapper.find(TextField)!.trigger('onChange', nextUserInputDate); + wrapper.find(TextField)!.trigger('onBlur'); - const selectedDate = wrapper.find(DatePicker).prop('selected') as Date; - const selectedInputDate = wrapper.find(TextField).prop('value'); + const selectedDate = wrapper.find(DatePicker)!.prop('selected') as Date; + const selectedInputDate = wrapper.find(TextField)!.prop('value'); expect(selectedDate.toISOString()).toBe( `2019-01-01T0${timezoneOffsetInHours}:00:00.000Z`, @@ -255,7 +254,7 @@ describe('', () => { const filterValue = 'filter value'; const filterKey = 'after'; const filterMinKey = 'after'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { filterMinKey={filterMinKey} />, ); - expect(wrapper.find(Select).prop('value')).toBe('on_or_after'); + expect(wrapper).toContainReactComponent(Select, {value: 'on_or_after'}); }); }); @@ -272,14 +271,14 @@ describe('', () => { const onFilterValueChangeSpy = jest.fn(); const newDateFilter = DateFilterOption.PastMonth; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - trigger(wrapper.find(Select), 'onChange', newDateFilter); + wrapper.find(Select)!.trigger('onChange', newDateFilter); expect(onFilterValueChangeSpy).toHaveBeenCalledWith(newDateFilter); }); @@ -288,14 +287,14 @@ describe('', () => { const onFilterValueChangeSpy = jest.fn(); const newDateFilter = DateFilterOption.OnOrAfter; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - trigger(wrapper.find(Select), 'onChange', newDateFilter); + wrapper.find(Select)!.trigger('onChange', newDateFilter); expect(onFilterValueChangeSpy).toHaveBeenCalledWith(undefined); }); @@ -304,14 +303,14 @@ describe('', () => { const onFilterValueChangeSpy = jest.fn(); const newDateFilter = DateFilterOption.OnOrBefore; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - trigger(wrapper.find(Select), 'onChange', newDateFilter); + wrapper.find(Select)!.trigger('onChange', newDateFilter); expect(onFilterValueChangeSpy).toHaveBeenCalledWith(undefined); }); @@ -321,7 +320,7 @@ describe('', () => { const newDateFilter = DateFilterOption.OnOrAfter; const date = '2019-05-28'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - trigger(wrapper.find(DatePicker), 'onChange', {end: new Date(date)}); - trigger(wrapper.find(Select), 'onChange', newDateFilter); + wrapper.find(DatePicker)!.trigger('onChange', {end: new Date(date)}); + wrapper.find(Select)!.trigger('onChange', newDateFilter); expect(onFilterValueChangeSpy).toHaveBeenCalledWith('2019-05-28'); }); @@ -340,7 +339,7 @@ describe('', () => { const newDateFilter = DateFilterOption.OnOrBefore; const date = '2019-05-28'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - trigger(wrapper.find(DatePicker), 'onChange', {end: new Date(date)}); - trigger(wrapper.find(Select), 'onChange', newDateFilter); + wrapper.find(DatePicker)!.trigger('onChange', {end: new Date(date)}); + wrapper.find(Select)!.trigger('onChange', newDateFilter); expect(onFilterValueChangeSpy).toHaveBeenCalledWith('2019-05-28'); }); @@ -359,7 +358,7 @@ describe('', () => { const dateFilter = DateFilterOption.OnOrBefore; const date = '2019-05-28'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - trigger(wrapper.find(DatePicker), 'onChange', {end: new Date(date)}); + wrapper.find(DatePicker)!.trigger('onChange', {end: new Date(date)}); expect(onFilterValueChangeSpy).toHaveBeenCalledWith('2019-05-28'); }); @@ -377,7 +376,7 @@ describe('', () => { const dateFilter = DateFilterOption.OnOrBefore; const date = '2019-08-22'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - trigger(wrapper.find(TextField), 'onChange', date); - trigger(wrapper.find(TextField), 'onBlur'); + wrapper.find(TextField)!.trigger('onChange', date); + wrapper.find(TextField)!.trigger('onBlur'); expect(onFilterValueChangeSpy).toHaveBeenCalledWith(date); }); @@ -396,7 +395,7 @@ describe('', () => { const dateFilter = DateFilterOption.OnOrBefore; const invalidDate = '2019/08/22'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - trigger(wrapper.find(TextField), 'onChange', invalidDate); - trigger(wrapper.find(TextField), 'onBlur'); + wrapper.find(TextField)!.trigger('onChange', invalidDate); + wrapper.find(TextField)!.trigger('onBlur'); expect(onFilterValueChangeSpy).toHaveBeenCalledWith(undefined); }); @@ -416,7 +415,7 @@ describe('', () => { const onFilterKeyChangeSpy = jest.fn(); const initialConsumerFilterKey = 'starts'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - trigger(wrapper.find(Select), 'onChange', DateFilterOption.PastMonth); + wrapper.find(Select)!.trigger('onChange', DateFilterOption.PastMonth); expect(onFilterKeyChangeSpy).toHaveBeenCalledWith( initialConsumerFilterKey, @@ -435,7 +434,7 @@ describe('', () => { const onFilterKeyChangeSpy = jest.fn(); const filterMaxKey = 'starts_max'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - trigger(wrapper.find(Select), 'onChange', DateFilterOption.OnOrBefore); + wrapper.find(Select)!.trigger('onChange', DateFilterOption.OnOrBefore); expect(onFilterKeyChangeSpy).toHaveBeenCalledWith(filterMaxKey); }); @@ -452,7 +451,7 @@ describe('', () => { const onFilterKeyChangeSpy = jest.fn(); const filterMinKey = 'starts_min'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - trigger(wrapper.find(Select), 'onChange', DateFilterOption.OnOrAfter); + wrapper.find(Select)!.trigger('onChange', DateFilterOption.OnOrAfter); expect(onFilterKeyChangeSpy).toHaveBeenCalledWith(filterMinKey); }); }); it('resets date in DatePicker when user removes date in TextField', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - trigger(wrapper.find(TextField), 'onChange', ''); - - expect(wrapper.find(DatePicker).prop('selected')).toBeUndefined(); + wrapper.find(TextField)!.trigger('onChange', ''); + expect(wrapper).toContainReactComponent(DatePicker, {selected: undefined}); }); it('updates selected date in DatePicker when user enters a valid date in TextField and field is blurred', () => { const validUserInputDate = '2020-08-30'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - trigger(wrapper.find(TextField), 'onChange', validUserInputDate); - trigger(wrapper.find(TextField), 'onBlur'); + wrapper.find(TextField)!.trigger('onChange', validUserInputDate); + wrapper.find(TextField)!.trigger('onBlur'); - const selectedDate = wrapper.find(DatePicker).prop('selected') as Date; + const selectedDate = wrapper.find(DatePicker)!.prop('selected') as Date; expect(selectedDate.toISOString()).toContain(validUserInputDate); }); it('does not update selected date in DatePicker when user enters an invalid date in TextField and field is blurred', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - trigger(wrapper.find(TextField), 'onChange', 'INVALID'); - trigger(wrapper.find(TextField), 'onBlur'); + wrapper.find(TextField)!.trigger('onChange', 'INVALID'); + wrapper.find(TextField)!.trigger('onBlur'); - expect(wrapper.find(DatePicker).prop('selected')).toBeUndefined(); + expect(wrapper).toContainReactComponent(DatePicker, {selected: undefined}); }); it('resets selected date in DatePicker when user enters an invalid date in TextField and field is blurred', () => { const invalidUserInputDate = '08/20/2020'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - trigger(wrapper.find(TextField), 'onChange', invalidUserInputDate); - trigger(wrapper.find(TextField), 'onBlur'); + wrapper.find(TextField)!.trigger('onChange', invalidUserInputDate); + wrapper.find(TextField)!.trigger('onBlur'); - expect(wrapper.find(DatePicker).prop('selected')).toBeUndefined(); + expect(wrapper).toContainReactComponent(DatePicker, {selected: undefined}); }); it('removes date field error when invalid date is replaced by valid date in TextField', () => { const validUserInputDate = '2020-08-30'; const invalidUserInputDate = '08/30/2020'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - trigger(wrapper.find(TextField), 'onChange', invalidUserInputDate); - trigger(wrapper.find(TextField), 'onBlur'); + wrapper.find(TextField)!.trigger('onChange', invalidUserInputDate); + wrapper.find(TextField)!.trigger('onBlur'); - trigger(wrapper.find(TextField), 'onChange', validUserInputDate); + wrapper.find(TextField)!.trigger('onChange', validUserInputDate); - expect(wrapper.find(TextField).prop('error')).toBeUndefined(); + expect(wrapper).toContainReactComponent(TextField, {error: undefined}); }); it('removes date field error when new date is selected in DatePicker', () => { const invalidUserInputDate = '08/30/2020'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - trigger(wrapper.find(TextField), 'onChange', invalidUserInputDate); - trigger(wrapper.find(TextField), 'onBlur'); + wrapper.find(TextField)!.trigger('onChange', invalidUserInputDate); + wrapper.find(TextField)!.trigger('onBlur'); - trigger(wrapper.find(DatePicker), 'onChange', {end: new Date()}); + wrapper.find(DatePicker)!.trigger('onChange', {end: new Date()}); - expect(wrapper.find(TextField).prop('error')).toBeUndefined(); + expect(wrapper).toContainReactComponent(TextField, {error: undefined}); }); it('does not display error when date is added in date filed by DatePicker and date field is blurred', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - trigger(wrapper.find(DatePicker), 'onChange', {end: new Date()}); - trigger(wrapper.find(TextField), 'onBlur'); + wrapper.find(DatePicker)!.trigger('onChange', {end: new Date()}); + wrapper.find(TextField)!.trigger('onBlur'); - expect(wrapper.find(TextField).prop('error')).toBeUndefined(); + expect(wrapper.find(TextField)!.prop('error')).toBeUndefined(); }); function getOptionsValuesList(options?: any) { diff --git a/src/components/ResourceList/components/FilterControl/components/FilterCreator/tests/FilterCreator.test.tsx b/src/components/ResourceList/components/FilterControl/components/FilterCreator/tests/FilterCreator.test.tsx index 1978318801d..f2aea60a3ce 100644 --- a/src/components/ResourceList/components/FilterControl/components/FilterCreator/tests/FilterCreator.test.tsx +++ b/src/components/ResourceList/components/FilterControl/components/FilterCreator/tests/FilterCreator.test.tsx @@ -1,13 +1,7 @@ import React from 'react'; import {mountWithApp} from 'test-utilities'; -// eslint-disable-next-line no-restricted-imports -import { - trigger, - findByTestID, - mountWithAppProvider, - ReactWrapper, -} from 'test-utilities/legacy'; -import {Button, Select, Popover} from 'components'; +import type {CustomRoot} from '@shopify/react-testing'; +import {Button, Select, Popover, Form} from 'components'; import {FilterCreator, FilterCreatorProps} from '../FilterCreator'; import {FilterValueSelector} from '../../FilterValueSelector'; @@ -115,38 +109,33 @@ describe('', () => { }); it('renders just a button by default', () => { - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); - expect( - findByTestID(wrapper, 'FilterCreator-FilterActivator').exists(), - ).toBe(true); - expect(wrapper.find(Button)).toHaveLength(1); + expect(wrapper).toContainReactComponentTimes(Button, 1); + expect(wrapper).toContainReactComponent(Button, {disclosure: true}); + // expect(wrapper.find(Button)).toHaveLength(1); }); it('renders a non-active popover on default', () => { - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); - expect(wrapper.find(Popover).prop('active')).toBe(false); + expect(wrapper).toContainReactComponent(Popover, {active: false}); }); it('renders a active popover with a Select on click of the activator button', () => { - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); activatePopover(wrapper); - expect(wrapper.find(Popover).prop('active')).toBe(true); - expect(findFilterKeySelect(wrapper).exists()).toBe(true); + expect(wrapper).toContainReactComponent(Popover, {active: true}); + // expect(findFilterKeySelect(wrapper).exists()).toBe(true); + + expect(wrapper.find(Popover)).toContainReactComponent(Select); }); it('renders a non-active popover after add filter button was clicked and onAddFilter was triggered', () => { const onAddFilter = jest.fn(); - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); @@ -156,12 +145,12 @@ describe('', () => { clickAddFilter(wrapper); expect(onAddFilter).toHaveBeenCalled(); - expect(wrapper.find(Popover).prop('active')).toBe(false); + expect(wrapper).toContainReactComponent(Popover, {active: false}); }); - it('does not renders FilterValueSelector after add filter button was clicked', () => { + it('does not render FilterValueSelector after add filter button was clicked', () => { const onAddFilter = jest.fn(); - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); @@ -169,92 +158,85 @@ describe('', () => { selectFilterKey(wrapper, mockDefaultProps.filters[0].key); selectFilterValue(wrapper, 'Bundle'); - expect(wrapper.find(FilterValueSelector).exists()).toBe(true); + expect(wrapper).toContainReactComponent(FilterValueSelector); clickAddFilter(wrapper); - expect(wrapper.find(FilterValueSelector).exists()).toBe(false); + expect(wrapper).not.toContainReactComponent(FilterValueSelector); }); it('renders Select with no value after add filter button was clicked', () => { const onAddFilter = jest.fn(); - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); activatePopover(wrapper); selectFilterKey(wrapper, mockDefaultProps.filters[0].key); selectFilterValue(wrapper, 'Bundle'); - - expect(wrapper.find(Select).at(0).prop('value')).toBeDefined(); + const select = wrapper.findAll(Select)[0]; + expect(select.prop('value')).toBeDefined(); clickAddFilter(wrapper); - expect(wrapper.find(Select).at(0).prop('value')).toBeUndefined(); + expect(wrapper).toContainReactComponent(Select, {value: undefined}); }); describe('filters', () => { it('sets the options when popover is active', () => { - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); activatePopover(wrapper); - - expect(findFilterKeySelect(wrapper).prop('options')).toMatchObject([ - { - value: mockDefaultProps.filters[0].key, - label: mockDefaultProps.filters[0].label, - }, - { - value: mockDefaultProps.filters[1].key, - label: mockDefaultProps.filters[1].label, - }, - { - value: mockDefaultProps.filters[2].key, - label: mockDefaultProps.filters[2].label, - }, - ]); + expect(wrapper.find(Popover)).toContainReactComponent(Select, { + options: [ + { + value: mockDefaultProps.filters[0].key, + label: mockDefaultProps.filters[0].label, + }, + { + value: mockDefaultProps.filters[1].key, + label: mockDefaultProps.filters[1].label, + }, + { + value: mockDefaultProps.filters[2].key, + label: mockDefaultProps.filters[2].label, + }, + ], + }); }); }); describe('', () => { it('does not render by default', () => { - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); activatePopover(wrapper); - expect(wrapper.find(FilterValueSelector).exists()).toBe(false); + expect(wrapper).not.toContainReactComponent(FilterValueSelector); }); it('updates FilterValueSelector when user selects a filter key', () => { - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); activatePopover(wrapper); selectFilterKey(wrapper, mockDefaultProps.filters[1].key); - expect(wrapper.find(FilterValueSelector).prop('filter')).toMatchObject( - mockDefaultProps.filters[1], - ); - expect(wrapper.find(FilterValueSelector).prop('value')).toBeUndefined(); + expect(wrapper).toContainReactComponent(FilterValueSelector, { + filter: mockDefaultProps.filters[1], + value: undefined, + }); }); it('updates value with provided string when user selects a filter value', () => { - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); activatePopover(wrapper); selectFilterKey(wrapper, mockDefaultProps.filters[0].key); selectFilterValue(wrapper, 'Bundle'); - expect(wrapper.find(FilterValueSelector).prop('value')).toBe('Bundle'); + expect(wrapper).toContainReactComponent(FilterValueSelector, { + value: 'Bundle', + }); }); it('updates FilterValueSelector when filter key is updated to existing operator key', () => { - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); const newOperatorKey = 'times_used_max'; @@ -262,68 +244,59 @@ describe('', () => { selectFilterKey(wrapper, mockDefaultProps.filters[2].key); selectFilterValue(wrapper, 'Bundle'); - trigger( - wrapper.find(FilterValueSelector), - 'onFilterKeyChange', - newOperatorKey, - ); + wrapper + .find(FilterValueSelector)! + .trigger('onFilterKeyChange', newOperatorKey); - expect(wrapper.find(FilterValueSelector).prop('filterKey')).toBe( - newOperatorKey, - ); + expect(wrapper).toContainReactComponent(FilterValueSelector, { + filterKey: newOperatorKey, + }); }); }); describe('filter add button', () => { it('is enabled when filter key and filter value are both selected', () => { - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); activatePopover(wrapper); selectFilterKey(wrapper, mockDefaultProps.filters[0].key); selectFilterValue(wrapper, 'Bundle'); - expect( - findByTestID(wrapper, 'FilterCreator-AddFilterButton').prop('disabled'), - ).toBe(false); + expect(wrapper.find(Form)).toContainReactComponent(Button, { + disabled: false, + }); }); it('is disabled when filter key and value are not selected', () => { - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); activatePopover(wrapper); selectFilterKey(wrapper, mockDefaultProps.filters[0].key); - expect( - findByTestID(wrapper, 'FilterCreator-AddFilterButton').prop('disabled'), - ).toBe(true); + expect(wrapper.find(Form)).toContainReactComponent(Button, { + disabled: true, + }); }); it('is disabled when filter value is an empty string', () => { - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); activatePopover(wrapper); selectFilterKey(wrapper, mockDefaultProps.filters[0].key); selectFilterValue(wrapper, ''); - expect( - findByTestID(wrapper, 'FilterCreator-AddFilterButton').prop('disabled'), - ).toBe(true); + expect(wrapper.find(Form)).toContainReactComponent(Button, { + disabled: true, + }); }); }); describe('onAddFilter', () => { it('gets call with selected filter key & value when both value are valid and add filter button was clicked', () => { const onAddFilter = jest.fn(); - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); - activatePopover(wrapper); selectFilterKey(wrapper, mockDefaultProps.filters[0].key); selectFilterValue(wrapper, 'Bundle'); @@ -337,28 +310,18 @@ describe('', () => { }); }); -function activatePopover(wrapper: ReactWrapper) { - trigger(findByTestID(wrapper, 'FilterCreator-FilterActivator'), 'onClick'); -} - -function findFilterKeySelect(popover: ReactWrapper) { - return popover.find(Select); +function activatePopover(wrapper: CustomRoot) { + wrapper.find(Button, {disclosure: true})!.trigger('onClick'); } -function selectFilterKey( - wrapper: ReactWrapper, - filterKey: string, -) { - trigger(wrapper.find(Select), 'onChange', filterKey); +function selectFilterKey(wrapper: CustomRoot, filterKey: string) { + wrapper.find(Select)!.trigger('onChange', filterKey); } -function selectFilterValue( - wrapper: ReactWrapper, - filterValue: string, -) { - trigger(wrapper.find(FilterValueSelector), 'onChange', filterValue); +function selectFilterValue(wrapper: CustomRoot, filterValue: string) { + wrapper.find(FilterValueSelector)!.trigger('onChange', filterValue); } -function clickAddFilter(wrapper: ReactWrapper) { - trigger(findByTestID(wrapper, 'FilterCreator-AddFilterButton'), 'onClick'); +function clickAddFilter(wrapper: CustomRoot) { + wrapper.find(Form)?.find(Button)!.trigger('onClick'); } diff --git a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/tests/FilterValueSelector.test.tsx b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/tests/FilterValueSelector.test.tsx index bdfa10bac1c..75d1c73ae47 100644 --- a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/tests/FilterValueSelector.test.tsx +++ b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/tests/FilterValueSelector.test.tsx @@ -1,6 +1,5 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {trigger, mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {Select, TextField} from 'components'; import {FilterValueSelector} from '../FilterValueSelector'; @@ -53,7 +52,7 @@ describe('', () => { }; it('renders a Select field', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const select = wrapper.find(Select); - expect(select.exists()).toBe(true); + expect(wrapper).toContainReactComponent(Select); }); it('renders label using operatorText when it is a string', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const select = wrapper.find(Select); - expect(select.prop('label')).toBe(filter.operatorText); + expect(wrapper).toContainReactComponent(Select, { + label: filter.operatorText, + }); }); it('renders a Select with options using operatorText when it is a list of operators', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { const expectedOptions = getOptionsListForOperators(operators); - const operatorsSelect = wrapper.find(Select).first(); - expect(operatorsSelect.prop('options')).toStrictEqual(expectedOptions); + expect(wrapper).toContainReactComponent(Select, { + options: expectedOptions, + }); }); it('renders value using the value prop', () => { const value = 'test'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const select = wrapper.find(Select); - expect(select.prop('value')).toBe(value); + // const select = wrapper.find(Select); + // expect(select.prop('value')).toBe(value); + expect(wrapper).toContainReactComponent(Select, {value}); }); it('calls onChange when the Select was changed', () => { const onChange = jest.fn(); - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - trigger(wrapper.find(Select), 'onChange'); + wrapper.find(Select)?.trigger('onChange'); expect(onChange).toHaveBeenCalled(); }); @@ -126,7 +127,7 @@ describe('', () => { const onFilterKeyChangeSpy = jest.fn(); const newOperator = operators[1].key; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const operatorsSelect = wrapper.find(Select).first(); - trigger(operatorsSelect, 'onChange', newOperator); + const operatorsSelect = wrapper.findAll(Select)[0]; + operatorsSelect.trigger('onChange', newOperator); expect(onFilterKeyChangeSpy).toHaveBeenCalledWith(newOperator); }); @@ -144,7 +145,7 @@ describe('', () => { const onChangeSpy = jest.fn(); const newFilterValue = 'foo'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const filterValueSelect = wrapper.find(Select).at(1); - trigger(filterValueSelect, 'onChange', newFilterValue); + const selects = wrapper.findAll(Select); - const operatorsSelect = wrapper.find(Select).first(); - trigger(operatorsSelect, 'onChange', operators[1].key); + const filterValueSelect = selects[1]; + filterValueSelect.trigger('onChange', newFilterValue); + + const operatorsSelect = selects[0]; + operatorsSelect.trigger('onChange', operators[1].key); expect(onChangeSpy).toHaveBeenCalledWith(newFilterValue); }); @@ -170,7 +173,7 @@ describe('', () => { }; it('renders a TextField', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const textField = wrapper.find(TextField); - expect(textField.exists()).toBe(true); + expect(wrapper).toContainReactComponent(TextField); }); it('renders label as empty string if operatorText does not exist', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const textField = wrapper.find(TextField); - expect(textField.prop('label')).toBe(''); + expect(wrapper).toContainReactComponent(TextField, {label: ''}); }); it('renders a Select with options using operatorText when it is a list of operators', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { const expectedOptions = getOptionsListForOperators(operators); - const operatorsSelect = wrapper.find(Select).first(); - expect(operatorsSelect.prop('options')).toStrictEqual(expectedOptions); + expect(wrapper).toContainReactComponent(Select, { + options: expectedOptions, + }); }); it('renders value using the value prop', () => { const value = 'test'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const textField = wrapper.find(TextField); - expect(textField.prop('value')).toBe(value); + expect(wrapper).toContainReactComponent(TextField, {value}); }); it('renders type using the textFieldType prop', () => { const textFieldType = 'number'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const textField = wrapper.find(TextField); - expect(textField.prop('type')).toBe(textFieldType); + expect(wrapper).toContainReactComponent(TextField, { + type: textFieldType, + }); }); it('renders undefined type when the textFieldType prop is not passed', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const textField = wrapper.find(TextField); - expect(textField.prop('type')).toBeUndefined(); + expect(wrapper).toContainReactComponent(TextField, { + type: undefined, + }); }); it('calls onChange when the text field was changed', () => { const onChange = jest.fn(); - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - trigger(wrapper.find(TextField), 'onChange'); + wrapper.find(TextField)!.trigger('onChange'); expect(onChange).toHaveBeenCalled(); }); @@ -274,7 +277,7 @@ describe('', () => { const onFilterKeyChangeSpy = jest.fn(); const newOperator = operators[1].key; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const operatorsSelect = wrapper.find(Select).first(); - trigger(operatorsSelect, 'onChange', newOperator); + const operatorsSelect = wrapper.findAll(Select)[0]; + operatorsSelect.trigger('onChange', newOperator); expect(onFilterKeyChangeSpy).toHaveBeenCalledWith(newOperator); }); @@ -292,7 +295,7 @@ describe('', () => { const onChangeSpy = jest.fn(); const newFilterValue = 'foo'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const filterValueTextField = wrapper.find(TextField); - trigger(filterValueTextField, 'onChange', newFilterValue); + const filterValueTextField = wrapper.find(TextField)!; + filterValueTextField.trigger('onChange', newFilterValue); - const operatorsSelect = wrapper.find(Select).first(); - trigger(operatorsSelect, 'onChange', operators[1].key); + const operatorsSelect = wrapper.findAll(Select)[0]; + operatorsSelect.trigger('onChange', operators[1].key); expect(onChangeSpy).toHaveBeenCalledWith(newFilterValue); }); @@ -321,7 +324,7 @@ describe('', () => { }; it('renders a DateSelector', () => { - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const dateSelector = wrapper.find(DateSelector); - expect(dateSelector.exists()).toBe(true); + expect(wrapper).toContainReactComponent(DateSelector); }); it('renders filterValue using the value prop', () => { - const value = 'test'; - const wrapper = mountWithAppProvider( + const filterValue = 'test'; + const wrapper = mountWithApp( , ); - const dateSelector = wrapper.find(DateSelector); - expect(dateSelector.prop('filterValue')).toBe(value); + expect(wrapper).toContainReactComponent(DateSelector, { + filterValue, + }); }); it('renders filterKey using the filterKey prop', () => { const filterKey = 'test'; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const dateSelector = wrapper.find(DateSelector); - expect(dateSelector.prop('filterKey')).toBe(filterKey); + expect(wrapper).toContainReactComponent(DateSelector, { + filterKey, + }); }); it('renders filterMinKey using the min key of filter on filter prop', () => { const filterMinKey = 'test'; const mockFilter = {...filter, minKey: filterMinKey}; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const dateSelector = wrapper.find(DateSelector); - expect(dateSelector.prop('filterMinKey')).toBe(filterMinKey); + expect(wrapper).toContainReactComponent(DateSelector, { + filterMinKey, + }); }); it('renders filterMaxKey using the max key of filter on filter prop', () => { const filterMaxKey = 'test'; const mockFilter = {...filter, maxKey: filterMaxKey}; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - const dateSelector = wrapper.find(DateSelector); - expect(dateSelector.prop('filterMaxKey')).toBe(filterMaxKey); + expect(wrapper).toContainReactComponent(DateSelector, { + filterMaxKey, + }); }); it('calls onChange when the filter key was changed', () => { const onChange = jest.fn(); - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - trigger(wrapper.find(DateSelector), 'onFilterValueChange'); + wrapper.find(DateSelector)!.trigger('onFilterValueChange'); expect(onChange).toHaveBeenCalled(); }); it('calls onFilterKeyChange when the filter key was changed', () => { const onFilterKeyChange = jest.fn(); - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( ', () => { />, ); - trigger(wrapper.find(DateSelector), 'onFilterKeyChange'); + wrapper.find(DateSelector)!.trigger('onFilterKeyChange'); expect(onFilterKeyChange).toHaveBeenCalled(); }); }); diff --git a/src/components/ResourceList/components/FilterControl/tests/FilterControl.test.tsx b/src/components/ResourceList/components/FilterControl/tests/FilterControl.test.tsx index 173f650af02..e03ee17b444 100644 --- a/src/components/ResourceList/components/FilterControl/tests/FilterControl.test.tsx +++ b/src/components/ResourceList/components/FilterControl/tests/FilterControl.test.tsx @@ -1,6 +1,5 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {trigger, mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {TextField, Tag, Button} from 'components'; import {ResourceListContext} from '../../../../../utilities/resource-list'; @@ -69,32 +68,32 @@ describe('', () => { describe('searchValue', () => { it('renders with TextField by default', () => { - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( , ); - const searchField = filterControl.find(TextField); - expect(searchField.exists()).toBe(true); + expect(filterControl).toContainReactComponent(TextField); }); it('renders with searchValue as its value', () => { const searchValue = 'search value'; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( , ); - const searchField = filterControl.find(TextField); - expect(searchField.prop('value')).toBe(searchValue); + expect(filterControl).toContainReactComponent(TextField, { + value: searchValue, + }); }); }); describe('appliedFilters', () => { it('renders the same number of Tag as appliedFilters', () => { - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const tags = filterControl.find(Tag); + const tags = filterControl.findAll(Tag); expect(tags).toHaveLength(mockAppliedFilters.length); }); it('calls onFiltersChange without the applied filter when user clicks remove on the appliedFilter', () => { const onFiltersChange = jest.fn(); - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const tags = filterControl.find(Tag); - trigger(tags.at(0), 'onRemove', mockAppliedFilters[0].key); + const tag = filterControl.findAll(Tag)[0]; + tag.trigger('onRemove'); expect(onFiltersChange).toHaveBeenCalledWith([ ...mockAppliedFilters.slice(1, mockAppliedFilters.length), @@ -145,7 +144,7 @@ describe('', () => { key: filter.key, value: appliedFilterLabel, }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const firstTag = filterControl.find(Tag).first(); - expect(firstTag.text()).toBe( + const firstTag = filterControl.findAll(Tag)[0]; + + expect(firstTag).toContainReactText( `${filter.label} ${filter.operatorText} ${appliedFilterLabel}`, ); }); @@ -174,7 +174,7 @@ describe('', () => { key: filter.key, value: filterValue, }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const firstTag = filterControl.find(Tag).at(0); - expect(firstTag.text()).toBe( + const firstTag = filterControl.findAll(Tag)[0]; + + expect(firstTag).toContainReactText( `${filter.label} ${filter.operatorText} ${filterValue}`, ); }); @@ -208,7 +209,7 @@ describe('', () => { key: filter.key, value: filterValue, }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const firstTag = filterControl.find(Tag).at(0); - expect(firstTag.text()).toBe( + const firstTag = filterControl.findAll(Tag)[0]; + expect(firstTag).toContainReactText( `${filter.label} ${filter.operatorText} ${filterValue}`, ); }); @@ -237,7 +238,7 @@ describe('', () => { key: filter.key, value: appliedFilterValue, }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const firstTag = filterControl.find(Tag).at(0); - expect(firstTag.text()).toBe( + const firstTag = filterControl.findAll(Tag)[0]; + expect(firstTag).toContainReactText( `${filter.label} ${filter.operatorText} ${appliedFilterValue}`, ); }); @@ -265,7 +266,7 @@ describe('', () => { key: filter.key, value: appliedFilterValue, }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const firstTag = filterControl.find(Tag).at(0); - expect(firstTag.text()).toBe( + const firstTag = filterControl.findAll(Tag)[0]; + expect(firstTag).toContainReactText( `${filter.label} ${filter.operatorText} ${appliedFilterValue}`, ); }); @@ -296,7 +297,7 @@ describe('', () => { key: filter.key, value: appliedFilterValue, }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const firstTag = filterControl.find(Tag).at(0); - expect(firstTag.text()).toBe( + const firstTag = filterControl.findAll(Tag)[0]; + expect(firstTag).toContainReactText( `${filter.label} ${filter.operatorText} in the last week`, ); }); @@ -327,7 +328,7 @@ describe('', () => { value: selectedDate, }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const firstTag = filterControl.find(Tag).at(0); - expect(firstTag.text()).toBe(`${filter.label} after 9/16/2018`); + const firstTag = filterControl.findAll(Tag)[0]; + expect(firstTag).toContainReactText(`${filter.label} after 9/16/2018`); }); it('renders the provided localized applied filter string when filter is a FilterDateSelector with maximum date predicate (on or before)', () => { @@ -355,7 +356,7 @@ describe('', () => { key: filter.maxKey, value: selectedDate, }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const firstTag = filterControl.find(Tag).at(0); - expect(firstTag.text()).toBe(`${filter.label} before 9/16/2018`); + const firstTag = filterControl.findAll(Tag)[0]; + expect(firstTag).toContainReactText(`${filter.label} before 9/16/2018`); }); it('renders applied filter value when filter is a FilterDateSelector with invalid date predicate', () => { @@ -383,7 +384,7 @@ describe('', () => { key: filter.maxKey, value: selectedDate, }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const firstTag = filterControl.find(Tag).at(0); - expect(firstTag.text()).toBe(`${filter.label} before INVALID`); + const firstTag = filterControl.findAll(Tag)[0]; + expect(firstTag).toContainReactText(`${filter.label} before INVALID`); }); it('renders the provided applied filter string when filter uses operators with filter label', () => { @@ -423,7 +424,7 @@ describe('', () => { key: appliedFilterKey, value: appliedFilterValue, }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const firstTag = filterControl.find(Tag).at(0); + const firstTag = filterControl.findAll(Tag)[0]; - expect(firstTag.text()).toBe( + expect(firstTag).toContainReactText( `${filter.label} ${appliedFilterLabel} ${appliedFilterValue}`, ); }); @@ -464,7 +465,7 @@ describe('', () => { key: appliedFilterKey, value: appliedFilterValue, }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const firstTag = filterControl.find(Tag).at(0); + const firstTag = filterControl.findAll(Tag)[0]; - expect(firstTag.text()).toBe( + expect(firstTag).toContainReactText( `${filter.label} ${appliedOperatorOptionLabel} ${appliedFilterValue}`, ); }); @@ -487,7 +488,7 @@ describe('', () => { key: 'filter key', value: appliedFilterValue, }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - const firstTag = filterControl.find(Tag).at(0); - expect(firstTag.text()).toBe(appliedFilterValue); + const firstTag = filterControl.findAll(Tag)[0]; + expect(firstTag).toContainReactText(appliedFilterValue); }); it('renders a ul element containing an li element', () => { @@ -507,7 +508,7 @@ describe('', () => { key: 'filter key', value: appliedFilterValue, }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { /> , ); - expect(filterControl.find('ul')).toHaveLength(1); - expect(filterControl.find('li')).toHaveLength(1); + expect(filterControl.findAll('ul')).toHaveLength(1); + expect(filterControl.findAll('li')).toHaveLength(1); }); }); describe('additionalAction', () => { it('renders no connectedRight prop on TextField if there is no additionalAction', () => { - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( , ); - const searchField = filterControl.find(TextField); - expect(searchField.prop('connectedRight')).toBeNull(); + expect(filterControl).toContainReactComponent(TextField, { + connectedRight: null, + }); }); it('renders Button if there is additionalAction', () => { @@ -538,82 +540,83 @@ describe('', () => { content: 'button label', onAction: jest.fn(), }; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( , ); - expect(filterControl.find(Button).exists()).toBe(true); + expect(filterControl).toContainReactComponent(Button); - trigger(filterControl.find(Button), 'onClick'); + filterControl.find(Button)!.trigger('onClick'); expect(action.onAction).toHaveBeenCalled(); }); }); describe('focused', () => { it('passes its value to focus of TextField', () => { - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( , ); - expect(filterControl.find(TextField).prop('focused')).toBe(true); + expect(filterControl).toContainReactComponent(TextField, {focused: true}); }); }); describe('filters', () => { it('renders no if there are no filters', () => { - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( , ); - const searchField = filterControl.find(TextField); - expect(searchField.prop('connectedLeft')).toBeNull(); + expect(filterControl).toContainReactComponent(TextField, { + connectedLeft: null, + }); }); it('renders if there is filters', () => { - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( , ); - expect(filterControl.find(FilterCreator).exists()).toBe(true); + expect(filterControl).toContainReactComponent(FilterCreator); }); it('renders with filters', () => { - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( , ); - expect(filterControl.find(FilterCreator).prop('filters')).toMatchObject( - mockFilters, - ); + expect(filterControl).toContainReactComponent(FilterCreator, { + filters: mockFilters, + }); }); }); describe('placeholder', () => { it('renders default text if no placeholder passed.', () => { - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( , ); - expect(filterControl.find(TextField).prop('placeholder')).toBe( - 'Search items', - ); + expect(filterControl).toContainReactComponent(TextField, { + placeholder: 'Search items', + }); }); it('renders the placeholder prop value if provided', () => { const placeholder = 'Search by name, email or phone'; - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - expect(filterControl.find(TextField).prop('placeholder')).toBe( - 'Search by name, email or phone', - ); + expect(filterControl).toContainReactComponent(TextField, { + placeholder: 'Search by name, email or phone', + }); }); }); describe('onSearchBlur()', () => { it('gets passed to onBlur of TextField', () => { const onSearchBlur = jest.fn(); - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( , ); - expect(filterControl.find(TextField).prop('onBlur')).toBe(onSearchBlur); + expect(filterControl).toContainReactComponent(TextField, { + onBlur: onSearchBlur, + }); }); it('calls onSearchBlur when onBlur is triggered', () => { const onSearchBlur = jest.fn(); - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( , ); - trigger(filterControl.find(TextField), 'onBlur'); + filterControl.find(TextField)!.trigger('onBlur'); expect(onSearchBlur).toHaveBeenCalledTimes(1); }); @@ -658,7 +663,7 @@ describe('', () => { describe('onSearchChange()', () => { it('gets passed to onChange of TextField', () => { const onSearchChange = jest.fn(); - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - expect(filterControl.find(TextField).prop('onChange')).toBe( - onSearchChange, - ); + expect(filterControl).toContainReactComponent(TextField, { + onChange: onSearchChange, + }); }); it('calls onSearchChange with the new searchValue when onChange is triggered', () => { const newSearchValue = 'new search value'; const onSearchChange = jest.fn(); - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - trigger(filterControl.find(TextField), 'onChange', newSearchValue); + filterControl.find(TextField)!.trigger('onChange', newSearchValue); expect(onSearchChange).toHaveBeenCalledWith(newSearchValue); }); @@ -698,7 +703,7 @@ describe('', () => { }; const onFiltersChange = jest.fn(); - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - trigger(filterControl.find(FilterCreator), 'onAddFilter', newFilter); + filterControl.find(FilterCreator)!.trigger('onAddFilter', newFilter); expect(onFiltersChange).toHaveBeenCalledWith([ ...mockAppliedFilters, @@ -720,7 +725,7 @@ describe('', () => { it('does not get called if the new filter already exists when FilterCreator.onAddFilter is triggered', () => { const newFilter = mockAppliedFilters[0]; const onFiltersChange = jest.fn(); - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( ', () => { , ); - trigger(filterControl.find(FilterCreator), 'onAddFilter', newFilter); + filterControl.find(FilterCreator)!.trigger('onAddFilter', newFilter); expect(onFiltersChange).not.toHaveBeenCalled(); }); @@ -739,12 +744,13 @@ describe('', () => { describe('resource name', () => { it('will default to the provided translation', () => { - const filterControl = mountWithAppProvider( + const filterControl = mountWithApp( , ); - expect(filterControl.find('TextField').prop('label')).toBe( - 'Search items', - ); + + expect(filterControl).toContainReactComponent(TextField, { + label: 'Search items', + }); }); }); }); From b476d01936971c4c13d486400ef7114c5a344644 Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Wed, 25 Aug 2021 15:15:51 -0400 Subject: [PATCH 2/3] Updated UNRELEASED --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index ae231d6ef7c..cf7c3b9177f 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -77,5 +77,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for Navigation and Navigation.Section ([#4440](https://github.com/Shopify/polaris-react/pull/4440)) - Modernized tests for EmptyState component ([#4427](https://github.com/Shopify/polaris-react/pull/4427)) - Modernized tests for FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#](https://github.com/Shopify/polaris-react/pull/)) +- Modernized tests for FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#4438](https://github.com/Shopify/polaris-react/pull/4438)) ### Deprecations From f7281136822110a0b0ecd912f09ad1be8ed77d70 Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Wed, 25 Aug 2021 15:25:00 -0400 Subject: [PATCH 3/3] Modernized Pagination tests --- UNRELEASED.md | 1 + .../Pagination/tests/Pagination.test.tsx | 66 +++++++++---------- 2 files changed, 32 insertions(+), 35 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index cf7c3b9177f..51453a78f96 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -78,5 +78,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for EmptyState component ([#4427](https://github.com/Shopify/polaris-react/pull/4427)) - Modernized tests for FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#](https://github.com/Shopify/polaris-react/pull/)) - Modernized tests for FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#4438](https://github.com/Shopify/polaris-react/pull/4438)) +- Modernized tests for Pagination, FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#4438](https://github.com/Shopify/polaris-react/pull/4438)) ### Deprecations diff --git a/src/components/Pagination/tests/Pagination.test.tsx b/src/components/Pagination/tests/Pagination.test.tsx index 1babc944a22..53e2808be4d 100644 --- a/src/components/Pagination/tests/Pagination.test.tsx +++ b/src/components/Pagination/tests/Pagination.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, ReactWrapper} from 'test-utilities/legacy'; import {mountWithApp} from 'test-utilities'; +import type {CustomRoot} from '@shopify/react-testing'; import {Tooltip, TextField} from 'components'; import {TextStyle} from 'components/TextStyle'; @@ -58,10 +57,10 @@ describe('', () => { }); it('does not render a tooltip if nextTooltip is provided and hasNext is false', () => { - const pagination = mountWithAppProvider( + const pagination = mountWithApp( , ); - expect(pagination.find(Tooltip)).toHaveLength(0); + expect(pagination).not.toContainReactComponent(Tooltip); }); it('renders a tooltip if previousToolTip is provided and hasPrevious is true', () => { @@ -74,34 +73,33 @@ describe('', () => { }); it('does not render tooltip if previousToolTip is provided and hasPrevious is false', () => { - const pagination = mountWithAppProvider( + const pagination = mountWithApp( , ); - expect(pagination.find(Tooltip)).toHaveLength(0); + expect(pagination).not.toContainReactComponent(Tooltip); }); it('renders a tooltip for nextToolTip and previousToolTip when they are provided and hasPrevious and hasNext are true', () => { - const pagination = mountWithAppProvider( + const pagination = mountWithApp( , ); - expect(pagination.find(Tooltip)).toHaveLength(2); + expect(pagination).toContainReactComponentTimes(Tooltip, 2); }); }); describe('accessibilityLabel', () => { it('inserts prop as aria-label', () => { - const pagination = mountWithAppProvider( - , - ); - expect(pagination.find('nav').prop('aria-label')).toStrictEqual('test'); + const pagination = mountWithApp(); + expect(pagination).toContainReactComponent('nav', {'aria-label': 'test'}); }); it('uses default value for aria-label', () => { - const pagination = mountWithAppProvider(); - expect(pagination.find('nav').prop('aria-label')).toStrictEqual( - 'Pagination', - ); + const pagination = mountWithApp(); + + expect(pagination).toContainReactComponent('nav', { + 'aria-label': 'Pagination', + }); }); }); @@ -144,21 +142,22 @@ describe('', () => { describe('label', () => { it('renders as text', () => { - const pagination = mountWithAppProvider(); + const pagination = mountWithApp(); expect(pagination.text()).toContain('test'); }); it('has subdued text without next and previous pages', () => { - const pagination = mountWithAppProvider(); - expect(pagination.find(TextStyle).prop('variation')).toStrictEqual( - 'subdued', - ); + const pagination = mountWithApp(); + + expect(pagination).toContainReactComponent(TextStyle, { + variation: 'subdued', + }); }); }); it('adds a keypress event for nextKeys', () => { const spy = jest.fn(); - mountWithAppProvider( + mountWithApp( , ); @@ -169,7 +168,7 @@ describe('', () => { it('adds a keypress event for previousKeys', () => { const spy = jest.fn(); - mountWithAppProvider( + mountWithApp( ', () => { describe('input elements', () => { it('will not call paginations callback on keypress if a input element is focused', () => { const spy = jest.fn(); - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp(
', () => { describe('nextURL/previousURL', () => { let getElementById: jest.SpyInstance; - let pagination: ReactWrapper; + let pagination: CustomRoot; beforeEach(() => { getElementById = jest.spyOn(document, 'getElementById'); getElementById.mockImplementation((id) => { - return pagination.find(`#${id}`).at(0).getDOMNode(); + return pagination.findAll(`#${id}`)[0].domNode; }); }); @@ -220,7 +219,7 @@ describe('', () => { it('navigates the browser to the anchors target when the designated key is pressed', () => { const spy = jest.fn(); - pagination = mountWithAppProvider( + pagination = mountWithApp( ', () => { previousURL="https://www.google.com" />, ); - const anchor = pagination.find('a').getDOMNode() as HTMLAnchorElement; + const anchor = pagination.find('a')!.domNode as HTMLAnchorElement; anchor.click = spy; listenerMap.keyup({keyCode: Key.KeyJ}); @@ -237,7 +236,7 @@ describe('', () => { it('does not navigate the browser when hasNext or hasPrevious is false', () => { const anchorClickSpy = jest.fn(); - pagination = mountWithAppProvider( + pagination = mountWithApp( ', () => { />, ); - const anchor = pagination.find('a').getDOMNode() as HTMLAnchorElement; + const anchor = pagination.find('a')!.domNode as HTMLAnchorElement; anchor.click = anchorClickSpy; listenerMap.keyup({keyCode: Key.KeyJ}); @@ -280,13 +279,10 @@ describe('', () => { function noop() {} function focusElement( - wrapper: ReactWrapper, + wrapper: CustomRoot, element: 'input' | 'textarea' | 'select', ) { - const inputElement = wrapper - .find(element) - .at(0) - .getDOMNode() as HTMLInputElement; + const inputElement = wrapper.findAll(element)[0].domNode as HTMLInputElement; inputElement.focus(); }