From 8a7b5ad9d14bc0f172b801f1f1d00cb86db14c33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karen=20Pinz=C3=A1s=20Morrongiello?= <45268098+kpinzas-sh@users.noreply.github.com> Date: Tue, 31 Aug 2021 14:50:52 -0400 Subject: [PATCH 1/8] Add Tags, TextStyle, Checkbox and Collapsible --- UNRELEASED.md | 1 + .../Collapsible/tests/Collapsible.test.tsx | 49 ++-- src/components/Tabs/tests/Tabs.test.tsx | 235 ++++++++---------- .../TextStyle/tests/TextStyle.test.tsx | 39 ++- 4 files changed, 152 insertions(+), 172 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 6093c4c5402..8a37e1f73bd 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -65,6 +65,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311)) - Modernized test for UnstyledLink, Tag, DisplayText, FileUpload, MessageIndicator, Choice and Dialog ([#4407](https://github.com/Shopify/polaris-react/pull/4407)). - Modernized tests for Konami, Labelled, and Link components([#4389](https://github.com/Shopify/polaris-react/pull/4389)) +- Modernized tests for TextStyle, Collapsible, Tabs ([]()) - Modernized tests for Scrollable, ScrollTo, ScrollLock, Select, SettingToggle, Sheet, Spinner, and Sticky components([#4386](https://github.com/Shopify/polaris-react/pull/4386)) - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311)) - Modernized tests for MediaCard, and Layout components ([#4393](https://github.com/Shopify/polaris-react/pull/4393)) diff --git a/src/components/Collapsible/tests/Collapsible.test.tsx b/src/components/Collapsible/tests/Collapsible.test.tsx index da0fcae4a7b..6120e797707 100644 --- a/src/components/Collapsible/tests/Collapsible.test.tsx +++ b/src/components/Collapsible/tests/Collapsible.test.tsx @@ -1,80 +1,87 @@ import React, {useState, useCallback} from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; import {mountWithApp} from 'test-utilities'; import {Tokens} from 'utilities/theme'; import {Collapsible, CollapsibleProps} from '../Collapsible'; describe('', () => { - const ariaExpandedSelector = '[aria-expanded=false]'; - it('does not render its children and indicates hidden with aria-hidden', () => { - const collapsible = mountWithAppProvider( + const collapsible = mountWithApp( content , ); - const hidden = collapsible.find(ariaExpandedSelector); - expect(hidden.exists()).toBe(true); + expect(collapsible).toContainReactComponent('div', { + 'aria-expanded': false, + }); }); it('renders its children and does not render aria-hidden when open', () => { - const collapsible = mountWithAppProvider( + const collapsible = mountWithApp( content , ); - const hidden = collapsible.find(ariaExpandedSelector); - expect(hidden.exists()).toBe(false); - expect(collapsible.contains('content')).toBe(true); + expect(collapsible).not.toContainReactComponent('div', { + 'aria-expanded': false, + }); + + expect(collapsible).toContainReactComponent('div', { + children: expect.stringContaining('content'), + }); }); it('does not render its children when closed', () => { - const collapsible = mountWithAppProvider( + const collapsible = mountWithApp( content , ); - expect(collapsible.contains('content')).toBe(false); + expect(collapsible).not.toContainReactComponent('div', { + children: expect.stringContaining('content'), + }); }); it('renders its children when expandOnPrint is true and open is false', () => { - const collapsible = mountWithAppProvider( + const collapsible = mountWithApp( content , ); - expect(collapsible.contains('content')).toBe(true); + expect(collapsible).toContainReactComponent('div', { + children: expect.stringContaining('content'), + }); }); it('renders its children when expandOnPrint is true and open is true', () => { - const collapsible = mountWithAppProvider( + const collapsible = mountWithApp( content , ); - expect(collapsible.contains('content')).toBe(true); + expect(collapsible).toContainReactComponent('div', { + children: expect.stringContaining('content'), + }); }); describe('Transition', () => { it('passes a duration property', () => { const duration = Tokens.duration150; - const collapsible = mountWithAppProvider( + const collapsible = mountWithApp( , ); - expect(collapsible.props()).toMatchObject({transition: {duration}}); + expect(collapsible).toHaveReactProps({transition: {duration}}); }); it('passes a timingFunction property', () => { const timingFunction = Tokens.ease; - const collapsible = mountWithAppProvider( + const collapsible = mountWithApp( ', () => { />, ); - expect(collapsible.props()).toMatchObject({transition: {timingFunction}}); + expect(collapsible).toHaveReactProps({transition: {timingFunction}}); }); }); diff --git a/src/components/Tabs/tests/Tabs.test.tsx b/src/components/Tabs/tests/Tabs.test.tsx index 36da14082fd..1fe4a59ead4 100644 --- a/src/components/Tabs/tests/Tabs.test.tsx +++ b/src/components/Tabs/tests/Tabs.test.tsx @@ -1,8 +1,7 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; import {mountWithApp} from 'test-utilities'; +import {Key} from '../../../types'; import {Tab, Panel, TabMeasurer} from '../components'; import {Tabs, TabsProps} from '../Tabs'; import {getVisibleAndHiddenTabIndices} from '../utilities'; @@ -95,10 +94,12 @@ describe('', () => { {content: 'Tab 1', id: 'tab-1'}, {content: 'Tab 2', id: 'tab-2'}, ]; - const wrapper = mountWithAppProvider(); + const wrapper = mountWithApp(); - tabs.forEach((tab, index) => { - expect(wrapper.find('ul').find(Tab).at(index).prop('id')).toBe(tab.id); + tabs.forEach((tab) => { + expect(wrapper.find('ul')!).toContainReactComponent(Tab, { + id: tab.id, + }); }); }); @@ -108,38 +109,37 @@ describe('', () => { {...tabs[1], panelID: 'panel-2'}, ]; const content =

Panel contents

; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( {content} , ); - panelIDedTabs.forEach((tab, index) => { - expect(wrapper.find('ul').find(Tab).at(index).prop('panelID')).toBe( - tab.panelID, - ); + panelIDedTabs.forEach((tab) => { + expect(wrapper.find('ul')!).toContainReactComponent(Tab, { + panelID: tab.panelID, + }); }); }); it('uses an auto-generated panelID if none is provided', () => { const content =

Panel contents

; - const wrapper = mountWithAppProvider( - {content}, - ); + const wrapper = mountWithApp({content}); tabs.forEach((_, index) => { - const panelID = wrapper.find('ul').find(Tab).at(index).prop('panelID'); + const panelID = wrapper.find('ul')?.findAll(Tab)[index].prop('panelID'); expect(typeof panelID).toBe('string'); expect(panelID).not.toBe(''); }); }); it('sets the panelID to undefined when the tab does not have an associated panel (child)', () => { - const wrapper = mountWithAppProvider(); + const wrapper = mountWithApp(); tabs.forEach((_, index) => { - const panelID = wrapper.find('ul').find(Tab).at(index).prop('panelID'); - expect(panelID).toBeUndefined(); + expect(wrapper.find('ul')!.findAll(Tab)[index]).toHaveReactProps({ + panelID: undefined, + }); }); }); @@ -148,14 +148,12 @@ describe('', () => { {...tabs[0], url: 'https://shopify.com'}, {...tabs[1], url: 'https://google.com'}, ]; - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); urlTabs.forEach((tab, index) => { - expect( - wrapper.find('ul').find(Tab).at(index).prop('url'), - ).toStrictEqual(tab.url); + expect(wrapper.find('ul')!.findAll(Tab)[index]).toHaveReactProps({ + url: tab.url, + }); }); }); @@ -164,14 +162,12 @@ describe('', () => { {...tabs[0], accessibilityLabel: 'Tab 1'}, {...tabs[1], accessibilityLabel: 'Tab 2'}, ]; - const wrapper = mountWithAppProvider( - , - ); + const wrapper = mountWithApp(); labelledTabs.forEach((tab, index) => { - expect( - wrapper.find('ul').find(Tab).at(index).prop('accessibilityLabel'), - ).toStrictEqual(tab.accessibilityLabel); + expect(wrapper.find('ul')!.findAll(Tab)[index]).toHaveReactProps({ + accessibilityLabel: tab.accessibilityLabel, + }); }); }); @@ -180,14 +176,14 @@ describe('', () => { {content: 'Tab 1', id: 'tab-1'}, {content: 'Tab 2', id: 'tab-2'}, ]; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); tabsWithContent.forEach((tab, index) => { - expect( - wrapper.find('ul').find(Tab).at(index).prop('children'), - ).toStrictEqual(tab.content); + expect(wrapper.find('ul')!.findAll(Tab)[index]).toHaveReactProps({ + children: tab!.content, + }); }); }); @@ -203,14 +199,14 @@ describe('', () => { id: 'tab-2', }, ]; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( , ); tabsWithContent.forEach((tab, index) => { - expect( - wrapper.find('ul').find(Tab).at(index).prop('children'), - ).toStrictEqual(tab.content); + expect(wrapper.find('ul')!.findAll(Tab)[index]).toHaveReactProps({ + children: tab.content, + }); }); }); }); @@ -235,7 +231,7 @@ describe('', () => { {...tabs[1], panelID: 'panel-2'}, ]; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( Panel contents , @@ -248,35 +244,27 @@ describe('', () => { describe('panel', () => { it('renders a Panel for each of the Tabs', () => { const content =

Tab content

; - const wrapper = mountWithAppProvider( - {content}, - ); - const panel = wrapper.find(Panel); - expect(panel).toHaveLength(2); + const wrapper = mountWithApp({content}); + expect(wrapper).toContainReactComponentTimes(Panel, 2); }); it('renders a Panel with a hidden prop for the non selected tabs', () => { const content =

Tab content

; - const wrapper = mountWithAppProvider( - {content}, - ); + const wrapper = mountWithApp({content}); - const nonSelectedPanel = wrapper.find(Panel).at(1); - expect(nonSelectedPanel.prop('hidden')).toBe(true); + expect(wrapper.findAll(Panel)[1]).toHaveReactProps({hidden: true}); }); it('wraps the children in a Panel with matching aria attributes to the tab', () => { const content =

Tab content

; - const wrapper = mountWithAppProvider( - {content}, - ); + const wrapper = mountWithApp({content}); + + const selectedTab = wrapper.find('ul')!.findAll(Tab)[0]; + const panel = wrapper.findAll(Panel)[0]; - const selectedTab = wrapper.find('ul').find(Tab).at(0); - const panel = wrapper.find(Panel).at(0); - expect(panel.exists()).toBe(true); - expect(panel.contains(content)).toBe(true); - expect(panel.prop('id')).toBeTruthy(); - expect(panel.prop('id')).toBe(selectedTab.prop('panelID')); + expect(panel).not.toBeNull(); + expect(panel).toContainReactComponent('p', {children: 'Tab content'}); + expect(panel).toHaveReactProps({id: selectedTab.prop('panelID')}); }); it('uses a custom panelID', () => { @@ -285,25 +273,23 @@ describe('', () => { tabs[1], ]; const content =

Tab content

; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( {content} , ); - const panel = wrapper.find(Panel).at(0); - const selectedTab = wrapper.find('ul').find(Tab).at(0); - expect(panel.prop('id')).toBe(selectedTab.prop('panelID')); + const panel = wrapper.findAll(Panel)[0]; + const selectedTab = wrapper.find('ul')!.findAll(Tab)[0]; + expect(panel).toHaveReactProps({id: selectedTab.prop('panelID')}); }); }); describe('onSelect()', () => { it('is called with the index of the clicked tab', () => { const spy = jest.fn(); - const wrapper = mountWithAppProvider( - , - ); - wrapper.find('ul').find(Tab).at(1).find('button').simulate('click'); + const wrapper = mountWithApp(); + wrapper.find('ul')!.findAll(Tab)[1].find('button')!.trigger('onClick'); expect(spy).toHaveBeenCalledWith(1); }); }); @@ -316,57 +302,52 @@ describe('', () => { ]; it('is not set to anything by default', () => { - const tabs = mountWithAppProvider(); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(-1); + const tabs = mountWithApp(); + expect(tabs.find(TabMeasurer)).toHaveReactProps({tabToFocus: -1}); }); it('passes the provided selected value if given', () => { - const tabs = mountWithAppProvider( + const tabs = mountWithApp( , ); - expect(tabs.find(TabMeasurer).prop('selected')).toBe(1); + expect(tabs.find(TabMeasurer)).toHaveReactProps({selected: 1}); }); describe('ArrowRight', () => { it('shifts focus to the next tab when pressing ArrowRight', () => { - const tabs = mountWithAppProvider( - , - ); - trigger(tabs.find('ul'), 'onKeyUp', { + const tabs = mountWithApp(); + tabs.find('ul')!.trigger('onKeyUp', { key: 'ArrowRight', }); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); + expect(tabs.find(TabMeasurer)).toHaveReactProps({tabToFocus: 0}); }); it('shifts focus to the first tab when pressing ArrowRight on the last tab', () => { - const tabs = mountWithAppProvider( - , - ); - trigger(tabs.find('ul'), 'onKeyUp', { + const tabs = mountWithApp(); + tabs.find('ul')!.trigger('onKeyUp', { key: 'ArrowRight', }); - trigger(tabs.find('ul'), 'onKeyUp', { + tabs.find('ul')!.trigger('onKeyUp', { key: 'ArrowRight', }); - trigger(tabs.find('ul'), 'onKeyUp', { + tabs.find('ul')!.trigger('onKeyUp', { key: 'ArrowRight', }); - trigger(tabs.find('ul'), 'onKeyUp', { + + tabs.find('ul')!.trigger('onKeyUp', { key: 'ArrowRight', }); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); + expect(tabs.find(TabMeasurer)).toHaveReactProps({tabToFocus: 0}); }); }); describe('ArrowLeft', () => { it('shifts focus to the last tab when pressing ArrowLeft', () => { - const tabs = mountWithAppProvider( - , - ); - trigger(tabs.find('ul'), 'onKeyUp', { + const tabs = mountWithApp(); + tabs.find('ul')!.trigger('onKeyUp', { key: 'ArrowLeft', }); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(2); + expect(tabs.find(TabMeasurer)).toHaveReactProps({tabToFocus: 2}); }); }); }); @@ -408,108 +389,104 @@ describe('', () => { }); it('passes preferredPosition below to the Popover', () => { - const tabs = mountWithAppProvider(); - const tabMeasurer = tabs.find(TabMeasurer); - trigger(tabMeasurer, 'handleMeasurement', { + const tabs = mountWithApp(); + tabs.find(TabMeasurer)!.trigger('handleMeasurement', { hiddenTabWidths: [82, 160, 150, 100, 80, 120], containerWidth: 300, disclosureWidth: 0, }); - const popover = tabs.find(Popover); - expect(popover.prop('preferredPosition')).toBe('below'); + expect(tabs.find(Popover)).toHaveReactProps({preferredPosition: 'below'}); }); it('renders with a button as the activator when there are hiddenTabs', () => { - const tabs = mountWithAppProvider(); - const tabMeasurer = tabs.find(TabMeasurer); - trigger(tabMeasurer, 'handleMeasurement', { + const tabs = mountWithApp(); + tabs.find(TabMeasurer)!.trigger('handleMeasurement', { hiddenTabWidths: [82, 160, 150, 100, 80, 120], containerWidth: 300, disclosureWidth: 0, }); - const popover = tabs.find(Popover); - expect(popover.prop('activator').type).toBe('button'); + expect(tabs.find(Popover)!.prop('activator').type).toBe('button'); }); describe('ArrowRight', () => { it('shifts focus to the first tab when pressing ArrowRight', () => { - const tabs = mountWithAppProvider(); - const tabMeasurer = tabs.find(TabMeasurer); - trigger(tabMeasurer, 'handleMeasurement', { + const tabs = mountWithApp(); + tabs.find(TabMeasurer)!.trigger('handleMeasurement', { hiddenTabWidths: [82, 160, 150, 100, 80, 120], containerWidth: 300, disclosureWidth: 0, }); - const popover = tabs.find(Popover); - const disclosureActivator = popover.find('.DisclosureActivator'); - - trigger(disclosureActivator, 'onClick', { - key: 'Enter', + tabs.find(Popover)!.find('button')!.trigger('onClick', { + key: Key.Enter, }); - trigger(tabs.find('ul'), 'onKeyUp', { + tabs.find('ul')!.trigger('onKeyUp', { key: 'ArrowRight', }); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); + expect(tabs).toContainReactComponent(TabMeasurer, {tabToFocus: 0}); }); it('shifts focus to the first hidden tab when the last visible tab is focused and the disclosure popover is active', () => { - const tabs = mountWithAppProvider(); - const tabMeasurer = tabs.find(TabMeasurer); - trigger(tabMeasurer, 'handleMeasurement', { + const tabs = mountWithApp(); + + tabs.find(TabMeasurer)!.trigger('handleMeasurement', { hiddenTabWidths: [82, 160, 150, 100, 80, 120], containerWidth: 300, disclosureWidth: 0, }); - const popover = tabs.find(Popover); - const disclosureActivator = popover.find('button'); - disclosureActivator.simulate('click'); + const popover = tabs.find(Popover)!; + const disclosureActivator = popover.find('button')!; - trigger(disclosureActivator, 'onClick', { - key: 'Enter', - }); + disclosureActivator.domNode!.click; - trigger(tabs.find('ul'), 'onKeyUp', { + disclosureActivator.trigger('onClick'); + + tabs.find('ul')!.trigger('onKeyUp', { key: 'ArrowRight', }); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); + expect(tabs.find(TabMeasurer)!.prop('tabToFocus')).toBe(0); - trigger(tabs.find('ul'), 'onKeyUp', { + tabs.find('ul')!.trigger('onKeyUp', { key: 'ArrowRight', }); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(1); + expect(tabs.find(TabMeasurer)!.prop('tabToFocus')).toBe(1); }); it('does not shift focus to the first hidden tab when the last visible tab is focused and the disclosure popover is not active', () => { - const tabs = mountWithAppProvider(); - const tabMeasurer = tabs.find(TabMeasurer); - trigger(tabMeasurer, 'handleMeasurement', { + const tabs = mountWithApp(); + + tabs.find(TabMeasurer)!.trigger('handleMeasurement', { hiddenTabWidths: [82, 160, 150, 100, 80, 120], containerWidth: 300, disclosureWidth: 0, }); - const popover = tabs.find(Popover); - expect(popover.prop('active')).toBe(false); + expect(tabs).toContainReactComponent(Popover, { + active: false, + }); - trigger(tabs.find('ul'), 'onKeyUp', { + tabs.find('ul')!.trigger('onKeyUp', { key: 'ArrowRight', }); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); + expect(tabs).toContainReactComponent(TabMeasurer, { + tabToFocus: 0, + }); - trigger(tabs.find('ul'), 'onKeyUp', { + tabs.find('ul')!.trigger('onKeyUp', { key: 'Enter', }); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); + expect(tabs).toContainReactComponent(TabMeasurer, { + tabToFocus: 0, + }); }); }); }); diff --git a/src/components/TextStyle/tests/TextStyle.test.tsx b/src/components/TextStyle/tests/TextStyle.test.tsx index 149e51c3a92..5a428287eb7 100644 --- a/src/components/TextStyle/tests/TextStyle.test.tsx +++ b/src/components/TextStyle/tests/TextStyle.test.tsx @@ -1,61 +1,56 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {TextStyle} from '../TextStyle'; describe('', () => { it('mounts', () => { - const textStyle = mountWithAppProvider(); - expect(textStyle.exists()).toBe(true); + const textStyle = mountWithApp(); + expect(textStyle).not.toBeNull(); }); it('renders children', () => { - const textStyle = mountWithAppProvider( - Hello Polaris, - ); - expect(textStyle.find('span').text()).toBe('Hello Polaris'); + const textStyle = mountWithApp(Hello Polaris); + expect(textStyle.find('span')).toContainReactText('Hello Polaris'); }); it('renders a span by default', () => { - const textStyle = mountWithAppProvider( - Hello Polaris, - ); - expect(textStyle.find('span')).toHaveLength(1); + const textStyle = mountWithApp(Hello Polaris); + expect(textStyle).toContainReactComponent('span'); }); it('renders a span when the variant positive is provided', () => { - const textStyle = mountWithAppProvider( + const textStyle = mountWithApp( Hello Polaris, ); - expect(textStyle.find('span')).toHaveLength(1); + expect(textStyle).toContainReactComponent('span'); }); it('renders a span when the variant negative is provided', () => { - const textStyle = mountWithAppProvider( + const textStyle = mountWithApp( Hello Polaris, ); - expect(textStyle.find('span')).toHaveLength(1); + expect(textStyle).toContainReactComponent('span'); }); it('renders a span when the variant subdued is provided', () => { - const textStyle = mountWithAppProvider( + const textStyle = mountWithApp( Hello Polaris, ); - expect(textStyle.find('span')).toHaveLength(1); + expect(textStyle).toContainReactComponent('span'); }); it('renders a span tag when the strong variant is provided', () => { - const textStyle = mountWithAppProvider( + const textStyle = mountWithApp( Hello Polaris, ); - expect(textStyle.find('span')).toHaveLength(1); + expect(textStyle).toContainReactComponent('span'); }); it('renders a code tag when the code variant is provided', () => { - const textStyle = mountWithAppProvider( + const textStyle = mountWithApp( Hello Polaris, ); - expect(textStyle.find('code')).toHaveLength(1); + expect(textStyle).toContainReactComponent('code'); }); }); From dd66812e03d54c3e732aeb6b94229914882fb57b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karen=20Pinz=C3=A1s=20Morrongiello?= <45268098+kpinzas-sh@users.noreply.github.com> Date: Tue, 31 Aug 2021 15:11:34 -0400 Subject: [PATCH 2/8] Update UNRELEASED.md --- UNRELEASED.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 8a37e1f73bd..61eb1eaa1f3 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -65,7 +65,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311)) - Modernized test for UnstyledLink, Tag, DisplayText, FileUpload, MessageIndicator, Choice and Dialog ([#4407](https://github.com/Shopify/polaris-react/pull/4407)). - Modernized tests for Konami, Labelled, and Link components([#4389](https://github.com/Shopify/polaris-react/pull/4389)) -- Modernized tests for TextStyle, Collapsible, Tabs ([]()) +- Modernized tests for TextStyle, Collapsible, Tabs ([#4453](https://github.com/Shopify/polaris-react/pull/4453)) - Modernized tests for Scrollable, ScrollTo, ScrollLock, Select, SettingToggle, Sheet, Spinner, and Sticky components([#4386](https://github.com/Shopify/polaris-react/pull/4386)) - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311)) - Modernized tests for MediaCard, and Layout components ([#4393](https://github.com/Shopify/polaris-react/pull/4393)) From ff2e33681dc91648618afa45fbd2c0824a85a5bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karen=20Pinz=C3=A1s=20Morrongiello?= <45268098+kpinzas-sh@users.noreply.github.com> Date: Tue, 31 Aug 2021 15:15:06 -0400 Subject: [PATCH 3/8] Update Tabs.test.tsx --- src/components/Tabs/tests/Tabs.test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Tabs/tests/Tabs.test.tsx b/src/components/Tabs/tests/Tabs.test.tsx index 1fe4a59ead4..0669a873b52 100644 --- a/src/components/Tabs/tests/Tabs.test.tsx +++ b/src/components/Tabs/tests/Tabs.test.tsx @@ -419,9 +419,7 @@ describe('', () => { disclosureWidth: 0, }); - tabs.find(Popover)!.find('button')!.trigger('onClick', { - key: Key.Enter, - }); + tabs.find(Popover)!.find('button')!.trigger('onClick'); tabs.find('ul')!.trigger('onKeyUp', { key: 'ArrowRight', From 907e9253b657c99922e328cf310c39b14ba97ccd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karen=20Pinz=C3=A1s=20Morrongiello?= <45268098+kpinzas-sh@users.noreply.github.com> Date: Tue, 31 Aug 2021 15:18:39 -0400 Subject: [PATCH 4/8] Update Tabs.test.tsx --- src/components/Tabs/tests/Tabs.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Tabs/tests/Tabs.test.tsx b/src/components/Tabs/tests/Tabs.test.tsx index 0669a873b52..76e7846c3e4 100644 --- a/src/components/Tabs/tests/Tabs.test.tsx +++ b/src/components/Tabs/tests/Tabs.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import {mountWithApp} from 'test-utilities'; -import {Key} from '../../../types'; import {Tab, Panel, TabMeasurer} from '../components'; import {Tabs, TabsProps} from '../Tabs'; import {getVisibleAndHiddenTabIndices} from '../utilities'; From e1584c051139fb86c5c1c6e8cf8cc715abc25351 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karen=20Pinz=C3=A1s=20Morrongiello?= <45268098+kpinzas-sh@users.noreply.github.com> Date: Wed, 1 Sep 2021 09:28:17 -0400 Subject: [PATCH 5/8] Update src/components/Collapsible/tests/Collapsible.test.tsx Co-authored-by: Kyle Durand --- src/components/Collapsible/tests/Collapsible.test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Collapsible/tests/Collapsible.test.tsx b/src/components/Collapsible/tests/Collapsible.test.tsx index 6120e797707..eab1eb5f433 100644 --- a/src/components/Collapsible/tests/Collapsible.test.tsx +++ b/src/components/Collapsible/tests/Collapsible.test.tsx @@ -28,9 +28,7 @@ describe('', () => { 'aria-expanded': false, }); - expect(collapsible).toContainReactComponent('div', { - children: expect.stringContaining('content'), - }); + expect(collapsible).toContainReactText('content'); }); it('does not render its children when closed', () => { From f37b1f0ae2ab05ab51d2337109d20fa7a0d7c85b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karen=20Pinz=C3=A1s=20Morrongiello?= <45268098+kpinzas-sh@users.noreply.github.com> Date: Wed, 1 Sep 2021 09:28:25 -0400 Subject: [PATCH 6/8] Update src/components/Tabs/tests/Tabs.test.tsx Co-authored-by: Kyle Durand --- src/components/Tabs/tests/Tabs.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tabs/tests/Tabs.test.tsx b/src/components/Tabs/tests/Tabs.test.tsx index 76e7846c3e4..d767033c96e 100644 --- a/src/components/Tabs/tests/Tabs.test.tsx +++ b/src/components/Tabs/tests/Tabs.test.tsx @@ -126,7 +126,7 @@ describe('', () => { const wrapper = mountWithApp({content}); tabs.forEach((_, index) => { - const panelID = wrapper.find('ul')?.findAll(Tab)[index].prop('panelID'); + const panelID = wrapper.find('ul')!.findAll(Tab)[index].prop('panelID'); expect(typeof panelID).toBe('string'); expect(panelID).not.toBe(''); }); From 1e499fcf89591890563b064ffbfaae8a4c310a73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karen=20Pinz=C3=A1s=20Morrongiello?= <45268098+kpinzas-sh@users.noreply.github.com> Date: Wed, 1 Sep 2021 11:07:51 -0400 Subject: [PATCH 7/8] Update Tabs.test.tsx --- src/components/Tabs/tests/Tabs.test.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Tabs/tests/Tabs.test.tsx b/src/components/Tabs/tests/Tabs.test.tsx index d767033c96e..fa4ce11ea26 100644 --- a/src/components/Tabs/tests/Tabs.test.tsx +++ b/src/components/Tabs/tests/Tabs.test.tsx @@ -261,7 +261,6 @@ describe('', () => { const selectedTab = wrapper.find('ul')!.findAll(Tab)[0]; const panel = wrapper.findAll(Panel)[0]; - expect(panel).not.toBeNull(); expect(panel).toContainReactComponent('p', {children: 'Tab content'}); expect(panel).toHaveReactProps({id: selectedTab.prop('panelID')}); }); @@ -439,8 +438,6 @@ describe('', () => { const popover = tabs.find(Popover)!; const disclosureActivator = popover.find('button')!; - disclosureActivator.domNode!.click; - disclosureActivator.trigger('onClick'); tabs.find('ul')!.trigger('onKeyUp', { From a953fa40be6584a69da68617cdda5b519f10f3b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karen=20Pinz=C3=A1s=20Morrongiello?= <45268098+kpinzas-sh@users.noreply.github.com> Date: Wed, 1 Sep 2021 11:42:45 -0400 Subject: [PATCH 8/8] Update UNRELEASED.md --- UNRELEASED.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 61eb1eaa1f3..49eb9708e36 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -63,7 +63,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for SkeletonBodyTest, SkeletonDisplayTest, SkeletonPage, SkeletonThumbnail, and Spinner components ([#4353](https://github.com/Shopify/polaris-react/pull/4353)) - Modernized tests for CalloutCard, Caption, CheckableButton, Resizer, VideoThumbnail ([#4387](https://github.com/Shopify/polaris-react/pull/4387)) - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311)) -- Modernized test for UnstyledLink, Tag, DisplayText, FileUpload, MessageIndicator, Choice and Dialog ([#4407](https://github.com/Shopify/polaris-react/pull/4407)). +- Modernized tests for UnstyledLink, Tag, DisplayText, FileUpload, MessageIndicator, Choice and Dialog ([#4407](https://github.com/Shopify/polaris-react/pull/4407)). - Modernized tests for Konami, Labelled, and Link components([#4389](https://github.com/Shopify/polaris-react/pull/4389)) - Modernized tests for TextStyle, Collapsible, Tabs ([#4453](https://github.com/Shopify/polaris-react/pull/4453)) - Modernized tests for Scrollable, ScrollTo, ScrollLock, Select, SettingToggle, Sheet, Spinner, and Sticky components([#4386](https://github.com/Shopify/polaris-react/pull/4386))