From 69176f8290767c05206f324bccb5bea2cf780448 Mon Sep 17 00:00:00 2001 From: Camden Narzt <47764942+cam-narzt@users.noreply.github.com> Date: Fri, 24 Mar 2023 11:28:20 -0600 Subject: [PATCH] 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. --- src/mock-doc/test/match-media.spec.ts | 34 +++++++++++++++++++ src/mock-doc/window.ts | 7 +++- .../test-app/slot-no-default/karma.spec.ts | 2 +- 3 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 src/mock-doc/test/match-media.spec.ts diff --git a/src/mock-doc/test/match-media.spec.ts b/src/mock-doc/test/match-media.spec.ts new file mode 100644 index 00000000000..403db93e218 --- /dev/null +++ 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; + beforeEach(() => { + win = new MockWindow(` + + + + + `); + 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 index ff19b299692..df43fbc8b3c 100644 --- 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 index ce81a4badf3..a479873f8d6 100644 --- 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');