@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/components/Modal/ModalStateManager.spec.js

@@ -1,100 +1,100 @@
-import { render, screen } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import ModalStateManager from "./ModalStateManager.svelte";
-
-describe("ModalStateManager Component Tests", () => {
-  test("Shows processing state when isProcessing is true", () => {
-    render(ModalStateManager, {
-      props: { isProcessing: true, isSuccess: false },
-    });
-    expect(screen.getByText("Processing your request")).toBeInTheDocument();
-  });
-
-  test("Shows custom processing message", () => {
-    render(ModalStateManager, {
-      props: {
-        isProcessing: true,
-        isSuccess: false,
-        processingMessage: "Please wait...",
-      },
-    });
-    expect(screen.getByText("Please wait...")).toBeInTheDocument();
-  });
-
-  test("Shows success state when isSuccess is true", () => {
-    render(ModalStateManager, {
-      props: { isProcessing: false, isSuccess: true, successTitle: "Done!" },
-    });
-    expect(screen.getByText("Done!")).toBeInTheDocument();
-  });
-
-  test("Shows success message when provided", () => {
-    render(ModalStateManager, {
-      props: {
-        isProcessing: false,
-        isSuccess: true,
-        successTitle: "Success",
-        successMessage: "Your action was completed.",
-      },
-    });
-    expect(screen.getByText("Your action was completed.")).toBeInTheDocument();
-  });
-
-  test("Shows continue button in success state", () => {
-    render(ModalStateManager, {
-      props: { isProcessing: false, isSuccess: true },
-    });
-    expect(screen.getByText("Continue")).toBeInTheDocument();
-  });
-
-  test("Uses custom success button text", () => {
-    render(ModalStateManager, {
-      props: {
-        isProcessing: false,
-        isSuccess: true,
-        successButtonText: "Close",
-      },
-    });
-    expect(screen.getByText("Close")).toBeInTheDocument();
-  });
-
-  test("Calls onSuccessClose when success button clicked", async () => {
-    const user = userEvent.setup();
-    const onSuccessClose = vi.fn();
-
-    render(ModalStateManager, {
-      props: { isProcessing: false, isSuccess: true, onSuccessClose },
-    });
-
-    await user.click(screen.getByText("Continue"));
-    expect(onSuccessClose).toHaveBeenCalledTimes(1);
-  });
-
-  test("Processing state shows spinner animation", () => {
-    const { container } = render(ModalStateManager, {
-      props: { isProcessing: true, isSuccess: false },
-    });
-    const spinner = container.querySelector(".animate-spin");
-    expect(spinner).toBeInTheDocument();
-  });
-
-  test("Processing state has orange background", () => {
-    const { container } = render(ModalStateManager, {
-      props: { isProcessing: true, isSuccess: false },
-    });
-    const spinnerBg = container.querySelector(".bg-orange-300");
-    expect(spinnerBg).toBeInTheDocument();
-  });
-
-  test("Success state priority over processing", () => {
-    // When both are true, success should show
-    render(ModalStateManager, {
-      props: { isProcessing: true, isSuccess: true, successTitle: "Complete" },
-    });
-    expect(screen.getByText("Complete")).toBeInTheDocument();
-    expect(
-      screen.queryByText("Processing your request")
-    ).not.toBeInTheDocument();
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import ModalStateManager from "./ModalStateManager.svelte";
+
+describe("ModalStateManager Component Tests", () => {
+  test("Shows processing state when isProcessing is true", () => {
+    render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: false },
+    });
+    expect(screen.getByText("Processing your request")).toBeInTheDocument();
+  });
+
+  test("Shows custom processing message", () => {
+    render(ModalStateManager, {
+      props: {
+        isProcessing: true,
+        isSuccess: false,
+        processingMessage: "Please wait...",
+      },
+    });
+    expect(screen.getByText("Please wait...")).toBeInTheDocument();
+  });
+
+  test("Shows success state when isSuccess is true", () => {
+    render(ModalStateManager, {
+      props: { isProcessing: false, isSuccess: true, successTitle: "Done!" },
+    });
+    expect(screen.getByText("Done!")).toBeInTheDocument();
+  });
+
+  test("Shows success message when provided", () => {
+    render(ModalStateManager, {
+      props: {
+        isProcessing: false,
+        isSuccess: true,
+        successTitle: "Success",
+        successMessage: "Your action was completed.",
+      },
+    });
+    expect(screen.getByText("Your action was completed.")).toBeInTheDocument();
+  });
+
+  test("Shows continue button in success state", () => {
+    render(ModalStateManager, {
+      props: { isProcessing: false, isSuccess: true },
+    });
+    expect(screen.getByText("Continue")).toBeInTheDocument();
+  });
+
+  test("Uses custom success button text", () => {
+    render(ModalStateManager, {
+      props: {
+        isProcessing: false,
+        isSuccess: true,
+        successButtonText: "Close",
+      },
+    });
+    expect(screen.getByText("Close")).toBeInTheDocument();
+  });
+
+  test("Calls onSuccessClose when success button clicked", async () => {
+    const user = userEvent.setup();
+    const onSuccessClose = vi.fn();
+
+    render(ModalStateManager, {
+      props: { isProcessing: false, isSuccess: true, onSuccessClose },
+    });
+
+    await user.click(screen.getByText("Continue"));
+    expect(onSuccessClose).toHaveBeenCalledTimes(1);
+  });
+
+  test("Processing state shows spinner animation", () => {
+    const { container } = render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: false },
+    });
+    const spinner = container.querySelector(".animate-spin");
+    expect(spinner).toBeInTheDocument();
+  });
+
+  test("Processing state has orange background", () => {
+    const { container } = render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: false },
+    });
+    const spinnerBg = container.querySelector(".bg-orange-300");
+    expect(spinnerBg).toBeInTheDocument();
+  });
+
+  test("Success state priority over processing", () => {
+    // When both are true, success should show
+    render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: true, successTitle: "Complete" },
+    });
+    expect(screen.getByText("Complete")).toBeInTheDocument();
+    expect(
+      screen.queryByText("Processing your request")
+    ).not.toBeInTheDocument();
+  });
+});

