feat: integrate jest-matchmedia-mock

ccontrols · Mar 28, 2021 · ea9f370 · ea9f370
1 parent 7c245bc
commit ea9f370
Show file tree

Hide file tree

Showing 37 changed files with 323 additions and 726 deletions.
diff --git a/plugins/addon-catalog/tests/stories.test.ts b/plugins/addon-catalog/tests/stories.test.ts
@@ -1,34 +1,21 @@
 import path from 'path';
+import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations, extractDocuments } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
 
 import { render, act } from '@testing-library/react';
 
+
+let matchMedia: MatchMediaMock;
+
 describe('component-controls generated', () => {
-  beforeAll(async done => {
+  beforeAll(() => {
     jest.mock('rc-util/lib/Portal');
-    global.MutationObserver = class {
-      constructor() {}
-      disconnect() {}
-      observe() {}
-      takeRecords() {
-        return [];
-      }
-    };
-
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn().mockImplementation(query => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      })),
-    });
-    done();
+    matchMedia = new MatchMediaMock();
+  });
+  afterEach(() => {
+    matchMedia.clear();
   });
   const configPath = path.resolve(__dirname, '../.config');
   const config = loadConfigurations(configPath);

diff --git a/plugins/addon-images/tests/stories.test.ts b/plugins/addon-images/tests/stories.test.ts
@@ -1,34 +1,21 @@
 import path from 'path';
+import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations, extractDocuments } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
 
 import { render, act } from '@testing-library/react';
 
+
+let matchMedia: MatchMediaMock;
+
 describe('component-controls generated', () => {
-  beforeAll(async done => {
+  beforeAll(() => {
     jest.mock('rc-util/lib/Portal');
-    global.MutationObserver = class {
-      constructor() {}
-      disconnect() {}
-      observe() {}
-      takeRecords() {
-        return [];
-      }
-    };
-
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn().mockImplementation(query => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      })),
-    });
-    done();
+    matchMedia = new MatchMediaMock();
+  });
+  afterEach(() => {
+    matchMedia.clear();
   });
   const configPath = path.resolve(__dirname, '../.config');
   const config = loadConfigurations(configPath);

diff --git a/plugins/addon-notes/tests/stories.test.ts b/plugins/addon-notes/tests/stories.test.ts
@@ -1,34 +1,21 @@
 import path from 'path';
+import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations, extractDocuments } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
 
 import { render, act } from '@testing-library/react';
 
+
+let matchMedia: MatchMediaMock;
+
 describe('component-controls generated', () => {
-  beforeAll(async done => {
+  beforeAll(() => {
     jest.mock('rc-util/lib/Portal');
-    global.MutationObserver = class {
-      constructor() {}
-      disconnect() {}
-      observe() {}
-      takeRecords() {
-        return [];
-      }
-    };
-
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn().mockImplementation(query => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      })),
-    });
-    done();
+    matchMedia = new MatchMediaMock();
+  });
+  afterEach(() => {
+    matchMedia.clear();
   });
   const configPath = path.resolve(__dirname, '../.config');
   const config = loadConfigurations(configPath);

diff --git a/plugins/addon-stats/tests/stories.test.ts b/plugins/addon-stats/tests/stories.test.ts
@@ -1,34 +1,21 @@
 import path from 'path';
+import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations, extractDocuments } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
 
 import { render, act } from '@testing-library/react';
 
+
+let matchMedia: MatchMediaMock;
+
 describe('component-controls generated', () => {
-  beforeAll(async done => {
+  beforeAll(() => {
     jest.mock('rc-util/lib/Portal');
-    global.MutationObserver = class {
-      constructor() {}
-      disconnect() {}
-      observe() {}
-      takeRecords() {
-        return [];
-      }
-    };
-
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn().mockImplementation(query => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      })),
-    });
-    done();
+    matchMedia = new MatchMediaMock();
+  });
+  afterEach(() => {
+    matchMedia.clear();
   });
   const configPath = path.resolve(__dirname, '../.config');
   const config = loadConfigurations(configPath);

diff --git a/plugins/axe-plugin/tests/stories.test.ts b/plugins/axe-plugin/tests/stories.test.ts
@@ -1,34 +1,21 @@
 import path from 'path';
+import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations, extractDocuments } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
 
 import { render, act } from '@testing-library/react';
 
