49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
|
|
import { it, expect, beforeEach } from "vitest";
|
|
import { ThemeToggle, getStoredTheme } from "./ThemeToggle";
|
|
|
|
beforeEach(() => {
|
|
try {
|
|
localStorage.clear();
|
|
} catch {}
|
|
document.documentElement.removeAttribute("data-seed-color-mode");
|
|
});
|
|
|
|
it("defaults to system, and picks the persisted choice back up on remount", () => {
|
|
expect(getStoredTheme()).toBe("system");
|
|
|
|
render(<ThemeToggle />);
|
|
expect(screen.getByText("Систем")).toBeInTheDocument();
|
|
expect(screen.getByText("Гэрэл")).toBeInTheDocument();
|
|
expect(screen.getByText("Харанхуй")).toBeInTheDocument();
|
|
|
|
cleanup();
|
|
localStorage.setItem("mercury.theme", "dark");
|
|
render(<ThemeToggle />);
|
|
const darkInput = screen.getByText("Харанхуй").closest("label")!.querySelector("input")!;
|
|
expect(darkInput).toBeChecked();
|
|
});
|
|
|
|
it("selecting dark persists the choice and flips the live data-seed-color-mode attribute", () => {
|
|
render(<ThemeToggle />);
|
|
|
|
const darkInput = screen.getByText("Харанхуй").closest("label")!.querySelector("input")!;
|
|
fireEvent.click(darkInput);
|
|
|
|
expect(getStoredTheme()).toBe("dark");
|
|
expect(document.documentElement.getAttribute("data-seed-color-mode")).toBe("dark-only");
|
|
});
|
|
|
|
it("selecting light and back to system round-trips through localStorage + the html attribute", () => {
|
|
render(<ThemeToggle />);
|
|
|
|
const lightInput = screen.getByText("Гэрэл").closest("label")!.querySelector("input")!;
|
|
fireEvent.click(lightInput);
|
|
expect(getStoredTheme()).toBe("light");
|
|
expect(document.documentElement.getAttribute("data-seed-color-mode")).toBe("light-only");
|
|
|
|
const systemInput = screen.getByText("Систем").closest("label")!.querySelector("input")!;
|
|
fireEvent.click(systemInput);
|
|
expect(getStoredTheme()).toBe("system");
|
|
expect(document.documentElement.getAttribute("data-seed-color-mode")).toBe("system");
|
|
});
|