package/dist/components/PageLoader.spec.js

@@ -1,54 +1,54 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import PageLoader from "./PageLoader.svelte";
-
-describe("PageLoader Component Tests", () => {
-  test("Shows spinner when loading", () => {
-    render(PageLoader, { props: { isLoading: true } });
-    expect(screen.getByRole("status")).toBeInTheDocument();
-  });
-
-  test("Shows error alert when error is set", () => {
-    render(PageLoader, {
-      props: { isLoading: false, error: "Something went wrong" },
-    });
-    expect(screen.getByRole("alert")).toBeInTheDocument();
-    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
-  });
-
-  test("Shows custom error title", () => {
-    render(PageLoader, {
-      props: {
-        isLoading: false,
-        error: "Failed",
-        errorTitle: "Loading Error",
-      },
-    });
-    expect(screen.getByText("Loading Error")).toBeInTheDocument();
-  });
-
-  test("Does not show spinner when not loading", () => {
-    render(PageLoader, { props: { isLoading: false } });
-    expect(screen.queryByRole("status")).not.toBeInTheDocument();
-  });
-
-  test("Does not show error when no error", () => {
-    render(PageLoader, { props: { isLoading: false, error: null } });
-    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
-  });
-
-  test("Has custom min height class", () => {
-    const { container } = render(PageLoader, {
-      props: { isLoading: true, minHeight: "h-96" },
-    });
-    const loadingDiv = container.querySelector(".h-96");
-    expect(loadingDiv).toBeInTheDocument();
-  });
-
-  test("Shows loading message when provided", () => {
-    render(PageLoader, {
-      props: { isLoading: true, loadingMessage: "Please wait..." },
-    });
-    expect(screen.getByText("Please wait...")).toBeInTheDocument();
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import PageLoader from "./PageLoader.svelte";
+
+describe("PageLoader Component Tests", () => {
+  test("Shows spinner when loading", () => {
+    render(PageLoader, { props: { isLoading: true } });
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+
+  test("Shows error alert when error is set", () => {
+    render(PageLoader, {
+      props: { isLoading: false, error: "Something went wrong" },
+    });
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+  });
+
+  test("Shows custom error title", () => {
+    render(PageLoader, {
+      props: {
+        isLoading: false,
+        error: "Failed",
+        errorTitle: "Loading Error",
+      },
+    });
+    expect(screen.getByText("Loading Error")).toBeInTheDocument();
+  });
+
+  test("Does not show spinner when not loading", () => {
+    render(PageLoader, { props: { isLoading: false } });
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  });
+
+  test("Does not show error when no error", () => {
+    render(PageLoader, { props: { isLoading: false, error: null } });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  test("Has custom min height class", () => {
+    const { container } = render(PageLoader, {
+      props: { isLoading: true, minHeight: "h-96" },
+    });
+    const loadingDiv = container.querySelector(".h-96");
+    expect(loadingDiv).toBeInTheDocument();
+  });
+
+  test("Shows loading message when provided", () => {
+    render(PageLoader, {
+      props: { isLoading: true, loadingMessage: "Please wait..." },
+    });
+    expect(screen.getByText("Please wait...")).toBeInTheDocument();
+  });
+});

package/dist/components/PasswordStrengthIndicator/PasswordStrengthIndicator.spec.js

@@ -1,173 +1,173 @@
-import { render, screen, waitFor } from "@testing-library/svelte";
-import { expect, describe, test, vi } from "vitest";
-import PasswordStrengthIndicator from "./PasswordStrengthIndicator.svelte";
-
-// Debounce delay + buffer
-const DEBOUNCE_WAIT = 500;
-
-function setupTest(args = {}) {
-  const { component, container } = render(PasswordStrengthIndicator, {
-    props: {
-      password: "",
-      ...args,
-    },
-  });
-  return { component, container };
-}
-
-describe("PasswordStrengthIndicator Component Tests", () => {
-  test("Does not render when password is empty", () => {
-    const { container } = setupTest({ password: "" });
-    const indicator = container.querySelector(".pt-2");
-    expect(indicator).not.toBeInTheDocument();
-  });
-
-  test("Renders after debounce when password has value", async () => {
-    const { container } = setupTest({ password: "test" });
-    await waitFor(
-      () => {
-        const indicator = container.querySelector(".pt-2");
-        expect(indicator).toBeInTheDocument();
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Has three strength bars", async () => {
-    const { container } = setupTest({ password: "test" });
-    await waitFor(
-      () => {
-        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
-        expect(bars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Shows filled bars for weak password", async () => {
-    const { container } = setupTest({ password: "ab" });
-    await waitFor(
-      () => {
-        // At least one bar should be filled with a color
-        const coloredBars = container.querySelectorAll(
-          ".bg-accent-Danger, .bg-accent-success"
-        );
-        expect(coloredBars.length).toBeGreaterThan(0);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Shows filled bars for good password", async () => {
-    const { container } = setupTest({ password: "Abc12345" });
-    await waitFor(
-      () => {
-        // All 3 bars should be filled for a good password
-        const successBars = container.querySelectorAll(".bg-accent-success");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Exports score prop", () => {
-    const { component } = setupTest({ password: "test123" });
-    // Score should be accessible
-    expect(component).toBeDefined();
-  });
-
-  test("Exports strengthText prop", () => {
-    const { component } = setupTest({ password: "test123" });
-    expect(component).toBeDefined();
-  });
-
-  test("Exports textColor prop", () => {
-    const { component } = setupTest({ password: "test123" });
-    expect(component).toBeDefined();
-  });
-
-  test("Uses danger color for weak passwords", async () => {
-    const { container } = setupTest({ password: "weak" });
-    await waitFor(
-      () => {
-        const dangerBars = container.querySelectorAll(".bg-accent-Danger");
-        expect(dangerBars.length).toBeGreaterThan(0);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Uses success color for good/strong passwords", async () => {
-    const { container } = setupTest({ password: "StrongP@ss123" });
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-accent-success");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Has transition animation classes on bars", async () => {
-    const { container } = setupTest({ password: "test" });
-    await waitFor(
-      () => {
-        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
-        expect(bars.length).toBe(3);
-        bars.forEach((bar) => {
-          expect(bar).toHaveClass("transition-colors");
-          expect(bar).toHaveClass("duration-300");
-        });
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Very long password shows strong indicator", async () => {
-    const { container } = setupTest({ password: "1234567890123" }); // 13 chars
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-accent-success");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-});
-
-describe("Password Strength Scoring", () => {
-  test("Score 2+ (Good) shows 3 success bars - 8+ chars with 2 diversity", async () => {
-    const { container } = setupTest({ password: "Abcdefgh" }); // Upper + lower
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-accent-success");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Score 3 (Strong) - 10+ chars, multiple diversity", async () => {
-    const { container } = setupTest({ password: "Abcdefgh1!" }); // Upper, lower, number, symbol
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-accent-success");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Weak password shows danger color bars", async () => {
-    const { container } = setupTest({ password: "abcdef" });
-    await waitFor(
-      () => {
-        const coloredBars = container.querySelectorAll(
-          ".bg-accent-Danger, .bg-accent-success"
-        );
-        expect(coloredBars.length).toBeGreaterThan(0);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-});
+import { render, screen, waitFor } from "@testing-library/svelte";
+import { expect, describe, test, vi } from "vitest";
+import PasswordStrengthIndicator from "./PasswordStrengthIndicator.svelte";
+
+// Debounce delay + buffer
+const DEBOUNCE_WAIT = 500;
+
+function setupTest(args = {}) {
+  const { component, container } = render(PasswordStrengthIndicator, {
+    props: {
+      password: "",
+      ...args,
+    },
+  });
+  return { component, container };
+}
+
+describe("PasswordStrengthIndicator Component Tests", () => {
+  test("Does not render when password is empty", () => {
+    const { container } = setupTest({ password: "" });
+    const indicator = container.querySelector(".pt-2");
+    expect(indicator).not.toBeInTheDocument();
+  });
+
+  test("Renders after debounce when password has value", async () => {
+    const { container } = setupTest({ password: "test" });
+    await waitFor(
+      () => {
+        const indicator = container.querySelector(".pt-2");
+        expect(indicator).toBeInTheDocument();
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Has three strength bars", async () => {
+    const { container } = setupTest({ password: "test" });
+    await waitFor(
+      () => {
+        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
+        expect(bars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Shows filled bars for weak password", async () => {
+    const { container } = setupTest({ password: "ab" });
+    await waitFor(
+      () => {
+        // At least one bar should be filled with a color
+        const coloredBars = container.querySelectorAll(
+          ".bg-accent-Danger, .bg-accent-success"
+        );
+        expect(coloredBars.length).toBeGreaterThan(0);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Shows filled bars for good password", async () => {
+    const { container } = setupTest({ password: "Abc12345" });
+    await waitFor(
+      () => {
+        // All 3 bars should be filled for a good password
+        const successBars = container.querySelectorAll(".bg-accent-success");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Exports score prop", () => {
+    const { component } = setupTest({ password: "test123" });
+    // Score should be accessible
+    expect(component).toBeDefined();
+  });
+
+  test("Exports strengthText prop", () => {
+    const { component } = setupTest({ password: "test123" });
+    expect(component).toBeDefined();
+  });
+
+  test("Exports textColor prop", () => {
+    const { component } = setupTest({ password: "test123" });
+    expect(component).toBeDefined();
+  });
+
+  test("Uses danger color for weak passwords", async () => {
+    const { container } = setupTest({ password: "weak" });
+    await waitFor(
+      () => {
+        const dangerBars = container.querySelectorAll(".bg-accent-Danger");
+        expect(dangerBars.length).toBeGreaterThan(0);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Uses success color for good/strong passwords", async () => {
+    const { container } = setupTest({ password: "StrongP@ss123" });
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-accent-success");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Has transition animation classes on bars", async () => {
+    const { container } = setupTest({ password: "test" });
+    await waitFor(
+      () => {
+        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
+        expect(bars.length).toBe(3);
+        bars.forEach((bar) => {
+          expect(bar).toHaveClass("transition-colors");
+          expect(bar).toHaveClass("duration-300");
+        });
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Very long password shows strong indicator", async () => {
+    const { container } = setupTest({ password: "1234567890123" }); // 13 chars
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-accent-success");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+});
+
+describe("Password Strength Scoring", () => {
+  test("Score 2+ (Good) shows 3 success bars - 8+ chars with 2 diversity", async () => {
+    const { container } = setupTest({ password: "Abcdefgh" }); // Upper + lower
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-accent-success");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Score 3 (Strong) - 10+ chars, multiple diversity", async () => {
+    const { container } = setupTest({ password: "Abcdefgh1!" }); // Upper, lower, number, symbol
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-accent-success");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Weak password shows danger color bars", async () => {
+    const { container } = setupTest({ password: "abcdef" });
+    await waitFor(
+      () => {
+        const coloredBars = container.querySelectorAll(
+          ".bg-accent-Danger, .bg-accent-success"
+        );
+        expect(coloredBars.length).toBeGreaterThan(0);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+});