+
+let matchMedia: MatchMediaMock;
+
 describe('component-controls generated', () => {
-  beforeAll(async done => {
+  beforeAll(() => {
     jest.mock('rc-util/lib/Portal');
-    global.MutationObserver = class {
-      constructor() {}
-      disconnect() {}
-      observe() {}
-      takeRecords() {
-        return [];
-      }
-    };
-
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn().mockImplementation(query => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      })),
-    });
-    done();
+    matchMedia = new MatchMediaMock();
+  });
+  afterEach(() => {
+    matchMedia.clear();
   });
   const configPath = path.resolve(__dirname, '../.config');
   const config = loadConfigurations(configPath);

diff --git a/plugins/figma-embed/tests/stories.test.ts b/plugins/figma-embed/tests/stories.test.ts
@@ -1,34 +1,21 @@
 import path from 'path';
+import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations, extractDocuments } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
 
 import { render, act } from '@testing-library/react';
 
+
+let matchMedia: MatchMediaMock;
+
 describe('component-controls generated', () => {
-  beforeAll(async done => {
+  beforeAll(() => {
     jest.mock('rc-util/lib/Portal');
-    global.MutationObserver = class {
-      constructor() {}
-      disconnect() {}
-      observe() {}
-      takeRecords() {
-        return [];
-      }
-    };
-
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn().mockImplementation(query => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      })),
-    });
-    done();
+    matchMedia = new MatchMediaMock();
+  });
+  afterEach(() => {
+    matchMedia.clear();
   });
   const configPath = path.resolve(__dirname, '../.config');
   const config = loadConfigurations(configPath);

diff --git a/plugins/jest-snapshots/package.json b/plugins/jest-snapshots/package.json
@@ -67,6 +67,7 @@
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.5.0",
     "jest": "^26.4.2",
+    "jest-matchmedia-mock": "^1.1.0",
     "react-dom": "^16.13.1",
     "rc-util": "^5.0.7",
     "react-test-renderer": "^16.13.1",

diff --git a/plugins/jest-snapshots/templates/all-store.cjs.js b/plugins/jest-snapshots/templates/all-store.cjs.js
@@ -1,31 +1,18 @@
 const path = require('path');
+const MatchMediaMock = require('jest-matchmedia-mock').default;
 {{=it.storeImports}}
 
 {{=it.imports}}
+
+let matchMedia;
+
 describe('{{=it.name}}', () => {
-  beforeAll(async done => {
+  beforeAll(() => {
     jest.mock('rc-util/lib/Portal');
-    global.MutationObserver = class {
-      constructor() {}
-      disconnect() {}
-      observe() {}
-      takeRecords() {
-        return [];
-      }
-    };
-
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn().mockImplementation(query => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      })),
-    });
-    done();
+    matchMedia = new MatchMediaMock();
+  });
+  afterEach(() => {
+    matchMedia.clear();
   });
 {{=it.storeLoop}}
 

diff --git a/plugins/jest-snapshots/templates/all-store.esm.js b/plugins/jest-snapshots/templates/all-store.esm.js
@@ -1,31 +1,18 @@
 import * as path from 'path';
+import MatchMediaMock from 'jest-matchmedia-mock';
 {{=it.storeImports}}
 
 {{=it.imports}}
+
+let matchMedia;
+
 describe('{{=it.name}}', () => {
-  beforeAll(async done => {
+  beforeAll(() => {
     jest.mock('rc-util/lib/Portal');
-    global.MutationObserver = class {
-      constructor() {}
-      disconnect() {}
-      observe() {}
-      takeRecords() {
-        return [];
-      }
-    };
-
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn().mockImplementation(query => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      })),
-    });
-    done();
+    matchMedia = new MatchMediaMock();
+  });
+  afterEach(() => {
+    matchMedia.clear();
   });
 {{=it.storeLoop}}  
 });
diff --git a/plugins/jest-snapshots/templates/all-store.ts.js b/plugins/jest-snapshots/templates/all-store.ts.js
@@ -1,31 +1,18 @@
 import path from 'path';
+import MatchMediaMock from 'jest-matchmedia-mock';
 {{=it.storeImports}}
 
 {{=it.imports}}
+
+let matchMedia: MatchMediaMock;
+
 describe('{{=it.name}}', () => {
-  beforeAll(async done => {
+  beforeAll(() => {
     jest.mock('rc-util/lib/Portal');
-    global.MutationObserver = class {
-      constructor() {}
-      disconnect() {}
-      observe() {}
-      takeRecords() {
-        return [];
-      }
-    };
-
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn().mockImplementation(query => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      })),
-    });
-    done();
+    matchMedia = new MatchMediaMock();
+  });
+  afterEach(() => {
+    matchMedia.clear();
   });
 {{=it.storeLoop}} 
 });