-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7181d37
commit 2d5e5d9
Showing
18 changed files
with
195 additions
and
128 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
| 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.