fix(mock-doc): add missing properties of object returned by matchMedia (

#2880) matchMedia is supposed to return a MediaQueryList which inherits from the EventTarget interface. As such the stub object returned from the mock should have addEventListener, removeEventListener, and dispatchEvent methods. It was also missing the media property.
ionic-team · Mar 24, 2023 · 69176f8 · 69176f8
1 parent 0b42ed4
commit 69176f8
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/src/mock-doc/test/match-media.spec.ts b/src/mock-doc/test/match-media.spec.ts
@@ -0,0 +1,34 @@
+import { MockWindow } from '../window';
+
+describe('matchMedia', () => {
+  let win: MockWindow;
+  let media: ReturnType<MockWindow['matchMedia']>;
+  beforeEach(() => {
+    win = new MockWindow(`
+      <html>
+        <head>
+        </head>
+      </head>
+      `);
+    media = win.matchMedia('(prefers-color-scheme: dark)');
+  });
+
+  it('MediaQueryList.media', () => {
+    expect(media.media).toBe('(prefers-color-scheme: dark)');
+  });
+  it('MediaQueryList.matches', () => {
+    expect(media.matches).toBe(false);
+  });
+  it('MediaQueryList.addEventListener', () => {
+    expect(media.addEventListener).toBeDefined();
+  });
+  it('MediaQueryList.dispatchEvent', () => {
+    expect(media.dispatchEvent).toBeDefined();
+  });
+  it('MediaQueryList.removeEventListener', () => {
+    expect(media.removeEventListener).toBeDefined();
+  });
+  it('MediaQueryList.onchange', () => {
+    expect(media.onchange).toBe(null);
+  });
+});
diff --git a/src/mock-doc/window.ts b/src/mock-doc/window.ts
@@ -337,9 +337,14 @@ export class MockWindow {
     }
   }
 
-  matchMedia() {
+  matchMedia(media: string) {
     return {
+      media,
       matches: false,
+      addEventListener,
+      dispatchEvent,
+      removeEventListener,
+      onchange: null as ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null,
     };
   }
 

diff --git a/test/karma/test-app/slot-no-default/karma.spec.ts b/test/karma/test-app/slot-no-default/karma.spec.ts
@@ -9,7 +9,7 @@ describe('slot-no-default', function () {
   });
   afterEach(tearDownDom);
 
-  it('only renders slots that havea location', async () => {
+  it('only renders slots that have a location', async () => {
     const root = app.querySelector('slot-no-default');
 
     const a = root.querySelector('a');