From 5cd70471819b6c34b2b2b2d745a49f343666c0ec Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Wed, 11 Aug 2021 17:04:41 -0400 Subject: [PATCH 1/4] Modernized tests and removed testIds --- .../KonamiCode/tests/KonamiCode.test.tsx | 9 +- .../Labelled/tests/Labelled.test.tsx | 45 ++- .../AnnotatedSection/AnnotatedSection.tsx | 4 +- src/components/Layout/tests/Layout.test.tsx | 79 +++--- src/components/Link/tests/Link.test.tsx | 83 +++--- .../MediaCard/tests/MediaCard.test.tsx | 12 +- src/components/Tabs/tests/Tabs.test.tsx | 264 ++++++++---------- 7 files changed, 232 insertions(+), 264 deletions(-) diff --git a/src/components/KonamiCode/tests/KonamiCode.test.tsx b/src/components/KonamiCode/tests/KonamiCode.test.tsx index 32a796eb4bf..0338f2f81d7 100644 --- a/src/components/KonamiCode/tests/KonamiCode.test.tsx +++ b/src/components/KonamiCode/tests/KonamiCode.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import {clock} from '@shopify/jest-dom-mocks'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {KonamiCode, KONAMI_CODE} from '../KonamiCode'; @@ -20,7 +19,7 @@ describe('', () => { it('calls the handler when the Konami Code is entered', () => { const spy = jest.fn(); - mountWithAppProvider(); + mountWithApp(); simulateKeySequence(KONAMI_CODE); expect(spy).toHaveBeenCalledTimes(1); @@ -30,7 +29,7 @@ describe('', () => { const spy = jest.fn(); const reverseKonamiCode = [...KONAMI_CODE].reverse(); - mountWithAppProvider(); + mountWithApp(); simulateKeySequence(reverseKonamiCode); expect(spy).toHaveBeenCalledTimes(0); @@ -39,7 +38,7 @@ describe('', () => { it('removes Konami Code listener on unmount', () => { const spy = jest.fn(); - mountWithAppProvider().unmount(); + mountWithApp().unmount(); simulateKeySequence(KONAMI_CODE); expect(spy).toHaveBeenCalledTimes(0); diff --git a/src/components/Labelled/tests/Labelled.test.tsx b/src/components/Labelled/tests/Labelled.test.tsx index 835f69d203a..c6ca2a9034a 100644 --- a/src/components/Labelled/tests/Labelled.test.tsx +++ b/src/components/Labelled/tests/Labelled.test.tsx @@ -1,42 +1,41 @@ import React from 'react'; -import {InlineError, Label, buttonFrom, Labelled} from 'components'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {InlineError, Label, Labelled} from 'components'; +import {mountWithApp} from 'test-utilities'; +import {Button} from 'components/Button'; describe('', () => { it('passes relevant props along to the label', () => { const action = {content: 'Do something'}; - const element = mountWithAppProvider( + const element = mountWithApp( , ); - const label = element.find(Label); - expect(label.prop('id')).toBe('my-label'); - expect(label.prop('children')).toBe('Label'); + expect(element).toContainReactComponent(Label, { + id: 'my-label', + children: 'Label', + }); }); it('passes required indicator prop along to the label', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - const label = element.find(Label); - expect(label.prop('requiredIndicator')).toBe(true); + expect(element).toContainReactComponent(Label, {requiredIndicator: true}); }); describe('error', () => { it('renders error markup when provided with a value', () => { - const label = mountWithAppProvider( + const label = mountWithApp( , ); - const error = label.find(InlineError); - expect(error).toHaveLength(1); - expect(error.text()).toContain('Error message'); + expect(label).toContainReactComponentTimes(InlineError, 1); + expect(label).toContainReactText('Error message'); }); it('renders no error markup when provided with a boolean value', () => { - const label = mountWithAppProvider( + const label = mountWithApp( ', () => { />, ); - expect(label.find(InlineError)).toHaveLength(0); + expect(label).not.toContainReactComponent(InlineError); }); }); @@ -53,12 +52,12 @@ describe('', () => { return
; } - const element = mountWithAppProvider( + const element = mountWithApp( , ); - expect(element.find(MyComponent).exists()).toBe(true); + expect(element).toContainReactComponent(MyComponent); }); describe('action', () => { @@ -71,22 +70,22 @@ describe('', () => { accessibilityLabel: 'My action with more description', }; - const label = mountWithAppProvider( + const label = mountWithApp( , ); - const button = buttonFrom(action, {plain: true}); - expect(label.containsMatchingElement(button)).toBe(true); + + expect(label).toContainReactComponent(Button, {plain: true}); }); it('does not render any block-level elements in the label element', () => { - const label = mountWithAppProvider( + const label = mountWithApp( , ); - expect(label.find('label').find('div')).toHaveLength(0); + expect(label.find('label')).not.toContainReactComponent('div'); }); }); }); diff --git a/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx b/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx index 2222c279ca0..c31aae41bd8 100644 --- a/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx +++ b/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx @@ -22,9 +22,7 @@ export function AnnotatedSection(props: AnnotatedSectionProps) {
- - {title} - + {title} {descriptionMarkup && (
', () => { it('renders children', () => { - const layout = mountWithAppProvider( + const layout = mountWithApp( , ); - expect(layout.find(MyComponent).exists()).toBe(true); + expect(layout).toContainReactComponent(MyComponent); }); it('renders children wrapped in a section', () => { - const layout = mountWithAppProvider( + const layout = mountWithApp( , ); - const section = layout.find(Section); - expect(section.exists()).toBe(true); - expect(section.find(MyComponent).exists()).toBe(true); + expect(layout).toContainReactComponent(Section); + expect(layout.find(Section)).toContainReactComponent(MyComponent); }); describe('', () => { it('renders children', () => { - const annotatedSection = mountWithAppProvider( + const annotatedSection = mountWithApp( , ); - expect(annotatedSection.find(MyComponent).exists()).toBe(true); + expect(annotatedSection).toContainReactComponent(MyComponent); }); it('renders a title', () => { const title = 'Store details'; - const annotatedSection = mountWithAppProvider( - , + const annotatedSection = mountWithApp( + , ); - - expect(findByTestID(annotatedSection, 'AnnotationTitle').text()).toBe( + expect(annotatedSection.find(Heading, {id: 'someId'})).toContainReactText( title, ); }); it('renders a description as a string', () => { const description = 'A good description of this section'; - const annotatedSection = mountWithAppProvider( + const annotatedSection = mountWithApp( , ); - expect( - findByTestID(annotatedSection, 'AnnotationDescription').text(), - ).toBe(description); + const annotedDescriptionTextContainer = annotatedSection.find( + TextContainer, + )!; + + expect(annotedDescriptionTextContainer).toContainReactComponent('div'); + expect(annotedDescriptionTextContainer.find('div')).toContainReactText( + description, + ); }); it('renders a description as a node', () => { - const annotatedSection = mountWithAppProvider( + const annotatedSection = mountWithApp( } />, ); - const annotatedDescription = findByTestID( - annotatedSection, - 'AnnotationDescription', - ); - expect(annotatedDescription.find(MyComponent).exists()).toBe(true); + const annotedDescriptionTextContainer = annotatedSection.find( + TextContainer, + )!; + + expect(annotedDescriptionTextContainer).toContainReactComponent( + MyComponent, + ); }); it('does not render an empty description node', () => { - const annotatedSection = mountWithAppProvider( + const annotatedSection = mountWithApp( , ); - const description = findByTestID( - annotatedSection, - 'AnnotationDescription', - ); - expect(description.exists()).toBe(false); + const annotedDescriptionTextContainer = annotatedSection.find( + TextContainer, + )!; + + expect(annotatedSection).toContainReactComponent(TextContainer); + expect(annotedDescriptionTextContainer).not.toContainReactComponent( + 'div', + { + className: expect.stringContaining(styles.AnnotationDescription), + }, + ); }); it('passes through an ID for deeplinking', () => { - const layout = mountWithAppProvider( + const layout = mountWithApp( , ); - const section = layout.find('#MySection'); - - expect(section.exists()).toBe(true); + expect(layout).toContainReactComponent(Heading, {id: 'MySection'}); }); }); }); diff --git a/src/components/Link/tests/Link.test.tsx b/src/components/Link/tests/Link.test.tsx index 7aee150942e..deeeafbb868 100644 --- a/src/components/Link/tests/Link.test.tsx +++ b/src/components/Link/tests/Link.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 {Banner, UnstyledLink, Icon} from 'components'; @@ -10,106 +8,111 @@ import {Link} from '../Link'; describe('', () => { it('calls onClick when clicking', () => { const spy = jest.fn(); - const link = mountWithAppProvider(); - link.find('a').simulate('click'); + const link = mountWithApp(); + link.find('a')!.trigger('onClick'); expect(spy).toHaveBeenCalled(); }); it('renders a button if no url is provided', () => { - const link = mountWithAppProvider(); - const button = link.find('button').first(); - expect(button.exists()).toBe(true); + const link = mountWithApp(); + expect(link).toContainReactComponentTimes('button', 1); }); it('renders an anchor if a url is provided', () => { - const link = mountWithAppProvider(); - const anchor = link.find(UnstyledLink).first(); - expect(anchor.exists()).toBe(true); + const link = mountWithApp(); + expect(link).toContainReactComponentTimes('a', 1); }); describe('id', () => { it('is passed down to an underlying button', () => { const id = 'MyID'; - const link = mountWithAppProvider(); - expect(link.find('button').prop('id')).toBe(id); + const link = mountWithApp(); + // expect(link.find('button').prop('id')).toBe(id); + expect(link).toContainReactComponent('button', {id}); }); it('is passed down to an underlying UnstyledLink', () => { const id = 'MyID'; - const link = mountWithAppProvider( - , - ); - expect(link.find(UnstyledLink).prop('id')).toBe(id); + const link = mountWithApp(); + expect(link).toContainReactComponent(UnstyledLink, {id}); }); }); describe('external link', () => { it('has a trailing icon', () => { - const link = mountWithAppProvider( + const link = mountWithApp( Shopify Help Center , ); - expect(link.children().last().find(Icon).exists()).toBe(true); + expect(link).toContainReactComponent(Icon); }); it('informs screen readers that it opens in a new window', () => { - const link = mountWithAppProvider( + const link = mountWithApp( Shopify Help Center , ); const hintText = en.Polaris.Common.newWindowAccessibilityHint; - expect(link.children().last().find(Icon).prop('accessibilityLabel')).toBe( - hintText, - ); + + expect(link).toContainReactComponent(Icon, { + accessibilityLabel: hintText, + }); }); it('doesn’t have a trailing icon for non-string children', () => { - const link = mountWithAppProvider( + const link = mountWithApp( Shopify Help Center , ); - expect(link.find(Icon).exists()).toBe(false); + expect(link).not.toContainReactComponent(Icon); }); }); describe('monochrome link', () => { it('outputs a monochrome unstyled link if rendered within a banner', () => { - const link = mountWithAppProvider( + const link = mountWithApp( Some content , - ).find(UnstyledLink); + ); - expect(link.hasClass('monochrome')).toBe(true); + expect(link).toContainReactComponent(UnstyledLink, { + className: expect.stringContaining('monochrome'), + }); }); it('does not output a monochrome unstyled link if it is not rendered within a banner', () => { - const link = mountWithAppProvider( + const link = mountWithApp( Some content, - ).find(UnstyledLink); + ); - expect(link.hasClass('monochrome')).toBe(false); + // expect(link.hasClass('monochrome')).toBe(false); + expect(link).not.toContainReactComponent(UnstyledLink, { + className: expect.stringContaining('monochrome'), + }); }); it('outputs a monochrome button if rendered within a banner', () => { - const button = mountWithAppProvider( + const button = mountWithApp( Some content , - ).find('button'); + ); - expect(button.hasClass('monochrome')).toBe(true); + expect(button).toContainReactComponent('button', { + className: expect.stringContaining('monochrome'), + }); }); it('does not output a monochrome button if it is not rendered within a banner', () => { - const button = mountWithAppProvider(Some content).find( - 'button', - ); + const button = mountWithApp(Some content); - expect(button.hasClass('monochrome')).toBe(false); + expect(button).not.toContainReactComponent('button', { + className: expect.stringContaining('monochrome'), + }); }); }); @@ -143,9 +146,11 @@ describe('', () => { describe('removesUnderline', () => { it('adds removeUnderline class to the link', () => { - const link = mountWithAppProvider(Test); + const link = mountWithApp(Test); - expect(link.find('button').hasClass('removeUnderline')).toBe(true); + expect(link).toContainReactComponent('button', { + className: expect.stringContaining('removeUnderline'), + }); }); }); }); diff --git a/src/components/MediaCard/tests/MediaCard.test.tsx b/src/components/MediaCard/tests/MediaCard.test.tsx index 7aec2496986..58f7a737851 100644 --- a/src/components/MediaCard/tests/MediaCard.test.tsx +++ b/src/components/MediaCard/tests/MediaCard.test.tsx @@ -1,8 +1,6 @@ import React from 'react'; import {Heading, Popover, Button, ActionList, Badge} from 'components'; import {mountWithApp} from 'test-utilities'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; import {MediaCard} from '../MediaCard'; @@ -33,14 +31,12 @@ describe('', () => { {badgeString} ); - const videoCard = mountWithAppProvider( - , - ); + const videoCard = mountWithApp(); - const headerMarkup = videoCard.find('h2'); + const headerMarkup = videoCard.find('h2')!; - expect(headerMarkup.text()).toContain(titleString); - expect(headerMarkup.find('Badge').text()).toBe(badgeString); + expect(headerMarkup.find(Badge)).toContainReactText(badgeString); + expect(headerMarkup).toContainReactText(titleString); }); it('renders the description as a paragraph', () => { diff --git a/src/components/Tabs/tests/Tabs.test.tsx b/src/components/Tabs/tests/Tabs.test.tsx index 36da14082fd..191bd6e1ded 100644 --- a/src/components/Tabs/tests/Tabs.test.tsx +++ b/src/components/Tabs/tests/Tabs.test.tsx @@ -1,6 +1,4 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; import {mountWithApp} from 'test-utilities'; import {Tab, Panel, TabMeasurer} from '../components'; @@ -95,10 +93,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); + expect(wrapper.find('ul')!.findAll(Tab)[index]).toHaveReactProps({ + id: tab.id, + }); }); }); @@ -108,38 +108,38 @@ 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, - ); + expect(wrapper.find('ul')!.findAll(Tab)[index]).toHaveReactProps({ + 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 tab = wrapper.find('ul')!.findAll(Tab)[index]; + const panelID = tab.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(); + const tab = wrapper.find('ul')!.findAll(Tab)[index]; + expect(tab).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); + const urlTab = wrapper.find('ul')!.findAll(Tab)[index]; + + expect(urlTab).toHaveReactProps({url: tab.url}); }); }); @@ -164,14 +162,13 @@ 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); + const labelledTab = wrapper.find('ul')!.findAll(Tab)[index]; + expect(labelledTab).toHaveReactProps({ + accessibilityLabel: tab.accessibilityLabel, + }); }); }); @@ -180,14 +177,16 @@ 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); + const contentTab = wrapper.find('ul')!.findAll(Tab)[index]; + + expect(contentTab).toHaveReactProps({ + children: tab.content, + }); }); }); @@ -203,14 +202,16 @@ 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); + const contentTab = wrapper.find('ul')!.findAll(Tab)[index]; + + expect(contentTab).toHaveReactProps({ + children: tab.content, + }); }); }); }); @@ -235,7 +236,7 @@ describe('', () => { {...tabs[1], panelID: 'panel-2'}, ]; - const wrapper = mountWithAppProvider( + const wrapper = mountWithApp( Panel contents , @@ -248,35 +249,29 @@ 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); + const nonSelectedPanel = wrapper.findAll(Panel)[1]; + expect(nonSelectedPanel).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(wrapper).toContainReactComponentTimes(Panel, 1, { + id: selectedTab.prop('panelID'), + }); + expect(panel).toContainReactHtml('

Tab content

'); }); it('uses a custom panelID', () => { @@ -285,25 +280,25 @@ 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 +311,45 @@ 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', { - key: 'ArrowRight', - }); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); + const tabs = mountWithApp(); + tabs.find('ul')!.trigger('onKeyUp', {key: 'ArrowRight'}); + + 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', { - key: 'ArrowRight', - }); - trigger(tabs.find('ul'), 'onKeyUp', { - key: 'ArrowRight', - }); - trigger(tabs.find('ul'), 'onKeyUp', { - key: 'ArrowRight', - }); - trigger(tabs.find('ul'), 'onKeyUp', { - key: 'ArrowRight', - }); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); + const tabs = mountWithApp(); + + const ul = tabs.find('ul')!; + ul.trigger('onKeyUp', {key: 'ArrowRight'}); + ul.trigger('onKeyUp', {key: 'ArrowRight'}); + ul.trigger('onKeyUp', {key: 'ArrowRight'}); + ul.trigger('onKeyUp', {key: 'ArrowRight'}); + + 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', { - key: 'ArrowLeft', - }); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(2); + 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 +391,85 @@ 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).toContainReactComponent(Popover, { + 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); + const popover = tabs.find(Popover)!; expect(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'); + const popover = tabs.find(Popover)!; + const disclosureActivator = popover.find('button')!; - trigger(disclosureActivator, 'onClick', { - key: 'Enter', - }); + disclosureActivator.trigger('onClick'); - trigger(tabs.find('ul'), 'onKeyUp', { - key: 'ArrowRight', - }); + 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 disclosureActivator = tabs.find(Popover)!.find('button')!; + const ul = tabs.find('ul')!; - trigger(disclosureActivator, 'onClick', { - key: 'Enter', - }); + disclosureActivator.trigger('onClick'); - trigger(tabs.find('ul'), 'onKeyUp', { - key: 'ArrowRight', - }); + ul.trigger('onKeyUp', {key: 'ArrowRight'}); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); + expect(tabs).toContainReactComponent(TabMeasurer, {tabToFocus: 0}); - trigger(tabs.find('ul'), 'onKeyUp', { - key: 'ArrowRight', - }); + ul.trigger('onKeyUp', {key: 'ArrowRight'}); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(1); + expect(tabs).toContainReactComponent(TabMeasurer, {tabToFocus: 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 ul = tabs.find('ul')!; + expect(tabs).toContainReactComponent(Popover, {active: false}); - const popover = tabs.find(Popover); - expect(popover.prop('active')).toBe(false); - - trigger(tabs.find('ul'), 'onKeyUp', { - key: 'ArrowRight', - }); - - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); - - trigger(tabs.find('ul'), 'onKeyUp', { - key: 'Enter', - }); + ul.trigger('onKeyUp', {key: 'ArrowRight'}); + expect(tabs).toContainReactComponent(TabMeasurer, {tabToFocus: 0}); - expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); + ul.trigger('onKeyUp', {key: 'Enter'}); + expect(tabs).toContainReactComponent(TabMeasurer, {tabToFocus: 0}); }); }); }); From c4f39e2be8556be70131a445a8f7d12d165616ff Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Wed, 11 Aug 2021 17:08:46 -0400 Subject: [PATCH 2/4] Added tests modernized to UNRELEASED.md --- UNRELEASED.md | 4 ++-- src/components/Link/tests/Link.test.tsx | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 04854f7d3c5..45e8fdb601c 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -45,9 +45,9 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for FormLayout and some components of ColorPicker ([#4330](https://github.com/Shopify/polaris-react/pull/4330)) - Modernized tests for Breadcrumbs, BulkActions, Button, ButtonGroup/Item, and ButtonGroup components([#4315](https://github.com/Shopify/polaris-react/pull/4315)) - Modernized tests for DualThumb ([#4341](https://github.com/Shopify/polaris-react/pull/4341)) -- Modernized tests for AppProvider, AfterInitialMount components([#4315](https://github.com/Shopify/polaris-react/pull/4331)) +- Modernized tests for AppProvider, AfterInitialMount components([#4331](https://github.com/Shopify/polaris-react/pull/4331)) - Modernized tests for SkeletonBodyTest, SkeletonDisplayTest, SkeletonPage, SkeletonThumbnail, and Spinner components ([#4353](https://github.com/Shopify/polaris-react/pull/4353)) - - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311)) +- Modernized tests for Konami, Labelled, Link, Layout, MediaCard, and Tabs components([#4389](https://github.com/Shopify/polaris-react/pull/4389)) ### Deprecations diff --git a/src/components/Link/tests/Link.test.tsx b/src/components/Link/tests/Link.test.tsx index deeeafbb868..3662cd783a0 100644 --- a/src/components/Link/tests/Link.test.tsx +++ b/src/components/Link/tests/Link.test.tsx @@ -27,7 +27,6 @@ describe('', () => { it('is passed down to an underlying button', () => { const id = 'MyID'; const link = mountWithApp(); - // expect(link.find('button').prop('id')).toBe(id); expect(link).toContainReactComponent('button', {id}); }); @@ -89,7 +88,6 @@ describe('', () => { Some content, ); - // expect(link.hasClass('monochrome')).toBe(false); expect(link).not.toContainReactComponent(UnstyledLink, { className: expect.stringContaining('monochrome'), }); From 28a5fb117f4d3a94fac7498e7a914a8b6064be34 Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Thu, 12 Aug 2021 13:36:48 -0400 Subject: [PATCH 3/4] Removed unused testId --- .../Layout/components/AnnotatedSection/AnnotatedSection.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx b/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx index c31aae41bd8..353f0972fa5 100644 --- a/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx +++ b/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx @@ -24,10 +24,7 @@ export function AnnotatedSection(props: AnnotatedSectionProps) { {title} {descriptionMarkup && ( -
+
{descriptionMarkup}
)} From b535993a6adfd12a169b22f05d232ce0a1a06146 Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Thu, 12 Aug 2021 13:45:30 -0400 Subject: [PATCH 4/4] Split PR, removing Layout, MediaCard and Tabs tests --- UNRELEASED.md | 2 +- .../AnnotatedSection/AnnotatedSection.tsx | 9 +- src/components/Layout/tests/Layout.test.tsx | 79 +++--- .../MediaCard/tests/MediaCard.test.tsx | 12 +- src/components/Tabs/tests/Tabs.test.tsx | 264 ++++++++++-------- 5 files changed, 202 insertions(+), 164 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 45e8fdb601c..0a661312557 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -48,6 +48,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for AppProvider, AfterInitialMount components([#4331](https://github.com/Shopify/polaris-react/pull/4331)) - Modernized tests for SkeletonBodyTest, SkeletonDisplayTest, SkeletonPage, SkeletonThumbnail, and Spinner components ([#4353](https://github.com/Shopify/polaris-react/pull/4353)) - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311)) -- Modernized tests for Konami, Labelled, Link, Layout, MediaCard, and Tabs components([#4389](https://github.com/Shopify/polaris-react/pull/4389)) +- Modernized tests for Konami, Labelled, and Link components([#4389](https://github.com/Shopify/polaris-react/pull/4389)) ### Deprecations diff --git a/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx b/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx index 353f0972fa5..2222c279ca0 100644 --- a/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx +++ b/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx @@ -22,9 +22,14 @@ export function AnnotatedSection(props: AnnotatedSectionProps) {
- {title} + + {title} + {descriptionMarkup && ( -
+
{descriptionMarkup}
)} diff --git a/src/components/Layout/tests/Layout.test.tsx b/src/components/Layout/tests/Layout.test.tsx index 72d4dcc4272..51035235184 100644 --- a/src/components/Layout/tests/Layout.test.tsx +++ b/src/components/Layout/tests/Layout.test.tsx @@ -1,114 +1,103 @@ import React from 'react'; -import {mountWithApp} from 'test-utilities'; -import {TextContainer} from 'components/TextContainer'; -import {Heading} from 'components/Heading'; -import styles from 'Layout.scss'; +// eslint-disable-next-line no-restricted-imports +import {findByTestID, mountWithAppProvider} from 'test-utilities/legacy'; import {Section} from '../components'; import {Layout} from '../Layout'; describe('', () => { it('renders children', () => { - const layout = mountWithApp( + const layout = mountWithAppProvider( , ); - expect(layout).toContainReactComponent(MyComponent); + expect(layout.find(MyComponent).exists()).toBe(true); }); it('renders children wrapped in a section', () => { - const layout = mountWithApp( + const layout = mountWithAppProvider( , ); + const section = layout.find(Section); - expect(layout).toContainReactComponent(Section); - expect(layout.find(Section)).toContainReactComponent(MyComponent); + expect(section.exists()).toBe(true); + expect(section.find(MyComponent).exists()).toBe(true); }); describe('', () => { it('renders children', () => { - const annotatedSection = mountWithApp( + const annotatedSection = mountWithAppProvider( , ); - expect(annotatedSection).toContainReactComponent(MyComponent); + expect(annotatedSection.find(MyComponent).exists()).toBe(true); }); it('renders a title', () => { const title = 'Store details'; - const annotatedSection = mountWithApp( - , + const annotatedSection = mountWithAppProvider( + , ); - expect(annotatedSection.find(Heading, {id: 'someId'})).toContainReactText( + + expect(findByTestID(annotatedSection, 'AnnotationTitle').text()).toBe( title, ); }); it('renders a description as a string', () => { const description = 'A good description of this section'; - const annotatedSection = mountWithApp( + const annotatedSection = mountWithAppProvider( , ); - const annotedDescriptionTextContainer = annotatedSection.find( - TextContainer, - )!; - - expect(annotedDescriptionTextContainer).toContainReactComponent('div'); - expect(annotedDescriptionTextContainer.find('div')).toContainReactText( - description, - ); + expect( + findByTestID(annotatedSection, 'AnnotationDescription').text(), + ).toBe(description); }); it('renders a description as a node', () => { - const annotatedSection = mountWithApp( + const annotatedSection = mountWithAppProvider( } />, ); - - const annotedDescriptionTextContainer = annotatedSection.find( - TextContainer, - )!; - - expect(annotedDescriptionTextContainer).toContainReactComponent( - MyComponent, + const annotatedDescription = findByTestID( + annotatedSection, + 'AnnotationDescription', ); + + expect(annotatedDescription.find(MyComponent).exists()).toBe(true); }); it('does not render an empty description node', () => { - const annotatedSection = mountWithApp( + const annotatedSection = mountWithAppProvider( , ); - - const annotedDescriptionTextContainer = annotatedSection.find( - TextContainer, - )!; - - expect(annotatedSection).toContainReactComponent(TextContainer); - expect(annotedDescriptionTextContainer).not.toContainReactComponent( - 'div', - { - className: expect.stringContaining(styles.AnnotationDescription), - }, + const description = findByTestID( + annotatedSection, + 'AnnotationDescription', ); + + expect(description.exists()).toBe(false); }); it('passes through an ID for deeplinking', () => { - const layout = mountWithApp( + const layout = mountWithAppProvider( , ); - expect(layout).toContainReactComponent(Heading, {id: 'MySection'}); + const section = layout.find('#MySection'); + + expect(section.exists()).toBe(true); }); }); }); diff --git a/src/components/MediaCard/tests/MediaCard.test.tsx b/src/components/MediaCard/tests/MediaCard.test.tsx index 58f7a737851..7aec2496986 100644 --- a/src/components/MediaCard/tests/MediaCard.test.tsx +++ b/src/components/MediaCard/tests/MediaCard.test.tsx @@ -1,6 +1,8 @@ import React from 'react'; import {Heading, Popover, Button, ActionList, Badge} from 'components'; import {mountWithApp} from 'test-utilities'; +// eslint-disable-next-line no-restricted-imports +import {mountWithAppProvider} from 'test-utilities/legacy'; import {MediaCard} from '../MediaCard'; @@ -31,12 +33,14 @@ describe('', () => { {badgeString} ); - const videoCard = mountWithApp(); + const videoCard = mountWithAppProvider( + , + ); - const headerMarkup = videoCard.find('h2')!; + const headerMarkup = videoCard.find('h2'); - expect(headerMarkup.find(Badge)).toContainReactText(badgeString); - expect(headerMarkup).toContainReactText(titleString); + expect(headerMarkup.text()).toContain(titleString); + expect(headerMarkup.find('Badge').text()).toBe(badgeString); }); it('renders the description as a paragraph', () => { diff --git a/src/components/Tabs/tests/Tabs.test.tsx b/src/components/Tabs/tests/Tabs.test.tsx index 191bd6e1ded..36da14082fd 100644 --- a/src/components/Tabs/tests/Tabs.test.tsx +++ b/src/components/Tabs/tests/Tabs.test.tsx @@ -1,4 +1,6 @@ import React from 'react'; +// eslint-disable-next-line no-restricted-imports +import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; import {mountWithApp} from 'test-utilities'; import {Tab, Panel, TabMeasurer} from '../components'; @@ -93,12 +95,10 @@ describe('', () => { {content: 'Tab 1', id: 'tab-1'}, {content: 'Tab 2', id: 'tab-2'}, ]; - const wrapper = mountWithApp(); + const wrapper = mountWithAppProvider(); tabs.forEach((tab, index) => { - expect(wrapper.find('ul')!.findAll(Tab)[index]).toHaveReactProps({ - id: tab.id, - }); + expect(wrapper.find('ul').find(Tab).at(index).prop('id')).toBe(tab.id); }); }); @@ -108,38 +108,38 @@ describe('', () => { {...tabs[1], panelID: 'panel-2'}, ]; const content =

Panel contents

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

Panel contents

; - const wrapper = mountWithApp({content}); + const wrapper = mountWithAppProvider( + {content}, + ); tabs.forEach((_, index) => { - const tab = wrapper.find('ul')!.findAll(Tab)[index]; - const panelID = tab.prop('panelID'); - + const panelID = wrapper.find('ul').find(Tab).at(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 = mountWithApp(); + const wrapper = mountWithAppProvider(); tabs.forEach((_, index) => { - const tab = wrapper.find('ul')!.findAll(Tab)[index]; - expect(tab).toHaveReactProps({panelID: undefined}); + const panelID = wrapper.find('ul').find(Tab).at(index).prop('panelID'); + expect(panelID).toBeUndefined(); }); }); @@ -148,12 +148,14 @@ describe('', () => { {...tabs[0], url: 'https://shopify.com'}, {...tabs[1], url: 'https://google.com'}, ]; - const wrapper = mountWithApp(); + const wrapper = mountWithAppProvider( + , + ); urlTabs.forEach((tab, index) => { - const urlTab = wrapper.find('ul')!.findAll(Tab)[index]; - - expect(urlTab).toHaveReactProps({url: tab.url}); + expect( + wrapper.find('ul').find(Tab).at(index).prop('url'), + ).toStrictEqual(tab.url); }); }); @@ -162,13 +164,14 @@ describe('', () => { {...tabs[0], accessibilityLabel: 'Tab 1'}, {...tabs[1], accessibilityLabel: 'Tab 2'}, ]; - const wrapper = mountWithApp(); + const wrapper = mountWithAppProvider( + , + ); labelledTabs.forEach((tab, index) => { - const labelledTab = wrapper.find('ul')!.findAll(Tab)[index]; - expect(labelledTab).toHaveReactProps({ - accessibilityLabel: tab.accessibilityLabel, - }); + expect( + wrapper.find('ul').find(Tab).at(index).prop('accessibilityLabel'), + ).toStrictEqual(tab.accessibilityLabel); }); }); @@ -177,16 +180,14 @@ describe('', () => { {content: 'Tab 1', id: 'tab-1'}, {content: 'Tab 2', id: 'tab-2'}, ]; - const wrapper = mountWithApp( + const wrapper = mountWithAppProvider( , ); tabsWithContent.forEach((tab, index) => { - const contentTab = wrapper.find('ul')!.findAll(Tab)[index]; - - expect(contentTab).toHaveReactProps({ - children: tab.content, - }); + expect( + wrapper.find('ul').find(Tab).at(index).prop('children'), + ).toStrictEqual(tab.content); }); }); @@ -202,16 +203,14 @@ describe('', () => { id: 'tab-2', }, ]; - const wrapper = mountWithApp( + const wrapper = mountWithAppProvider( , ); tabsWithContent.forEach((tab, index) => { - const contentTab = wrapper.find('ul')!.findAll(Tab)[index]; - - expect(contentTab).toHaveReactProps({ - children: tab.content, - }); + expect( + wrapper.find('ul').find(Tab).at(index).prop('children'), + ).toStrictEqual(tab.content); }); }); }); @@ -236,7 +235,7 @@ describe('', () => { {...tabs[1], panelID: 'panel-2'}, ]; - const wrapper = mountWithApp( + const wrapper = mountWithAppProvider( Panel contents , @@ -249,29 +248,35 @@ describe('', () => { describe('panel', () => { it('renders a Panel for each of the Tabs', () => { const content =

Tab content

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

Tab content

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

Tab content

; - const wrapper = mountWithApp({content}); - - const selectedTab = wrapper.find('ul')!.findAll(Tab)[0]; - const panel = wrapper.findAll(Panel)[0]; + const wrapper = mountWithAppProvider( + {content}, + ); - expect(wrapper).toContainReactComponentTimes(Panel, 1, { - id: selectedTab.prop('panelID'), - }); - expect(panel).toContainReactHtml('

Tab content

'); + 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')); }); it('uses a custom panelID', () => { @@ -280,25 +285,25 @@ describe('', () => { tabs[1], ]; const content =

Tab content

; - const wrapper = mountWithApp( + const wrapper = mountWithAppProvider( {content} , ); - const panel = wrapper.findAll(Panel)[0]; - const selectedTab = wrapper.find('ul')!.findAll(Tab)[0]; - - expect(panel).toHaveReactProps({id: selectedTab.prop('panelID')}); + const panel = wrapper.find(Panel).at(0); + const selectedTab = wrapper.find('ul').find(Tab).at(0); + expect(panel.prop('id')).toBe(selectedTab.prop('panelID')); }); }); describe('onSelect()', () => { it('is called with the index of the clicked tab', () => { const spy = jest.fn(); - const wrapper = mountWithApp(); - wrapper.find('ul')!.findAll(Tab)[1].find('button')!.trigger('onClick'); - + const wrapper = mountWithAppProvider( + , + ); + wrapper.find('ul').find(Tab).at(1).find('button').simulate('click'); expect(spy).toHaveBeenCalledWith(1); }); }); @@ -311,45 +316,57 @@ describe('', () => { ]; it('is not set to anything by default', () => { - const tabs = mountWithApp(); - expect(tabs.find(TabMeasurer)).toHaveReactProps({tabToFocus: -1}); + const tabs = mountWithAppProvider(); + expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(-1); }); it('passes the provided selected value if given', () => { - const tabs = mountWithApp( + const tabs = mountWithAppProvider( , ); - expect(tabs.find(TabMeasurer)).toHaveReactProps({selected: 1}); + expect(tabs.find(TabMeasurer).prop('selected')).toBe(1); }); describe('ArrowRight', () => { it('shifts focus to the next tab when pressing ArrowRight', () => { - const tabs = mountWithApp(); - tabs.find('ul')!.trigger('onKeyUp', {key: 'ArrowRight'}); - - expect(tabs.find(TabMeasurer)).toHaveReactProps({tabToFocus: 0}); + const tabs = mountWithAppProvider( + , + ); + trigger(tabs.find('ul'), 'onKeyUp', { + key: 'ArrowRight', + }); + expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); }); it('shifts focus to the first tab when pressing ArrowRight on the last tab', () => { - const tabs = mountWithApp(); - - const ul = tabs.find('ul')!; - ul.trigger('onKeyUp', {key: 'ArrowRight'}); - ul.trigger('onKeyUp', {key: 'ArrowRight'}); - ul.trigger('onKeyUp', {key: 'ArrowRight'}); - ul.trigger('onKeyUp', {key: 'ArrowRight'}); - - expect(tabs.find(TabMeasurer)).toHaveReactProps({tabToFocus: 0}); + const tabs = mountWithAppProvider( + , + ); + trigger(tabs.find('ul'), 'onKeyUp', { + key: 'ArrowRight', + }); + trigger(tabs.find('ul'), 'onKeyUp', { + key: 'ArrowRight', + }); + trigger(tabs.find('ul'), 'onKeyUp', { + key: 'ArrowRight', + }); + trigger(tabs.find('ul'), 'onKeyUp', { + key: 'ArrowRight', + }); + expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); }); }); describe('ArrowLeft', () => { it('shifts focus to the last tab when pressing ArrowLeft', () => { - 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}); + const tabs = mountWithAppProvider( + , + ); + trigger(tabs.find('ul'), 'onKeyUp', { + key: 'ArrowLeft', + }); + expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(2); }); }); }); @@ -391,85 +408,108 @@ describe('', () => { }); it('passes preferredPosition below to the Popover', () => { - const tabs = mountWithApp(); - tabs.find(TabMeasurer)!.trigger('handleMeasurement', { + const tabs = mountWithAppProvider(); + const tabMeasurer = tabs.find(TabMeasurer); + trigger(tabMeasurer, 'handleMeasurement', { hiddenTabWidths: [82, 160, 150, 100, 80, 120], containerWidth: 300, disclosureWidth: 0, }); - expect(tabs).toContainReactComponent(Popover, { - preferredPosition: 'below', - }); + const popover = tabs.find(Popover); + expect(popover.prop('preferredPosition')).toBe('below'); }); it('renders with a button as the activator when there are hiddenTabs', () => { - const tabs = mountWithApp(); - tabs.find(TabMeasurer)!.trigger('handleMeasurement', { + const tabs = mountWithAppProvider(); + const tabMeasurer = tabs.find(TabMeasurer); + trigger(tabMeasurer, 'handleMeasurement', { hiddenTabWidths: [82, 160, 150, 100, 80, 120], containerWidth: 300, disclosureWidth: 0, }); - const popover = tabs.find(Popover)!; + const popover = tabs.find(Popover); expect(popover.prop('activator').type).toBe('button'); }); describe('ArrowRight', () => { it('shifts focus to the first tab when pressing ArrowRight', () => { - const tabs = mountWithApp(); - tabs.find(TabMeasurer)!.trigger('handleMeasurement', { + const tabs = mountWithAppProvider(); + const tabMeasurer = tabs.find(TabMeasurer); + trigger(tabMeasurer, 'handleMeasurement', { hiddenTabWidths: [82, 160, 150, 100, 80, 120], containerWidth: 300, disclosureWidth: 0, }); - const popover = tabs.find(Popover)!; - const disclosureActivator = popover.find('button')!; + const popover = tabs.find(Popover); + const disclosureActivator = popover.find('.DisclosureActivator'); - disclosureActivator.trigger('onClick'); + trigger(disclosureActivator, 'onClick', { + key: 'Enter', + }); - tabs.find('ul')!.trigger('onKeyUp', {key: 'ArrowRight'}); + trigger(tabs.find('ul'), 'onKeyUp', { + key: 'ArrowRight', + }); - expect(tabs).toContainReactComponent(TabMeasurer, {tabToFocus: 0}); + expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); }); it('shifts focus to the first hidden tab when the last visible tab is focused and the disclosure popover is active', () => { - const tabs = mountWithApp(); - tabs.find(TabMeasurer)!.trigger('handleMeasurement', { + const tabs = mountWithAppProvider(); + const tabMeasurer = tabs.find(TabMeasurer); + trigger(tabMeasurer, 'handleMeasurement', { hiddenTabWidths: [82, 160, 150, 100, 80, 120], containerWidth: 300, disclosureWidth: 0, }); - const disclosureActivator = tabs.find(Popover)!.find('button')!; - const ul = tabs.find('ul')!; + const popover = tabs.find(Popover); + const disclosureActivator = popover.find('button'); + + disclosureActivator.simulate('click'); - disclosureActivator.trigger('onClick'); + trigger(disclosureActivator, 'onClick', { + key: 'Enter', + }); - ul.trigger('onKeyUp', {key: 'ArrowRight'}); + trigger(tabs.find('ul'), 'onKeyUp', { + key: 'ArrowRight', + }); - expect(tabs).toContainReactComponent(TabMeasurer, {tabToFocus: 0}); + expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); - ul.trigger('onKeyUp', {key: 'ArrowRight'}); + trigger(tabs.find('ul'), 'onKeyUp', { + key: 'ArrowRight', + }); - expect(tabs).toContainReactComponent(TabMeasurer, {tabToFocus: 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 = mountWithApp(); - tabs.find(TabMeasurer)!.trigger('handleMeasurement', { + const tabs = mountWithAppProvider(); + const tabMeasurer = tabs.find(TabMeasurer); + trigger(tabMeasurer, 'handleMeasurement', { hiddenTabWidths: [82, 160, 150, 100, 80, 120], containerWidth: 300, disclosureWidth: 0, }); - const ul = tabs.find('ul')!; - expect(tabs).toContainReactComponent(Popover, {active: false}); - ul.trigger('onKeyUp', {key: 'ArrowRight'}); - expect(tabs).toContainReactComponent(TabMeasurer, {tabToFocus: 0}); + const popover = tabs.find(Popover); + expect(popover.prop('active')).toBe(false); + + trigger(tabs.find('ul'), 'onKeyUp', { + key: 'ArrowRight', + }); + + expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); + + trigger(tabs.find('ul'), 'onKeyUp', { + key: 'Enter', + }); - ul.trigger('onKeyUp', {key: 'Enter'}); - expect(tabs).toContainReactComponent(TabMeasurer, {tabToFocus: 0}); + expect(tabs.find(TabMeasurer).prop('tabToFocus')).toBe(0); }); }); });