@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/components/ErrorDisplay.spec.js

@@ -1,69 +1,69 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import ErrorDisplay from "./ErrorDisplay.svelte";
-
-describe("ErrorDisplay Component Tests", () => {
-  test("Shows error message when error and show are true", () => {
-    render(ErrorDisplay, { props: { error: "Invalid input", show: true } });
-    expect(screen.getByText("Invalid input")).toBeInTheDocument();
-  });
-
-  test("Does not show when error is empty", () => {
-    render(ErrorDisplay, { props: { error: "", show: true } });
-    expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
-  });
-
-  test("Does not show when show is false", () => {
-    render(ErrorDisplay, { props: { error: "Error message", show: false } });
-    expect(screen.queryByText("Error message")).not.toBeInTheDocument();
-  });
-
-  test("Has error text color", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("text-accent-Danger");
-  });
-
-  test("Has shake class when shake is true", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, shake: true },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("error-shake");
-  });
-
-  test("Does not have shake class when shake is false", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, shake: false },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).not.toHaveClass("error-shake");
-  });
-
-  test("Contains icon element", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Has flex layout", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("flex");
-    expect(wrapper).toHaveClass("items-center");
-  });
-
-  test("Applies custom className", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, className: "mt-2" },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("mt-2");
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import ErrorDisplay from "./ErrorDisplay.svelte";
+
+describe("ErrorDisplay Component Tests", () => {
+  test("Shows error message when error and show are true", () => {
+    render(ErrorDisplay, { props: { error: "Invalid input", show: true } });
+    expect(screen.getByText("Invalid input")).toBeInTheDocument();
+  });
+
+  test("Does not show when error is empty", () => {
+    render(ErrorDisplay, { props: { error: "", show: true } });
+    expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
+  });
+
+  test("Does not show when show is false", () => {
+    render(ErrorDisplay, { props: { error: "Error message", show: false } });
+    expect(screen.queryByText("Error message")).not.toBeInTheDocument();
+  });
+
+  test("Has error text color", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("text-accent-Danger");
+  });
+
+  test("Has shake class when shake is true", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: true },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("error-shake");
+  });
+
+  test("Does not have shake class when shake is false", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: false },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).not.toHaveClass("error-shake");
+  });
+
+  test("Contains icon element", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Has flex layout", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("flex");
+    expect(wrapper).toHaveClass("items-center");
+  });
+
+  test("Applies custom className", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, className: "mt-2" },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("mt-2");
+  });
+});

package/dist/components/FormActions.spec.js

