@getmicdrop/svelte-components 2.0.4 → 2.0.6

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

@@ -1,191 +1,191 @@
-import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import ConfirmationModal from "./ConfirmationModal.svelte";
-
-const defaultActions = [
-  { label: "Cancel", onClick: vi.fn(), variant: "gray-outline" },
-  { label: "Confirm", onClick: vi.fn(), variant: "blue-solid" },
-];
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(ConfirmationModal, {
-    props: {
-      show: true,
-      title: "Test Modal",
-      description: "This is a test description",
-      actions: defaultActions.map((a) => ({ ...a, onClick: vi.fn() })),
-      ...args,
-    },
-  });
-  return { user, component };
-}
-
-describe("ConfirmationModal Component Tests", () => {
-  // Note: Modal renders both mobile sheet and desktop centered versions
-  // CSS hides one based on viewport, but in tests both are in DOM
-  // Use getAllByText/queryAllByText and check length or first element
-
-  test("Does not render when show is false", () => {
-    render(ConfirmationModal, { props: { show: false } });
-    expect(screen.queryByText("Test Modal")).not.toBeInTheDocument();
-  });
-
-  test("Renders when show is true", () => {
-    setupTest();
-    // Modal renders both mobile and desktop versions
-    expect(screen.getAllByText("Test Modal").length).toBeGreaterThan(0);
-  });
-
-  test("Displays title", () => {
-    setupTest({ title: "Confirm Delete" });
-    expect(screen.getAllByText("Confirm Delete").length).toBeGreaterThan(0);
-  });
-
-  test("Displays description", () => {
-    setupTest({ description: "Are you sure you want to proceed?" });
-    expect(
-      screen.getAllByText("Are you sure you want to proceed?").length
-    ).toBeGreaterThan(0);
-  });
-
-  test("Displays warning text when provided", () => {
-    setupTest({ warningText: "This action cannot be undone" });
-    expect(
-      screen.getAllByText("This action cannot be undone").length
-    ).toBeGreaterThan(0);
-  });
-
-  test("Warning text has danger styling", () => {
-    setupTest({ warningText: "Warning!" });
-    const warning = screen.getAllByText("Warning!")[0];
-    expect(warning).toHaveClass("text-accent-Danger");
-    expect(warning).toHaveClass("font-bold");
-  });
-
-  test("Renders action buttons", () => {
-    const actions = [
-      { label: "No", onClick: vi.fn() },
-      { label: "Yes", onClick: vi.fn() },
-    ];
-    setupTest({ actions });
-    expect(screen.getAllByText("No").length).toBeGreaterThan(0);
-    expect(screen.getAllByText("Yes").length).toBeGreaterThan(0);
-  });
-
-  test("Calls action onClick when button clicked", async () => {
-    const cancelFn = vi.fn();
-    const confirmFn = vi.fn();
-    const actions = [
-      { label: "Cancel", onClick: cancelFn },
-      { label: "Confirm", onClick: confirmFn },
-    ];
-    const { user } = setupTest({ actions });
-
-    // Click the first Confirm button (both mobile and desktop versions exist)
-    await user.click(screen.getAllByText("Confirm")[0]);
-    expect(confirmFn).toHaveBeenCalled();
-  });
-
-  test("Dispatches event with action label", async () => {
-    const confirmFn = vi.fn();
-    const actions = [{ label: "Delete", onClick: confirmFn }];
-    const { user, component } = setupTest({ actions });
-
-    const deleteSpy = vi.fn();
-    component.$on("delete", deleteSpy);
-
-    await user.click(screen.getAllByText("Delete")[0]);
-    expect(deleteSpy).toHaveBeenCalled();
-  });
-
-  test("Shows close button when closeBtn is true", () => {
-    setupTest({ closeBtn: true });
-    const closeImg = document.querySelector('img[alt="Close Icon"]');
-    expect(closeImg).toBeInTheDocument();
-  });
-
-  test("Does not show close button by default", () => {
-    setupTest({ closeBtn: false });
-    const closeImg = document.querySelector('img[alt="Close Icon"]');
-    expect(closeImg).not.toBeInTheDocument();
-  });
-
-  test("Shows icon when provided", () => {
-    setupTest({ icon: "/test-icon.svg" });
-    const icon = document.querySelector('img[alt="Icon here"]');
-    expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute("src", "/test-icon.svg");
-  });
-
-  test("Does not show icon by default", () => {
-    setupTest();
-    const icon = document.querySelector('img[alt="Icon here"]');
-    expect(icon).not.toBeInTheDocument();
-  });
-
-  test("Maps danger action to red-solid variant", async () => {
-    const actions = [{ label: "Delete", onClick: vi.fn(), danger: true }];
-    setupTest({ actions });
-    const button = screen.getAllByText("Delete")[0].closest("button");
-    expect(button).toHaveClass("btn-red-solid");
-  });
-
-  test("Maps strokebtn + danger to red-outline variant", async () => {
-    const actions = [
-      { label: "Remove", onClick: vi.fn(), strokebtn: true, danger: true },
-    ];
-    setupTest({ actions });
-    const button = screen.getAllByText("Remove")[0].closest("button, a");
-    expect(button).toHaveClass("btn-red-outline");
-  });
-
-  test("Maps strokebtn + deemphasized to gray-outline variant", async () => {
-    const actions = [
-      { label: "Cancel", onClick: vi.fn(), strokebtn: true, deemphasized: true },
-    ];
-    setupTest({ actions });
-    const button = screen.getAllByText("Cancel")[0].closest("button, a");
-    expect(button).toHaveClass("btn-gray-outline");
-  });
-
-  test("Maps textBtn + danger to red-text variant", async () => {
-    const actions = [
-      { label: "Delete Text", onClick: vi.fn(), textBtn: true, danger: true },
-    ];
-    setupTest({ actions });
-    const button = screen.getAllByText("Delete Text")[0].closest("button, a");
-    expect(button).toHaveClass("btn-red-text");
-  });
-
-  test("Uses explicit variant when provided", async () => {
-    const actions = [
-      { label: "Custom", onClick: vi.fn(), variant: "blue-outline" },
-    ];
-    setupTest({ actions });
-    const button = screen.getAllByText("Custom")[0].closest("button, a");
-    expect(button).toHaveClass("btn-blue-outline");
-  });
-
-  test("Auto-maps Delete label to red-solid variant", async () => {
-    const actions = [{ label: "Delete", onClick: vi.fn() }];
-    setupTest({ actions });
-    const button = screen.getAllByText("Delete")[0].closest("button, a");
-    expect(button).toHaveClass("btn-red-solid");
-  });
-
-  test("Title has proper styling", () => {
-    setupTest({ title: "Modal Title" });
-    const title = screen.getAllByText("Modal Title")[0];
-    expect(title.tagName).toBe("H2");
-    expect(title).toHaveClass("text-xl");
-  });
-
-  test("Description has proper styling", () => {
-    setupTest({ description: "Description text" });
-    const desc = screen.getAllByText("Description text")[0];
-    expect(desc).toHaveClass("text-Text-Tartiary");
-    expect(desc).toHaveClass("text-sm");
-  });
-});
+import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import ConfirmationModal from "./ConfirmationModal.svelte";
+
+const defaultActions = [
+  { label: "Cancel", onClick: vi.fn(), variant: "gray-outline" },
+  { label: "Confirm", onClick: vi.fn(), variant: "blue-solid" },
+];
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(ConfirmationModal, {
+    props: {
+      show: true,
+      title: "Test Modal",
+      description: "This is a test description",
+      actions: defaultActions.map((a) => ({ ...a, onClick: vi.fn() })),
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("ConfirmationModal Component Tests", () => {
+  // Note: Modal renders both mobile sheet and desktop centered versions
+  // CSS hides one based on viewport, but in tests both are in DOM
+  // Use getAllByText/queryAllByText and check length or first element
+
+  test("Does not render when show is false", () => {
+    render(ConfirmationModal, { props: { show: false } });
+    expect(screen.queryByText("Test Modal")).not.toBeInTheDocument();
+  });
+
+  test("Renders when show is true", () => {
+    setupTest();
+    // Modal renders both mobile and desktop versions
+    expect(screen.getAllByText("Test Modal").length).toBeGreaterThan(0);
+  });
+
+  test("Displays title", () => {
+    setupTest({ title: "Confirm Delete" });
+    expect(screen.getAllByText("Confirm Delete").length).toBeGreaterThan(0);
+  });
+
+  test("Displays description", () => {
+    setupTest({ description: "Are you sure you want to proceed?" });
+    expect(
+      screen.getAllByText("Are you sure you want to proceed?").length
+    ).toBeGreaterThan(0);
+  });
+
+  test("Displays warning text when provided", () => {
+    setupTest({ warningText: "This action cannot be undone" });
+    expect(
+      screen.getAllByText("This action cannot be undone").length
+    ).toBeGreaterThan(0);
+  });
+
+  test("Warning text has danger styling", () => {
+    setupTest({ warningText: "Warning!" });
+    const warning = screen.getAllByText("Warning!")[0];
+    expect(warning).toHaveClass("text-accent-Danger");
+    expect(warning).toHaveClass("font-bold");
+  });
+
+  test("Renders action buttons", () => {
+    const actions = [
+      { label: "No", onClick: vi.fn() },
+      { label: "Yes", onClick: vi.fn() },
+    ];
+    setupTest({ actions });
+    expect(screen.getAllByText("No").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Yes").length).toBeGreaterThan(0);
+  });
+
+  test("Calls action onClick when button clicked", async () => {
+    const cancelFn = vi.fn();
+    const confirmFn = vi.fn();
+    const actions = [
+      { label: "Cancel", onClick: cancelFn },
+      { label: "Confirm", onClick: confirmFn },
+    ];
+    const { user } = setupTest({ actions });
+
+    // Click the first Confirm button (both mobile and desktop versions exist)
+    await user.click(screen.getAllByText("Confirm")[0]);
+    expect(confirmFn).toHaveBeenCalled();
+  });
+
+  test("Dispatches event with action label", async () => {
+    const confirmFn = vi.fn();
+    const actions = [{ label: "Delete", onClick: confirmFn }];
+    const { user, component } = setupTest({ actions });
+
+    const deleteSpy = vi.fn();
+    component.$on("delete", deleteSpy);
+
+    await user.click(screen.getAllByText("Delete")[0]);
+    expect(deleteSpy).toHaveBeenCalled();
+  });
+
+  test("Shows close button when closeBtn is true", () => {
+    setupTest({ closeBtn: true });
+    const closeImg = document.querySelector('img[alt="Close Icon"]');
+    expect(closeImg).toBeInTheDocument();
+  });
+
+  test("Does not show close button by default", () => {
+    setupTest({ closeBtn: false });
+    const closeImg = document.querySelector('img[alt="Close Icon"]');
+    expect(closeImg).not.toBeInTheDocument();
+  });
+
+  test("Shows icon when provided", () => {
+    setupTest({ icon: "/test-icon.svg" });
+    const icon = document.querySelector('img[alt="Icon here"]');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute("src", "/test-icon.svg");
+  });
+
+  test("Does not show icon by default", () => {
+    setupTest();
+    const icon = document.querySelector('img[alt="Icon here"]');
+    expect(icon).not.toBeInTheDocument();
+  });
+
+  test("Maps danger action to red-solid variant", async () => {
+    const actions = [{ label: "Delete", onClick: vi.fn(), danger: true }];
+    setupTest({ actions });
+    const button = screen.getAllByText("Delete")[0].closest("button");
+    expect(button).toHaveClass("btn-red-solid");
+  });
+
+  test("Maps strokebtn + danger to red-outline variant", async () => {
+    const actions = [
+      { label: "Remove", onClick: vi.fn(), strokebtn: true, danger: true },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Remove")[0].closest("button, a");
+    expect(button).toHaveClass("btn-red-outline");
+  });
+
+  test("Maps strokebtn + deemphasized to gray-outline variant", async () => {
+    const actions = [
+      { label: "Cancel", onClick: vi.fn(), strokebtn: true, deemphasized: true },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Cancel")[0].closest("button, a");
+    expect(button).toHaveClass("btn-gray-outline");
+  });
+
+  test("Maps textBtn + danger to red-text variant", async () => {
+    const actions = [
+      { label: "Delete Text", onClick: vi.fn(), textBtn: true, danger: true },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Delete Text")[0].closest("button, a");
+    expect(button).toHaveClass("btn-red-text");
+  });
+
+  test("Uses explicit variant when provided", async () => {
+    const actions = [
+      { label: "Custom", onClick: vi.fn(), variant: "blue-outline" },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Custom")[0].closest("button, a");
+    expect(button).toHaveClass("btn-blue-outline");
+  });
+
+  test("Auto-maps Delete label to red-solid variant", async () => {
+    const actions = [{ label: "Delete", onClick: vi.fn() }];
+    setupTest({ actions });
+    const button = screen.getAllByText("Delete")[0].closest("button, a");
+    expect(button).toHaveClass("btn-red-solid");
+  });
+
+  test("Title has proper styling", () => {
+    setupTest({ title: "Modal Title" });
+    const title = screen.getAllByText("Modal Title")[0];
+    expect(title.tagName).toBe("H2");
+    expect(title).toHaveClass("text-xl");
+  });
+
+  test("Description has proper styling", () => {
+    setupTest({ description: "Description text" });
+    const desc = screen.getAllByText("Description text")[0];
+    expect(desc).toHaveClass("text-Text-Tartiary");
+    expect(desc).toHaveClass("text-sm");
+  });
+});

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

@@ -1,95 +1,95 @@
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { expect, describe, test } from 'vitest';
-import ModalTestWrapper from './ModalTestWrapper.svelte';
-
-function setupTest(args) {
-  const user = userEvent.setup();
-  const { component } = render(ModalTestWrapper, { props: { ...args } });
-  return { user, component };
-}
-
-describe('Modal Component Tests', () => {
-  // Note: Modal renders both mobile sheet and desktop centered versions
-  // CSS hides one based on viewport, but in tests both are in DOM
-  // Use getAllByText and check that at least one exists
-
-  test('Renders Modal when show is true', () => {
-    setupTest({
-      show: true,
-      title: 'Test Title',
-      description: 'Test Description',
-      warningText: 'Test Warning'
-    });
-    // Modal renders both mobile and desktop versions, so use getAllByText
-    expect(screen.getAllByText('Test Title').length).toBeGreaterThan(0);
-    expect(screen.getAllByText(/Test Description/).length).toBeGreaterThan(0);
-    expect(screen.getAllByText(/Test Warning/).length).toBeGreaterThan(0);
-    expect(screen.getAllByRole('button', { name: /Cancel/i }).length).toBeGreaterThan(0);
-    expect(screen.getAllByRole('button', { name: /Confirm/i }).length).toBeGreaterThan(0);
-  });
-
-  test('Does not render Modal when show is false', () => {
-    setupTest({
-      show: false,
-      title: 'Test Title',
-      description: 'Test Description',
-      warningText: 'Test Warning'
-    });
-    expect(screen.queryByText('Test Title')).not.toBeInTheDocument();
-    expect(screen.queryByText('Test Description')).not.toBeInTheDocument();
-    expect(screen.queryByText('Test Warning')).not.toBeInTheDocument();
-  });
-
-  test('Displays the correct title, description, and warning text', () => {
-    const title = 'Correct Title';
-    const description = 'Correct Description';
-    const warningText = 'Correct Warning';
-    setupTest({
-      show: true,
-      title,
-      description,
-      warningText,
-    });
-    // Modal renders both mobile and desktop versions
-    expect(screen.getAllByText(title).length).toBeGreaterThan(0);
-    expect(screen.getAllByText(new RegExp(description)).length).toBeGreaterThan(0);
-    expect(screen.getAllByText(new RegExp(warningText)).length).toBeGreaterThan(0);
-  });
-
-  test('Dispatches cancel event on escape key press', async () => {
-    const { user, component } = setupTest({
-      show: true,
-      title: 'Test Title'
-    });
-
-    // Verify modal is open
-    expect(screen.getAllByText('Test Title').length).toBeGreaterThan(0);
-
-    // Listen for the cancel event
-    let cancelCalled = false;
-    component.$on('cancel', () => { cancelCalled = true; });
-
-    // Press Escape key
-    await fireEvent.keyDown(window, { key: 'Escape' });
-
-    // Cancel event should be dispatched
-    expect(cancelCalled).toBe(true);
-  });
-
-  test('Prevents propagation of click events within modal', async () => {
-    const { user } = setupTest({
-      show: true,
-      title: 'Test Title'
-    });
-
-    // Find the modal sheet content (first instance)
-    const modalText = screen.getAllByText('Test Title')[0];
-    const modalContent = modalText.closest('.modal-sheet') || modalText.closest('.modal-centered');
-    const clickEvent = new MouseEvent('click', { bubbles: true });
-    modalContent.dispatchEvent(clickEvent);
-
-    // Modal should still be visible
-    expect(screen.getAllByText('Test Title').length).toBeGreaterThan(0);
-  });
-});
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test } from 'vitest';
+import ModalTestWrapper from './ModalTestWrapper.svelte';
+
+function setupTest(args) {
+  const user = userEvent.setup();
+  const { component } = render(ModalTestWrapper, { props: { ...args } });
+  return { user, component };
+}
+
+describe('Modal Component Tests', () => {
+  // Note: Modal renders both mobile sheet and desktop centered versions
+  // CSS hides one based on viewport, but in tests both are in DOM
+  // Use getAllByText and check that at least one exists
+
+  test('Renders Modal when show is true', () => {
+    setupTest({
+      show: true,
+      title: 'Test Title',
+      description: 'Test Description',
+      warningText: 'Test Warning'
+    });
+    // Modal renders both mobile and desktop versions, so use getAllByText
+    expect(screen.getAllByText('Test Title').length).toBeGreaterThan(0);
+    expect(screen.getAllByText(/Test Description/).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(/Test Warning/).length).toBeGreaterThan(0);
+    expect(screen.getAllByRole('button', { name: /Cancel/i }).length).toBeGreaterThan(0);
+    expect(screen.getAllByRole('button', { name: /Confirm/i }).length).toBeGreaterThan(0);
+  });
+
+  test('Does not render Modal when show is false', () => {
+    setupTest({
+      show: false,
+      title: 'Test Title',
+      description: 'Test Description',
+      warningText: 'Test Warning'
+    });
+    expect(screen.queryByText('Test Title')).not.toBeInTheDocument();
+    expect(screen.queryByText('Test Description')).not.toBeInTheDocument();
+    expect(screen.queryByText('Test Warning')).not.toBeInTheDocument();
+  });
+
+  test('Displays the correct title, description, and warning text', () => {
+    const title = 'Correct Title';
+    const description = 'Correct Description';
+    const warningText = 'Correct Warning';
+    setupTest({
+      show: true,
+      title,
+      description,
+      warningText,
+    });
+    // Modal renders both mobile and desktop versions
+    expect(screen.getAllByText(title).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(new RegExp(description)).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(new RegExp(warningText)).length).toBeGreaterThan(0);
+  });
+
+  test('Dispatches cancel event on escape key press', async () => {
+    const { user, component } = setupTest({
+      show: true,
+      title: 'Test Title'
+    });
+
+    // Verify modal is open
+    expect(screen.getAllByText('Test Title').length).toBeGreaterThan(0);
+
+    // Listen for the cancel event
+    let cancelCalled = false;
+    component.$on('cancel', () => { cancelCalled = true; });
+
+    // Press Escape key
+    await fireEvent.keyDown(window, { key: 'Escape' });
+
+    // Cancel event should be dispatched
+    expect(cancelCalled).toBe(true);
+  });
+
+  test('Prevents propagation of click events within modal', async () => {
+    const { user } = setupTest({
+      show: true,
+      title: 'Test Title'
+    });
+
+    // Find the modal sheet content (first instance)
+    const modalText = screen.getAllByText('Test Title')[0];
+    const modalContent = modalText.closest('.modal-sheet') || modalText.closest('.modal-centered');
+    const clickEvent = new MouseEvent('click', { bubbles: true });
+    modalContent.dispatchEvent(clickEvent);
+
+    // Modal should still be visible
+    expect(screen.getAllByText('Test Title').length).toBeGreaterThan(0);
+  });
+});