test: add test for svelte components

tests/unit/components/layout/AppHeader.test.ts

@@ -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");
+  });
+});

tests/unit/components/layout/Card.test.ts

@@ -0,0 +1,78 @@
+import { render, screen } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import { createRawSnippet } from "svelte";
+import Card from "$components/layout/Card.svelte";
+
+describe("Card.svelte", () => {
+  it("should render with string title", () => {
+    const childrenSnippet = createRawSnippet(() => ({
+      render: () => "<div>Test content</div>",
+    }));
+
+    const { container } = render(Card, {
+      props: {
+        title: "Test Title",
+        children: childrenSnippet,
+      },
+    });
+
+    expect(container.querySelector(".card-title")).toHaveTextContent("Test Title");
+    expect(container.querySelector(".card-body")).toHaveTextContent("Test content");
+  });
+
+  it("should render with snippet title", () => {
+    const titleSnippet = createRawSnippet(() => ({
+      render: () => "<span>Snippet Title</span>",
+    }));
+    const childrenSnippet = createRawSnippet(() => ({
+      render: () => "<div>Test content</div>",
+    }));
+
+    const { container } = render(Card, {
+      props: {
+        title: titleSnippet,
+        children: childrenSnippet,
+      },
+    });
+
+    expect(container.querySelector(".card-title")).toHaveTextContent("Snippet Title");
+    expect(container.querySelector(".card-body")).toHaveTextContent("Test content");
+  });
+
+  it("should render with titleSnippet", () => {
+    const titleSnippet = createRawSnippet(() => ({
+      render: () => "<button>Action</button>",
+    }));
+    const childrenSnippet = createRawSnippet(() => ({
+      render: () => "<div>Test content</div>",
+    }));
+
+    const { container } = render(Card, {
+      props: {
+        title: "Test Title",
+        children: childrenSnippet,
+        titleSnippet: titleSnippet,
+      },
+    });
+
+    expect(container.querySelector(".card-title")).toHaveTextContent("Test Title");
+    expect(container.querySelector(".card-body")).toHaveTextContent("Test content");
+    expect(container.querySelector(".card-snippet")).toHaveTextContent("Action");
+  });
+
+  it("should render without titleSnippet", () => {
+    const childrenSnippet = createRawSnippet(() => ({
+      render: () => "<div>Test content</div>",
+    }));
+
+    const { container } = render(Card, {
+      props: {
+        title: "Test Title",
+        children: childrenSnippet,
+      },
+    });
+
+    expect(container.querySelector(".card-title")).toHaveTextContent("Test Title");
+    expect(container.querySelector(".card-body")).toHaveTextContent("Test content");
+  });
+});

tests/unit/components/layout/InputGroup.test.ts

@@ -0,0 +1,19 @@
+import InputGroupTest from "$components/layout/InputGroupTest.svelte";
+import { render, screen } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+
+describe("InputGroup.svelte", () => {
+  it("should render multiple children using a wrapper component", () => {
+    render(InputGroupTest);
+
+    const inputGroup = document.querySelector(".input-group");
+    expect(inputGroup).toBeInTheDocument();
+
+    expect(screen.getByTestId("input1")).toBeInTheDocument();
+    expect(screen.getByTestId("input2")).toBeInTheDocument();
+    expect(screen.getByTestId("button")).toBeInTheDocument();
+
+    const inputs = inputGroup!.querySelectorAll("input");
+    expect(inputs.length).toBe(2);
+  });
+});

tests/unit/components/layout/SettingsGrid.test.ts

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import SettingsGridTest from "$components/layout/SettingsGridTest.svelte";
+
+describe("SettingsGrid.svelte", () => {
+  it("should render multiple children using a wrapper component", () => {
+    render(SettingsGridTest);
+
+    const settingsGrid = document.querySelector(".settings-grid");
+    expect(settingsGrid).toBeInTheDocument();
+
+    expect(screen.getByTestId("item1")).toBeInTheDocument();
+    expect(screen.getByTestId("item2")).toBeInTheDocument();
+    expect(screen.getByTestId("item3")).toBeInTheDocument();
+
+    const items = settingsGrid.querySelectorAll('div[data-testid]');
+    expect(items.length).toBe(3);
+  });
+});

tests/unit/components/layout/SettingsRow.test.ts

@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import SettingsRowTest from "$components/layout/SettingsRowTest.svelte";
+
+describe("SettingsRow.svelte", () => {
+  it("should render label and children using a wrapper component", () => {
+    render(SettingsRowTest);
+
+    const settingRow = document.querySelector(".setting-row");
+    expect(settingRow).toBeInTheDocument();
+
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+    expect(screen.getByTestId("test-input")).toBeInTheDocument();
+
+    const label = settingRow.querySelector(".setting-label");
+    expect(label).toBeInTheDocument();
+    expect(label.textContent).toBe("Test Label");
+
+    const control = settingRow.querySelector(".setting-control");
+    expect(control).toBeInTheDocument();
+    expect(control.querySelector('input[data-testid="test-input"]')).toBeInTheDocument();
+  });
+});