@getmicdrop/svelte-components 2.0.4 → 2.0.6

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

@@ -3,10 +3,10 @@
   import { writable } from "svelte/store";
   import { jwtDecode } from "jwt-decode";
   import QuarterView from "../../Calendar/QuarterView.svelte";
-  import { timeAgo } from "../../../utils/utils/utils";
-  import { buildApiUrl, API_ENDPOINTS } from "../../../utils/apiConfig.js";
-  import { auth, initializeAuthState } from "../../../../stores/auth.js";
-  import microphonePlaceholder from "../../../assets/images/microphone.png";
+  import { timeAgo } from "../../utils/utils/utils";
+  import { buildApiUrl, API_ENDPOINTS } from "../../utils/apiConfig.js";
+  import { auth, initializeAuthState } from "../../stores/auth.js";
+  import microphonePlaceholder from "../../assets/images/microphone.png";
 
   export let show = false;
   export let venue = null;

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

@@ -1,124 +1,124 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import ModalShowInfo from './ModalShowInfo.svelte';
-
-// Mock the utils
-vi.mock('@/utils/utils', () => ({
-  microphonePlaceholder: '/placeholder-mic.png',
-}));
-
-describe('ModalShowInfo Component', () => {
-  const defaultProps = {
-    image: '/test-image.jpg',
-    title: 'Comedy Night',
-    showDate: 'Dec 25, 2025',
-    formattedStartTime: '8:00 PM',
-    venueName: 'The Laugh Factory',
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders the component', () => {
-    const { container } = render(ModalShowInfo, { props: defaultProps });
-    expect(container.querySelector('.modal-show-info')).toBeDefined();
-  });
-
-  it('renders the title', () => {
-    const { container } = render(ModalShowInfo, { props: defaultProps });
-    expect(container.querySelector('.modal-show-title').textContent).toBe('Comedy Night');
-  });
-
-  it('renders the venue name', () => {
-    const { container } = render(ModalShowInfo, { props: defaultProps });
-    expect(container.querySelector('.modal-show-venue').textContent).toBe('The Laugh Factory');
-  });
-
-  it('renders date and time when both provided', () => {
-    const { container } = render(ModalShowInfo, { props: defaultProps });
-    expect(container.querySelector('.modal-show-datetime').textContent).toContain('Dec 25, 2025');
-    expect(container.querySelector('.modal-show-datetime').textContent).toContain('8:00 PM');
-  });
-
-  it('renders "No date yet" when showDate is missing', () => {
-    const props = { ...defaultProps, showDate: '', formattedStartTime: '8:00 PM' };
-    const { container } = render(ModalShowInfo, { props });
-    expect(container.querySelector('.modal-show-datetime').textContent.trim()).toBe('No date yet');
-  });
-
-  it('renders "No date yet" when formattedStartTime is missing', () => {
-    const props = { ...defaultProps, showDate: 'Dec 25, 2025', formattedStartTime: '' };
-    const { container } = render(ModalShowInfo, { props });
-    expect(container.querySelector('.modal-show-datetime').textContent.trim()).toBe('No date yet');
-  });
-
-  it('renders "No date yet" when both are missing', () => {
-    const props = { ...defaultProps, showDate: '', formattedStartTime: '' };
-    const { container } = render(ModalShowInfo, { props });
-    expect(container.querySelector('.modal-show-datetime').textContent.trim()).toBe('No date yet');
-  });
-
-  it('handles http image URLs directly', () => {
-    const props = { ...defaultProps, image: 'https://example.com/image.jpg' };
-    const { container } = render(ModalShowInfo, { props });
-    const img = container.querySelector('.modal-show-image img');
-    expect(img.src).toBe('https://example.com/image.jpg');
-  });
-
-  it('prepends CDN URL for relative image paths', () => {
-    const props = { ...defaultProps, image: '/uploads/image.jpg' };
-    const { container } = render(ModalShowInfo, { props });
-    const img = container.querySelector('.modal-show-image img');
-    expect(img.src).toBe('https://moxy.sfo3.digitaloceanspaces.com/uploads/image.jpg');
-  });
-
-  it('uses placeholder when image is empty', () => {
-    const props = { ...defaultProps, image: '' };
-    const { container } = render(ModalShowInfo, { props });
-    const img = container.querySelector('.modal-show-image img');
-    expect(img.src).toContain('placeholder-mic.png');
-  });
-
-  it('uses placeholder when image is null', () => {
-    const props = { ...defaultProps, image: null };
-    const { container } = render(ModalShowInfo, { props });
-    const img = container.querySelector('.modal-show-image img');
-    expect(img.src).toContain('placeholder-mic.png');
-  });
-
-  it('uses placeholder when image is undefined', () => {
-    const props = { ...defaultProps, image: undefined };
-    const { container } = render(ModalShowInfo, { props });
-    const img = container.querySelector('.modal-show-image img');
-    expect(img.src).toContain('placeholder-mic.png');
-  });
-
-  it('sets alt text to title', () => {
-    const { container } = render(ModalShowInfo, { props: defaultProps });
-    const img = container.querySelector('.modal-show-image img');
-    expect(img.alt).toBe('Comedy Night');
-  });
-
-  it('renders with empty venue name', () => {
-    const props = { ...defaultProps, venueName: '' };
-    const { container } = render(ModalShowInfo, { props });
-    expect(container.querySelector('.modal-show-venue').textContent).toBe('');
-  });
-
-  it('renders with empty title', () => {
-    const props = { ...defaultProps, title: '' };
-    const { container } = render(ModalShowInfo, { props });
-    expect(container.querySelector('.modal-show-title').textContent).toBe('');
-  });
-
-  it('renders show image container', () => {
-    const { container } = render(ModalShowInfo, { props: defaultProps });
-    expect(container.querySelector('.modal-show-image')).toBeDefined();
-  });
-
-  it('renders show details container', () => {
-    const { container } = render(ModalShowInfo, { props: defaultProps });
-    expect(container.querySelector('.modal-show-details')).toBeDefined();
-  });
-});
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import ModalShowInfo from './ModalShowInfo.svelte';
+
+// Mock the utils
+vi.mock('@/utils/utils', () => ({
+  microphonePlaceholder: '/placeholder-mic.png',
+}));
+
+describe('ModalShowInfo Component', () => {
+  const defaultProps = {
+    image: '/test-image.jpg',
+    title: 'Comedy Night',
+    showDate: 'Dec 25, 2025',
+    formattedStartTime: '8:00 PM',
+    venueName: 'The Laugh Factory',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the component', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    expect(container.querySelector('.modal-show-info')).toBeDefined();
+  });
+
+  it('renders the title', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    expect(container.querySelector('.modal-show-title').textContent).toBe('Comedy Night');
+  });
+
+  it('renders the venue name', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    expect(container.querySelector('.modal-show-venue').textContent).toBe('The Laugh Factory');
+  });
+
+  it('renders date and time when both provided', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    expect(container.querySelector('.modal-show-datetime').textContent).toContain('Dec 25, 2025');
+    expect(container.querySelector('.modal-show-datetime').textContent).toContain('8:00 PM');
+  });
+
+  it('renders "No date yet" when showDate is missing', () => {
+    const props = { ...defaultProps, showDate: '', formattedStartTime: '8:00 PM' };
+    const { container } = render(ModalShowInfo, { props });
+    expect(container.querySelector('.modal-show-datetime').textContent.trim()).toBe('No date yet');
+  });
+
+  it('renders "No date yet" when formattedStartTime is missing', () => {
+    const props = { ...defaultProps, showDate: 'Dec 25, 2025', formattedStartTime: '' };
+    const { container } = render(ModalShowInfo, { props });
+    expect(container.querySelector('.modal-show-datetime').textContent.trim()).toBe('No date yet');
+  });
+
+  it('renders "No date yet" when both are missing', () => {
+    const props = { ...defaultProps, showDate: '', formattedStartTime: '' };
+    const { container } = render(ModalShowInfo, { props });
+    expect(container.querySelector('.modal-show-datetime').textContent.trim()).toBe('No date yet');
+  });
+
+  it('handles http image URLs directly', () => {
+    const props = { ...defaultProps, image: 'https://example.com/image.jpg' };
+    const { container } = render(ModalShowInfo, { props });
+    const img = container.querySelector('.modal-show-image img');
+    expect(img.src).toBe('https://example.com/image.jpg');
+  });
+
+  it('prepends CDN URL for relative image paths', () => {
+    const props = { ...defaultProps, image: '/uploads/image.jpg' };
+    const { container } = render(ModalShowInfo, { props });
+    const img = container.querySelector('.modal-show-image img');
+    expect(img.src).toBe('https://moxy.sfo3.digitaloceanspaces.com/uploads/image.jpg');
+  });
+
+  it('uses placeholder when image is empty', () => {
+    const props = { ...defaultProps, image: '' };
+    const { container } = render(ModalShowInfo, { props });
+    const img = container.querySelector('.modal-show-image img');
+    expect(img.src).toContain('placeholder-mic.png');
+  });
+
+  it('uses placeholder when image is null', () => {
+    const props = { ...defaultProps, image: null };
+    const { container } = render(ModalShowInfo, { props });
+    const img = container.querySelector('.modal-show-image img');
+    expect(img.src).toContain('placeholder-mic.png');
+  });
+
+  it('uses placeholder when image is undefined', () => {
+    const props = { ...defaultProps, image: undefined };
+    const { container } = render(ModalShowInfo, { props });
+    const img = container.querySelector('.modal-show-image img');
+    expect(img.src).toContain('placeholder-mic.png');
+  });
+
+  it('sets alt text to title', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    const img = container.querySelector('.modal-show-image img');
+    expect(img.alt).toBe('Comedy Night');
+  });
+
+  it('renders with empty venue name', () => {
+    const props = { ...defaultProps, venueName: '' };
+    const { container } = render(ModalShowInfo, { props });
+    expect(container.querySelector('.modal-show-venue').textContent).toBe('');
+  });
+
+  it('renders with empty title', () => {
+    const props = { ...defaultProps, title: '' };
+    const { container } = render(ModalShowInfo, { props });
+    expect(container.querySelector('.modal-show-title').textContent).toBe('');
+  });
+
+  it('renders show image container', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    expect(container.querySelector('.modal-show-image')).toBeDefined();
+  });
+
+  it('renders show details container', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    expect(container.querySelector('.modal-show-details')).toBeDefined();
+  });
+});

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

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

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

