-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Resize logo on Safari. Change navigation color to brand color on mobile, and logo and hamburger menu to white on mobile. Change the Tailwind CSS config to use “brand-color” instead of “logo-color.” Converted Tailwind CSS config to use a class for dark mode, and added code to sense the user changing between dark and light mode. Starting to use CSS variables for theming. Will work on theming in the next commit in this branch. Extract code to manage dark mode Tailwind CSS classes to a library. Add tests and mocks for the dark-mode manager. Implement Jest tests for OS dark mode. Remove forgotten .only() to test for more coverage. Update package.json for the latest versions of packages. Update comments from this branch’s changes. Add mobile menu navigation. Add Cypress tests for the mobile menu. Correct Cypress mobile menu test. Only include .container class beyond mobile so that the navigation header can span across the entire viewport width. Use light and dark themes in Tailwind configuration. Change dark highlight color Update navigation colors for mobile.
- Loading branch information
1 parent
578b665
commit 67e6929
Showing
16 changed files
with
804 additions
and
208 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| /// <reference types="cypress" /> | ||
|
|
||
| describe("Mobile menu tests", () => { | ||
| it("should open and close the mobile menu", () => { | ||
| cy.visit("/") | ||
| cy.viewport("iphone-xr") | ||
|
|
||
| // The mobile menu should not exist, then open when the user clicks the navigation trigger. | ||
| cy.get("[data-testid='mobile-navigation']").should("not.exist") | ||
| cy.get("[data-testid='mobile-navigation-trigger']").click() | ||
| cy.get("[data-testid='mobile-navigation']").should("be.visible") | ||
|
|
||
| // Selecting a mobile navigation item should close the menu. | ||
| cy.get("[data-testid=awards]").eq(1).click() | ||
| cy.get("[data-testid='mobile-navigation']").should("not.exist") | ||
| }) | ||
| }) |
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,127 @@ | ||
| /** | ||
| * This module allows you to mock the matchMedia event API. Use it to test your code that adds event | ||
| * listeners for media queries. | ||
| * | ||
| * Adapted from: | ||
| * https://github.com/dyakovk/jest-matchmedia-mock | ||
| */ | ||
| import { jest } from "@jest/globals" | ||
|
|
||
| export default class MatchMediaMock { | ||
| #mediaQueries = {} | ||
| #mediaQueryList | ||
| #currentMediaQuery | ||
|
|
||
| constructor(initialQuery = "(prefers-color-scheme: light)") { | ||
| this.#currentMediaQuery = initialQuery | ||
|
|
||
| // Add the window.matchMedia() mock. | ||
| Object.defineProperty(window, "matchMedia", { | ||
| writable: true, | ||
| configurable: true, | ||
| value: jest.fn().mockImplementation((query) => { | ||
| return { | ||
| matches: query === this.#currentMediaQuery, | ||
| media: query, | ||
| onchange: null, | ||
| addEventListener: (type, listener) => { | ||
| if (type === "change") { | ||
| this.#addListener(query, listener) | ||
| } | ||
| }, | ||
| removeEventListener: (type, listener) => { | ||
| if (type === "change") { | ||
| this.#removeListener(query, listener) | ||
| } | ||
| }, | ||
| dispatchEvent: jest.fn(), | ||
| } | ||
| }), | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * Adds a new event-listener function for the specified media query. | ||
| */ | ||
| #addListener(mediaQuery, listener) { | ||
| if (!this.#mediaQueries[mediaQuery]) { | ||
| this.#mediaQueries[mediaQuery] = [] | ||
| } | ||
|
|
||
| const query = this.#mediaQueries[mediaQuery] | ||
| const listenerIndex = query.indexOf(listener) | ||
|
|
||
| if (listenerIndex === -1) { | ||
| query.push(listener) | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Removes a previously added event-listener function for the specified media query. | ||
| */ | ||
| #removeListener(mediaQuery, listener) { | ||
| if (this.#mediaQueries[mediaQuery]) { | ||
| const query = this.#mediaQueries[mediaQuery] | ||
| const listenerIndex = query.indexOf(listener) | ||
| if (listenerIndex !== -1) { | ||
| query.splice(listenerIndex, 1) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Updates the currently used media query and calls previously added listener functions | ||
| * registered for this media query. | ||
| */ | ||
| useMediaQuery(mediaQuery, isMatch) { | ||
| if (typeof mediaQuery !== "string") { | ||
| throw new Error("Media Query must be a string") | ||
| } | ||
|
|
||
| this.#currentMediaQuery = mediaQuery | ||
|
|
||
| if (this.#mediaQueries[mediaQuery]) { | ||
| const mqListEvent = { | ||
| matches: isMatch, | ||
| media: mediaQuery, | ||
| } | ||
|
|
||
| this.#mediaQueries[mediaQuery].forEach((listener) => { | ||
| listener.call(this.#mediaQueryList, mqListEvent) | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Returns an array listing the media queries for which the matchMedia has registered listeners. | ||
| */ | ||
| getMediaQueries() { | ||
| return Object.keys(this.#mediaQueries) | ||
| } | ||
|
|
||
| /** | ||
| * Returns a copy of the array of listeners for the specified media query. | ||
| */ | ||
| getListeners(mediaQuery) { | ||
| if (this.#mediaQueries[mediaQuery]) { | ||
| return this.#mediaQueries[mediaQuery].slice() | ||
| } | ||
| return [] | ||
| } | ||
|
|
||
| /** | ||
| * Clears all registered media queries and their listeners. | ||
| */ | ||
| clear() { | ||
| this.#mediaQueries = {} | ||
| } | ||
|
|
||
| /** | ||
| * Clears all registered media queries and their listeners, and destroys the implementation of | ||
| * `window.matchMedia`. | ||
| */ | ||
| destroy() { | ||
| this.clear() | ||
| delete window.matchMedia | ||
| } | ||
| } |
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,5 @@ | ||
| { | ||
| "env": { | ||
| "jest": true | ||
| } | ||
| } |
Oops, something went wrong.