@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/components/BottomSheet/BottomSheet.spec.js

@@ -1,127 +1,127 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import BottomSheet from './BottomSheet.svelte';
-
-describe('BottomSheet Component', () => {
-  beforeEach(() => {
-    // Reset body overflow
-    document.body.style.overflow = '';
-  });
-
-  afterEach(() => {
-    document.body.style.overflow = '';
-  });
-
-  it('does not render when show is false', () => {
-    const { container } = render(BottomSheet, { props: { show: false } });
-    const backdrop = container.querySelector('.bottom-sheet-backdrop');
-    expect(backdrop).toBeFalsy();
-  });
-
-  it('renders when show is true', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
-    const backdrop = container.querySelector('.bottom-sheet-backdrop');
-    expect(backdrop).toBeTruthy();
-  });
-
-  it('renders title when provided', () => {
-    const { getByText } = render(BottomSheet, {
-      props: { show: true, title: 'Test Title' },
-    });
-    expect(getByText('Test Title')).toBeTruthy();
-  });
-
-  it('does not render title when not provided', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
-    const header = container.querySelector('.bottom-sheet__header');
-    expect(header).toBeFalsy();
-  });
-
-  it('locks body scroll when shown', async () => {
-    render(BottomSheet, { props: { show: true } });
-    // Wait for reactive update
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(document.body.style.overflow).toBe('hidden');
-  });
-
-  it('unlocks body scroll when hidden', async () => {
-    const { component } = render(BottomSheet, { props: { show: true } });
-    await new Promise((resolve) => setTimeout(resolve, 10));
-
-    component.$set({ show: false });
-    await new Promise((resolve) => setTimeout(resolve, 10));
-
-    expect(document.body.style.overflow).toBe('');
-  });
-
-  it('dispatches close event on backdrop click', async () => {
-    const { container, component } = render(BottomSheet, { props: { show: true } });
-    const backdrop = container.querySelector('.bottom-sheet-backdrop');
-
-    let closeCalled = false;
-    component.$on('close', () => {
-      closeCalled = true;
-    });
-
-    await fireEvent.click(backdrop);
-    expect(closeCalled).toBe(true);
-  });
-
-  it('does not dispatch close when clicking sheet content', async () => {
-    const { container, component } = render(BottomSheet, { props: { show: true } });
-    const sheet = container.querySelector('.bottom-sheet');
-
-    let closeCalled = false;
-    component.$on('close', () => {
-      closeCalled = true;
-    });
-
-    await fireEvent.click(sheet);
-    expect(closeCalled).toBe(false);
-  });
-
-  it('dispatches close event on Escape key', async () => {
-    const { component } = render(BottomSheet, { props: { show: true } });
-
-    let closeCalled = false;
-    component.$on('close', () => {
-      closeCalled = true;
-    });
-
-    await fireEvent.keyDown(window, { key: 'Escape' });
-    expect(closeCalled).toBe(true);
-  });
-
-  it('does not dispatch close on Escape when not shown', async () => {
-    const { component } = render(BottomSheet, { props: { show: false } });
-
-    let closeCalled = false;
-    component.$on('close', () => {
-      closeCalled = true;
-    });
-
-    await fireEvent.keyDown(window, { key: 'Escape' });
-    expect(closeCalled).toBe(false);
-  });
-
-  it('has handle bar element', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
-    const handle = container.querySelector('.bottom-sheet__handle');
-    expect(handle).toBeTruthy();
-  });
-
-  it('has content area for slot content', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
-    const content = container.querySelector('.bottom-sheet__content');
-    expect(content).toBeTruthy();
-  });
-
-  it('cleans up body overflow on destroy', () => {
-    const { component } = render(BottomSheet, { props: { show: true } });
-    document.body.style.overflow = 'hidden';
-
-    component.$destroy();
-
-    expect(document.body.style.overflow).toBe('');
-  });
-});
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import BottomSheet from './BottomSheet.svelte';
+
+describe('BottomSheet Component', () => {
+  beforeEach(() => {
+    // Reset body overflow
+    document.body.style.overflow = '';
+  });
+
+  afterEach(() => {
+    document.body.style.overflow = '';
+  });
+
+  it('does not render when show is false', () => {
+    const { container } = render(BottomSheet, { props: { show: false } });
+    const backdrop = container.querySelector('.bottom-sheet-backdrop');
+    expect(backdrop).toBeFalsy();
+  });
+
+  it('renders when show is true', () => {
+    const { container } = render(BottomSheet, { props: { show: true } });
+    const backdrop = container.querySelector('.bottom-sheet-backdrop');
+    expect(backdrop).toBeTruthy();
+  });
+
+  it('renders title when provided', () => {
+    const { getByText } = render(BottomSheet, {
+      props: { show: true, title: 'Test Title' },
+    });
+    expect(getByText('Test Title')).toBeTruthy();
+  });
+
+  it('does not render title when not provided', () => {
+    const { container } = render(BottomSheet, { props: { show: true } });
+    const header = container.querySelector('.bottom-sheet__header');
+    expect(header).toBeFalsy();
+  });
+
+  it('locks body scroll when shown', async () => {
+    render(BottomSheet, { props: { show: true } });
+    // Wait for reactive update
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('hidden');
+  });
+
+  it('unlocks body scroll when hidden', async () => {
+    const { component } = render(BottomSheet, { props: { show: true } });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    component.$set({ show: false });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('dispatches close event on backdrop click', async () => {
+    const { container, component } = render(BottomSheet, { props: { show: true } });
+    const backdrop = container.querySelector('.bottom-sheet-backdrop');
+
+    let closeCalled = false;
+    component.$on('close', () => {
+      closeCalled = true;
+    });
+
+    await fireEvent.click(backdrop);
+    expect(closeCalled).toBe(true);
+  });
+
+  it('does not dispatch close when clicking sheet content', async () => {
+    const { container, component } = render(BottomSheet, { props: { show: true } });
+    const sheet = container.querySelector('.bottom-sheet');
+
+    let closeCalled = false;
+    component.$on('close', () => {
+      closeCalled = true;
+    });
+
+    await fireEvent.click(sheet);
+    expect(closeCalled).toBe(false);
+  });
+
+  it('dispatches close event on Escape key', async () => {
+    const { component } = render(BottomSheet, { props: { show: true } });
+
+    let closeCalled = false;
+    component.$on('close', () => {
+      closeCalled = true;
+    });
+
+    await fireEvent.keyDown(window, { key: 'Escape' });
+    expect(closeCalled).toBe(true);
+  });
+
+  it('does not dispatch close on Escape when not shown', async () => {
+    const { component } = render(BottomSheet, { props: { show: false } });
+
+    let closeCalled = false;
+    component.$on('close', () => {
+      closeCalled = true;
+    });
+
+    await fireEvent.keyDown(window, { key: 'Escape' });
+    expect(closeCalled).toBe(false);
+  });
+
+  it('has handle bar element', () => {
+    const { container } = render(BottomSheet, { props: { show: true } });
+    const handle = container.querySelector('.bottom-sheet__handle');
+    expect(handle).toBeTruthy();
+  });
+
+  it('has content area for slot content', () => {
+    const { container } = render(BottomSheet, { props: { show: true } });
+    const content = container.querySelector('.bottom-sheet__content');
+    expect(content).toBeTruthy();
+  });
+
+  it('cleans up body overflow on destroy', () => {
+    const { component } = render(BottomSheet, { props: { show: true } });
+    document.body.style.overflow = 'hidden';
+
+    component.$destroy();
+
+    expect(document.body.style.overflow).toBe('');
+  });
+});

package/dist/components/Breadcrumb/Breadcrumb.spec.js

@@ -1,120 +1,120 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import Breadcrumb from "./Breadcrumb.svelte";
-
-const sampleData = [
-  { name: "Home", href: "/", icon: "/icon-home.svg" },
-  { name: "Profile", href: "/profile" },
-  { name: "Settings", href: "/settings" },
-];
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(Breadcrumb, {
-    props: {
-      data: sampleData,
-      ...args,
-    },
-  });
-  return { user, component };
-}
-
-describe("Breadcrumb Component Tests", () => {
-  test("Renders nothing when data is empty", () => {
-    render(Breadcrumb, { props: { data: [] } });
-    const nav = document.querySelector("nav");
-    expect(nav).not.toBeInTheDocument();
-  });
-
-  test("Renders nav element when data is provided", () => {
-    setupTest();
-    const nav = document.querySelector("nav");
-    expect(nav).toBeInTheDocument();
-  });
-
-  test("Renders all breadcrumb items", () => {
-    setupTest();
-    expect(screen.getByText("Home")).toBeInTheDocument();
-    expect(screen.getByText("Profile")).toBeInTheDocument();
-    expect(screen.getByText("Settings")).toBeInTheDocument();
-  });
-
-  test("First item shows icon", () => {
-    setupTest();
-    // First item has an icon
-    const icons = document.querySelectorAll("img");
-    // Should have at least the home icon plus separator arrows
-    expect(icons.length).toBeGreaterThan(0);
-  });
-
-  test("Shows separator arrows between items", () => {
-    setupTest();
-    // Arrows appear between items (n-1 arrows for n items)
-    const imgs = document.querySelectorAll("img");
-    // 1 home icon + 2 arrows = 3 images minimum
-    expect(imgs.length).toBeGreaterThanOrEqual(2);
-  });
-
-  test("Last item is not a link", () => {
-    setupTest();
-    const lastItem = screen.getByText("Settings");
-    // Last item should be a span, not inside an anchor
-    expect(lastItem.closest("a")).toBeNull();
-  });
-
-  test("Non-last items are clickable links", () => {
-    setupTest();
-    const homeLink = screen.getByText("Home").closest("a");
-    const profileLink = screen.getByText("Profile").closest("a");
-
-    expect(homeLink).toBeInTheDocument();
-    expect(homeLink).toHaveAttribute("href", "/");
-    expect(profileLink).toBeInTheDocument();
-    expect(profileLink).toHaveAttribute("href", "/profile");
-  });
-
-  test("Dispatches click event when clicking breadcrumb", async () => {
-    const { user, component } = setupTest();
-    const clickSpy = vi.fn();
-    component.$on("click", clickSpy);
-
-    const homeLink = screen.getByText("Home").closest("a");
-    await user.click(homeLink);
-
-    expect(clickSpy).toHaveBeenCalled();
-    expect(clickSpy.mock.calls[0][0].detail).toEqual(sampleData[0]);
-  });
-
-  test("Last item has tertiary text color", () => {
-    setupTest();
-    const lastItem = screen.getByText("Settings");
-    expect(lastItem).toHaveClass("text-Text-Tartiary");
-  });
-
-  test("Last item has default cursor", () => {
-    setupTest();
-    const lastItem = screen.getByText("Settings");
-    expect(lastItem).toHaveClass("cursor-default");
-  });
-
-  test("Clickable items have pointer cursor", () => {
-    setupTest();
-    const homeSpan = screen.getByText("Home").closest("span");
-    expect(homeSpan).toHaveClass("cursor-pointer");
-  });
-
-  test("Has responsive text sizing", () => {
-    setupTest();
-    const nav = document.querySelector("nav");
-    expect(nav).toHaveClass("text-sm");
-  });
-
-  test("Renders with single item", () => {
-    render(Breadcrumb, { props: { data: [{ name: "Single", href: "/" }] } });
-    expect(screen.getByText("Single")).toBeInTheDocument();
-    // Single item should be the "last" item, so not a link
-    const item = screen.getByText("Single");
-    expect(item.closest("a")).toBeNull();
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import Breadcrumb from "./Breadcrumb.svelte";
+
+const sampleData = [
+  { name: "Home", href: "/", icon: "/icon-home.svg" },
+  { name: "Profile", href: "/profile" },
+  { name: "Settings", href: "/settings" },
+];
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(Breadcrumb, {
+    props: {
+      data: sampleData,
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("Breadcrumb Component Tests", () => {
+  test("Renders nothing when data is empty", () => {
+    render(Breadcrumb, { props: { data: [] } });
+    const nav = document.querySelector("nav");
+    expect(nav).not.toBeInTheDocument();
+  });
+
+  test("Renders nav element when data is provided", () => {
+    setupTest();
+    const nav = document.querySelector("nav");
+    expect(nav).toBeInTheDocument();
+  });
+
+  test("Renders all breadcrumb items", () => {
+    setupTest();
+    expect(screen.getByText("Home")).toBeInTheDocument();
+    expect(screen.getByText("Profile")).toBeInTheDocument();
+    expect(screen.getByText("Settings")).toBeInTheDocument();
+  });
+
+  test("First item shows icon", () => {
+    setupTest();
+    // First item has an icon
+    const icons = document.querySelectorAll("img");
+    // Should have at least the home icon plus separator arrows
+    expect(icons.length).toBeGreaterThan(0);
+  });
+
+  test("Shows separator arrows between items", () => {
+    setupTest();
+    // Arrows appear between items (n-1 arrows for n items)
+    const imgs = document.querySelectorAll("img");
+    // 1 home icon + 2 arrows = 3 images minimum
+    expect(imgs.length).toBeGreaterThanOrEqual(2);
+  });
+
+  test("Last item is not a link", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    // Last item should be a span, not inside an anchor
+    expect(lastItem.closest("a")).toBeNull();
+  });
+
+  test("Non-last items are clickable links", () => {
+    setupTest();
+    const homeLink = screen.getByText("Home").closest("a");
+    const profileLink = screen.getByText("Profile").closest("a");
+
+    expect(homeLink).toBeInTheDocument();
+    expect(homeLink).toHaveAttribute("href", "/");
+    expect(profileLink).toBeInTheDocument();
+    expect(profileLink).toHaveAttribute("href", "/profile");
+  });
+
+  test("Dispatches click event when clicking breadcrumb", async () => {
+    const { user, component } = setupTest();
+    const clickSpy = vi.fn();
+    component.$on("click", clickSpy);
+
+    const homeLink = screen.getByText("Home").closest("a");
+    await user.click(homeLink);
+
+    expect(clickSpy).toHaveBeenCalled();
+    expect(clickSpy.mock.calls[0][0].detail).toEqual(sampleData[0]);
+  });
+
+  test("Last item has tertiary text color", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    expect(lastItem).toHaveClass("text-Text-Tartiary");
+  });
+
+  test("Last item has default cursor", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    expect(lastItem).toHaveClass("cursor-default");
+  });
+
+  test("Clickable items have pointer cursor", () => {
+    setupTest();
+    const homeSpan = screen.getByText("Home").closest("span");
+    expect(homeSpan).toHaveClass("cursor-pointer");
+  });
+
+  test("Has responsive text sizing", () => {
+    setupTest();
+    const nav = document.querySelector("nav");
+    expect(nav).toHaveClass("text-sm");
+  });
+
+  test("Renders with single item", () => {
+    render(Breadcrumb, { props: { data: [{ name: "Single", href: "/" }] } });
+    expect(screen.getByText("Single")).toBeInTheDocument();
+    // Single item should be the "last" item, so not a link
+    const item = screen.getByText("Single");
+    expect(item.closest("a")).toBeNull();
+  });
+});