@@ -1,88 +1,88 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import FormActions from "./FormActions.svelte";
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component, container } = render(FormActions, {
-    props: {
-      onCancel: vi.fn(),
-      onSubmit: vi.fn(),
-      ...args,
-    },
-  });
-  return { user, component, container };
-}
-
-describe("FormActions Component Tests", () => {
-  test("Renders submit and cancel buttons", () => {
-    setupTest();
-    expect(screen.getByText("Save")).toBeInTheDocument();
-    expect(screen.getByText("Cancel")).toBeInTheDocument();
-  });
-
-  test("Uses custom button labels", () => {
-    setupTest({ submitLabel: "Update", cancelLabel: "Discard" });
-    expect(screen.getByText("Update")).toBeInTheDocument();
-    expect(screen.getByText("Discard")).toBeInTheDocument();
-  });
-
-  test("Calls onSubmit when submit button clicked", async () => {
-    const onSubmit = vi.fn();
-    const { user } = setupTest({ onSubmit });
-
-    await user.click(screen.getByText("Save"));
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-  });
-
-  test("Calls onCancel when cancel button clicked", async () => {
-    const onCancel = vi.fn();
-    const { user } = setupTest({ onCancel });
-
-    await user.click(screen.getByText("Cancel"));
-    expect(onCancel).toHaveBeenCalledTimes(1);
-  });
-
-  test("Submit button shows loading state", () => {
-    setupTest({ isSubmitting: true });
-    const submitBtn = screen.getByText("Save").closest("button, a");
-    expect(submitBtn).toBeDisabled();
-  });
-
-  test("Submit button shows success state", () => {
-    setupTest({ isSuccess: true });
-    const submitBtn = screen.getByText("Save").closest("button, a");
-    expect(submitBtn).toHaveClass("btn-success");
-  });
-
-  test("Submit button is disabled when disabled prop is true", () => {
-    setupTest({ disabled: true });
-    const submitBtn = screen.getByText("Save").closest("button, a");
-    expect(submitBtn).toBeDisabled();
-  });
-
-  test("Hides cancel button when showCancel is false", () => {
-    setupTest({ showCancel: false });
-    expect(screen.queryByText("Cancel")).not.toBeInTheDocument();
-  });
-
-  test("Uses custom submit variant", () => {
-    setupTest({ submitVariant: "red-solid" });
-    const submitBtn = screen.getByText("Save").closest("button, a");
-    expect(submitBtn).toHaveClass("btn-red-solid");
-  });
-
-  test("Uses custom cancel variant", () => {
-    setupTest({ cancelVariant: "blue-outline" });
-    const cancelBtn = screen.getByText("Cancel").closest("button, a");
-    expect(cancelBtn).toHaveClass("btn-blue-outline");
-  });
-
-  test("Has responsive layout classes", () => {
-    const { container } = setupTest();
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("w-full");
-    expect(wrapper).toHaveClass("flex");
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import FormActions from "./FormActions.svelte";
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component, container } = render(FormActions, {
+    props: {
+      onCancel: vi.fn(),
+      onSubmit: vi.fn(),
+      ...args,
+    },
+  });
+  return { user, component, container };
+}
+
+describe("FormActions Component Tests", () => {
+  test("Renders submit and cancel buttons", () => {
+    setupTest();
+    expect(screen.getByText("Save")).toBeInTheDocument();
+    expect(screen.getByText("Cancel")).toBeInTheDocument();
+  });
+
+  test("Uses custom button labels", () => {
+    setupTest({ submitLabel: "Update", cancelLabel: "Discard" });
+    expect(screen.getByText("Update")).toBeInTheDocument();
+    expect(screen.getByText("Discard")).toBeInTheDocument();
+  });
+
+  test("Calls onSubmit when submit button clicked", async () => {
+    const onSubmit = vi.fn();
+    const { user } = setupTest({ onSubmit });
+
+    await user.click(screen.getByText("Save"));
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  test("Calls onCancel when cancel button clicked", async () => {
+    const onCancel = vi.fn();
+    const { user } = setupTest({ onCancel });
+
+    await user.click(screen.getByText("Cancel"));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  test("Submit button shows loading state", () => {
+    setupTest({ isSubmitting: true });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    expect(submitBtn).toBeDisabled();
+  });
+
+  test("Submit button shows success state", () => {
+    setupTest({ isSuccess: true });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    expect(submitBtn).toHaveClass("btn-success");
+  });
+
+  test("Submit button is disabled when disabled prop is true", () => {
+    setupTest({ disabled: true });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    expect(submitBtn).toBeDisabled();
+  });
+
+  test("Hides cancel button when showCancel is false", () => {
+    setupTest({ showCancel: false });
+    expect(screen.queryByText("Cancel")).not.toBeInTheDocument();
+  });
+
+  test("Uses custom submit variant", () => {
+    setupTest({ submitVariant: "red-solid" });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    expect(submitBtn).toHaveClass("btn-red-solid");
+  });
+
+  test("Uses custom cancel variant", () => {
+    setupTest({ cancelVariant: "blue-outline" });
+    const cancelBtn = screen.getByText("Cancel").closest("button, a");
+    expect(cancelBtn).toHaveClass("btn-blue-outline");
+  });
+
+  test("Has responsive layout classes", () => {
+    const { container } = setupTest();
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("w-full");
+    expect(wrapper).toHaveClass("flex");
+  });
+});