diff --git a/UNRELEASED.md b/UNRELEASED.md
index 04854f7d3c5..0a661312557 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, and Link components([#4389](https://github.com/Shopify/polaris-react/pull/4389))
### Deprecations
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/Link/tests/Link.test.tsx b/src/components/Link/tests/Link.test.tsx
index 7aee150942e..3662cd783a0 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,109 @@ 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).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).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 +144,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'),
+ });
});
});
});