theo-agent-dashboard

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

ThemeToggle.test.tsx (1811B)

      1 import { describe, it, expect, vi, beforeEach } from "vitest";
      2 import { render, screen, fireEvent } from "@testing-library/react";
      3 import { ThemeToggle } from "./ThemeToggle";
      4 import { useThemeStore } from "../../store/theme";
      5 
      6 beforeEach(() => {
      7   useThemeStore.setState({ theme: "dark" });
      8 });
      9 
     10 describe("ThemeToggle", () => {
     11   it("renders with dark theme showing light button", () => {
     12     render(<ThemeToggle />);
     13     expect(screen.getByText("☀️ Light")).toBeInTheDocument();
     14   });
     15 
     16   it("renders with light theme showing dark button", () => {
     17     useThemeStore.setState({ theme: "light" });
     18     render(<ThemeToggle />);
     19     expect(screen.getByText("🌙 Dark")).toBeInTheDocument();
     20   });
     21 
     22   it("has correct aria-label for dark theme", () => {
     23     render(<ThemeToggle />);
     24     expect(screen.getByLabelText("Switch to light theme")).toBeInTheDocument();
     25   });
     26 
     27   it("has correct aria-label for light theme", () => {
     28     useThemeStore.setState({ theme: "light" });
     29     render(<ThemeToggle />);
     30     expect(screen.getByLabelText("Switch to dark theme")).toBeInTheDocument();
     31   });
     32 
     33   it("toggles theme on click", () => {
     34     render(<ThemeToggle />);
     35     fireEvent.click(screen.getByLabelText("Switch to light theme"));
     36     expect(useThemeStore.getState().theme).toBe("light");
     37   });
     38 
     39   it("toggles from light to dark", () => {
     40     useThemeStore.setState({ theme: "light" });
     41     render(<ThemeToggle />);
     42     fireEvent.click(screen.getByLabelText("Switch to dark theme"));
     43     expect(useThemeStore.getState().theme).toBe("dark");
     44   });
     45 
     46   it("button has correct styling", () => {
     47     const { container } = render(<ThemeToggle />);
     48     const button = container.querySelector("button");
     49     expect(button?.className).toContain("rounded-lg");
     50     expect(button?.className).toContain("bg-gray-800");
     51   });
     52 });