@@ -1,89 +1,89 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi, beforeEach } from "vitest";
-import PageBackButton from "./PageBackButton.svelte";
-
-// Mock history.back
-const mockHistoryBack = vi.fn();
-
-describe("PageBackButton Component Tests", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    // Mock history.back
-    Object.defineProperty(window, "history", {
-      value: {
-        back: mockHistoryBack,
-      },
-      writable: true,
-    });
-  });
-
-  test("Renders button element", () => {
-    render(PageBackButton, { props: { headerTitle: "Back" } });
-    const button = screen.getByRole("button");
-    expect(button).toBeInTheDocument();
-  });
-
-  test("Renders header title", () => {
-    render(PageBackButton, { props: { headerTitle: "Profile Settings" } });
-    expect(screen.getByText("Profile Settings")).toBeInTheDocument();
-  });
-
-  test("Has button type", () => {
-    render(PageBackButton, { props: { headerTitle: "Title" } });
-    const button = screen.getByRole("button");
-    expect(button).toHaveAttribute("type", "button");
-  });
-
-  test("Calls history.back on click", async () => {
-    const user = userEvent.setup();
-    render(PageBackButton, { props: { headerTitle: "Title" } });
-    const button = screen.getByRole("button");
-
-    await user.click(button);
-
-    expect(mockHistoryBack).toHaveBeenCalledTimes(1);
-  });
-
-  test("Has flexbox layout", () => {
-    render(PageBackButton, { props: { headerTitle: "Title" } });
-    const button = screen.getByRole("button");
-    expect(button).toHaveClass("flex");
-    expect(button).toHaveClass("items-center");
-  });
-
-  test("Has correct typography classes", () => {
-    render(PageBackButton, { props: { headerTitle: "Title" } });
-    const button = screen.getByRole("button");
-    expect(button).toHaveClass("font-semibold");
-    expect(button).toHaveClass("text-xl");
-    expect(button).toHaveClass("text-Text-Primary");
-  });
-
-  test("Contains Back icon", () => {
-    const { container } = render(PageBackButton, { props: { headerTitle: "Title" } });
-    // Icon component should render an SVG
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Works with empty title", () => {
-    render(PageBackButton, { props: { headerTitle: "" } });
-    const button = screen.getByRole("button");
-    expect(button).toBeInTheDocument();
-  });
-
-  test("Has responsive gap classes", () => {
-    render(PageBackButton, { props: { headerTitle: "Title" } });
-    const button = screen.getByRole("button");
-    expect(button.className).toMatch(/gap-1\.5/);
-    expect(button.className).toMatch(/sm:gap-2/);
-  });
-
-  test("Has responsive margin classes", () => {
-    render(PageBackButton, { props: { headerTitle: "Title" } });
-    const button = screen.getByRole("button");
-    expect(button.className).toMatch(/my-0\.5/);
-    expect(button.className).toMatch(/sm:my-1/);
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi, beforeEach } from "vitest";
+import PageBackButton from "./PageBackButton.svelte";
+
+// Mock history.back
+const mockHistoryBack = vi.fn();
+
+describe("PageBackButton Component Tests", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Mock history.back
+    Object.defineProperty(window, "history", {
+      value: {
+        back: mockHistoryBack,
+      },
+      writable: true,
+    });
+  });
+
+  test("Renders button element", () => {
+    render(PageBackButton, { props: { headerTitle: "Back" } });
+    const button = screen.getByRole("button");
+    expect(button).toBeInTheDocument();
+  });
+
+  test("Renders header title", () => {
+    render(PageBackButton, { props: { headerTitle: "Profile Settings" } });
+    expect(screen.getByText("Profile Settings")).toBeInTheDocument();
+  });
+
+  test("Has button type", () => {
+    render(PageBackButton, { props: { headerTitle: "Title" } });
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("type", "button");
+  });
+
+  test("Calls history.back on click", async () => {
+    const user = userEvent.setup();
+    render(PageBackButton, { props: { headerTitle: "Title" } });
+    const button = screen.getByRole("button");
+
+    await user.click(button);
+
+    expect(mockHistoryBack).toHaveBeenCalledTimes(1);
+  });
+
+  test("Has flexbox layout", () => {
+    render(PageBackButton, { props: { headerTitle: "Title" } });
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("flex");
+    expect(button).toHaveClass("items-center");
+  });
+
+  test("Has correct typography classes", () => {
+    render(PageBackButton, { props: { headerTitle: "Title" } });
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("font-semibold");
+    expect(button).toHaveClass("text-xl");
+    expect(button).toHaveClass("text-Text-Primary");
+  });
+
+  test("Contains Back icon", () => {
+    const { container } = render(PageBackButton, { props: { headerTitle: "Title" } });
+    // Icon component should render an SVG
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Works with empty title", () => {
+    render(PageBackButton, { props: { headerTitle: "" } });
+    const button = screen.getByRole("button");
+    expect(button).toBeInTheDocument();
+  });
+
+  test("Has responsive gap classes", () => {
+    render(PageBackButton, { props: { headerTitle: "Title" } });
+    const button = screen.getByRole("button");
+    expect(button.className).toMatch(/gap-1\.5/);
+    expect(button.className).toMatch(/sm:gap-2/);
+  });
+
+  test("Has responsive margin classes", () => {
+    render(PageBackButton, { props: { headerTitle: "Title" } });
+    const button = screen.getByRole("button");
+    expect(button.className).toMatch(/my-0\.5/);
+    expect(button.className).toMatch(/sm:my-1/);
+  });
+});

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

