test: add test for svelte components

2026-02-08 04:14:03 +05:00
parent db26272ac5
commit 1a0d99828e
16 changed files with 661 additions and 0 deletions
@@ -0,0 +1,44 @@
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import { describe, expect, it, beforeEach } from "vitest";
+import { themeState } from "$states/theme.svelte";
+import AppHeader from "$components/layout/AppHeader.svelte";
+
+describe("AppHeader.svelte", () => {
+  beforeEach(() => {
+    themeState.theme = "dark";
+  });
+
+  it("should render header with title", () => {
+    render(AppHeader);
+
+    expect(screen.getByRole("banner")).toBeInTheDocument();
+    expect(screen.getByText("Twitch Panels")).toBeInTheDocument();
+  });
+
+  it("should render theme toggle button", () => {
+    const { container } = render(AppHeader);
+
+    const toggleButton = container.querySelector(".theme-toggle");
+    expect(toggleButton).toBeInTheDocument();
+  });
+
+  it("should toggle theme on button click", async () => {
+    const { container } = render(AppHeader);
+
+    const toggleButton = container.querySelector(".theme-toggle");
+
+    themeState.theme = "dark";
+    await fireEvent.click(toggleButton);
+    expect(themeState.theme).toBe("light");
+
+    await fireEvent.click(toggleButton);
+    expect(themeState.theme).toBe("dark");
+  });
+
+  it("should have correct aria-label on toggle button", () => {
+    const { container } = render(AppHeader);
+
+    const toggleButton = container.querySelector(".theme-toggle");
+    expect(toggleButton).toHaveAttribute("aria-label", "Toggle theme");
+  });
+});