@getmicdrop/svelte-components 5.20.2 → 5.21.0

package/dist/primitives/DarkModeToggle.spec.js

@@ -1,390 +1,390 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi, beforeEach, afterEach } from "vitest";
-import DarkModeToggle from "./DarkModeToggle.svelte";
-
-// Mock localStorage
-const localStorageMock = {
-  store: {},
-  getItem: vi.fn((key) => localStorageMock.store[key] || null),
-  setItem: vi.fn((key, value) => {
-    localStorageMock.store[key] = value;
-  }),
-  removeItem: vi.fn((key) => {
-    delete localStorageMock.store[key];
-  }),
-  clear: vi.fn(() => {
-    localStorageMock.store = {};
-  }),
-};
-
-// Mock matchMedia
-const matchMediaMock = vi.fn((query) => ({
-  matches: false,
-  media: query,
-  onchange: null,
-  addListener: vi.fn(),
-  removeListener: vi.fn(),
-  addEventListener: vi.fn(),
-  removeEventListener: vi.fn(),
-  dispatchEvent: vi.fn(),
-}));
-
-function setupTest() {
-  const user = userEvent.setup();
-  const { component, container } = render(DarkModeToggle);
-  return { user, component, container };
-}
-
-describe("DarkModeToggle Component Tests", () => {
-  beforeEach(() => {
-    localStorageMock.clear();
-    Object.defineProperty(window, "localStorage", { value: localStorageMock });
-    Object.defineProperty(window, "matchMedia", { value: matchMediaMock });
-    // Reset any dark class
-    document.documentElement.classList.remove("dark");
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test("Renders toggle button", () => {
-    setupTest();
-    const button = screen.getByRole("button", { name: /toggle theme/i });
-    expect(button).toBeInTheDocument();
-  });
-
-  test("Has aria-label for accessibility", () => {
-    setupTest();
-    const button = screen.getByRole("button");
-    expect(button).toHaveAttribute("aria-label", "Toggle theme");
-  });
-
-  test("Has title attribute for tooltip", () => {
-    setupTest();
-    const button = screen.getByRole("button");
-    expect(button).toHaveAttribute("title");
-  });
-
-  test("Contains sun icon SVG", () => {
-    const { container } = setupTest();
-    const sunIcon = container.querySelector('span.text-amber-500 svg');
-    expect(sunIcon).toBeInTheDocument();
-  });
-
-  test("Contains moon icon SVG", () => {
-    const { container } = setupTest();
-    const moonIcon = container.querySelector('span:not(.text-amber-500) svg');
-    expect(moonIcon).toBeInTheDocument();
-  });
-
-  test("Contains auto mode split icon", () => {
-    const { container } = setupTest();
-    // In auto mode, there should be a div with absolute positioning containing the split icon
-    const autoDiv = container.querySelector('div.absolute.inset-0');
-    expect(autoDiv).toBeInTheDocument();
-  });
-
-  test("Auto icon is visible in auto mode (default)", () => {
-    const { container } = setupTest();
-    const autoDiv = container.querySelector('div.absolute.inset-0');
-    expect(autoDiv).toBeInTheDocument();
-  });
-
-  test("Sun and moon single icons have hidden classes in auto mode", () => {
-    const { container } = setupTest();
-    // In auto mode, the main sun/moon icons should have opacity-0 and scale-0 classes
-    const sunIcon = container.querySelector('span.text-amber-500');
-    const moonIcon = container.querySelectorAll('span')[1]; // Second span is moon
-    expect(sunIcon).toHaveClass('opacity-0');
-    expect(sunIcon).toHaveClass('scale-0');
-    expect(moonIcon).toHaveClass('opacity-0');
-    expect(moonIcon).toHaveClass('scale-0');
-  });
-
-  test("Button has relative class for positioning", () => {
-    setupTest();
-    const button = screen.getByRole("button");
-    expect(button).toHaveClass("relative");
-  });
-
-  test("Button has focus outline removed", () => {
-    setupTest();
-    const button = screen.getByRole("button");
-    expect(button).toHaveClass("focus:outline-hidden");
-  });
-
-  test("Button click handler is called on interaction", async () => {
-    const { user } = setupTest();
-    const button = screen.getByRole("button");
-
-    // Verify button is interactive
-    await user.click(button);
-
-    // After click, localStorage should be updated (auto -> light)
-    expect(localStorageMock.setItem).toHaveBeenCalled();
-  });
-
-  test("SVG icons have correct dimensions", () => {
-    const { container } = setupTest();
-    const svgs = container.querySelectorAll('svg');
-    // All SVGs should have width and height of either 20 (main icons) or 12 (auto mode icons)
-    expect(svgs.length).toBeGreaterThan(0);
-    svgs.forEach(svg => {
-      const width = svg.getAttribute('width');
-      const height = svg.getAttribute('height');
-      expect(['20', '12']).toContain(width);
-      expect(['20', '12']).toContain(height);
-    });
-  });
-
-  test("Sun icon has correct color class", () => {
-    const { container } = setupTest();
-    const sunIcon = container.querySelector('span.text-amber-500');
-    expect(sunIcon).toHaveClass("text-amber-500");
-  });
-
-  test("Button has overflow hidden for auto icon", () => {
-    setupTest();
-    const button = screen.getByRole("button");
-    expect(button).toHaveClass("overflow-hidden");
-  });
-
-  test("Auto mode div has absolute positioning", () => {
-    const { container } = setupTest();
-    const autoDiv = container.querySelector('div.absolute.inset-0');
-    expect(autoDiv).toHaveClass("absolute");
-    expect(autoDiv).toHaveClass("inset-0");
-  });
-});
-
-describe("DarkModeToggle 3-State Cycle", () => {
-  beforeEach(() => {
-    localStorageMock.clear();
-    Object.defineProperty(window, "localStorage", { value: localStorageMock });
-    Object.defineProperty(window, "matchMedia", { value: matchMediaMock });
-    document.documentElement.classList.remove("dark");
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test("First click: auto -> light, saves 'light' to localStorage", async () => {
-    const { user } = setupTest();
-    const button = screen.getByRole("button");
-
-    await user.click(button);
-
-    expect(localStorageMock.setItem).toHaveBeenCalledWith("theme", "light");
-  });
-
-  test("Second click: light -> dark, saves 'dark' to localStorage", async () => {
-    const { user } = setupTest();
-    const button = screen.getByRole("button");
-
-    // First click: auto -> light
-    await user.click(button);
-    // Second click: light -> dark
-    await user.click(button);
-
-    expect(localStorageMock.setItem).toHaveBeenLastCalledWith("theme", "dark");
-  });
-
-  test("Third click: dark -> auto, removes theme from localStorage", async () => {
-    const { user } = setupTest();
-    const button = screen.getByRole("button");
-
-    // First click: auto -> light
-    await user.click(button);
-    // Second click: light -> dark
-    await user.click(button);
-    // Third click: dark -> auto
-    await user.click(button);
-
-    expect(localStorageMock.removeItem).toHaveBeenCalledWith("theme");
-  });
-
-  test("Full cycle: auto -> light -> dark -> auto", async () => {
-    const { user, container } = setupTest();
-    const button = screen.getByRole("button");
-
-    // Initially auto - auto div should exist
-    expect(container.querySelector("div.absolute.inset-0")).toBeInTheDocument();
-
-    // Click 1: auto -> light
-    await user.click(button);
-    const sunSpan = container.querySelector('span.text-amber-500');
-    // In light mode, sun should be visible (no opacity-0 class)
-    expect(sunSpan.classList.contains("opacity-0")).toBe(false);
-    expect(container.querySelector("div.absolute.inset-0")).not.toBeInTheDocument();
-
-    // Click 2: light -> dark
-    await user.click(button);
-    // Find the direct child spans of the button (not nested spans)
-    const buttonSpans = Array.from(button.querySelectorAll(':scope > span'));
-    const moonSpan = buttonSpans.find(
-      span => !span.classList.contains('text-amber-500')
-    );
-    // In dark mode, moon should be visible (no opacity-0)
-    expect(moonSpan.classList.contains("opacity-0")).toBe(false);
-    expect(sunSpan.classList.contains("opacity-0")).toBe(true);
-
-    // Click 3: dark -> auto
-    await user.click(button);
-    expect(container.querySelector("div.absolute.inset-0")).toBeInTheDocument();
-    // After returning to auto, both icons should be hidden
-    expect(sunSpan.classList.contains("opacity-0")).toBe(true);
-  });
-
-  test("Dark class applied when switching to dark mode", async () => {
-    const { user } = setupTest();
-    const button = screen.getByRole("button");
-
-    // auto -> light
-    await user.click(button);
-    expect(document.documentElement.classList.contains("dark")).toBe(false);
-
-    // light -> dark
-    await user.click(button);
-    expect(document.documentElement.classList.contains("dark")).toBe(true);
-  });
-
-  test("Dark class removed when switching back to light", async () => {
-    const { user } = setupTest();
-    const button = screen.getByRole("button");
-
-    // auto -> light -> dark
-    await user.click(button);
-    await user.click(button);
-    expect(document.documentElement.classList.contains("dark")).toBe(true);
-
-    // dark -> auto (system is light by default in mock)
-    await user.click(button);
-    expect(document.documentElement.classList.contains("dark")).toBe(false);
-  });
-});
-
-describe("DarkModeToggle Initial State", () => {
-  beforeEach(() => {
-    localStorageMock.clear();
-    Object.defineProperty(window, "localStorage", { value: localStorageMock });
-    Object.defineProperty(window, "matchMedia", { value: matchMediaMock });
-    document.documentElement.classList.remove("dark");
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test("Initializes to auto mode when no localStorage value", () => {
-    const { container } = setupTest();
-    const autoDiv = container.querySelector("div.absolute.inset-0");
-    expect(autoDiv).toBeInTheDocument();
-  });
-
-  test("Initializes to dark mode when localStorage has 'dark'", () => {
-    localStorageMock.store.theme = "dark";
-    const { container } = setupTest();
-    const button = screen.getByRole("button");
-    const buttonSpans = Array.from(button.querySelectorAll(':scope > span'));
-    const moonSpan = buttonSpans.find(
-      span => !span.classList.contains('text-amber-500')
-    );
-    // In dark mode, moon should be visible (no opacity-0)
-    expect(moonSpan.classList.contains("opacity-0")).toBe(false);
-    // Sun should be hidden
-    const sunSpan = container.querySelector('span.text-amber-500');
-    expect(sunSpan.classList.contains("opacity-0")).toBe(true);
-  });
-
-  test("Initializes to light mode when localStorage has 'light'", () => {
-    localStorageMock.store.theme = "light";
-    const { container } = setupTest();
-    const button = screen.getByRole("button");
-    const sunSpan = container.querySelector('span.text-amber-500');
-    // In light mode, sun should be visible (no opacity-0)
-    expect(sunSpan.classList.contains("opacity-0")).toBe(false);
-    // Moon should be hidden - need to check all spans that have transition-all
-    const allSpansWithTransition = Array.from(button.querySelectorAll('span.transition-all'));
-    const moonSpan = allSpansWithTransition.find(
-      span => !span.classList.contains('text-amber-500')
-    );
-    expect(moonSpan).toBeDefined();
-    expect(moonSpan.classList.contains("opacity-0")).toBe(true);
-  });
-
-  test("Reads from localStorage on mount", () => {
-    localStorageMock.store.theme = "dark";
-    setupTest();
-    expect(localStorageMock.getItem).toHaveBeenCalledWith("theme");
-  });
-
-  test("Checks system preference for auto mode", () => {
-    setupTest();
-    expect(matchMediaMock).toHaveBeenCalledWith("(prefers-color-scheme: dark)");
-  });
-
-  test("Auto mode follows system dark preference", () => {
-    matchMediaMock.mockReturnValue({
-      matches: true, // System prefers dark
-      media: "(prefers-color-scheme: dark)",
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-    });
-    setupTest();
-    // In auto mode with system dark preference, dark class should be applied
-    expect(document.documentElement.classList.contains("dark")).toBe(true);
-  });
-
-  test("Auto mode follows system light preference", () => {
-    matchMediaMock.mockReturnValue({
-      matches: false, // System prefers light
-      media: "(prefers-color-scheme: dark)",
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-    });
-    setupTest();
-    expect(document.documentElement.classList.contains("dark")).toBe(false);
-  });
-});
-
-describe("DarkModeToggle Title/Tooltip", () => {
-  beforeEach(() => {
-    localStorageMock.clear();
-    Object.defineProperty(window, "localStorage", { value: localStorageMock });
-    Object.defineProperty(window, "matchMedia", { value: matchMediaMock });
-    document.documentElement.classList.remove("dark");
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test("Shows correct title in auto mode", () => {
-    setupTest();
-    const button = screen.getByRole("button");
-    expect(button.title).toContain("Auto");
-    expect(button.title).toContain("light mode");
-  });
-
-  test("Shows correct title in light mode", async () => {
-    const { user } = setupTest();
-    const button = screen.getByRole("button");
-
-    await user.click(button); // auto -> light
-    expect(button.title).toContain("Light mode");
-    expect(button.title).toContain("dark mode");
-  });
-
-  test("Shows correct title in dark mode", async () => {
-    const { user } = setupTest();
-    const button = screen.getByRole("button");
-
-    await user.click(button); // auto -> light
-    await user.click(button); // light -> dark
-    expect(button.title).toContain("Dark mode");
-    expect(button.title).toContain("auto");
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi, beforeEach, afterEach } from "vitest";
+import DarkModeToggle from "./DarkModeToggle.svelte";
+
+// Mock localStorage
+const localStorageMock = {
+  store: {},
+  getItem: vi.fn((key) => localStorageMock.store[key] || null),
+  setItem: vi.fn((key, value) => {
+    localStorageMock.store[key] = value;
+  }),
+  removeItem: vi.fn((key) => {
+    delete localStorageMock.store[key];
+  }),
+  clear: vi.fn(() => {
+    localStorageMock.store = {};
+  }),
+};
+
+// Mock matchMedia
+const matchMediaMock = vi.fn((query) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  dispatchEvent: vi.fn(),
+}));
+
+function setupTest() {
+  const user = userEvent.setup();
+  const { component, container } = render(DarkModeToggle);
+  return { user, component, container };
+}
+
+describe("DarkModeToggle Component Tests", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    Object.defineProperty(window, "localStorage", { value: localStorageMock });
+    Object.defineProperty(window, "matchMedia", { value: matchMediaMock });
+    // Reset any dark class
+    document.documentElement.classList.remove("dark");
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("Renders toggle button", () => {
+    setupTest();
+    const button = screen.getByRole("button", { name: /toggle theme/i });
+    expect(button).toBeInTheDocument();
+  });
+
+  test("Has aria-label for accessibility", () => {
+    setupTest();
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("aria-label", "Toggle theme");
+  });
+
+  test("Has title attribute for tooltip", () => {
+    setupTest();
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("title");
+  });
+
+  test("Contains sun icon SVG", () => {
+    const { container } = setupTest();
+    const sunIcon = container.querySelector('span.text-amber-500 svg');
+    expect(sunIcon).toBeInTheDocument();
+  });
+
+  test("Contains moon icon SVG", () => {
+    const { container } = setupTest();
+    const moonIcon = container.querySelector('span:not(.text-amber-500) svg');
+    expect(moonIcon).toBeInTheDocument();
+  });
+
+  test("Contains auto mode split icon", () => {
+    const { container } = setupTest();
+    // In auto mode, there should be a div with absolute positioning containing the split icon
+    const autoDiv = container.querySelector('div.absolute.inset-0');
+    expect(autoDiv).toBeInTheDocument();
+  });
+
+  test("Auto icon is visible in auto mode (default)", () => {
+    const { container } = setupTest();
+    const autoDiv = container.querySelector('div.absolute.inset-0');
+    expect(autoDiv).toBeInTheDocument();
+  });
+
+  test("Sun and moon single icons have hidden classes in auto mode", () => {
+    const { container } = setupTest();
+    // In auto mode, the main sun/moon icons should have opacity-0 and scale-0 classes
+    const sunIcon = container.querySelector('span.text-amber-500');
+    const moonIcon = container.querySelectorAll('span')[1]; // Second span is moon
+    expect(sunIcon).toHaveClass('opacity-0');
+    expect(sunIcon).toHaveClass('scale-0');
+    expect(moonIcon).toHaveClass('opacity-0');
+    expect(moonIcon).toHaveClass('scale-0');
+  });
+
+  test("Button has relative class for positioning", () => {
+    setupTest();
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("relative");
+  });
+
+  test("Button has focus outline removed", () => {
+    setupTest();
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("focus:outline-hidden");
+  });
+
+  test("Button click handler is called on interaction", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    // Verify button is interactive
+    await user.click(button);
+
+    // After click, localStorage should be updated (auto -> light)
+    expect(localStorageMock.setItem).toHaveBeenCalled();
+  });
+
+  test("SVG icons have correct dimensions", () => {
+    const { container } = setupTest();
+    const svgs = container.querySelectorAll('svg');
+    // All SVGs should have width and height of either 20 (main icons) or 12 (auto mode icons)
+    expect(svgs.length).toBeGreaterThan(0);
+    svgs.forEach(svg => {
+      const width = svg.getAttribute('width');
+      const height = svg.getAttribute('height');
+      expect(['20', '12']).toContain(width);
+      expect(['20', '12']).toContain(height);
+    });
+  });
+
+  test("Sun icon has correct color class", () => {
+    const { container } = setupTest();
+    const sunIcon = container.querySelector('span.text-amber-500');
+    expect(sunIcon).toHaveClass("text-amber-500");
+  });
+
+  test("Button has overflow hidden for auto icon", () => {
+    setupTest();
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("overflow-hidden");
+  });
+
+  test("Auto mode div has absolute positioning", () => {
+    const { container } = setupTest();
+    const autoDiv = container.querySelector('div.absolute.inset-0');
+    expect(autoDiv).toHaveClass("absolute");
+    expect(autoDiv).toHaveClass("inset-0");
+  });
+});
+
+describe("DarkModeToggle 3-State Cycle", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    Object.defineProperty(window, "localStorage", { value: localStorageMock });
+    Object.defineProperty(window, "matchMedia", { value: matchMediaMock });
+    document.documentElement.classList.remove("dark");
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("First click: auto -> light, saves 'light' to localStorage", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    await user.click(button);
+
+    expect(localStorageMock.setItem).toHaveBeenCalledWith("theme", "light");
+  });
+
+  test("Second click: light -> dark, saves 'dark' to localStorage", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    // First click: auto -> light
+    await user.click(button);
+    // Second click: light -> dark
+    await user.click(button);
+
+    expect(localStorageMock.setItem).toHaveBeenLastCalledWith("theme", "dark");
+  });
+
+  test("Third click: dark -> auto, removes theme from localStorage", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    // First click: auto -> light
+    await user.click(button);
+    // Second click: light -> dark
+    await user.click(button);
+    // Third click: dark -> auto
+    await user.click(button);
+
+    expect(localStorageMock.removeItem).toHaveBeenCalledWith("theme");
+  });
+
+  test("Full cycle: auto -> light -> dark -> auto", async () => {
+    const { user, container } = setupTest();
+    const button = screen.getByRole("button");
+
+    // Initially auto - auto div should exist
+    expect(container.querySelector("div.absolute.inset-0")).toBeInTheDocument();
+
+    // Click 1: auto -> light
+    await user.click(button);
+    const sunSpan = container.querySelector('span.text-amber-500');
+    // In light mode, sun should be visible (no opacity-0 class)
+    expect(sunSpan.classList.contains("opacity-0")).toBe(false);
+    expect(container.querySelector("div.absolute.inset-0")).not.toBeInTheDocument();
+
+    // Click 2: light -> dark
+    await user.click(button);
+    // Find the direct child spans of the button (not nested spans)
+    const buttonSpans = Array.from(button.querySelectorAll(':scope > span'));
+    const moonSpan = buttonSpans.find(
+      span => !span.classList.contains('text-amber-500')
+    );
+    // In dark mode, moon should be visible (no opacity-0)
+    expect(moonSpan.classList.contains("opacity-0")).toBe(false);
+    expect(sunSpan.classList.contains("opacity-0")).toBe(true);
+
+    // Click 3: dark -> auto
+    await user.click(button);
+    expect(container.querySelector("div.absolute.inset-0")).toBeInTheDocument();
+    // After returning to auto, both icons should be hidden
+    expect(sunSpan.classList.contains("opacity-0")).toBe(true);
+  });
+
+  test("Dark class applied when switching to dark mode", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    // auto -> light
+    await user.click(button);
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+
+    // light -> dark
+    await user.click(button);
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+  });
+
+  test("Dark class removed when switching back to light", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    // auto -> light -> dark
+    await user.click(button);
+    await user.click(button);
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+
+    // dark -> auto (system is light by default in mock)
+    await user.click(button);
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+  });
+});
+
+describe("DarkModeToggle Initial State", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    Object.defineProperty(window, "localStorage", { value: localStorageMock });
+    Object.defineProperty(window, "matchMedia", { value: matchMediaMock });
+    document.documentElement.classList.remove("dark");
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("Initializes to auto mode when no localStorage value", () => {
+    const { container } = setupTest();
+    const autoDiv = container.querySelector("div.absolute.inset-0");
+    expect(autoDiv).toBeInTheDocument();
+  });
+
+  test("Initializes to dark mode when localStorage has 'dark'", () => {
+    localStorageMock.store.theme = "dark";
+    const { container } = setupTest();
+    const button = screen.getByRole("button");
+    const buttonSpans = Array.from(button.querySelectorAll(':scope > span'));
+    const moonSpan = buttonSpans.find(
+      span => !span.classList.contains('text-amber-500')
+    );
+    // In dark mode, moon should be visible (no opacity-0)
+    expect(moonSpan.classList.contains("opacity-0")).toBe(false);
+    // Sun should be hidden
+    const sunSpan = container.querySelector('span.text-amber-500');
+    expect(sunSpan.classList.contains("opacity-0")).toBe(true);
+  });
+
+  test("Initializes to light mode when localStorage has 'light'", () => {
+    localStorageMock.store.theme = "light";
+    const { container } = setupTest();
+    const button = screen.getByRole("button");
+    const sunSpan = container.querySelector('span.text-amber-500');
+    // In light mode, sun should be visible (no opacity-0)
+    expect(sunSpan.classList.contains("opacity-0")).toBe(false);
+    // Moon should be hidden - need to check all spans that have transition-all
+    const allSpansWithTransition = Array.from(button.querySelectorAll('span.transition-all'));
+    const moonSpan = allSpansWithTransition.find(
+      span => !span.classList.contains('text-amber-500')
+    );
+    expect(moonSpan).toBeDefined();
+    expect(moonSpan.classList.contains("opacity-0")).toBe(true);
+  });
+
+  test("Reads from localStorage on mount", () => {
+    localStorageMock.store.theme = "dark";
+    setupTest();
+    expect(localStorageMock.getItem).toHaveBeenCalledWith("theme");
+  });
+
+  test("Checks system preference for auto mode", () => {
+    setupTest();
+    expect(matchMediaMock).toHaveBeenCalledWith("(prefers-color-scheme: dark)");
+  });
+
+  test("Auto mode follows system dark preference", () => {
+    matchMediaMock.mockReturnValue({
+      matches: true, // System prefers dark
+      media: "(prefers-color-scheme: dark)",
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
+    setupTest();
+    // In auto mode with system dark preference, dark class should be applied
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+  });
+
+  test("Auto mode follows system light preference", () => {
+    matchMediaMock.mockReturnValue({
+      matches: false, // System prefers light
+      media: "(prefers-color-scheme: dark)",
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
+    setupTest();
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+  });
+});
+
+describe("DarkModeToggle Title/Tooltip", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    Object.defineProperty(window, "localStorage", { value: localStorageMock });
+    Object.defineProperty(window, "matchMedia", { value: matchMediaMock });
+    document.documentElement.classList.remove("dark");
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("Shows correct title in auto mode", () => {
+    setupTest();
+    const button = screen.getByRole("button");
+    expect(button.title).toContain("Auto");
+    expect(button.title).toContain("light mode");
+  });
+
+  test("Shows correct title in light mode", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    await user.click(button); // auto -> light
+    expect(button.title).toContain("Light mode");
+    expect(button.title).toContain("dark mode");
+  });
+
+  test("Shows correct title in dark mode", async () => {
+    const { user } = setupTest();
+    const button = screen.getByRole("button");
+
+    await user.click(button); // auto -> light
+    await user.click(button); // light -> dark
+    expect(button.title).toContain("Dark mode");
+    expect(button.title).toContain("auto");
+  });
+});