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

cam-narzt · web-flow · commit 69176f829076 · 2023-03-24T13:28:20.000-04:00
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.
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');

Original file line number	Diff line number	Diff line change
`@@ -337,9 +337,14 @@ export class MockWindow {`
`337`	`337`	`}`
`338`	`338`	`}`
`339`	`339`
`340`		`- matchMedia() {`
	`340`	`+ matchMedia(media: string) {`
`341`	`341`	`return {`
	`342`	`+ media,`
`342`	`343`	`matches: false,`
	`344`	`+ addEventListener,`
	`345`	`+ dispatchEvent,`
	`346`	`+ removeEventListener,`
	`347`	`+ onchange: null as ((this: MediaQueryList, ev: MediaQueryListEvent) => any) \| null,`
`343`	`348`	`};`
`344`	`349`	`}`
`345`	`350`