test: add test for svelte components

tests/unit/components/ui/Alignment.test.ts

@@ -0,0 +1,68 @@
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import Alignment from "$components/ui/Alignment.svelte";
+
+describe("Alignment.svelte", () => {
+  it("should render with default left alignment", () => {
+    const { container } = render(Alignment, {
+      props: {
+        align: "left",
+      },
+    });
+
+    const buttons = container.querySelectorAll(".align-btn");
+    expect(buttons).toHaveLength(3);
+    expect(buttons[0]).toHaveClass("active");
+  });
+
+  it("should render with center alignment", () => {
+    const { container } = render(Alignment, {
+      props: {
+        align: "center",
+      },
+    });
+
+    const buttons = container.querySelectorAll(".align-btn");
+    expect(buttons[1]).toHaveClass("active");
+  });
+
+  it("should render with right alignment", () => {
+    const { container } = render(Alignment, {
+      props: {
+        align: "right",
+      },
+    });
+
+    const buttons = container.querySelectorAll(".align-btn");
+    expect(buttons[2]).toHaveClass("active");
+  });
+
+  it("should change alignment on button click", async () => {
+    const { container } = render(Alignment, {
+      props: {
+        align: "left",
+      },
+    });
+
+    const buttons = container.querySelectorAll(".align-btn");
+
+    await fireEvent.click(buttons[1]);
+    expect(buttons[1]).toHaveClass("active");
+    expect(buttons[0]).not.toHaveClass("active");
+
+    await fireEvent.click(buttons[2]);
+    expect(buttons[2]).toHaveClass("active");
+    expect(buttons[1]).not.toHaveClass("active");
+  });
+
+  it("should render all alignment buttons", () => {
+    const { container } = render(Alignment, {
+      props: {
+        align: "left",
+      },
+    });
+
+    const buttons = container.querySelectorAll(".align-btn");
+    expect(buttons).toHaveLength(3);
+  });
+});

tests/unit/components/ui/Badge.test.ts

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import Badge from "$components/ui/Badge.svelte";
+
+describe("Badge.svelte", () => {
+  it("should render with string text", () => {
+    render(Badge, {
+      props: {
+        text: "Test Badge",
+      },
+    });
+
+    expect(screen.getByText("Test Badge")).toBeInTheDocument();
+  });
+
+  it("should render with number text", () => {
+    render(Badge, {
+      props: {
+        text: 42,
+      },
+    });
+
+    expect(screen.getByText("42")).toBeInTheDocument();
+  });
+
+  it("should render with empty string", () => {
+    const { container } = render(Badge, {
+      props: {
+        text: "",
+      },
+    });
+
+    const badge = container.querySelector(".badge");
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveTextContent("");
+  });
+
+  it("should render with zero", () => {
+    render(Badge, {
+      props: {
+        text: 0,
+      },
+    });
+
+    expect(screen.getByText("0")).toBeInTheDocument();
+  });
+});

tests/unit/components/ui/Button.test.ts

