diff --git a/UNRELEASED.md b/UNRELEASED.md
index 33b84027ace..8c1e5fd4f65 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -33,13 +33,14 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
### Code quality
- Modernized tests for Avatar, Backdrop, Badge, Banner components([#4306](https://github.com/Shopify/polaris-react/pull/4306))
-- Modernized test for Card: Subsection, Header, Sections and Card ([#4325](https://github.com/Shopify/polaris-react/pull/4325)).
+- Modernized tests for Card: Subsection, Header, Sections and Card ([#4325](https://github.com/Shopify/polaris-react/pull/4325)).
- Modernized tests for Item, Panel, List, Tab, TabMeasurer (from Tabs components). ([#4313](https://github.com/Shopify/polaris-react/pull/4313))
- Modernized tests for Tooltip, Toast components([#4314](https://github.com/Shopify/polaris-react/pull/4314))
- Modernized tests for AccountConnection, ActionList components([#4316](https://github.com/Shopify/polaris-react/pull/4316))
- Modernized tests for ActionMenu and its subcomponents ([#4318](https://github.com/Shopify/polaris-react/pull/4318))
- Modernized tests for Loading-List-Item-Label components([#4321](https://github.com/Shopify/polaris-react/pull/4321))
-- Modernizes test for DiscardConfirmationModal, ContextualSaveBar, Loading, Toast, ToastManager, Frame (from Frame components) ([#4324](https://github.com/Shopify/polaris-react/pull/4324))
+- Modernized tests for DiscardConfirmationModal, ContextualSaveBar, Loading, Toast, ToastManager, Frame (from Frame components) ([#4324](https://github.com/Shopify/polaris-react/pull/4324))
+- Modernized tests for Truncate and UnstyledButton ([#4327](https://github.com/Shopify/polaris-react/pull/4327)).
- Modernized tests for PageActions, Page and its components ([#4326](https://github.com/Shopify/polaris-react/pull/4326))
- 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))
diff --git a/src/components/Truncate/tests/Truncate.test.tsx b/src/components/Truncate/tests/Truncate.test.tsx
index 586c6c29caa..3c5ba54bd2b 100644
--- a/src/components/Truncate/tests/Truncate.test.tsx
+++ b/src/components/Truncate/tests/Truncate.test.tsx
@@ -1,12 +1,11 @@
import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
import {Truncate} from '../Truncate';
describe('', () => {
it('renders its children', () => {
- const truncate = mountWithAppProvider(Long text);
- expect(truncate.contains('Long text')).toBe(true);
+ const truncate = mountWithApp(Long text);
+ expect(truncate).toContainReactText('Long text');
});
});
diff --git a/src/components/UnstyledButton/tests/UnstyledButton.test.tsx b/src/components/UnstyledButton/tests/UnstyledButton.test.tsx
index f9fa1bf8b55..c2958269629 100644
--- a/src/components/UnstyledButton/tests/UnstyledButton.test.tsx
+++ b/src/components/UnstyledButton/tests/UnstyledButton.test.tsx
@@ -1,6 +1,5 @@
import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
import {UnstyledLink} from 'components';
import {UnstyledButton} from '../UnstyledButton';
@@ -11,33 +10,31 @@ describe('', () => {
const mockUrl = 'https://google.com';
it('renders the given children into the button', () => {
- const button = mountWithAppProvider(
+ const button = mountWithApp(
{mockChildren},
);
- expect(button.find('button').text()).toContain(mockChildren);
+ expect(button.find('button')).toContainReactText(mockChildren);
});
it('renders the given children into the UnstyledLink', () => {
- const button = mountWithAppProvider(
+ const button = mountWithApp(
{mockChildren},
);
- expect(button.find(UnstyledLink).text()).toContain(mockChildren);
+ expect(button.find(UnstyledLink)).toContainReactText(mockChildren);
});
- // Why is this reporting 2 nodes found?
- // eslint-disable-next-line jest/no-disabled-tests
- it.skip('renders the given children into the link when disabled', () => {
- const button = mountWithAppProvider(
+ it('renders the given children into the link when disabled', () => {
+ const button = mountWithApp(
{mockChildren}
,
);
- expect(
- button
- .find('a')
- .findWhere((node) => node.prop('href') === undefined)
- .text(),
- ).toContain(mockChildren);
+
+ expect(button).toContainReactComponent('a', {
+ href: undefined,
+ children: mockChildren,
+ });
+ expect(button).toContainReactComponentTimes('a', 1);
});
});
@@ -45,27 +42,30 @@ describe('', () => {
const mockId = 'MockId';
it('is passed into the button', () => {
- const button = mountWithAppProvider();
- expect(button.find('button').prop('id')).toBe(mockId);
+ const button = mountWithApp();
+ expect(button).toContainReactComponent('button', {
+ id: mockId,
+ });
});
it('is passed into the UnstyledLink', () => {
- const button = mountWithAppProvider(
+ const button = mountWithApp(
,
);
- expect(button.find(UnstyledLink).prop('id')).toBe(mockId);
+ expect(button).toContainReactComponent(UnstyledLink, {
+ id: mockId,
+ });
});
it('is passed into the link when disabled', () => {
- const button = mountWithAppProvider(
+ const button = mountWithApp(
,
);
- expect(
- button
- .find('a')
- .findWhere((node) => node.prop('href') === undefined)
- .prop('id'),
- ).toBe(mockId);
+
+ expect(button).toContainReactComponent('a', {
+ href: undefined,
+ id: mockId,
+ });
});
});
@@ -73,15 +73,15 @@ describe('', () => {
const mockUrl = 'https://google.com';
it('renders a link without an `href` when `disabled`', () => {
- const button = mountWithAppProvider(
- ,
- );
- expect(button.find('a').prop('href')).toBeUndefined();
+ const button = mountWithApp();
+ expect(button).toContainReactComponent('a', {
+ href: undefined,
+ });
});
it('renders a button when not present', () => {
- const button = mountWithAppProvider();
- expect(button.find('button').prop('href')).toBeUndefined();
+ const button = mountWithApp();
+ expect(button).toContainReactComponent('button');
});
it('omits subset of props when provided a `url`', () => {
@@ -95,18 +95,19 @@ describe('', () => {
onKeyUp: noop,
onKeyPress: noop,
};
- const button = mountWithAppProvider(
+ const button = mountWithApp(
,
);
- expect(button.find(UnstyledLink).prop('url')).toBe(mockUrl);
-
- expect(button.find(UnstyledLink).prop('submit')).toBeUndefined();
- expect(button.find(UnstyledLink).prop('ariaControls')).toBeUndefined();
- expect(button.find(UnstyledLink).prop('ariaExpanded')).toBeUndefined();
- expect(button.find(UnstyledLink).prop('onKeyDown')).toBeUndefined();
- expect(button.find(UnstyledLink).prop('onKeyUp')).toBeUndefined();
- expect(button.find(UnstyledLink).prop('onKeyPress')).toBeUndefined();
+ expect(button).toContainReactComponent(UnstyledLink, {
+ url: mockUrl,
+ submit: undefined,
+ ariaControls: undefined,
+ ariaExpanded: undefined,
+ onKeyDown: undefined,
+ onKeyUp: undefined,
+ onKeyPress: undefined,
+ });
});
});
@@ -114,29 +115,32 @@ describe('', () => {
const mockUrl = 'https://google.com';
it('gets passed into the UnstyledLink', () => {
- const button = mountWithAppProvider(
- ,
- );
- expect(button.find(UnstyledLink).prop('external')).toBeTruthy();
+ const button = mountWithApp();
+ expect(button).toContainReactComponent(UnstyledLink, {
+ external: true,
+ });
});
it('is false when not set', () => {
- const button = mountWithAppProvider(
- ,
- );
- expect(button.find(UnstyledLink).prop('external')).toBeFalsy();
+ const button = mountWithApp();
+ expect(button).toContainReactComponent(UnstyledLink, {
+ external: undefined,
+ });
});
it('is not passed when `url` is missing', () => {
- const button = mountWithAppProvider();
- expect(button.find('button').prop('external')).toBeUndefined();
+ const button = mountWithApp();
+ expect(button).toContainReactComponent('button');
});
it('is not passed when `url + disabled`', () => {
- const button = mountWithAppProvider(
+ const button = mountWithApp(
,
);
- expect(button.find('a').prop('external')).toBeUndefined();
+ expect(button).toContainReactComponent('a');
+ expect(button).not.toContainReactComponent(UnstyledLink, {
+ external: undefined,
+ });
});
});
@@ -144,46 +148,61 @@ describe('', () => {
const mockUrl = 'https://google.com';
it('gets passed into the link as a boolean', () => {
- const button = mountWithAppProvider(
- ,
- );
- expect(button.find(UnstyledLink).prop('download')).toBe(true);
+ const button = mountWithApp();
+ expect(button).toContainReactComponent(UnstyledLink, {
+ download: true,
+ });
});
it('gets passed into the link as a string', () => {
- const button = mountWithAppProvider(
+ const button = mountWithApp(
,
);
- expect(button.find(UnstyledLink).prop('download')).toBe('file.txt');
+ expect(button).toContainReactComponent(UnstyledLink, {
+ download: 'file.txt',
+ });
});
it('is false when not set', () => {
- const button = mountWithAppProvider();
- expect(button.find(UnstyledLink).prop('download')).toBeFalsy();
+ const button = mountWithApp();
+ expect(button).toContainReactComponent(UnstyledLink, {
+ download: undefined,
+ });
});
it('is not passed when `url` is missing', () => {
- const button = mountWithAppProvider();
- expect(button.find('button').prop('download')).toBeUndefined();
+ const button = mountWithApp();
+
+ expect(button).toContainReactComponent('button');
+ expect(button).not.toContainReactComponent(UnstyledLink, {
+ download: undefined,
+ });
});
it('is not passed when `url + disabled`', () => {
- const button = mountWithAppProvider(
+ const button = mountWithApp(
,
);
- expect(button.find('a').prop('download')).toBeUndefined();
+ expect(button).toContainReactComponent('a', {
+ download: undefined,
+ });
});
});
describe('submit', () => {
it('sets a submit type on the button when present', () => {
- const button = mountWithAppProvider();
- expect(button.find('button').prop('type')).toBe('submit');
+ const button = mountWithApp();
+
+ expect(button).toContainReactComponent('button', {
+ type: 'submit',
+ });
});
it('sets a button type on the button when not present', () => {
- const button = mountWithAppProvider();
- expect(button.find('button').prop('type')).toBe('button');
+ const button = mountWithApp();
+ expect(button).toContainReactComponent('button', {
+ type: 'button',
+ });
});
});
@@ -191,29 +210,36 @@ describe('', () => {
const mockUrl = 'https://google.com';
it('passes to `button`', () => {
- const button = mountWithAppProvider();
- expect(button.find('button').prop('disabled')).toBeTruthy();
+ const button = mountWithApp();
+ expect(button).toContainReactComponent('button', {
+ disabled: true,
+ });
});
it('does not pass to link', () => {
- const button = mountWithAppProvider(
- ,
- );
- expect(button.find('a').prop('disabled')).toBeUndefined();
+ const button = mountWithApp();
+ expect(button).toContainReactComponent('a');
+ expect(button).not.toContainReactComponent('button', {
+ disabled: true,
+ });
});
});
describe('loading', () => {
it('sets aria-busy on the button', () => {
- const button = mountWithAppProvider();
- expect(button.find('button').prop('aria-busy')).toBe(true);
+ const button = mountWithApp();
+ expect(button).toContainReactComponent('button', {
+ 'aria-busy': true,
+ });
});
it('does not set aria-busy when `url`', () => {
- const button = mountWithAppProvider(
+ const button = mountWithApp(
,
);
- expect(button.find(UnstyledLink).prop('aria-busy')).toBeUndefined();
+ expect(button).toContainReactComponent(UnstyledLink, {
+ 'aria-busy': undefined,
+ });
});
});
@@ -221,38 +247,40 @@ describe('', () => {
const accessibilityLabel = 'mock accessibility label';
it('sets an aria-label on the button', () => {
- const button = mountWithAppProvider(
+ const button = mountWithApp(
,
);
- expect(button.find('button').prop('aria-label')).toBe(accessibilityLabel);
+
+ expect(button).toContainReactComponent('button', {
+ 'aria-label': accessibilityLabel,
+ });
});
it('sets an aria-label on the UnstyledLink', () => {
- const button = mountWithAppProvider(
+ const button = mountWithApp(
,
);
- expect(button.find(UnstyledLink).prop('aria-label')).toBe(
- accessibilityLabel,
- );
+
+ expect(button).toContainReactComponent(UnstyledLink, {
+ 'aria-label': accessibilityLabel,
+ });
});
it('sets an aria-label on the link', () => {
- const button = mountWithAppProvider(
+ const button = mountWithApp(
,
);
- expect(
- button
- .find('a')
- .findWhere((node) => node.prop('href') === undefined)
- .prop('aria-label'),
- ).toBe(accessibilityLabel);
+ expect(button).toContainReactComponent('a', {
+ href: undefined,
+ 'aria-label': accessibilityLabel,
+ });
});
});
@@ -260,37 +288,45 @@ describe('', () => {
const mockRole = 'menuitem';
it('is `undefined` by default', () => {
- const button = mountWithAppProvider();
- expect(button.find('button').prop('role')).toBeUndefined();
+ const button = mountWithApp();
+ expect(button).toContainReactComponent('button', {
+ role: undefined,
+ });
});
it('passes to button', () => {
- const button = mountWithAppProvider();
- expect(button.find('button').prop('role')).toBe(mockRole);
+ const button = mountWithApp();
+ expect(button).toContainReactComponent('button', {
+ role: mockRole,
+ });
});
it('passes to link', () => {
- const button = mountWithAppProvider(
+ const button = mountWithApp(
,
);
- expect(button.find(UnstyledLink).prop('role')).toBe(mockRole);
+ expect(button).toContainReactComponent(UnstyledLink, {
+ role: mockRole,
+ });
});
});
describe('ariaControls', () => {
it('sets an aria-controls on the button', () => {
const mockId = 'MockId';
- const button = mountWithAppProvider(
- ,
- );
- expect(button.find('button').prop('aria-controls')).toBe(mockId);
+ const button = mountWithApp();
+ expect(button).toContainReactComponent('button', {
+ 'aria-controls': mockId,
+ });
});
});
describe('ariaExpanded', () => {
it('sets an aria-expended on the button', () => {
- const button = mountWithAppProvider();
- expect(button.find('button').prop('aria-expanded')).toBeTruthy();
+ const button = mountWithApp();
+ expect(button).toContainReactComponent('button', {
+ 'aria-expanded': true,
+ });
});
});
@@ -300,8 +336,10 @@ describe('', () => {
.spyOn(console, 'warn')
.mockImplementation(() => {});
- const button = mountWithAppProvider();
- expect(button.find('button').prop('aria-pressed')).toBeTruthy();
+ const button = mountWithApp();
+ expect(button).toContainReactComponent('button', {
+ 'aria-pressed': true,
+ });
warningSpy.mockRestore();
});
@@ -310,19 +348,19 @@ describe('', () => {
describe('onClick()', () => {
it('is called when the button is clicked', () => {
const onClickSpy = jest.fn();
- const button = mountWithAppProvider(
+ const unstyledButton = mountWithApp(
,
);
- trigger(button.find('button'), 'onClick');
+ unstyledButton.find('button')!.trigger('onClick');
expect(onClickSpy).toHaveBeenCalledTimes(1);
});
it('is called when the link is clicked', () => {
const onClickSpy = jest.fn();
- const button = mountWithAppProvider(
+ const unstyledButton = mountWithApp(
,
);
- trigger(button.find(UnstyledLink), 'onClick');
+ unstyledButton.find(UnstyledLink)!.trigger('onClick');
expect(onClickSpy).toHaveBeenCalledTimes(1);
});
});
@@ -330,22 +368,22 @@ describe('', () => {
describe('onMouseEnter()', () => {
it('is called when the mouse enters button', () => {
const onMouseEnterSpy = jest.fn();
- const button = mountWithAppProvider(
+ const unstyledButton = mountWithApp(
,
);
- trigger(button.find('button'), 'onMouseEnter');
+ unstyledButton.find('button')!.trigger('onMouseEnter');
expect(onMouseEnterSpy).toHaveBeenCalledTimes(1);
});
it('is called when the mouse enters link', () => {
const onMouseEnterSpy = jest.fn();
- const button = mountWithAppProvider(
+ const unstyledButton = mountWithApp(
,
);
- trigger(button.find(UnstyledLink), 'onMouseEnter');
+ unstyledButton.find(UnstyledLink)!.trigger('onMouseEnter');
expect(onMouseEnterSpy).toHaveBeenCalledTimes(1);
});
});
@@ -353,22 +391,23 @@ describe('', () => {
describe('onTouchEnter()', () => {
it('is called when button is pressed', () => {
const onTouchStartSpy = jest.fn();
- const button = mountWithAppProvider(
+ const unstyledButton = mountWithApp(
,
);
- trigger(button.find('button'), 'onTouchStart');
+ unstyledButton.find('button')!.trigger('onTouchStart');
expect(onTouchStartSpy).toHaveBeenCalledTimes(1);
});
it('is called when link is pressed', () => {
const onTouchStartSpy = jest.fn();
- const button = mountWithAppProvider(
+ const unstyledButton = mountWithApp(
,
);
- trigger(button.find(UnstyledLink), 'onTouchStart');
+
+ unstyledButton.find(UnstyledLink)!.trigger('onTouchStart');
expect(onTouchStartSpy).toHaveBeenCalledTimes(1);
});
});
@@ -376,19 +415,21 @@ describe('', () => {
describe('onFocus()', () => {
it('is called when the button is focussed', () => {
const onFocusSpy = jest.fn();
- const button = mountWithAppProvider(
+ const unstyledButton = mountWithApp(
,
);
- trigger(button.find('button'), 'onFocus');
+
+ unstyledButton.find('button')!.trigger('onFocus');
expect(onFocusSpy).toHaveBeenCalledTimes(1);
});
it('is called when the link is focussed', () => {
const onFocusSpy = jest.fn();
- const button = mountWithAppProvider(
+ const unstyledButton = mountWithApp(
,
);
- trigger(button.find(UnstyledLink), 'onFocus');
+
+ unstyledButton.find(UnstyledLink)!.trigger('onFocus');
expect(onFocusSpy).toHaveBeenCalledTimes(1);
});
});
@@ -396,19 +437,20 @@ describe('', () => {
describe('onBlur()', () => {
it('is called when the button is blurred', () => {
const onBlurSpy = jest.fn();
- const button = mountWithAppProvider(
+ const unstyledButton = mountWithApp(
,
);
- trigger(button.find('button'), 'onBlur');
+ unstyledButton.find('button')!.trigger('onBlur');
expect(onBlurSpy).toHaveBeenCalledTimes(1);
});
it('is called when the link is blurred', () => {
const onBlurSpy = jest.fn();
- const button = mountWithAppProvider(
+ const unstyledButton = mountWithApp(
,
);
- trigger(button.find(UnstyledLink), 'onBlur');
+
+ unstyledButton.find(UnstyledLink)!.trigger('onBlur');
expect(onBlurSpy).toHaveBeenCalledTimes(1);
});
});
@@ -416,11 +458,11 @@ describe('', () => {
describe('onKeyPress()', () => {
it('is called when a keypress event is registered on the button', () => {
const spy = jest.fn();
- const button = mountWithAppProvider(
+ const unstyledButton = mountWithApp(
Test,
- ).find('button');
- trigger(button, 'onKeyPress');
+ );
+ unstyledButton.find('button')!.trigger('onKeyPress');
expect(spy).toHaveBeenCalled();
});
});
@@ -428,10 +470,10 @@ describe('', () => {
describe('onKeyUp()', () => {
it('is called when a keyup event is registered on the button', () => {
const spy = jest.fn();
- const button = mountWithAppProvider(
+ const unstyledButton = mountWithApp(
Test,
- ).find('button');
- trigger(button, 'onKeyUp');
+ );
+ unstyledButton.find('button')!.trigger('onKeyUp');
expect(spy).toHaveBeenCalled();
});
});
@@ -439,10 +481,10 @@ describe('', () => {
describe('onKeyDown()', () => {
it('is called when a keydown event is registered on the button', () => {
const spy = jest.fn();
- const button = mountWithAppProvider(
+ const unstyledButton = mountWithApp(
Test,
- ).find('button');
- trigger(button, 'onKeyDown');
+ );
+ unstyledButton.find('button')!.trigger('onKeyDown');
expect(spy).toHaveBeenCalled();
});
});