89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
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();
|
|
});
|
|
});
|
|
});
|