@getmicdrop/svelte-components 5.17.4 → 5.19.0

package/dist/primitives/Accordion/AccordionItemWrapper.test.svelte

@@ -1,107 +1,107 @@
-<script lang="ts">
-  /**
-   * Test wrapper for AccordionItem
-   * Provides the necessary accordion context that AccordionItem expects
-   */
-  import type { Snippet } from 'svelte';
-  import { setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import AccordionItem from './AccordionItem.svelte';
-
-  interface Props {
-    /** Allow multiple items open at once */
-    multiple?: boolean;
-    /** Remove outer border/radius (Flowbite flush variant) */
-    flush?: boolean;
-    /** Initial open state of the item */
-    open?: boolean;
-    /** Show bottom border */
-    border?: boolean;
-    /** Additional classes when open */
-    borderOpenClass?: string;
-    /** Custom class for the item */
-    class?: string;
-    /** Header snippet */
-    header?: Snippet;
-    /** Children snippet */
-    children?: Snippet;
-    /** Expose the openItems store for testing */
-    openItems?: import('svelte/store').Writable<Set<string>> | null;
-    /** Expose the toggle function for testing */
-    toggleFn?: ((id: string) => void) | null;
-    /** Data attributes for testing */
-    'data-testid'?: string;
-    'data-custom'?: string;
-    [key: string]: unknown;
-  }
-
-  let {
-    multiple = false,
-    flush = false,
-    open = false,
-    border = true,
-    borderOpenClass = '',
-    class: className = '',
-    header,
-    children,
-    openItems: exposedOpenItems = $bindable(null),
-    toggleFn: exposedToggleFn = $bindable(null),
-    'data-testid': dataTestId,
-    'data-custom': dataCustom,
-    ...restProps
-  }: Props = $props();
-
-  // Create the accordion context
-  const openItems = writable(new Set<string>());
-
-  // Expose openItems to parent for testing
-  exposedOpenItems = openItems;
-
-  const toggle = (id: string) => {
-    openItems.update((items) => {
-      if (items.has(id)) {
-        items.delete(id);
-      } else {
-        if (!multiple) {
-          items.clear();
-        }
-        items.add(id);
-      }
-      return new Set(items);
-    });
-  };
-
-  // Expose toggle function to parent for testing
-  exposedToggleFn = toggle;
-
-  setContext("accordion", {
-    openItems,
-    toggle,
-    get flush() { return flush; }
-  });
-</script>
-
-<AccordionItem
-  {open}
-  {border}
-  {borderOpenClass}
-  class={className}
-  data-testid={dataTestId}
-  data-custom={dataCustom}
-  {...restProps}
->
-  {#snippet header()}
-    {#if header}
-      {@render header()}
-    {:else}
-      Test Header
-    {/if}
-  {/snippet}
-  {#snippet children()}
-    {#if children}
-      {@render children()}
-    {:else}
-      Test Content
-    {/if}
-  {/snippet}
-</AccordionItem>
+<script lang="ts">
+  /**
+   * Test wrapper for AccordionItem
+   * Provides the necessary accordion context that AccordionItem expects
+   */
+  import type { Snippet } from 'svelte';
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import AccordionItem from './AccordionItem.svelte';
+
+  interface Props {
+    /** Allow multiple items open at once */
+    multiple?: boolean;
+    /** Remove outer border/radius (Flowbite flush variant) */
+    flush?: boolean;
+    /** Initial open state of the item */
+    open?: boolean;
+    /** Show bottom border */
+    border?: boolean;
+    /** Additional classes when open */
+    borderOpenClass?: string;
+    /** Custom class for the item */
+    class?: string;
+    /** Header snippet */
+    header?: Snippet;
+    /** Children snippet */
+    children?: Snippet;
+    /** Expose the openItems store for testing */
+    openItems?: import('svelte/store').Writable<Set<string>> | null;
+    /** Expose the toggle function for testing */
+    toggleFn?: ((id: string) => void) | null;
+    /** Data attributes for testing */
+    'data-testid'?: string;
+    'data-custom'?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    multiple = false,
+    flush = false,
+    open = false,
+    border = true,
+    borderOpenClass = '',
+    class: className = '',
+    header,
+    children,
+    openItems: exposedOpenItems = $bindable(null),
+    toggleFn: exposedToggleFn = $bindable(null),
+    'data-testid': dataTestId,
+    'data-custom': dataCustom,
+    ...restProps
+  }: Props = $props();
+
+  // Create the accordion context
+  const openItems = writable(new Set<string>());
+
+  // Expose openItems to parent for testing
+  exposedOpenItems = openItems;
+
+  const toggle = (id: string) => {
+    openItems.update((items) => {
+      if (items.has(id)) {
+        items.delete(id);
+      } else {
+        if (!multiple) {
+          items.clear();
+        }
+        items.add(id);
+      }
+      return new Set(items);
+    });
+  };
+
+  // Expose toggle function to parent for testing
+  exposedToggleFn = toggle;
+
+  setContext("accordion", {
+    openItems,
+    toggle,
+    get flush() { return flush; }
+  });
+</script>
+
+<AccordionItem
+  {open}
+  {border}
+  {borderOpenClass}
+  class={className}
+  data-testid={dataTestId}
+  data-custom={dataCustom}
+  {...restProps}
+>
+  {#snippet header()}
+    {#if header}
+      {@render header()}
+    {:else}
+      Test Header
+    {/if}
+  {/snippet}
+  {#snippet children()}
+    {#if children}
+      {@render children()}
+    {:else}
+      Test Content
+    {/if}
+  {/snippet}
+</AccordionItem>

package/dist/primitives/Accordion/AccordionToggleWrapper.test.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-  /**
-   * Test wrapper for Accordion toggle context coverage.
-   * Renders a real Accordion with two AccordionItems so the toggle function
-   * and its branches (add, delete, single-mode clear) are exercised.
-   */
-  import Accordion from './Accordion.svelte';
-  import AccordionItem from './AccordionItem.svelte';
-
-  interface Props {
-    multiple?: boolean;
-  }
-
-  let { multiple = false }: Props = $props();
-</script>
-
-<Accordion {multiple}>
-  {#snippet children()}
-    <AccordionItem>
-      {#snippet header()}Item 1{/snippet}
-      {#snippet children()}Content 1{/snippet}
-    </AccordionItem>
-    <AccordionItem>
-      {#snippet header()}Item 2{/snippet}
-      {#snippet children()}Content 2{/snippet}
-    </AccordionItem>
-  {/snippet}
-</Accordion>
+<script lang="ts">
+  /**
+   * Test wrapper for Accordion toggle context coverage.
+   * Renders a real Accordion with two AccordionItems so the toggle function
+   * and its branches (add, delete, single-mode clear) are exercised.
+   */
+  import Accordion from './Accordion.svelte';
+  import AccordionItem from './AccordionItem.svelte';
+
+  interface Props {
+    multiple?: boolean;
+  }
+
+  let { multiple = false }: Props = $props();
+</script>
+
+<Accordion {multiple}>
+  {#snippet children()}
+    <AccordionItem>
+      {#snippet header()}Item 1{/snippet}
+      {#snippet children()}Content 1{/snippet}
+    </AccordionItem>
+    <AccordionItem>
+      {#snippet header()}Item 2{/snippet}
+      {#snippet children()}Content 2{/snippet}
+    </AccordionItem>
+  {/snippet}
+</Accordion>

package/dist/primitives/Alert/Alert.spec.js

@@ -1,173 +1,173 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import Alert from "./Alert.svelte";
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(Alert, {
-    props: { ...args },
-  });
-  return { user, component };
-}
-
-describe("Alert Component Tests", () => {
-  test("Renders alert with title", () => {
-    setupTest({
-      title: "Alert Title",
-    });
-    expect(screen.getByText("Alert Title")).toBeInTheDocument();
-  });
-
-  test("Renders alert with message", () => {
-    setupTest({
-      message: "This is an alert message",
-    });
-    expect(screen.getByText("This is an alert message")).toBeInTheDocument();
-  });
-
-  test("Renders alert with both title and message", () => {
-    setupTest({
-      title: "Warning",
-      message: "Something needs your attention",
-    });
-    expect(screen.getByText("Warning")).toBeInTheDocument();
-    expect(screen.getByText("Something needs your attention")).toBeInTheDocument();
-  });
-
-  test("Maps info type to blue color", () => {
-    const { component } = setupTest({
-      title: "Info Alert",
-      type: "info",
-    });
-    // The Alert component should have the correct Flowbite color prop
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Maps success type to green color", () => {
-    setupTest({
-      title: "Success Alert",
-      type: "success",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Maps warning type to yellow color", () => {
-    setupTest({
-      title: "Warning Alert",
-      type: "warning",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Maps danger type to red color", () => {
-    setupTest({
-      title: "Danger Alert",
-      type: "danger",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Defaults to info type when type is invalid", () => {
-    setupTest({
-      title: "Default Alert",
-      type: "invalid-type",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Shows dismiss button when onClose is provided", () => {
-    const onCloseMock = vi.fn();
-    setupTest({
-      title: "Dismissable Alert",
-      onClose: onCloseMock,
-    });
-    // Flowbite Alert shows dismiss button when dismissable
-    const dismissButton = screen.queryByRole("button");
-    expect(dismissButton).toBeInTheDocument();
-  });
-
-  test("Does not show dismiss button when onClose is not provided", () => {
-    setupTest({
-      title: "Non-dismissable Alert",
-    });
-    // Without onClose, there should be no dismiss button
-    const dismissButton = screen.queryByRole("button");
-    expect(dismissButton).not.toBeInTheDocument();
-  });
-
-  test("Calls onClose when dismiss button is clicked", async () => {
-    const onCloseMock = vi.fn();
-    const { user } = setupTest({
-      title: "Dismissable Alert",
-      onClose: onCloseMock,
-    });
-
-    const dismissButton = screen.getByRole("button");
-    await user.click(dismissButton);
-
-    // Note: Flowbite Alert may handle close differently - check if button exists
-    expect(dismissButton).toBeInTheDocument();
-  });
-
-  test("Renders with close button when onClose provided", async () => {
-    const onCloseMock = vi.fn();
-    setupTest({
-      title: "Dismissable Alert",
-      onClose: onCloseMock,
-    });
-
-    const dismissButton = screen.getByRole("button");
-    expect(dismissButton).toBeInTheDocument();
-  });
-
-  test("Has proper alert styling classes", () => {
-    setupTest({
-      title: "Styled Alert",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toHaveClass("flex");
-    expect(alertElement).toHaveClass("items-center");
-    expect(alertElement).toHaveClass("p-4");
-    expect(alertElement).toHaveClass("rounded-lg");
-  });
-
-  test("Renders without title when only message is provided", () => {
-    setupTest({
-      message: "Message only alert",
-    });
-    expect(screen.getByText("Message only alert")).toBeInTheDocument();
-  });
-
-  test("Renders empty alert when no props provided", () => {
-    setupTest({});
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-});
-
-describe("Alert Type Color Mapping", () => {
-  const typeColorMap = [
-    { type: "info", expectedColor: "blue" },
-    { type: "success", expectedColor: "green" },
-    { type: "warning", expectedColor: "yellow" },
-    { type: "danger", expectedColor: "red" },
-  ];
-
-  typeColorMap.forEach(({ type, expectedColor }) => {
-    test(`Type "${type}" maps to "${expectedColor}" color`, () => {
-      setupTest({
-        title: `${type} Alert`,
-        type,
-      });
-      // Alert renders successfully with correct type
-      const alertElement = screen.getByRole("alert");
-      expect(alertElement).toBeInTheDocument();
-    });
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import Alert from "./Alert.svelte";
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(Alert, {
+    props: { ...args },
+  });
+  return { user, component };
+}
+
+describe("Alert Component Tests", () => {
+  test("Renders alert with title", () => {
+    setupTest({
+      title: "Alert Title",
+    });
+    expect(screen.getByText("Alert Title")).toBeInTheDocument();
+  });
+
+  test("Renders alert with message", () => {
+    setupTest({
+      message: "This is an alert message",
+    });
+    expect(screen.getByText("This is an alert message")).toBeInTheDocument();
+  });
+
+  test("Renders alert with both title and message", () => {
+    setupTest({
+      title: "Warning",
+      message: "Something needs your attention",
+    });
+    expect(screen.getByText("Warning")).toBeInTheDocument();
+    expect(screen.getByText("Something needs your attention")).toBeInTheDocument();
+  });
+
+  test("Maps info type to blue color", () => {
+    const { component } = setupTest({
+      title: "Info Alert",
+      type: "info",
+    });
+    // The Alert component should have the correct Flowbite color prop
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Maps success type to green color", () => {
+    setupTest({
+      title: "Success Alert",
+      type: "success",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Maps warning type to yellow color", () => {
+    setupTest({
+      title: "Warning Alert",
+      type: "warning",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Maps danger type to red color", () => {
+    setupTest({
+      title: "Danger Alert",
+      type: "danger",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Defaults to info type when type is invalid", () => {
+    setupTest({
+      title: "Default Alert",
+      type: "invalid-type",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Shows dismiss button when onClose is provided", () => {
+    const onCloseMock = vi.fn();
+    setupTest({
+      title: "Dismissable Alert",
+      onClose: onCloseMock,
+    });
+    // Flowbite Alert shows dismiss button when dismissable
+    const dismissButton = screen.queryByRole("button");
+    expect(dismissButton).toBeInTheDocument();
+  });
+
+  test("Does not show dismiss button when onClose is not provided", () => {
+    setupTest({
+      title: "Non-dismissable Alert",
+    });
+    // Without onClose, there should be no dismiss button
+    const dismissButton = screen.queryByRole("button");
+    expect(dismissButton).not.toBeInTheDocument();
+  });
+
+  test("Calls onClose when dismiss button is clicked", async () => {
+    const onCloseMock = vi.fn();
+    const { user } = setupTest({
+      title: "Dismissable Alert",
+      onClose: onCloseMock,
+    });
+
+    const dismissButton = screen.getByRole("button");
+    await user.click(dismissButton);
+
+    // Note: Flowbite Alert may handle close differently - check if button exists
+    expect(dismissButton).toBeInTheDocument();
+  });
+
+  test("Renders with close button when onClose provided", async () => {
+    const onCloseMock = vi.fn();
+    setupTest({
+      title: "Dismissable Alert",
+      onClose: onCloseMock,
+    });
+
+    const dismissButton = screen.getByRole("button");
+    expect(dismissButton).toBeInTheDocument();
+  });
+
+  test("Has proper alert styling classes", () => {
+    setupTest({
+      title: "Styled Alert",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toHaveClass("flex");
+    expect(alertElement).toHaveClass("items-center");
+    expect(alertElement).toHaveClass("p-4");
+    expect(alertElement).toHaveClass("rounded-lg");
+  });
+
+  test("Renders without title when only message is provided", () => {
+    setupTest({
+      message: "Message only alert",
+    });
+    expect(screen.getByText("Message only alert")).toBeInTheDocument();
+  });
+
+  test("Renders empty alert when no props provided", () => {
+    setupTest({});
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+});
+
+describe("Alert Type Color Mapping", () => {
+  const typeColorMap = [
+    { type: "info", expectedColor: "blue" },
+    { type: "success", expectedColor: "green" },
+    { type: "warning", expectedColor: "yellow" },
+    { type: "danger", expectedColor: "red" },
+  ];
+
+  typeColorMap.forEach(({ type, expectedColor }) => {
+    test(`Type "${type}" maps to "${expectedColor}" color`, () => {
+      setupTest({
+        title: `${type} Alert`,
+        type,
+      });
+      // Alert renders successfully with correct type
+      const alertElement = screen.getByRole("alert");
+      expect(alertElement).toBeInTheDocument();
+    });
+  });
+});