style: add eslint and prettier, fix style errors
This commit is contained in:
@@ -1,95 +1,95 @@
|
||||
import Button from "$components/ui/Button.svelte";
|
||||
import { render, screen } from "@testing-library/svelte";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import MockIcon from "./MockIcon.svelte";
|
||||
|
||||
describe("Button.svelte", () => {
|
||||
it("should render with icon and label", () => {
|
||||
render(Button, {
|
||||
props: {
|
||||
icon: MockIcon,
|
||||
label: "Test Button",
|
||||
ariaLabel: "Test button",
|
||||
},
|
||||
});
|
||||
|
||||
expect(screen.getByText("Test Button")).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: /test button/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render with icon only", () => {
|
||||
render(Button, {
|
||||
props: {
|
||||
icon: MockIcon,
|
||||
ariaLabel: "Test button",
|
||||
},
|
||||
});
|
||||
|
||||
const button = screen.getByRole("button", { name: /test button/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button.textContent.trim()).toBe("");
|
||||
});
|
||||
|
||||
it("should call onclick handler", async () => {
|
||||
const onclick = vi.fn();
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(Button, {
|
||||
props: {
|
||||
icon: MockIcon,
|
||||
label: "Click me",
|
||||
onclick,
|
||||
ariaLabel: "Test button",
|
||||
},
|
||||
});
|
||||
|
||||
const button = screen.getByRole("button", { name: /test button/i });
|
||||
await user.click(button);
|
||||
|
||||
expect(onclick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("should not throw error when clicked without onclick prop", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(Button, {
|
||||
props: {
|
||||
icon: MockIcon,
|
||||
label: "Click me",
|
||||
ariaLabel: "Test button",
|
||||
},
|
||||
});
|
||||
|
||||
const button = screen.getByRole("button", { name: /test button/i });
|
||||
|
||||
expect(() => user.click(button)).not.toThrow();
|
||||
});
|
||||
|
||||
it("should be disabled when disabled prop is true", () => {
|
||||
render(Button, {
|
||||
props: {
|
||||
icon: MockIcon,
|
||||
label: "Disabled",
|
||||
disabled: true,
|
||||
ariaLabel: "Test button",
|
||||
},
|
||||
});
|
||||
|
||||
const button = screen.getByRole("button", { name: /test button/i });
|
||||
expect(button).toBeDisabled();
|
||||
});
|
||||
|
||||
it("should not be disabled by default", () => {
|
||||
render(Button, {
|
||||
props: {
|
||||
icon: MockIcon,
|
||||
label: "Enabled",
|
||||
ariaLabel: "Test button",
|
||||
},
|
||||
});
|
||||
|
||||
const button = screen.getByRole("button", { name: /test button/i });
|
||||
expect(button).not.toBeDisabled();
|
||||
});
|
||||
});
|
||||
import Button from "$components/ui/Button.svelte";
|
||||
import { render, screen } from "@testing-library/svelte";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import MockIcon from "./MockIcon.svelte";
|
||||
|
||||
describe("Button.svelte", () => {
|
||||
it("should render with icon and label", () => {
|
||||
render(Button, {
|
||||
props: {
|
||||
icon: MockIcon,
|
||||
label: "Test Button",
|
||||
ariaLabel: "Test button",
|
||||
},
|
||||
});
|
||||
|
||||
expect(screen.getByText("Test Button")).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: /test button/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render with icon only", () => {
|
||||
render(Button, {
|
||||
props: {
|
||||
icon: MockIcon,
|
||||
ariaLabel: "Test button",
|
||||
},
|
||||
});
|
||||
|
||||
const button = screen.getByRole("button", { name: /test button/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button.textContent.trim()).toBe("");
|
||||
});
|
||||
|
||||
it("should call onclick handler", async () => {
|
||||
const onclick = vi.fn();
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(Button, {
|
||||
props: {
|
||||
icon: MockIcon,
|
||||
label: "Click me",
|
||||
onclick,
|
||||
ariaLabel: "Test button",
|
||||
},
|
||||
});
|
||||
|
||||
const button = screen.getByRole("button", { name: /test button/i });
|
||||
await user.click(button);
|
||||
|
||||
expect(onclick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("should not throw error when clicked without onclick prop", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(Button, {
|
||||
props: {
|
||||
icon: MockIcon,
|
||||
label: "Click me",
|
||||
ariaLabel: "Test button",
|
||||
},
|
||||
});
|
||||
|
||||
const button = screen.getByRole("button", { name: /test button/i });
|
||||
|
||||
expect(() => user.click(button)).not.toThrow();
|
||||
});
|
||||
|
||||
it("should be disabled when disabled prop is true", () => {
|
||||
render(Button, {
|
||||
props: {
|
||||
icon: MockIcon,
|
||||
label: "Disabled",
|
||||
disabled: true,
|
||||
ariaLabel: "Test button",
|
||||
},
|
||||
});
|
||||
|
||||
const button = screen.getByRole("button", { name: /test button/i });
|
||||
expect(button).toBeDisabled();
|
||||
});
|
||||
|
||||
it("should not be disabled by default", () => {
|
||||
render(Button, {
|
||||
props: {
|
||||
icon: MockIcon,
|
||||
label: "Enabled",
|
||||
ariaLabel: "Test button",
|
||||
},
|
||||
});
|
||||
|
||||
const button = screen.getByRole("button", { name: /test button/i });
|
||||
expect(button).not.toBeDisabled();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user