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