Add setMediaWidth breakpoints test utility (#7348)

### WHY are these changes introduced?

#7345 Refactors the `AccountConnection` component to use the new layout
primitives including `AlphaCard`.
`AlphaCard` uses `useBreakpoints()` which required setting up a mock to
set media width for the tests. It appears setting the media width in the
tests becomes necessary for any parent components using a component that
uses `useBreakpoints()`.

### WHAT is this pull request doing?

This adds a `setMediaWidth` test utility which can be used in tests for
any components that require mocked media widths in their tests.

Co-authored-by: Aaron Casanova <[email protected]>

Author: aveline

.changeset/perfect-pens-press.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added `setMediaWidth` breakpoints test utility

polaris-react/src/components/AlphaCard/tests/AlphaCard.test.tsx

@@ -1,16 +1,10 @@
 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 = <p>Online store dashboard</p>;
 const subheading = <p>View a summary of your online store performance</p>;
 
@@ -53,20 +47,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(),
-  }));
-}

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(),
+  }));
+}