@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/components/Alert/Alert.spec.js

@@ -1,170 +1,170 @@
-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 custom-alert class for dark mode styling", () => {
-    setupTest({
-      title: "Styled Alert",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toHaveClass("custom-alert");
-  });
-
-  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 custom-alert class for dark mode styling", () => {
+    setupTest({
+      title: "Styled Alert",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toHaveClass("custom-alert");
+  });
+
+  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();
+    });
+  });
+});

package/dist/components/Badges/Badge.spec.js

@@ -1,103 +1,103 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { describe, test, expect, vi } from 'vitest';
-import Badge from './Badge.svelte';
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const onClick = vi.fn();
-  const { component, container } = render(Badge, { props: { ...args } });
-  component.$on('click', onClick);
-  const badge = container.querySelector('div');
-  return {
-    user,
-    badge,
-    onClick,
-  };
-}
-
-describe('Badge Component Tests', () => {
-  test('Renders with default props', () => {
-    const { badge } = setupTest();
-    expect(badge).toBeInTheDocument();
-    expect(badge).toHaveClass('badge');
-  });
-
-  test('Renders with different sizes', () => {
-    const { badge: smallBadge } = setupTest({ size: 'small' });
-    expect(smallBadge).toHaveClass('badge-sm');
-
-    const { badge: mediumBadge } = setupTest({ size: 'medium' });
-    expect(mediumBadge).toHaveClass('badge-md');
-
-    const { badge: largeBadge } = setupTest({ size: 'large' });
-    expect(largeBadge).toHaveClass('badge-lg');
-  });
-
-  test('Handles role variant props for colors', () => {
-    const { badge: hostBadge } = setupTest({ variant: 'host' });
-    expect(hostBadge).toHaveClass('badge-host');
-
-    const { badge: headlinerBadge } = setupTest({ variant: 'headliner' });
-    expect(headlinerBadge).toHaveClass('badge-headliner');
-
-    const { badge: featureBadge } = setupTest({ variant: 'feature' });
-    expect(featureBadge).toHaveClass('badge-feature');
-
-    const { badge: specialGuestBadge } = setupTest({ variant: 'special-guest' });
-    expect(specialGuestBadge).toHaveClass('badge-special-guest');
-
-    const { badge: openerBadge } = setupTest({ variant: 'opener' });
-    expect(openerBadge).toHaveClass('badge-opener');
-
-    const { badge: guestBadge } = setupTest({ variant: 'guest' });
-    expect(guestBadge).toHaveClass('badge-guest');
-
-    const { badge: teacherBadge } = setupTest({ variant: 'teacher' });
-    expect(teacherBadge).toHaveClass('badge-teacher');
-
-    const { badge: assistantBadge } = setupTest({ variant: 'assistant' });
-    expect(assistantBadge).toHaveClass('badge-assistant');
-  });
-
-  test('Handles status variant props for colors', () => {
-    const { badge: successBadge } = setupTest({ variant: 'success' });
-    expect(successBadge).toHaveClass('badge-success');
-
-    const { badge: warningBadge } = setupTest({ variant: 'warning' });
-    expect(warningBadge).toHaveClass('badge-warning');
-
-    const { badge: errorBadge } = setupTest({ variant: 'error' });
-    expect(errorBadge).toHaveClass('badge-error');
-
-    const { badge: infoBadge } = setupTest({ variant: 'info' });
-    expect(infoBadge).toHaveClass('badge-info');
-
-    const { badge: neutralBadge } = setupTest({ variant: 'neutral' });
-    expect(neutralBadge).toHaveClass('badge-neutral');
-  });
-
-  test('Falls back to neutral variant for unknown variants', () => {
-    const { badge } = setupTest({ variant: 'unknown' });
-    expect(badge).toHaveClass('badge-neutral');
-  });
-
-  test('Handles case-insensitive variants', () => {
-    const { badge: upperBadge } = setupTest({ variant: 'HOST' });
-    expect(upperBadge).toHaveClass('badge-host');
-
-    const { badge: mixedBadge } = setupTest({ variant: 'Headliner' });
-    expect(mixedBadge).toHaveClass('badge-headliner');
-  });
-
-  test('Falls back to medium size for unknown sizes', () => {
-    const { badge } = setupTest({ size: 'unknown' });
-    expect(badge).toHaveClass('badge-md');
-  });
-
-  test('Dispatches click event', async () => {
-    const { user, badge, onClick } = setupTest();
-    await user.click(badge);
-    expect(onClick).toHaveBeenCalledOnce();
-  });
-});
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, test, expect, vi } from 'vitest';
+import Badge from './Badge.svelte';
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const onClick = vi.fn();
+  const { component, container } = render(Badge, { props: { ...args } });
+  component.$on('click', onClick);
+  const badge = container.querySelector('div');
+  return {
+    user,
+    badge,
+    onClick,
+  };
+}
+
+describe('Badge Component Tests', () => {
+  test('Renders with default props', () => {
+    const { badge } = setupTest();
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveClass('badge');
+  });
+
+  test('Renders with different sizes', () => {
+    const { badge: smallBadge } = setupTest({ size: 'small' });
+    expect(smallBadge).toHaveClass('badge-sm');
+
+    const { badge: mediumBadge } = setupTest({ size: 'medium' });
+    expect(mediumBadge).toHaveClass('badge-md');
+
+    const { badge: largeBadge } = setupTest({ size: 'large' });
+    expect(largeBadge).toHaveClass('badge-lg');
+  });
+
+  test('Handles role variant props for colors', () => {
+    const { badge: hostBadge } = setupTest({ variant: 'host' });
+    expect(hostBadge).toHaveClass('badge-host');
+
+    const { badge: headlinerBadge } = setupTest({ variant: 'headliner' });
+    expect(headlinerBadge).toHaveClass('badge-headliner');
+
+    const { badge: featureBadge } = setupTest({ variant: 'feature' });
+    expect(featureBadge).toHaveClass('badge-feature');
+
+    const { badge: specialGuestBadge } = setupTest({ variant: 'special-guest' });
+    expect(specialGuestBadge).toHaveClass('badge-special-guest');
+
+    const { badge: openerBadge } = setupTest({ variant: 'opener' });
+    expect(openerBadge).toHaveClass('badge-opener');
+
+    const { badge: guestBadge } = setupTest({ variant: 'guest' });
+    expect(guestBadge).toHaveClass('badge-guest');
+
+    const { badge: teacherBadge } = setupTest({ variant: 'teacher' });
+    expect(teacherBadge).toHaveClass('badge-teacher');
+
+    const { badge: assistantBadge } = setupTest({ variant: 'assistant' });
+    expect(assistantBadge).toHaveClass('badge-assistant');
+  });
+
+  test('Handles status variant props for colors', () => {
+    const { badge: successBadge } = setupTest({ variant: 'success' });
+    expect(successBadge).toHaveClass('badge-success');
+
+    const { badge: warningBadge } = setupTest({ variant: 'warning' });
+    expect(warningBadge).toHaveClass('badge-warning');
+
+    const { badge: errorBadge } = setupTest({ variant: 'error' });
+    expect(errorBadge).toHaveClass('badge-error');
+
+    const { badge: infoBadge } = setupTest({ variant: 'info' });
+    expect(infoBadge).toHaveClass('badge-info');
+
+    const { badge: neutralBadge } = setupTest({ variant: 'neutral' });
+    expect(neutralBadge).toHaveClass('badge-neutral');
+  });
+
+  test('Falls back to neutral variant for unknown variants', () => {
+    const { badge } = setupTest({ variant: 'unknown' });
+    expect(badge).toHaveClass('badge-neutral');
+  });
+
+  test('Handles case-insensitive variants', () => {
+    const { badge: upperBadge } = setupTest({ variant: 'HOST' });
+    expect(upperBadge).toHaveClass('badge-host');
+
+    const { badge: mixedBadge } = setupTest({ variant: 'Headliner' });
+    expect(mixedBadge).toHaveClass('badge-headliner');
+  });
+
+  test('Falls back to medium size for unknown sizes', () => {
+    const { badge } = setupTest({ size: 'unknown' });
+    expect(badge).toHaveClass('badge-md');
+  });
+
+  test('Dispatches click event', async () => {
+    const { user, badge, onClick } = setupTest();
+    await user.click(badge);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});