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