Ilia Denisov
973480d812
Tests · UI / test (push) Successful in 2m4s
Introduce the shared design-token system under ui/frontend/src/lib/theme/: tokens.css (dark default + light palette, plus spacing/radii/typography scales), base.css global baseline (document background, text, token focus ring, selection), and theme.svelte.ts (system/light/dark choice, persisted to localStorage, applied via data-theme on <html>). A pre-paint guard in app.html resolves the theme before the app boots to avoid a flash, and the theme picker is wired into the previously-disabled account-menu stub. Migrate the always-visible in-game chrome to the tokens (header, account menu, sidebar, tab-bar, bottom-tabs, shell background): dark renders as before, light comes for free. The default stays dark during the incremental migration; the remaining view bodies migrate in F1b. Docs: ui/docs/design-system.md (+ index entry). Test: tests/theme.test.ts. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import "@testing-library/jest-dom/vitest";
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
|
|
// The store is a module singleton constructed on first import: it reads
|
|
// localStorage and `matchMedia` in its constructor. Each test therefore
|
|
// stubs `matchMedia` and resets the module registry, then imports a
|
|
// freshly-constructed store via `freshStore`.
|
|
|
|
const STORAGE_KEY = "galaxy-theme";
|
|
|
|
function stubMatchMedia(prefersLight: boolean): void {
|
|
Object.defineProperty(window, "matchMedia", {
|
|
writable: true,
|
|
configurable: true,
|
|
value: (query: string) => ({
|
|
matches: query.includes("light") ? prefersLight : false,
|
|
media: query,
|
|
onchange: null,
|
|
addListener: () => {},
|
|
removeListener: () => {},
|
|
addEventListener: () => {},
|
|
removeEventListener: () => {},
|
|
dispatchEvent: () => false,
|
|
}),
|
|
});
|
|
}
|
|
|
|
async function freshStore(
|
|
prefersLight = false,
|
|
): Promise<typeof import("../src/lib/theme/theme.svelte")> {
|
|
stubMatchMedia(prefersLight);
|
|
vi.resetModules();
|
|
return import("../src/lib/theme/theme.svelte");
|
|
}
|
|
|
|
describe("theme store", () => {
|
|
beforeEach(() => {
|
|
localStorage.clear();
|
|
delete document.documentElement.dataset.theme;
|
|
});
|
|
afterEach(() => {
|
|
vi.restoreAllMocks();
|
|
});
|
|
|
|
it("defaults to dark and applies it to the document", async () => {
|
|
const { theme } = await freshStore();
|
|
expect(theme.choice).toBe("dark");
|
|
expect(theme.resolved).toBe("dark");
|
|
expect(document.documentElement.dataset.theme).toBe("dark");
|
|
});
|
|
|
|
it("persists an explicit choice and writes data-theme", async () => {
|
|
const { theme, THEME_STORAGE_KEY } = await freshStore();
|
|
expect(THEME_STORAGE_KEY).toBe(STORAGE_KEY);
|
|
|
|
theme.setChoice("light");
|
|
expect(theme.choice).toBe("light");
|
|
expect(theme.resolved).toBe("light");
|
|
expect(document.documentElement.dataset.theme).toBe("light");
|
|
expect(localStorage.getItem(STORAGE_KEY)).toBe("light");
|
|
|
|
theme.setChoice("dark");
|
|
expect(theme.resolved).toBe("dark");
|
|
expect(document.documentElement.dataset.theme).toBe("dark");
|
|
expect(localStorage.getItem(STORAGE_KEY)).toBe("dark");
|
|
});
|
|
|
|
it("reads the stored choice on construction", async () => {
|
|
localStorage.setItem(STORAGE_KEY, "light");
|
|
const { theme } = await freshStore();
|
|
expect(theme.choice).toBe("light");
|
|
expect(theme.resolved).toBe("light");
|
|
});
|
|
|
|
it("resolves system to the OS preference", async () => {
|
|
const { theme } = await freshStore(true);
|
|
theme.setChoice("system");
|
|
expect(theme.choice).toBe("system");
|
|
expect(theme.resolved).toBe("light");
|
|
expect(document.documentElement.dataset.theme).toBe("light");
|
|
});
|
|
|
|
it("falls back to dark for an unrecognised stored value", async () => {
|
|
localStorage.setItem(STORAGE_KEY, "neon");
|
|
const { theme } = await freshStore();
|
|
expect(theme.choice).toBe("dark");
|
|
});
|
|
});
|