@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/components/pages/performers/ShowItemCard.svelte

@@ -3,21 +3,21 @@
   import Icon from "../../Icons/Icon.svelte";
   import Input from "../../Input/Input.svelte";
   import Modal from "../../Modal/Modal.svelte";
-  import { showToast } from "../../../../stores/toaster";
-  import { microphonePlaceholder, getUserDetails } from "../../../utils/utils";
+  import { showToast } from "../../stores/toaster";
+  import { microphonePlaceholder, getUserDetails } from "../../utils/utils";
   import {
     formatHour,
     formattedDate,
     formattedFullDate,
     timeAgo,
-  } from "../../../utils/utils/utils";
+  } from "../../utils/utils/utils";
   import {
     acceptInvite,
     declineInvite,
     cancelInvite,
     sendVenueMessage,
     getEventUrl,
-  } from "../../../../services/ShowService";
+  } from "../../../services/ShowService";
   import { Dropdown, DropdownItem } from "flowbite-svelte";
   import { DotsHorizontalOutline, FileCopyOutline } from "flowbite-svelte-icons";
   import { onMount } from "svelte";

package/dist/components/pages/performers/SwitchOption.spec.js

@@ -1,127 +1,127 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import SwitchOption from "./SwitchOption.svelte";
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const onToggle = vi.fn();
-  const { component, container } = render(SwitchOption, {
-    props: {
-      label: "Test Switch",
-      checked: false,
-      onToggle,
-      ...args,
-    },
-  });
-  return { user, component, container, onToggle };
-}
-
-describe("SwitchOption Component Tests", () => {
-  test("Renders switch with label", () => {
-    setupTest({ label: "Enable Feature" });
-    expect(screen.getByText("Enable Feature")).toBeInTheDocument();
-  });
-
-  test("Renders checkbox input", () => {
-    setupTest();
-    const checkbox = screen.getByRole("checkbox");
-    expect(checkbox).toBeInTheDocument();
-  });
-
-  test("Checkbox is hidden for accessibility (sr-only)", () => {
-    setupTest();
-    const checkbox = screen.getByRole("checkbox");
-    expect(checkbox).toHaveClass("sr-only");
-  });
-
-  test("Checkbox is unchecked by default", () => {
-    setupTest({ checked: false });
-    const checkbox = screen.getByRole("checkbox");
-    expect(checkbox).not.toBeChecked();
-  });
-
-  test("Checkbox is checked when checked prop is true", () => {
-    setupTest({ checked: true });
-    const checkbox = screen.getByRole("checkbox");
-    expect(checkbox).toBeChecked();
-  });
-
-  test("Calls onToggle when clicked", async () => {
-    const { user, onToggle } = setupTest();
-    const checkbox = screen.getByRole("checkbox");
-
-    await user.click(checkbox);
-
-    expect(onToggle).toHaveBeenCalledTimes(1);
-  });
-
-  test("Passes checked state to onToggle", async () => {
-    const { user, onToggle } = setupTest({ checked: false });
-    const checkbox = screen.getByRole("checkbox");
-
-    await user.click(checkbox);
-
-    // After clicking, checkbox becomes checked (true)
-    expect(onToggle).toHaveBeenCalledWith(true);
-  });
-
-  test("Has full width container", () => {
-    const { container } = setupTest();
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("w-full");
-  });
-
-  test("Uses flexbox layout", () => {
-    const { container } = setupTest();
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("flex");
-    expect(wrapper).toHaveClass("items-center");
-    expect(wrapper).toHaveClass("justify-between");
-  });
-
-  test("Label has correct styling", () => {
-    setupTest({ label: "My Label" });
-    const label = screen.getByText("My Label");
-    expect(label).toHaveClass("text-sm");
-    expect(label).toHaveClass("font-medium");
-    expect(label).toHaveClass("text-gray-700");
-  });
-
-  test("Has pointer cursor on label", () => {
-    const { container } = setupTest();
-    const labelElement = container.querySelector("label");
-    expect(labelElement).toHaveClass("cursor-pointer");
-  });
-
-  test("Toggle track has correct base classes", () => {
-    const { container } = setupTest();
-    const track = container.querySelector(".bg-gray-200");
-    expect(track).toBeInTheDocument();
-    expect(track).toHaveClass("rounded-full");
-    expect(track).toHaveClass("w-11");
-    expect(track).toHaveClass("h-6");
-  });
-
-  test("Toggle knob has correct base classes", () => {
-    const { container } = setupTest();
-    const knob = container.querySelector(".bg-white");
-    expect(knob).toBeInTheDocument();
-    expect(knob).toHaveClass("rounded-full");
-    expect(knob).toHaveClass("w-5");
-    expect(knob).toHaveClass("h-5");
-  });
-
-  test("Updates visual state on toggle", async () => {
-    const { user, container, component } = setupTest({ checked: false });
-    const checkbox = screen.getByRole("checkbox");
-
-    // Initially unchecked
-    expect(checkbox).not.toBeChecked();
-
-    await user.click(checkbox);
-
-    // The component's checked state should update
-    expect(checkbox).toBeChecked();
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import SwitchOption from "./SwitchOption.svelte";
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const onToggle = vi.fn();
+  const { component, container } = render(SwitchOption, {
+    props: {
+      label: "Test Switch",
+      checked: false,
+      onToggle,
+      ...args,
+    },
+  });
+  return { user, component, container, onToggle };
+}
+
+describe("SwitchOption Component Tests", () => {
+  test("Renders switch with label", () => {
+    setupTest({ label: "Enable Feature" });
+    expect(screen.getByText("Enable Feature")).toBeInTheDocument();
+  });
+
+  test("Renders checkbox input", () => {
+    setupTest();
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toBeInTheDocument();
+  });
+
+  test("Checkbox is hidden for accessibility (sr-only)", () => {
+    setupTest();
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toHaveClass("sr-only");
+  });
+
+  test("Checkbox is unchecked by default", () => {
+    setupTest({ checked: false });
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).not.toBeChecked();
+  });
+
+  test("Checkbox is checked when checked prop is true", () => {
+    setupTest({ checked: true });
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toBeChecked();
+  });
+
+  test("Calls onToggle when clicked", async () => {
+    const { user, onToggle } = setupTest();
+    const checkbox = screen.getByRole("checkbox");
+
+    await user.click(checkbox);
+
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+
+  test("Passes checked state to onToggle", async () => {
+    const { user, onToggle } = setupTest({ checked: false });
+    const checkbox = screen.getByRole("checkbox");
+
+    await user.click(checkbox);
+
+    // After clicking, checkbox becomes checked (true)
+    expect(onToggle).toHaveBeenCalledWith(true);
+  });
+
+  test("Has full width container", () => {
+    const { container } = setupTest();
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("w-full");
+  });
+
+  test("Uses flexbox layout", () => {
+    const { container } = setupTest();
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("flex");
+    expect(wrapper).toHaveClass("items-center");
+    expect(wrapper).toHaveClass("justify-between");
+  });
+
+  test("Label has correct styling", () => {
+    setupTest({ label: "My Label" });
+    const label = screen.getByText("My Label");
+    expect(label).toHaveClass("text-sm");
+    expect(label).toHaveClass("font-medium");
+    expect(label).toHaveClass("text-gray-700");
+  });
+
+  test("Has pointer cursor on label", () => {
+    const { container } = setupTest();
+    const labelElement = container.querySelector("label");
+    expect(labelElement).toHaveClass("cursor-pointer");
+  });
+
+  test("Toggle track has correct base classes", () => {
+    const { container } = setupTest();
+    const track = container.querySelector(".bg-gray-200");
+    expect(track).toBeInTheDocument();
+    expect(track).toHaveClass("rounded-full");
+    expect(track).toHaveClass("w-11");
+    expect(track).toHaveClass("h-6");
+  });
+
+  test("Toggle knob has correct base classes", () => {
+    const { container } = setupTest();
+    const knob = container.querySelector(".bg-white");
+    expect(knob).toBeInTheDocument();
+    expect(knob).toHaveClass("rounded-full");
+    expect(knob).toHaveClass("w-5");
+    expect(knob).toHaveClass("h-5");
+  });
+
+  test("Updates visual state on toggle", async () => {
+    const { user, container, component } = setupTest({ checked: false });
+    const checkbox = screen.getByRole("checkbox");
+
+    // Initially unchecked
+    expect(checkbox).not.toBeChecked();
+
+    await user.click(checkbox);
+
+    // The component's checked state should update
+    expect(checkbox).toBeChecked();
+  });
+});

package/dist/components/pages/performers/VenueInfo.spec.js

@@ -1,167 +1,167 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render } from '@testing-library/svelte';
-import VenueInfo from './VenueInfo.svelte';
-
-// Mock the utils
-vi.mock('@/utils/utils', () => ({
-  microphonePlaceholder: '/placeholder-mic.png',
-  parseLocation: vi.fn((location) => {
-    if (!location) return { street: '', cityStateZip: '' };
-    const parts = location.split(',').map((s) => s.trim());
-    if (parts.length >= 2) {
-      return {
-        street: parts[0],
-        cityStateZip: parts.slice(1).join(', '),
-      };
-    }
-    return { street: location, cityStateZip: '' };
-  }),
-}));
-
-describe('VenueInfo Component', () => {
-  const defaultProps = {
-    name: 'Comedy Club',
-    image: '/venue-image.jpg',
-    location: '123 Main St, Los Angeles, CA 90001',
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders the component', () => {
-    const { container } = render(VenueInfo, { props: defaultProps });
-    expect(container.querySelector('.venue-info')).toBeDefined();
-  });
-
-  it('renders the venue name', () => {
-    const { container } = render(VenueInfo, { props: defaultProps });
-    expect(container.querySelector('.venue-name').textContent).toBe('Comedy Club');
-  });
-
-  it('renders venue image with CDN URL for relative paths', () => {
-    const { container } = render(VenueInfo, { props: defaultProps });
-    const img = container.querySelector('.venue-image img');
-    expect(img.src).toBe('https://moxy.sfo3.digitaloceanspaces.com/venue-image.jpg');
-  });
-
-  it('renders venue image directly for http URLs', () => {
-    const props = { ...defaultProps, image: 'https://example.com/image.jpg' };
-    const { container } = render(VenueInfo, { props });
-    const img = container.querySelector('.venue-image img');
-    expect(img.src).toBe('https://example.com/image.jpg');
-  });
-
-  it('uses placeholder when image is empty', () => {
-    const props = { ...defaultProps, image: '' };
-    const { container } = render(VenueInfo, { props });
-    const img = container.querySelector('.venue-image img');
-    expect(img.src).toContain('placeholder-mic.png');
-  });
-
-  it('uses placeholder when image is whitespace only', () => {
-    const props = { ...defaultProps, image: '   ' };
-    const { container } = render(VenueInfo, { props });
-    const img = container.querySelector('.venue-image img');
-    expect(img.src).toContain('placeholder-mic.png');
-  });
-
-  it('renders street address', () => {
-    const { container } = render(VenueInfo, { props: defaultProps });
-    const locations = container.querySelectorAll('.venue-location');
-    expect(locations.length).toBeGreaterThan(0);
-    expect(locations[0].textContent).toBe('123 Main St');
-  });
-
-  it('renders city state zip', () => {
-    const { container } = render(VenueInfo, { props: defaultProps });
-    const locations = container.querySelectorAll('.venue-location');
-    expect(locations.length).toBe(2);
-    expect(locations[1].textContent).toBe('Los Angeles, CA 90001');
-  });
-
-  it('handles empty location', () => {
-    const props = { ...defaultProps, location: '' };
-    const { container } = render(VenueInfo, { props });
-    const locations = container.querySelectorAll('.venue-location');
-    expect(locations.length).toBe(0);
-  });
-
-  it('handles null location', () => {
-    const props = { ...defaultProps, location: null };
-    const { container } = render(VenueInfo, { props });
-    expect(container.querySelector('.venue-info')).toBeDefined();
-  });
-
-  it('handles undefined location', () => {
-    const props = { ...defaultProps, location: undefined };
-    const { container } = render(VenueInfo, { props });
-    expect(container.querySelector('.venue-info')).toBeDefined();
-  });
-
-  it('sets image alt text to venue name', () => {
-    const { container } = render(VenueInfo, { props: defaultProps });
-    const img = container.querySelector('.venue-image img');
-    expect(img.alt).toBe('Comedy Club');
-  });
-
-  it('renders with default size', () => {
-    const { container } = render(VenueInfo, { props: defaultProps });
-    expect(container.querySelector('.venue-info--small')).toBeNull();
-  });
-
-  it('renders with small size', () => {
-    const props = { ...defaultProps, size: 'small' };
-    const { container } = render(VenueInfo, { props });
-    expect(container.querySelector('.venue-info--small')).toBeDefined();
-  });
-
-  it('renders venue-image container', () => {
-    const { container } = render(VenueInfo, { props: defaultProps });
-    expect(container.querySelector('.venue-image')).toBeDefined();
-  });
-
-  it('renders venue-details container', () => {
-    const { container } = render(VenueInfo, { props: defaultProps });
-    expect(container.querySelector('.venue-details')).toBeDefined();
-  });
-
-  it('handles empty name', () => {
-    const props = { ...defaultProps, name: '' };
-    const { container } = render(VenueInfo, { props });
-    expect(container.querySelector('.venue-name').textContent).toBe('');
-  });
-
-  it('handles location with single part', () => {
-    const props = { ...defaultProps, location: 'Los Angeles' };
-    const { container } = render(VenueInfo, { props });
-    const locations = container.querySelectorAll('.venue-location');
-    expect(locations.length).toBeGreaterThan(0);
-  });
-
-  it('handles https image URLs', () => {
-    const props = { ...defaultProps, image: 'https://secure.example.com/image.jpg' };
-    const { container } = render(VenueInfo, { props });
-    const img = container.querySelector('.venue-image img');
-    expect(img.src).toBe('https://secure.example.com/image.jpg');
-  });
-
-  it('handles http image URLs', () => {
-    const props = { ...defaultProps, image: 'http://example.com/image.jpg' };
-    const { container } = render(VenueInfo, { props });
-    const img = container.querySelector('.venue-image img');
-    expect(img.src).toBe('http://example.com/image.jpg');
-  });
-
-  it('renders with very long name', () => {
-    const props = { ...defaultProps, name: 'A Very Long Venue Name That Might Need To Be Truncated In The UI' };
-    const { container } = render(VenueInfo, { props });
-    expect(container.querySelector('.venue-name').textContent).toBe('A Very Long Venue Name That Might Need To Be Truncated In The UI');
-  });
-
-  it('renders with special characters in name', () => {
-    const props = { ...defaultProps, name: "Joe's Comedy & Bar" };
-    const { container } = render(VenueInfo, { props });
-    expect(container.querySelector('.venue-name').textContent).toBe("Joe's Comedy & Bar");
-  });
-});
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/svelte';
+import VenueInfo from './VenueInfo.svelte';
+
+// Mock the utils
+vi.mock('@/utils/utils', () => ({
+  microphonePlaceholder: '/placeholder-mic.png',
+  parseLocation: vi.fn((location) => {
+    if (!location) return { street: '', cityStateZip: '' };
+    const parts = location.split(',').map((s) => s.trim());
+    if (parts.length >= 2) {
+      return {
+        street: parts[0],
+        cityStateZip: parts.slice(1).join(', '),
+      };
+    }
+    return { street: location, cityStateZip: '' };
+  }),
+}));
+
+describe('VenueInfo Component', () => {
+  const defaultProps = {
+    name: 'Comedy Club',
+    image: '/venue-image.jpg',
+    location: '123 Main St, Los Angeles, CA 90001',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the component', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    expect(container.querySelector('.venue-info')).toBeDefined();
+  });
+
+  it('renders the venue name', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    expect(container.querySelector('.venue-name').textContent).toBe('Comedy Club');
+  });
+
+  it('renders venue image with CDN URL for relative paths', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    const img = container.querySelector('.venue-image img');
+    expect(img.src).toBe('https://moxy.sfo3.digitaloceanspaces.com/venue-image.jpg');
+  });
+
+  it('renders venue image directly for http URLs', () => {
+    const props = { ...defaultProps, image: 'https://example.com/image.jpg' };
+    const { container } = render(VenueInfo, { props });
+    const img = container.querySelector('.venue-image img');
+    expect(img.src).toBe('https://example.com/image.jpg');
+  });
+
+  it('uses placeholder when image is empty', () => {
+    const props = { ...defaultProps, image: '' };
+    const { container } = render(VenueInfo, { props });
+    const img = container.querySelector('.venue-image img');
+    expect(img.src).toContain('placeholder-mic.png');
+  });
+
+  it('uses placeholder when image is whitespace only', () => {
+    const props = { ...defaultProps, image: '   ' };
+    const { container } = render(VenueInfo, { props });
+    const img = container.querySelector('.venue-image img');
+    expect(img.src).toContain('placeholder-mic.png');
+  });
+
+  it('renders street address', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    const locations = container.querySelectorAll('.venue-location');
+    expect(locations.length).toBeGreaterThan(0);
+    expect(locations[0].textContent).toBe('123 Main St');
+  });
+
+  it('renders city state zip', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    const locations = container.querySelectorAll('.venue-location');
+    expect(locations.length).toBe(2);
+    expect(locations[1].textContent).toBe('Los Angeles, CA 90001');
+  });
+
+  it('handles empty location', () => {
+    const props = { ...defaultProps, location: '' };
+    const { container } = render(VenueInfo, { props });
+    const locations = container.querySelectorAll('.venue-location');
+    expect(locations.length).toBe(0);
+  });
+
+  it('handles null location', () => {
+    const props = { ...defaultProps, location: null };
+    const { container } = render(VenueInfo, { props });
+    expect(container.querySelector('.venue-info')).toBeDefined();
+  });
+
+  it('handles undefined location', () => {
+    const props = { ...defaultProps, location: undefined };
+    const { container } = render(VenueInfo, { props });
+    expect(container.querySelector('.venue-info')).toBeDefined();
+  });
+
+  it('sets image alt text to venue name', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    const img = container.querySelector('.venue-image img');
+    expect(img.alt).toBe('Comedy Club');
+  });
+
+  it('renders with default size', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    expect(container.querySelector('.venue-info--small')).toBeNull();
+  });
+
+  it('renders with small size', () => {
+    const props = { ...defaultProps, size: 'small' };
+    const { container } = render(VenueInfo, { props });
+    expect(container.querySelector('.venue-info--small')).toBeDefined();
+  });
+
+  it('renders venue-image container', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    expect(container.querySelector('.venue-image')).toBeDefined();
+  });
+
+  it('renders venue-details container', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    expect(container.querySelector('.venue-details')).toBeDefined();
+  });
+
+  it('handles empty name', () => {
+    const props = { ...defaultProps, name: '' };
+    const { container } = render(VenueInfo, { props });
+    expect(container.querySelector('.venue-name').textContent).toBe('');
+  });
+
+  it('handles location with single part', () => {
+    const props = { ...defaultProps, location: 'Los Angeles' };
+    const { container } = render(VenueInfo, { props });
+    const locations = container.querySelectorAll('.venue-location');
+    expect(locations.length).toBeGreaterThan(0);
+  });
+
+  it('handles https image URLs', () => {
+    const props = { ...defaultProps, image: 'https://secure.example.com/image.jpg' };
+    const { container } = render(VenueInfo, { props });
+    const img = container.querySelector('.venue-image img');
+    expect(img.src).toBe('https://secure.example.com/image.jpg');
+  });
+
+  it('handles http image URLs', () => {
+    const props = { ...defaultProps, image: 'http://example.com/image.jpg' };
+    const { container } = render(VenueInfo, { props });
+    const img = container.querySelector('.venue-image img');
+    expect(img.src).toBe('http://example.com/image.jpg');
+  });
+
+  it('renders with very long name', () => {
+    const props = { ...defaultProps, name: 'A Very Long Venue Name That Might Need To Be Truncated In The UI' };
+    const { container } = render(VenueInfo, { props });
+    expect(container.querySelector('.venue-name').textContent).toBe('A Very Long Venue Name That Might Need To Be Truncated In The UI');
+  });
+
+  it('renders with special characters in name', () => {
+    const props = { ...defaultProps, name: "Joe's Comedy & Bar" };
+    const { container } = render(VenueInfo, { props });
+    expect(container.querySelector('.venue-name').textContent).toBe("Joe's Comedy & Bar");
+  });
+});

package/dist/components/pages/performers/VenueInfo.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { parseLocation, microphonePlaceholder } from "../../../utils/utils";
+  import { parseLocation, microphonePlaceholder } from "../../utils/utils";
 
   export let name = "";
   export let image = "";