@@ -1,75 +1,75 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import SectionHeader from "./SectionHeader.svelte";
-
-describe("SectionHeader Component Tests", () => {
-  test("Renders title", () => {
-    render(SectionHeader, { props: { title: "Header Title" } });
-    expect(screen.getByText("Header Title")).toBeInTheDocument();
-  });
-
-  test("Renders description", () => {
-    render(SectionHeader, {
-      props: { title: "Title", description: "This is a description" },
-    });
-    expect(screen.getByText("This is a description")).toBeInTheDocument();
-  });
-
-  test("Renders both title and description", () => {
-    render(SectionHeader, {
-      props: { title: "My Title", description: "My Description" },
-    });
-    expect(screen.getByText("My Title")).toBeInTheDocument();
-    expect(screen.getByText("My Description")).toBeInTheDocument();
-  });
-
-  test("Title is h3 element", () => {
-    render(SectionHeader, { props: { title: "Title", description: "" } });
-    const title = screen.getByText("Title");
-    expect(title.tagName).toBe("H3");
-  });
-
-  test("Description is p element", () => {
-    render(SectionHeader, {
-      props: { title: "Title", description: "Description" },
-    });
-    const description = screen.getByText("Description");
-    expect(description.tagName).toBe("P");
-  });
-
-  test("Title has correct styling", () => {
-    render(SectionHeader, { props: { title: "Title", description: "" } });
-    const title = screen.getByText("Title");
-    expect(title).toHaveClass("font-semibold");
-    expect(title).toHaveClass("text-Text-Primary");
-    expect(title).toHaveClass("text-xl");
-  });
-
-  test("Description has correct styling", () => {
-    render(SectionHeader, {
-      props: { title: "Title", description: "Description" },
-    });
-    const description = screen.getByText("Description");
-    expect(description).toHaveClass("text-sm");
-    expect(description).toHaveClass("text-Text-Tartiary");
-  });
-
-  test("Works with empty title", () => {
-    render(SectionHeader, { props: { title: "", description: "Only description" } });
-    expect(screen.getByText("Only description")).toBeInTheDocument();
-  });
-
-  test("Works with empty description", () => {
-    render(SectionHeader, { props: { title: "Only title", description: "" } });
-    expect(screen.getByText("Only title")).toBeInTheDocument();
-  });
-
-  test("Works with default empty props", () => {
-    const { container } = render(SectionHeader, { props: {} });
-    const h3 = container.querySelector("h3");
-    const p = container.querySelector("p");
-    expect(h3).toBeInTheDocument();
-    // Description is conditionally rendered - only appears when provided
-    expect(p).not.toBeInTheDocument();
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import SectionHeader from "./SectionHeader.svelte";
+
+describe("SectionHeader Component Tests", () => {
+  test("Renders title", () => {
+    render(SectionHeader, { props: { title: "Header Title" } });
+    expect(screen.getByText("Header Title")).toBeInTheDocument();
+  });
+
+  test("Renders description", () => {
+    render(SectionHeader, {
+      props: { title: "Title", description: "This is a description" },
+    });
+    expect(screen.getByText("This is a description")).toBeInTheDocument();
+  });
+
+  test("Renders both title and description", () => {
+    render(SectionHeader, {
+      props: { title: "My Title", description: "My Description" },
+    });
+    expect(screen.getByText("My Title")).toBeInTheDocument();
+    expect(screen.getByText("My Description")).toBeInTheDocument();
+  });
+
+  test("Title is h3 element", () => {
+    render(SectionHeader, { props: { title: "Title", description: "" } });
+    const title = screen.getByText("Title");
+    expect(title.tagName).toBe("H3");
+  });
+
+  test("Description is p element", () => {
+    render(SectionHeader, {
+      props: { title: "Title", description: "Description" },
+    });
+    const description = screen.getByText("Description");
+    expect(description.tagName).toBe("P");
+  });
+
+  test("Title has correct styling", () => {
+    render(SectionHeader, { props: { title: "Title", description: "" } });
+    const title = screen.getByText("Title");
+    expect(title).toHaveClass("font-semibold");
+    expect(title).toHaveClass("text-Text-Primary");
+    expect(title).toHaveClass("text-xl");
+  });
+
+  test("Description has correct styling", () => {
+    render(SectionHeader, {
+      props: { title: "Title", description: "Description" },
+    });
+    const description = screen.getByText("Description");
+    expect(description).toHaveClass("text-sm");
+    expect(description).toHaveClass("text-Text-Tartiary");
+  });
+
+  test("Works with empty title", () => {
+    render(SectionHeader, { props: { title: "", description: "Only description" } });
+    expect(screen.getByText("Only description")).toBeInTheDocument();
+  });
+
+  test("Works with empty description", () => {
+    render(SectionHeader, { props: { title: "Only title", description: "" } });
+    expect(screen.getByText("Only title")).toBeInTheDocument();
+  });
+
+  test("Works with default empty props", () => {
+    const { container } = render(SectionHeader, { props: {} });
+    const h3 = container.querySelector("h3");
+    const p = container.querySelector("p");
+    expect(h3).toBeInTheDocument();
+    // Description is conditionally rendered - only appears when provided
+    expect(p).not.toBeInTheDocument();
+  });
+});