add createMatchMedia

algolia · Jun 10, 2021 · 430edb2 · 430edb2
1 parent 8162759
commit 430edb2
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 77 deletions.
diff --git a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts b/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', () => {
@@ -210,27 +210,16 @@ describe('autocomplete-js', () => {
       initialNbCalls
     );
 
-    const originalMatchMedia = window.matchMedia;
-
     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: '' });
 
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: originalMatchMedia,
+      value: createMatchMedia({}),
     });
 
     expect(autocompleteShared.generateAutocompleteId).toHaveBeenCalledTimes(

diff --git a/packages/autocomplete-js/src/__tests__/detached.test.ts b/packages/autocomplete-js/src/__tests__/detached.test.ts
@@ -1,30 +1,20 @@
 import { fireEvent, waitFor } from '@testing-library/dom';
 
+import { createMatchMedia } from '../../../../test/utils';
 import { autocomplete } from '../autocomplete';
 
 describe('detached', () => {
-  const originalMatchMedia = window.matchMedia;
-
   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 }),
     });
   });
 
   afterAll(() => {
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: originalMatchMedia,
+      value: createMatchMedia({}),
     });
   });
 

diff --git a/packages/autocomplete-js/src/__tests__/detachedMediaQuery.test.ts b/packages/autocomplete-js/src/__tests__/detachedMediaQuery.test.ts
@@ -1,29 +1,11 @@
+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', {
       writable: true,
-      value: originalMatchMedia,
+      value: createMatchMedia({}),
     });
   });
 
@@ -32,14 +14,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 +45,5 @@ describe('detachedMediaQuery', () => {
     });
 
     expect(addListener).toHaveBeenCalledTimes(1);
-    expect(addEventListener).not.toHaveBeenCalled();
   });
 });
diff --git a/packages/autocomplete-js/src/__tests__/translations.test.ts b/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', () => {
@@ -46,28 +47,17 @@ describe('translations', () => {
   });
 
   describe('detached DOM', () => {
-    const originalMatchMedia = window.matchMedia;
-
     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 }),
       });
     });
 
     afterAll(() => {
       Object.defineProperty(window, 'matchMedia', {
         writable: true,
-        value: originalMatchMedia,
+        value: createMatchMedia({}),
       });
     });
 

diff --git a/scripts/jest/setupTests.ts b/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({}),
 });
diff --git a/test/utils/createMatchMedia.ts b/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,
+  }));
+};
diff --git a/test/utils/index.ts b/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';