@@ -0,0 +1,88 @@
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import { describe, expect, it, vi } from "vitest";
+import Button from "$components/ui/Button.svelte";
+import MockIcon from "./__mocks__/MockIcon.svelte";
+
+describe("Button.svelte", () => {
+
+  it("should render with icon and label", () => {
+    const { container } = render(Button, {
+      props: {
+        icon: MockIcon,
+        label: "Test Button",
+      },
+    });
+
+    expect(screen.getByText("Test Button")).toBeInTheDocument();
+    expect(container.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("should render with icon only", () => {
+    const { container } = render(Button, {
+      props: {
+        icon: MockIcon,
+      },
+    });
+
+    expect(container.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("should call onclick handler", async () => {
+    const onclick = vi.fn();
+    const { container } = render(Button, {
+      props: {
+        icon: MockIcon,
+        label: "Click me",
+        onclick,
+      },
+    });
+
+    const button = container.querySelector("button");
+    await fireEvent.click(button);
+
+    expect(onclick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should be disabled when disabled prop is true", () => {
+    const { container } = render(Button, {
+      props: {
+        icon: MockIcon,
+        label: "Disabled",
+        disabled: true,
+      },
+    });
+
+    const button = container.querySelector("button");
+    expect(button).toBeDisabled();
+  });
+
+  it("should not be disabled by default", () => {
+    const { container } = render(Button, {
+      props: {
+        icon: MockIcon,
+        label: "Enabled",
+      },
+    });
+
+    const button = container.querySelector("button");
+    expect(button).not.toBeDisabled();
+  });
+
+  it("should render with different types", () => {
+    const types = ["primary", "secondary", "danger", "outline", "mini"] as const;
+
+    types.forEach(type => {
+      const { container, unmount } = render(Button, {
+        props: {
+          icon: MockIcon,
+          label: `${type} Button`,
+          type,
+        },
+      });
+
+      expect(screen.getByText(`${type} Button`)).toBeInTheDocument();
+      expect(container.querySelector("svg")).toBeInTheDocument();
+      unmount();
+    });
+  });
+});

tests/unit/components/ui/ColorPicker.test.ts

@@ -0,0 +1,40 @@
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import ColorPicker from "$components/ui/ColorPicker.svelte";
+
+describe("ColorPicker.svelte", () => {
+  it("should render with initial value", () => {
+    const { container } = render(ColorPicker, {
+      props: {
+        value: "#ffffff",
+      },
+    });
+
+    const input = container.querySelector(".color-input");
+    expect(input).toBeInTheDocument();
+    expect(screen.getByText("#ffffff")).toBeInTheDocument();
+  });
+
+  it("should update value on change", async () => {
+    const { container } = render(ColorPicker, {
+      props: {
+        value: "#ffffff",
+      },
+    });
+
+    const input = container.querySelector(".color-input");
+    await fireEvent.input(input, { target: { value: "#ff0000" } });
+
+    expect(screen.getByText("#ff0000")).toBeInTheDocument();
+  });
+
+  it("should render with different color values", () => {
+    render(ColorPicker, {
+      props: {
+        value: "#000000",
+      },
+    });
+
+    expect(screen.getByText("#000000")).toBeInTheDocument();
+  });
+});

tests/unit/components/ui/RangeSlider.test.ts

@@ -0,0 +1,61 @@
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import { describe, expect, it, vi } from "vitest";
+import RangeSlider from "$components/ui/RangeSlider.svelte";
+
+describe("RangeSlider.svelte", () => {
+  it("should render with default props", () => {
+    const { container } = render(RangeSlider, {
+      props: {
+        value: 50,
+      },
+    });
+
+    const slider = container.querySelector(".slider");
+    expect(slider).toBeInTheDocument();
+    expect(screen.getByText("50")).toBeInTheDocument();
+  });
+
+  it("should render with custom min, max, step", () => {
+    const { container } = render(RangeSlider, {
+      props: {
+        value: 25,
+        min: 0,
+        max: 50,
+        step: 5,
+      },
+    });
+
+    const slider = container.querySelector(".slider");
+    expect(slider).toHaveAttribute("min", "0");
+    expect(slider).toHaveAttribute("max", "50");
+    expect(slider).toHaveAttribute("step", "5");
+  });
+
+  it("should update value on change", async () => {
+    const { container } = render(RangeSlider, {
+      props: {
+        value: 50,
+      },
+    });
+
+    const slider = container.querySelector(".slider");
+    await fireEvent.input(slider, { target: { value: "75" } });
+
+    expect(screen.getByText("75")).toBeInTheDocument();
+  });
+
+  it("should call onchange handler", async () => {
+    const onchange = vi.fn();
+    const { container } = render(RangeSlider, {
+      props: {
+        value: 50,
+        onchange,
+      },
+    });
+
+    const slider = container.querySelector(".slider");
+    await fireEvent.change(slider, { target: { value: "75" } });
+
+    expect(onchange).toHaveBeenCalled();
+  });
+});

tests/unit/components/ui/SelectFont.test.ts

@@ -0,0 +1,70 @@
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import SelectFont from "$components/ui/SelectFont.svelte";
+
+describe("SelectFont.svelte", () => {
+  const fonts = [
+    "Arial",
+    "Verdana",
+    "Georgia",
+    "Times New Roman",
+    "Courier New",
+    "Impact",
+    "Comic Sans MS",
+    "Trebuchet MS",
+  ];
+
+  it("should render with initial value", () => {
+    const { container } = render(SelectFont, {
+      props: {
+        value: "Arial",
+      },
+    });
+
+    const select = container.querySelector(".select-input");
+    expect(select).toBeInTheDocument();
+    expect(select).toHaveValue("Arial");
+  });
+
+  it("should render all font options", () => {
+    render(SelectFont, {
+      props: {
+        value: "Arial",
+      },
+    });
+
+    fonts.forEach(font => {
+      const options = screen.queryAllByText(font);
+      expect(options.length).toBeGreaterThan(0);
+    });
+  });
+
+  it("should update value on change", async () => {
+    const { container } = render(SelectFont, {
+      props: {
+        value: "Arial",
+      },
+    });
+
+    const select = container.querySelector(".select-input");
+    await fireEvent.change(select, { target: { value: "Verdana" } });
+
+    expect(select).toHaveValue("Verdana");
+  });
+
+  it("should select different fonts", async () => {
+    const { container } = render(SelectFont, {
+      props: {
+        value: "Arial",
+      },
+    });
+
+    const select = container.querySelector(".select-input");
+
+    await fireEvent.change(select, { target: { value: "Georgia" } });
+    expect(select).toHaveValue("Georgia");
+
+    await fireEvent.change(select, { target: { value: "Impact" } });
+    expect(select).toHaveValue("Impact");
+  });
+});

tests/unit/components/ui/__mocks__/MockIcon.svelte

@@ -0,0 +1,3 @@
+<svg data-testid="mock-icon" viewBox="0 0 24 24">
+  <circle cx="12" cy="12" r="10" />
+</svg>