add createMatchMedia

Author: shortcuts

packages/autocomplete-js/src/__tests__/autocomplete.test.ts

@@ -1,7 +1,7 @@
 import * as autocompleteShared from '@algolia/autocomplete-shared';
 import { fireEvent, waitFor } from '@testing-library/dom';
 
-import { castToJestMock } from '../../../../test/utils';
+import { castToJestMock, createMatchMedia } from '../../../../test/utils';
 import { autocomplete } from '../autocomplete';
 
 jest.mock('@algolia/autocomplete-shared', () => {
@@ -214,16 +214,7 @@ describe('autocomplete-js', () => {
 
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: jest.fn((query) => ({
-        matches: true,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      })),
+      value: createMatchMedia({ matches: true }),
     });
 
     update({ detachedMediaQuery: '' });

packages/autocomplete-js/src/__tests__/detached.test.ts

@@ -1,5 +1,6 @@
 import { fireEvent, waitFor } from '@testing-library/dom';
 
+import { createMatchMedia } from '../../../../test/utils';
 import { autocomplete } from '../autocomplete';
 
 describe('detached', () => {
@@ -8,16 +9,7 @@ describe('detached', () => {
   beforeAll(() => {
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: jest.fn((query) => ({
-        matches: true,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      })),
+      value: createMatchMedia({ matches: true }),
     });
   });
 

packages/autocomplete-js/src/__tests__/detachedMediaQuery.test.ts

@@ -1,24 +1,8 @@
+import { createMatchMedia } from '../../../../test/utils';
 import { autocomplete } from '../autocomplete';
 
 describe('detachedMediaQuery', () => {
   const originalMatchMedia = window.matchMedia;
-  const addEventListener = jest.fn();
-
-  beforeAll(() => {
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn((query) => ({
-        matches: true,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener,
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      })),
-    });
-  });
 
   afterAll(() => {
     Object.defineProperty(window, 'matchMedia', {
@@ -32,14 +16,11 @@ describe('detachedMediaQuery', () => {
 
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: jest.fn((query) => ({
+      value: createMatchMedia({
         matches: true,
-        media: query,
-        onchange: null,
         addListener,
-        removeListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      })),
+        addEventListener: undefined,
+      }),
     });
 
     const container = document.createElement('div');
@@ -66,6 +47,5 @@ describe('detachedMediaQuery', () => {
     });
 
     expect(addListener).toHaveBeenCalledTimes(1);
-    expect(addEventListener).not.toHaveBeenCalled();
   });
 });

packages/autocomplete-js/src/__tests__/translations.test.ts

@@ -1,5 +1,6 @@
 import { waitFor } from '@testing-library/dom';
 
+import { createMatchMedia } from '../../../../test/utils';
 import { autocomplete } from '../autocomplete';
 
 describe('translations', () => {
@@ -51,16 +52,7 @@ describe('translations', () => {
     beforeAll(() => {
       Object.defineProperty(window, 'matchMedia', {
         writable: true,
-        value: jest.fn((query) => ({
-          matches: true,
-          media: query,
-          onchange: null,
-          addListener: jest.fn(),
-          removeListener: jest.fn(),
-          addEventListener: jest.fn(),
-          removeEventListener: jest.fn(),
-          dispatchEvent: jest.fn(),
-        })),
+        value: createMatchMedia({ matches: true }),
       });
     });
 

scripts/jest/setupTests.ts

@@ -1,3 +1,5 @@
+import { createMatchMedia } from '../../test/utils';
+
 import { toWarnDev } from './matchers';
 
 expect.extend({ toWarnDev });
@@ -6,14 +8,5 @@ global.console.warn = jest.fn();
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: jest.fn((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
+  value: createMatchMedia({}),
 });

test/utils/createMatchMedia.ts

@@ -0,0 +1,24 @@
+type MatchMediaProps = Partial<{
+  matches: boolean;
+  media: string;
+  onchange: null;
+  addListener: jest.Mock;
+  removeListener: jest.Mock;
+  addEventListener: jest.Mock;
+  removeEventListener: jest.Mock;
+  dispatchEvent: jest.Mock;
+}>;
+
+export const createMatchMedia = (props: MatchMediaProps) => {
+  return jest.fn((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+    ...props,
+  }));
+};

test/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './castToJestMock';
 export * from './createApiResponse';
 export * from './createCollection';
+export * from './createMatchMedia';
 export * from './createNavigator';
 export * from './createPlayground';
 export * from './createScopeApi';