From 9d76cf132124e58ce3c5c14fefed50a9df086f41 Mon Sep 17 00:00:00 2001 From: Luca Bezerra Date: Mon, 23 Aug 2021 09:45:53 -0400 Subject: [PATCH 1/2] Modernizing Icon and Image tests. --- src/components/Icon/tests/Icon.test.tsx | 18 +++++----- src/components/Image/tests/Image.test.tsx | 44 +++++++++++------------ 2 files changed, 30 insertions(+), 32 deletions(-) diff --git a/src/components/Icon/tests/Icon.test.tsx b/src/components/Icon/tests/Icon.test.tsx index 13f19f76f06..fa1a6b34eb8 100644 --- a/src/components/Icon/tests/Icon.test.tsx +++ b/src/components/Icon/tests/Icon.test.tsx @@ -1,7 +1,5 @@ import React from 'react'; import {PlusMinor} from '@shopify/polaris-icons'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; import {mountWithApp} from 'test-utilities'; import {Icon} from '../Icon'; @@ -9,29 +7,29 @@ import {Icon} from '../Icon'; describe('', () => { describe('accessibilityLabel', () => { it('uses the label as the aria-label for the icon', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ).find('span'); - expect(element.prop('aria-label')).toBe('This is an icon'); + expect(element).toHaveReactProps({'aria-label': 'This is an icon'}); }); }); describe('source', () => { it("renders a placeholder div when source is set to 'placeholder'", () => { - const element = mountWithAppProvider(); - expect(element.find('div')).toHaveLength(1); + const element = mountWithApp(); + expect(element).toContainReactComponentTimes('div', 1); }); it('renders a React Element when source is given a React Stateless Functional Component', () => { - const element = mountWithAppProvider(); - expect(element.find(PlusMinor)).toHaveLength(1); + const element = mountWithApp(); + expect(element).toContainReactComponentTimes(PlusMinor, 1); }); it('renders an img when source is given an untrusted SVG', () => { const svg = ""; - const element = mountWithAppProvider(); - expect(element.find('img')).toHaveLength(1); + const element = mountWithApp(); + expect(element).toContainReactComponentTimes('img', 1); }); }); diff --git a/src/components/Image/tests/Image.test.tsx b/src/components/Image/tests/Image.test.tsx index 3ffaf49f63f..baf7eaad400 100644 --- a/src/components/Image/tests/Image.test.tsx +++ b/src/components/Image/tests/Image.test.tsx @@ -1,32 +1,32 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {Image} from '../Image'; describe('', () => { describe('img attributes', () => { - let src: string; - let image: any; + const src = + 'https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg'; - beforeAll(() => { - src = - 'https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg'; - image = mountWithAppProvider( + it('renders the src', () => { + const image = mountWithApp( alt text, ); - }); - - it('renders the src', () => { - expect(image.find('img').prop('src')).toBe(src); + expect(image).toContainReactComponent('img', {src}); }); it('renders the alt text', () => { - expect(image.find('img').prop('alt')).toBe('alt text'); + const image = mountWithApp( + alt text, + ); + expect(image).toContainReactComponent('img', {alt: 'alt text'}); }); it('renders the crossOrigin', () => { - expect(image.find('img').prop('crossOrigin')).toBe('anonymous'); + const image = mountWithApp( + alt text, + ); + expect(image).toContainReactComponent('img', {crossOrigin: 'anonymous'}); }); }); @@ -41,7 +41,7 @@ describe('', () => { descriptor: '1x', }, ]; - const image = mountWithAppProvider( + const image = mountWithApp( alt text', () => { />, ); - expect(image.find('img').prop('srcSet')).toBe( - `${srcSet[0].source} ${srcSet[0].descriptor}`, - ); + expect(image).toContainReactComponent('img', { + srcSet: `${srcSet[0].source} ${srcSet[0].descriptor}`, + }); }); }); describe('onError', () => { it('calls the onError callback when the image onError is triggered', () => { const spy = jest.fn(); - const image = mountWithAppProvider( + const image = mountWithApp( alt text, ); - trigger(image.find('img'), 'onError'); + image.find('img')!.trigger('onError'); expect(spy).toHaveBeenCalledTimes(1); }); }); @@ -71,11 +71,11 @@ describe('', () => { describe('onLoad', () => { it('calls the onLoad callback when the image on onLoad is triggered', () => { const spy = jest.fn(); - const image = mountWithAppProvider( + const image = mountWithApp( alt text, ); - trigger(image.find('img'), 'onLoad'); + image.find('img')!.trigger('onLoad'); expect(spy).toHaveBeenCalledTimes(1); }); }); From 6480956cd395d0564a688f1858bb16c84cd0c337 Mon Sep 17 00:00:00 2001 From: Luca Bezerra Date: Mon, 23 Aug 2021 09:48:12 -0400 Subject: [PATCH 2/2] Adding entry to UNRELEASED.md --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index d999228cc4c..2c754bb5ca7 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -63,5 +63,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - 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)) +- Modernized tests for Image and Icon components ([#4418](https://github.com/Shopify/polaris-react/pull/4418)) ### Deprecations