From 19b7fdea73e78ae0e522286653f6e499995b5e5d Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 4 Oct 2022 14:16:57 -0700 Subject: [PATCH 1/5] Set media width globally for tests Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- .../AlphaCard/tests/AlphaCard.test.tsx | 34 +------------------ polaris-react/tests/setup/tests.ts | 13 +++++++ polaris-react/tests/utilities/breakpoints.tsx | 24 +++++++++++++ 3 files changed, 38 insertions(+), 33 deletions(-) create mode 100644 polaris-react/tests/utilities/breakpoints.tsx diff --git a/polaris-react/src/components/AlphaCard/tests/AlphaCard.test.tsx b/polaris-react/src/components/AlphaCard/tests/AlphaCard.test.tsx index b9d5961486a..1956f0f6cd3 100644 --- a/polaris-react/src/components/AlphaCard/tests/AlphaCard.test.tsx +++ b/polaris-react/src/components/AlphaCard/tests/AlphaCard.test.tsx @@ -1,28 +1,13 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; -import {matchMedia} from '@shopify/jest-dom-mocks'; -import { - BreakpointsTokenName, - breakpoints, - getMediaConditions, -} from '@shopify/polaris-tokens'; +import {setMediaWidth} from 'tests/utilities/breakpoints'; import {AlphaCard} from '..'; -const mediaConditions = getMediaConditions(breakpoints); - const heading =

Online store dashboard

; const subheading =

View a summary of your online store performance

; describe('AlphaCard', () => { - beforeEach(() => { - matchMedia.mock(); - }); - - afterEach(() => { - matchMedia.restore(); - }); - it('renders children', () => { const alphaCard = mountWithApp( @@ -53,20 +38,3 @@ describe('AlphaCard', () => { }); }); }); - -function setMediaWidth(breakpointsTokenName: BreakpointsTokenName) { - const aliasDirectionConditions = Object.values( - mediaConditions[breakpointsTokenName], - ); - - jest.spyOn(window, 'matchMedia').mockImplementation((query) => ({ - matches: aliasDirectionConditions.includes(query), - media: '', - onchange: null, - addListener: jest.fn(), - removeListener: jest.fn(), - addEventListener: jest.fn(), - removeEventListener: jest.fn(), - dispatchEvent: jest.fn(), - })); -} diff --git a/polaris-react/tests/setup/tests.ts b/polaris-react/tests/setup/tests.ts index a18d7daf9e8..94778e89e54 100644 --- a/polaris-react/tests/setup/tests.ts +++ b/polaris-react/tests/setup/tests.ts @@ -1,6 +1,19 @@ import {destroyAll} from '@shopify/react-testing'; +import {matchMedia} from '@shopify/jest-dom-mocks'; import '@shopify/react-testing/matchers'; import './matchers'; +import {setMediaWidth} from 'tests/utilities/breakpoints'; + +// eslint-disable-next-line jest/require-top-level-describe +beforeAll(() => { + matchMedia.mock(); + setMediaWidth('breakpoints-md'); +}); + +// eslint-disable-next-line jest/require-top-level-describe +afterAll(() => { + matchMedia.restore(); +}); // eslint-disable-next-line jest/require-top-level-describe afterEach(() => { diff --git a/polaris-react/tests/utilities/breakpoints.tsx b/polaris-react/tests/utilities/breakpoints.tsx new file mode 100644 index 00000000000..54216078991 --- /dev/null +++ b/polaris-react/tests/utilities/breakpoints.tsx @@ -0,0 +1,24 @@ +import { + BreakpointsTokenName, + breakpoints, + getMediaConditions, +} from '@shopify/polaris-tokens'; + +const mediaConditions = getMediaConditions(breakpoints); + +export function setMediaWidth(breakpointsTokenName: BreakpointsTokenName) { + const aliasDirectionConditions = Object.values( + mediaConditions[breakpointsTokenName], + ); + + jest.spyOn(window, 'matchMedia').mockImplementation((query) => ({ + matches: aliasDirectionConditions.includes(query), + media: '', + onchange: null, + addListener: jest.fn(), + removeListener: jest.fn(), + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })); +} From 8be00964f8c321ddb7e152c1f90a686301585ca5 Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 4 Oct 2022 14:28:22 -0700 Subject: [PATCH 2/5] changeset --- .changeset/perfect-pens-press.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/perfect-pens-press.md diff --git a/.changeset/perfect-pens-press.md b/.changeset/perfect-pens-press.md new file mode 100644 index 00000000000..7302f959b37 --- /dev/null +++ b/.changeset/perfect-pens-press.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Set media width globally to `md` breakpoint by default for tests From 349cc989dbd3ff8435eb73f83f1ee1d163394383 Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 11 Oct 2022 14:08:07 -0700 Subject: [PATCH 3/5] Remove setting media width globally --- polaris-react/tests/setup/tests.ts | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/polaris-react/tests/setup/tests.ts b/polaris-react/tests/setup/tests.ts index 94778e89e54..a18d7daf9e8 100644 --- a/polaris-react/tests/setup/tests.ts +++ b/polaris-react/tests/setup/tests.ts @@ -1,19 +1,6 @@ import {destroyAll} from '@shopify/react-testing'; -import {matchMedia} from '@shopify/jest-dom-mocks'; import '@shopify/react-testing/matchers'; import './matchers'; -import {setMediaWidth} from 'tests/utilities/breakpoints'; - -// eslint-disable-next-line jest/require-top-level-describe -beforeAll(() => { - matchMedia.mock(); - setMediaWidth('breakpoints-md'); -}); - -// eslint-disable-next-line jest/require-top-level-describe -afterAll(() => { - matchMedia.restore(); -}); // eslint-disable-next-line jest/require-top-level-describe afterEach(() => { From 3f5fe181c7ac99b1047becbe543f52538689221b Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 11 Oct 2022 14:10:14 -0700 Subject: [PATCH 4/5] Update perfect-pens-press.md --- .changeset/perfect-pens-press.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/perfect-pens-press.md b/.changeset/perfect-pens-press.md index 7302f959b37..b4c58f64164 100644 --- a/.changeset/perfect-pens-press.md +++ b/.changeset/perfect-pens-press.md @@ -2,4 +2,4 @@ '@shopify/polaris': patch --- -Set media width globally to `md` breakpoint by default for tests +Added `setMediaWidth` breakpoints test utility From 54e89486a4659a562167a10dc6189c7af4c3eae3 Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 11 Oct 2022 14:27:38 -0700 Subject: [PATCH 5/5] Update AlphaCard.test.tsx --- .../src/components/AlphaCard/tests/AlphaCard.test.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/polaris-react/src/components/AlphaCard/tests/AlphaCard.test.tsx b/polaris-react/src/components/AlphaCard/tests/AlphaCard.test.tsx index 1956f0f6cd3..b435f00cca4 100644 --- a/polaris-react/src/components/AlphaCard/tests/AlphaCard.test.tsx +++ b/polaris-react/src/components/AlphaCard/tests/AlphaCard.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; +import {matchMedia} from '@shopify/jest-dom-mocks'; import {setMediaWidth} from 'tests/utilities/breakpoints'; import {AlphaCard} from '..'; @@ -8,6 +9,14 @@ const heading =

Online store dashboard

; const subheading =

View a summary of your online store performance

; describe('AlphaCard', () => { + beforeEach(() => { + matchMedia.mock(); + }); + + afterEach(() => { + matchMedia.restore(); + }); + it('renders children', () => { const alphaCard = mountWithApp(