-
Notifications
You must be signed in to change notification settings - Fork 58
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
explorer: Added MediaQueryList mocks
- Loading branch information
1 parent
3e350c5
commit 6124f6d
Showing
28 changed files
with
4,498 additions
and
137 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,68 @@ | ||
| export default class MediaQueryList { | ||
| /** | ||
| * @param {String} query | ||
| */ | ||
| constructor(query) { | ||
| this.matches = false; | ||
| this.media = query; | ||
| this.listeners = []; | ||
| import { afterAll } from "vitest"; | ||
|
|
||
| const controllers = new Set(); | ||
|
|
||
| afterAll(() => { | ||
| controllers.forEach((controller) => { | ||
| controller.abort(); | ||
| controllers.delete(controller); | ||
| }); | ||
| }); | ||
|
|
||
| /** | ||
| * Mocks the `MediaQueryList` object and listens to the | ||
| * "DuskMediaQueryMatchesChange" custom event. | ||
| * Fire one manually or with the `changeMediaQueryMatches` | ||
| * helper function to simulate media query changes. | ||
| */ | ||
| export default class MediaQueryList extends EventTarget { | ||
| #matches; | ||
|
|
||
| #media; | ||
|
|
||
| /** | ||
| * @param {string} mediaQuery | ||
| * @param {boolean} initialMatches | ||
| */ | ||
| constructor(mediaQuery, initialMatches) { | ||
| super(); | ||
|
|
||
| this.#matches = initialMatches; | ||
| this.#media = mediaQuery; | ||
|
|
||
| const abortController = new AbortController(); | ||
|
|
||
| controllers.add(abortController); | ||
|
|
||
| global.addEventListener("DuskMediaQueryMatchesChange", this, { | ||
| signal: abortController.signal, | ||
| }); | ||
| } | ||
|
|
||
| get matches() { | ||
| return this.#matches; | ||
| } | ||
|
|
||
| get media() { | ||
| return this.#media; | ||
| } | ||
|
|
||
| /** @param {CustomEvent<{ media: string, matches: boolean }>} evt */ | ||
| handleEvent(evt) { | ||
| const { detail, type } = evt; | ||
|
|
||
| if ( | ||
| type === "DuskMediaQueryMatchesChange" && | ||
| detail.media === this.#media | ||
| ) { | ||
| this.#matches = detail.matches; | ||
|
|
||
| this.dispatchEvent( | ||
| new MediaQueryListEvent("change", { | ||
| matches: this.#matches, | ||
| media: this.#media, | ||
| }) | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * @param {String} event | ||
| * @param {Function} callback | ||
| */ | ||
| addEventListener(event, callback) { | ||
| if (event === 'change') { | ||
| this.listeners.push(callback); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * @param {String} event | ||
| * @param {Function} callback | ||
| */ | ||
| removeEventListener(event, callback) { | ||
| if (event === 'change') { | ||
| this.listeners = this.listeners.filter(listener => listener !== callback); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * @param {Boolean} matches | ||
| */ | ||
| change(matches) { | ||
| this.matches = matches; | ||
| this.listeners.forEach(listener => listener({ matches })); | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { pickIn } from "lamb"; | ||
|
|
||
| export default class MediaQueryListEvent extends Event { | ||
| #matches; | ||
|
|
||
| #media; | ||
|
|
||
| /** | ||
| * @param {string} type | ||
| * @param {MediaQueryListEventInit} options | ||
| */ | ||
| constructor(type, options) { | ||
| super(type, pickIn(options, ["bubbles", "cancelable", "composed"])); | ||
|
|
||
| this.#matches = options.matches; | ||
| this.#media = options.media; | ||
| } | ||
|
|
||
| get matches() { | ||
| return this.#matches; | ||
| } | ||
|
|
||
| get media() { | ||
| return this.#media; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| export { default as IntersectionObserver } from "./IntersectionObserver"; | ||
| export { default as MediaQueryList } from "./MediaQueryList"; | ||
| export { default as MediaQueryListEvent } from "./MediaQueryListEvent"; |
27 changes: 27 additions & 0 deletions
27
explorer/src/lib/dusk/test-helpers/__tests__/changeMediaQueryMatches.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { describe, expect, it } from "vitest"; | ||
|
|
||
| import { changeMediaQueryMatches } from ".."; | ||
|
|
||
| describe("changeMediaQueryMatches", () => { | ||
| it('should dispatch "DuskMediaQueryMatchesChange" custom events', () => { | ||
| const media = "(max-width: 1024px)"; | ||
| const matches = true; | ||
|
|
||
| /** @param {Event} evt */ | ||
| const handler = (evt) => { | ||
| expect(evt).toBeInstanceOf(CustomEvent); | ||
| expect(evt.type).toBe("DuskMediaQueryMatchesChange"); | ||
|
|
||
| // @ts-ignore see https://github.com/Microsoft/TypeScript/issues/28357 | ||
| expect(evt.detail).toStrictEqual({ matches, media }); | ||
| }; | ||
|
|
||
| global.addEventListener("DuskMediaQueryMatchesChange", handler); | ||
|
|
||
| changeMediaQueryMatches(media, matches); | ||
|
|
||
| global.removeEventListener("DuskMediaQueryMatchesChange", handler); | ||
|
|
||
| expect.assertions(3); | ||
| }); | ||
| }); |
14 changes: 14 additions & 0 deletions
14
explorer/src/lib/dusk/test-helpers/changeMediaQueryMatches.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /** | ||
| * Helper to fire "DuskMediaQueryMatchesChange" custom | ||
| * events that are listened by our `MediaQueryList` mock. | ||
| * | ||
| * @param {string} media | ||
| * @param {boolean} matches | ||
| */ | ||
| export default function changeMediaQueryMatches(media, matches) { | ||
| dispatchEvent( | ||
| new CustomEvent("DuskMediaQueryMatchesChange", { | ||
| detail: { matches, media }, | ||
| }) | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.