@getmicdrop/svelte-components 2.0.4 → 2.0.6

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

@@ -1,793 +1,793 @@
-import { describe, it, expect, vi, beforeEach, beforeAll, afterEach } from 'vitest';
-import { render, fireEvent, waitFor, cleanup } from '@testing-library/svelte';
-
-// Mock IntersectionObserver
-vi.stubGlobal('IntersectionObserver', vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  disconnect: vi.fn(),
-  unobserve: vi.fn(),
-})));
-
-// Mock $app modules
-vi.mock('$app/navigation', () => ({
-  goto: vi.fn(),
-}));
-
-vi.mock('$app/stores', () => ({
-  page: {
-    subscribe: vi.fn((callback) => {
-      callback({ url: new URL('http://localhost:3000/shows') });
-      return () => {};
-    }),
-  },
-}));
-
-vi.mock('$app/environment', () => ({
-  browser: true,
-}));
-
-// Mock stores
-vi.mock('@/stores/toaster', () => ({
-  showToast: vi.fn(),
-}));
-
-// Mock utils
-vi.mock('@/utils/utils', () => ({
-  microphonePlaceholder: '/placeholder.jpg',
-  getUserDetails: vi.fn(() => ({ full_name: 'Test User' })),
-  classNames: vi.fn((...args) => args.filter(Boolean).join(' ')),
-}));
-
-vi.mock('@/utils/utils/utils', () => ({
-  formatHour: vi.fn((date) => '8:00 PM'),
-  formattedDate: vi.fn((date) => 'Jan 15'),
-  formattedFullDate: vi.fn((date) => 'January 15, 2025'),
-  timeAgo: vi.fn(() => '2 hours ago'),
-}));
-
-// Mock ShowService
-vi.mock('@/services/ShowService', () => ({
-  acceptInvite: vi.fn().mockResolvedValue({ ok: true }),
-  declineInvite: vi.fn().mockResolvedValue({ ok: true }),
-  cancelInvite: vi.fn().mockResolvedValue({ ok: true }),
-  sendVenueMessage: vi.fn().mockResolvedValue({ ok: true }),
-  getEventUrl: vi.fn((venueId) => `https://micdrop.com/events/${venueId}`),
-}));
-
-describe('ShowItemCard', () => {
-  let ShowItemCard;
-  let showToast;
-  let goto;
-
-  const defaultProps = {
-    venueId: 1,
-    title: 'Comedy Night',
-    role: 'Headliner',
-    startDateTime: '2025-01-15T20:00:00Z',
-    doorsOpenTime: '2025-01-15T19:00:00Z',
-    spotDuration: 30,
-    venueName: 'The Comedy Store',
-    location: '8433 Sunset Blvd, Los Angeles, CA',
-    status: 'upcoming',
-    details: {
-      description: 'A great comedy night',
-      ticketPrice: 25,
-    },
-    id: 123,
-    invitationAccepted: true,
-    hasAvailability: true,
-    lastUpdated: '2025-01-10T12:00:00Z',
-    image: '/test-image.jpg',
-  };
-
-  beforeAll(async () => {
-    vi.resetModules();
-    const toasterModule = await import('../../../../stores/toaster');
-    showToast = toasterModule.showToast;
-    const navModule = await import('$app/navigation');
-    goto = navModule.goto;
-    ShowItemCard = (await import('./ShowItemCard.svelte')).default;
-  }, 60000);
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    // Mock clipboard API
-    Object.assign(navigator, {
-      clipboard: {
-        writeText: vi.fn().mockResolvedValue(undefined),
-      },
-    });
-    // Mock window.open
-    window.open = vi.fn();
-  });
-
-  afterEach(() => {
-    cleanup();
-  });
-
-  describe('Helper Functions', () => {
-    // Test the getRoleVariant function logic
-    const getRoleVariant = (role) => role.toLowerCase().replace(/\s+/g, '-');
-
-    it('converts Headliner to lowercase', () => {
-      expect(getRoleVariant('Headliner')).toBe('headliner');
-    });
-
-    it('converts Feature to lowercase', () => {
-      expect(getRoleVariant('Feature')).toBe('feature');
-    });
-
-    it('converts Host to lowercase', () => {
-      expect(getRoleVariant('Host')).toBe('host');
-    });
-
-    it('converts Special Guest to hyphenated lowercase', () => {
-      expect(getRoleVariant('Special Guest')).toBe('special-guest');
-    });
-
-    it('handles multiple spaces', () => {
-      expect(getRoleVariant('Super  Special  Guest')).toBe('super-special-guest');
-    });
-
-    it('handles all caps', () => {
-      expect(getRoleVariant('HEADLINER')).toBe('headliner');
-    });
-  });
-
-  describe('Status Mapping', () => {
-    it('status 0 means pending invitation', () => {
-      expect(0).toBe(0);
-    });
-
-    it('status 1 means accepted', () => {
-      expect(1).toBe(1);
-    });
-
-    it('status 2 means declined', () => {
-      expect(2).toBe(2);
-    });
-  });
-
-  describe('Constants', () => {
-    const MIN_LOADING_TIME = 1000;
-
-    it('minimum loading time is 1000ms', () => {
-      expect(MIN_LOADING_TIME).toBe(1000);
-    });
-  });
-
-  describe('Basic Rendering', () => {
-    it('renders the show card', async () => {
-      const { container } = render(ShowItemCard, { props: defaultProps });
-      expect(container.querySelector('.rounded-lg')).toBeDefined();
-    });
-
-    it('displays show title', async () => {
-      const { container } = render(ShowItemCard, { props: defaultProps });
-      expect(container.innerHTML).toContain('Comedy Night');
-    });
-
-    it('displays venue name', async () => {
-      const { container } = render(ShowItemCard, { props: defaultProps });
-      expect(container.innerHTML).toContain('The Comedy Store');
-    });
-
-    it('displays date and time', async () => {
-      const { container } = render(ShowItemCard, { props: defaultProps });
-      expect(container.innerHTML).toContain('Jan 15');
-      expect(container.innerHTML).toContain('8:00 PM');
-    });
-
-    it('displays "No date yet" when no startDateTime', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, startDateTime: null },
-      });
-      expect(container.innerHTML).toContain('No date yet');
-    });
-  });
-
-  describe('Image Handling', () => {
-    it('uses full URL for http images', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, image: 'https://example.com/image.jpg' },
-      });
-
-      const img = container.querySelector('img');
-      expect(img?.src).toContain('https://example.com/image.jpg');
-    });
-
-    it('prepends CDN URL for relative paths', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, image: '/uploads/image.jpg' },
-      });
-
-      const img = container.querySelector('img');
-      expect(img?.src).toContain('moxy.sfo3.digitaloceanspaces.com');
-    });
-
-    it('uses placeholder when no image', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, image: null },
-      });
-
-      const img = container.querySelector('img');
-      expect(img?.src).toContain('placeholder');
-    });
-  });
-
-  describe('Status: Invitations', () => {
-    it('shows Confirm and Decline buttons for invitations', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, status: 'invitations' },
-      });
-
-      expect(container.innerHTML).toContain('Confirm');
-      expect(container.innerHTML).toContain('Decline');
-    });
-
-    it('triggers accept modal state on Confirm click', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, status: 'invitations' },
-      });
-
-      const buttons = container.querySelectorAll('button');
-      const confirmButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Confirm')
-      );
-
-      expect(confirmButton).toBeDefined();
-      if (confirmButton) {
-        await fireEvent.click(confirmButton);
-        // Modal state changes - component re-renders
-        expect(container).toBeDefined();
-      }
-    });
-
-    it('triggers decline modal state on Decline click', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, status: 'invitations' },
-      });
-
-      const buttons = container.querySelectorAll('button');
-      const declineButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Decline')
-      );
-
-      expect(declineButton).toBeDefined();
-      if (declineButton) {
-        await fireEvent.click(declineButton);
-        // Modal state changes - component re-renders
-        expect(container).toBeDefined();
-      }
-    });
-  });
-
-  describe('Status: Upcoming with Availability', () => {
-    it('shows Update button', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: true,
-          hasAvailability: true,
-        },
-      });
-
-      expect(container.innerHTML).toContain('Update');
-    });
-
-    it('shows last updated text', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: true,
-          hasAvailability: true,
-        },
-      });
-
-      expect(container.innerHTML).toContain('Last updated');
-    });
-
-    it('navigates to availability when Update clicked', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: true,
-          hasAvailability: true,
-        },
-      });
-
-      const buttons = container.querySelectorAll('button');
-      const updateButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Update')
-      );
-
-      if (updateButton) {
-        await fireEvent.click(updateButton);
-
-        await waitFor(() => {
-          expect(goto).toHaveBeenCalledWith('/availability/1');
-        });
-      }
-    });
-  });
-
-  describe('Status: Upcoming without Availability', () => {
-    it('shows Set up button when invitation accepted but no availability', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: true,
-          hasAvailability: false,
-        },
-      });
-
-      expect(container.innerHTML).toContain('Set up');
-    });
-
-    it('shows warning message', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: true,
-          hasAvailability: false,
-        },
-      });
-
-      expect(container.innerHTML).toContain('Please update your availability');
-    });
-  });
-
-  describe('Status: Upcoming without Invitation Accepted', () => {
-    it('shows Copy ticket link button', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: false,
-          hasAvailability: false,
-        },
-      });
-
-      expect(container.innerHTML).toContain('Copy ticket link');
-    });
-
-    it('shows Visit event page button', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: false,
-          hasAvailability: false,
-        },
-      });
-
-      expect(container.innerHTML).toContain('Visit event page');
-    });
-
-    it('opens event page in new tab', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: false,
-          hasAvailability: false,
-        },
-      });
-
-      const buttons = container.querySelectorAll('button');
-      const visitButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Visit event page')
-      );
-
-      if (visitButton) {
-        await fireEvent.click(visitButton);
-
-        await waitFor(() => {
-          expect(window.open).toHaveBeenCalledWith(
-            expect.stringContaining('micdrop.com/events'),
-            '_blank'
-          );
-        });
-      }
-    });
-  });
-
-  describe('View Details Toggle', () => {
-    it('shows View details button for non-upcoming status', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, status: 'past' },
-      });
-
-      expect(container.innerHTML).toContain('View details');
-    });
-
-    it('toggles details visibility on click', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, status: 'past' },
-      });
-
-      const buttons = container.querySelectorAll('button');
-      const detailsButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('View details')
-      );
-
-      if (detailsButton) {
-        await fireEvent.click(detailsButton);
-
-        await waitFor(() => {
-          expect(container.innerHTML).toContain('Close details');
-        });
-      }
-    });
-  });
-
-  describe('Status: Declined', () => {
-    it('shows View details for declined status', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, status: 'declined' },
-      });
-
-      expect(container.innerHTML).toContain('View details');
-    });
-
-    it('does not show Message button for declined status', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, status: 'declined' },
-      });
-
-      const buttons = container.querySelectorAll('button');
-      const messageButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Message')
-      );
-
-      expect(messageButton).toBeUndefined();
-    });
-  });
-
-  describe('Status: Past', () => {
-    it('shows View details for past status', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, status: 'past' },
-      });
-
-      expect(container.innerHTML).toContain('View details');
-    });
-
-    it('does not show Message button for past status', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, status: 'past' },
-      });
-
-      const buttons = container.querySelectorAll('button');
-      const messageButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Message')
-      );
-
-      expect(messageButton).toBeUndefined();
-    });
-  });
-
-  describe('Message Modal', () => {
-    it('has Message button for upcoming without invitation', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: false,
-          hasAvailability: false,
-        },
-      });
-
-      const buttons = container.querySelectorAll('button');
-      const messageButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Message')
-      );
-
-      expect(messageButton).toBeDefined();
-    });
-
-    it('triggers message modal state change on click', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: false,
-          hasAvailability: false,
-        },
-      });
-
-      const buttons = container.querySelectorAll('button');
-      const messageButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Message')
-      );
-
-      if (messageButton) {
-        await fireEvent.click(messageButton);
-        // Component re-renders with modal open state
-        expect(container).toBeDefined();
-      }
-    });
-  });
-
-  describe('Copy Ticket Link', () => {
-    it('copies link to clipboard', async () => {
-      vi.useFakeTimers();
-
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: false,
-          hasAvailability: false,
-        },
-      });
-
-      const buttons = container.querySelectorAll('button');
-      const copyButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Copy ticket link')
-      );
-
-      if (copyButton) {
-        await fireEvent.click(copyButton);
-
-        await waitFor(() => {
-          expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
-            expect.stringContaining('micdrop.com/events')
-          );
-        });
-      }
-
-      vi.useRealTimers();
-    });
-  });
-
-  describe('Leave Venue', () => {
-    it('renders dropdown trigger for upcoming with availability', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: true,
-          hasAvailability: true,
-        },
-      });
-
-      // The dropdown trigger should be present (dots menu)
-      const dropdownTrigger = container.querySelector('[data-testid="dropdown-menu"]');
-      expect(dropdownTrigger).toBeDefined();
-    });
-
-    it('handles leave venue flow', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: true,
-          hasAvailability: true,
-        },
-      });
-
-      // The component renders with leave functionality available
-      expect(container).toBeDefined();
-    });
-  });
-
-  describe('Props Handling', () => {
-    it('renders with minimal required props', async () => {
-      const minimalProps = {
-        venueId: 1,
-        title: 'Test Show',
-        status: 'upcoming',
-        venueName: 'Test Venue',
-        id: 1,
-        invitationAccepted: false,
-        hasAvailability: false,
-      };
-
-      const { container } = render(ShowItemCard, { props: minimalProps });
-      expect(container).toBeDefined();
-    });
-
-    it('handles undefined optional props', async () => {
-      const propsWithUndefined = {
-        venueId: 1,
-        title: 'Test Show',
-        status: 'upcoming',
-        venueName: 'Test Venue',
-        id: 1,
-        invitationAccepted: false,
-        hasAvailability: false,
-        image: undefined,
-        location: undefined,
-        details: undefined,
-      };
-
-      const { container } = render(ShowItemCard, { props: propsWithUndefined });
-      expect(container).toBeDefined();
-    });
-
-    it('handles null optional props', async () => {
-      const propsWithNull = {
-        venueId: 1,
-        title: 'Test Show',
-        status: 'upcoming',
-        venueName: 'Test Venue',
-        id: 1,
-        invitationAccepted: false,
-        hasAvailability: false,
-        image: null,
-        startDateTime: null,
-        doorsOpenTime: null,
-      };
-
-      const { container } = render(ShowItemCard, { props: propsWithNull });
-      expect(container).toBeDefined();
-    });
-  });
-
-  describe('Dropdown Menu', () => {
-    it('renders dropdown trigger for upcoming with availability', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: true,
-          hasAvailability: true,
-        },
-      });
-
-      const dropdownTrigger = container.querySelector('[data-testid="dropdown-menu"]');
-      expect(dropdownTrigger).toBeDefined();
-    });
-
-    it('renders dropdown trigger for upcoming without availability', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: true,
-          hasAvailability: false,
-        },
-      });
-
-      const dropdownTrigger = container.querySelector('[data-testid="dropdown-menu"]');
-      expect(dropdownTrigger).toBeDefined();
-    });
-  });
-
-  describe('Modal Actions', () => {
-    it('has service imports available', async () => {
-      const { acceptInvite, declineInvite, sendVenueMessage, cancelInvite } = await import('../../../../services/ShowService');
-
-      expect(acceptInvite).toBeDefined();
-      expect(declineInvite).toBeDefined();
-      expect(sendVenueMessage).toBeDefined();
-      expect(cancelInvite).toBeDefined();
-    });
-
-    it('opens accept modal on Confirm click', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, status: 'invitations' },
-      });
-
-      // Find and click Confirm button
-      const buttons = container.querySelectorAll('button');
-      const confirmButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Confirm')
-      );
-
-      expect(confirmButton).toBeDefined();
-      if (confirmButton) {
-        await fireEvent.click(confirmButton);
-        // Modal opens but content may be in portal
-        expect(container).toBeDefined();
-      }
-    });
-
-    it('opens decline modal on Decline click', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, status: 'invitations' },
-      });
-
-      // Find and click Decline button
-      const buttons = container.querySelectorAll('button');
-      const declineButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Decline')
-      );
-
-      expect(declineButton).toBeDefined();
-      if (declineButton) {
-        await fireEvent.click(declineButton);
-        expect(container).toBeDefined();
-      }
-    });
-
-    it('opens message modal on Message click', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: false,
-          hasAvailability: false,
-        },
-      });
-
-      const buttons = container.querySelectorAll('button');
-      const messageButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Message')
-      );
-
-      expect(messageButton).toBeDefined();
-      if (messageButton) {
-        await fireEvent.click(messageButton);
-        expect(container).toBeDefined();
-      }
-    });
-  });
-
-  describe('Styling', () => {
-    it('has correct card container classes', async () => {
-      const { container } = render(ShowItemCard, { props: defaultProps });
-
-      const card = container.querySelector('.bg-bg-secondary');
-      expect(card).toBeDefined();
-    });
-
-    it('applies red styling when needs availability update', async () => {
-      const { container } = render(ShowItemCard, {
-        props: {
-          ...defaultProps,
-          status: 'upcoming',
-          invitationAccepted: true,
-          hasAvailability: false,
-        },
-      });
-
-      expect(container.innerHTML).toContain('red-50');
-    });
-  });
-
-  describe('Modal States', () => {
-    it('toggleModal function opens accept modal', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, status: 'invitations' },
-      });
-
-      // Open accept modal
-      const buttons = container.querySelectorAll('button');
-      const confirmButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Confirm')
-      );
-
-      expect(confirmButton).toBeDefined();
-      if (confirmButton) {
-        await fireEvent.click(confirmButton);
-        // Modal state should change - component re-renders
-        expect(container).toBeDefined();
-      }
-    });
-
-    it('toggleModal function opens decline modal', async () => {
-      const { container } = render(ShowItemCard, {
-        props: { ...defaultProps, status: 'invitations' },
-      });
-
-      // Open decline modal
-      const buttons = container.querySelectorAll('button');
-      const declineButton = Array.from(buttons).find(
-        (btn) => btn.textContent?.includes('Decline')
-      );
-
-      expect(declineButton).toBeDefined();
-      if (declineButton) {
-        await fireEvent.click(declineButton);
-        expect(container).toBeDefined();
-      }
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach, beforeAll, afterEach } from 'vitest';
+import { render, fireEvent, waitFor, cleanup } from '@testing-library/svelte';
+
+// Mock IntersectionObserver
+vi.stubGlobal('IntersectionObserver', vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  disconnect: vi.fn(),
+  unobserve: vi.fn(),
+})));
+
+// Mock $app modules
+vi.mock('$app/navigation', () => ({
+  goto: vi.fn(),
+}));
+
+vi.mock('$app/stores', () => ({
+  page: {
+    subscribe: vi.fn((callback) => {
+      callback({ url: new URL('http://localhost:3000/shows') });
+      return () => {};
+    }),
+  },
+}));
+
+vi.mock('$app/environment', () => ({
+  browser: true,
+}));
+
+// Mock stores
+vi.mock('@/stores/toaster', () => ({
+  showToast: vi.fn(),
+}));
+
+// Mock utils
+vi.mock('@/utils/utils', () => ({
+  microphonePlaceholder: '/placeholder.jpg',
+  getUserDetails: vi.fn(() => ({ full_name: 'Test User' })),
+  classNames: vi.fn((...args) => args.filter(Boolean).join(' ')),
+}));
+
+vi.mock('@/utils/utils/utils', () => ({
+  formatHour: vi.fn((date) => '8:00 PM'),
+  formattedDate: vi.fn((date) => 'Jan 15'),
+  formattedFullDate: vi.fn((date) => 'January 15, 2025'),
+  timeAgo: vi.fn(() => '2 hours ago'),
+}));
+
+// Mock ShowService
+vi.mock('@/services/ShowService', () => ({
+  acceptInvite: vi.fn().mockResolvedValue({ ok: true }),
+  declineInvite: vi.fn().mockResolvedValue({ ok: true }),
+  cancelInvite: vi.fn().mockResolvedValue({ ok: true }),
+  sendVenueMessage: vi.fn().mockResolvedValue({ ok: true }),
+  getEventUrl: vi.fn((venueId) => `https://micdrop.com/events/${venueId}`),
+}));
+
+describe('ShowItemCard', () => {
+  let ShowItemCard;
+  let showToast;
+  let goto;
+
+  const defaultProps = {
+    venueId: 1,
+    title: 'Comedy Night',
+    role: 'Headliner',
+    startDateTime: '2025-01-15T20:00:00Z',
+    doorsOpenTime: '2025-01-15T19:00:00Z',
+    spotDuration: 30,
+    venueName: 'The Comedy Store',
+    location: '8433 Sunset Blvd, Los Angeles, CA',
+    status: 'upcoming',
+    details: {
+      description: 'A great comedy night',
+      ticketPrice: 25,
+    },
+    id: 123,
+    invitationAccepted: true,
+    hasAvailability: true,
+    lastUpdated: '2025-01-10T12:00:00Z',
+    image: '/test-image.jpg',
+  };
+
+  beforeAll(async () => {
+    vi.resetModules();
+    const toasterModule = await import('../../../../stores/toaster');
+    showToast = toasterModule.showToast;
+    const navModule = await import('$app/navigation');
+    goto = navModule.goto;
+    ShowItemCard = (await import('./ShowItemCard.svelte')).default;
+  }, 60000);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Mock clipboard API
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: vi.fn().mockResolvedValue(undefined),
+      },
+    });
+    // Mock window.open
+    window.open = vi.fn();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('Helper Functions', () => {
+    // Test the getRoleVariant function logic
+    const getRoleVariant = (role) => role.toLowerCase().replace(/\s+/g, '-');
+
+    it('converts Headliner to lowercase', () => {
+      expect(getRoleVariant('Headliner')).toBe('headliner');
+    });
+
+    it('converts Feature to lowercase', () => {
+      expect(getRoleVariant('Feature')).toBe('feature');
+    });
+
+    it('converts Host to lowercase', () => {
+      expect(getRoleVariant('Host')).toBe('host');
+    });
+
+    it('converts Special Guest to hyphenated lowercase', () => {
+      expect(getRoleVariant('Special Guest')).toBe('special-guest');
+    });
+
+    it('handles multiple spaces', () => {
+      expect(getRoleVariant('Super  Special  Guest')).toBe('super-special-guest');
+    });
+
+    it('handles all caps', () => {
+      expect(getRoleVariant('HEADLINER')).toBe('headliner');
+    });
+  });
+
+  describe('Status Mapping', () => {
+    it('status 0 means pending invitation', () => {
+      expect(0).toBe(0);
+    });
+
+    it('status 1 means accepted', () => {
+      expect(1).toBe(1);
+    });
+
+    it('status 2 means declined', () => {
+      expect(2).toBe(2);
+    });
+  });
+
+  describe('Constants', () => {
+    const MIN_LOADING_TIME = 1000;
+
+    it('minimum loading time is 1000ms', () => {
+      expect(MIN_LOADING_TIME).toBe(1000);
+    });
+  });
+
+  describe('Basic Rendering', () => {
+    it('renders the show card', async () => {
+      const { container } = render(ShowItemCard, { props: defaultProps });
+      expect(container.querySelector('.rounded-lg')).toBeDefined();
+    });
+
+    it('displays show title', async () => {
+      const { container } = render(ShowItemCard, { props: defaultProps });
+      expect(container.innerHTML).toContain('Comedy Night');
+    });
+
+    it('displays venue name', async () => {
+      const { container } = render(ShowItemCard, { props: defaultProps });
+      expect(container.innerHTML).toContain('The Comedy Store');
+    });
+
+    it('displays date and time', async () => {
+      const { container } = render(ShowItemCard, { props: defaultProps });
+      expect(container.innerHTML).toContain('Jan 15');
+      expect(container.innerHTML).toContain('8:00 PM');
+    });
+
+    it('displays "No date yet" when no startDateTime', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, startDateTime: null },
+      });
+      expect(container.innerHTML).toContain('No date yet');
+    });
+  });
+
+  describe('Image Handling', () => {
+    it('uses full URL for http images', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, image: 'https://example.com/image.jpg' },
+      });
+
+      const img = container.querySelector('img');
+      expect(img?.src).toContain('https://example.com/image.jpg');
+    });
+
+    it('prepends CDN URL for relative paths', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, image: '/uploads/image.jpg' },
+      });
+
+      const img = container.querySelector('img');
+      expect(img?.src).toContain('moxy.sfo3.digitaloceanspaces.com');
+    });
+
+    it('uses placeholder when no image', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, image: null },
+      });
+
+      const img = container.querySelector('img');
+      expect(img?.src).toContain('placeholder');
+    });
+  });
+
+  describe('Status: Invitations', () => {
+    it('shows Confirm and Decline buttons for invitations', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, status: 'invitations' },
+      });
+
+      expect(container.innerHTML).toContain('Confirm');
+      expect(container.innerHTML).toContain('Decline');
+    });
+
+    it('triggers accept modal state on Confirm click', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, status: 'invitations' },
+      });
+
+      const buttons = container.querySelectorAll('button');
+      const confirmButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Confirm')
+      );
+
+      expect(confirmButton).toBeDefined();
+      if (confirmButton) {
+        await fireEvent.click(confirmButton);
+        // Modal state changes - component re-renders
+        expect(container).toBeDefined();
+      }
+    });
+
+    it('triggers decline modal state on Decline click', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, status: 'invitations' },
+      });
+
+      const buttons = container.querySelectorAll('button');
+      const declineButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Decline')
+      );
+
+      expect(declineButton).toBeDefined();
+      if (declineButton) {
+        await fireEvent.click(declineButton);
+        // Modal state changes - component re-renders
+        expect(container).toBeDefined();
+      }
+    });
+  });
+
+  describe('Status: Upcoming with Availability', () => {
+    it('shows Update button', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: true,
+          hasAvailability: true,
+        },
+      });
+
+      expect(container.innerHTML).toContain('Update');
+    });
+
+    it('shows last updated text', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: true,
+          hasAvailability: true,
+        },
+      });
+
+      expect(container.innerHTML).toContain('Last updated');
+    });
+
+    it('navigates to availability when Update clicked', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: true,
+          hasAvailability: true,
+        },
+      });
+
+      const buttons = container.querySelectorAll('button');
+      const updateButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Update')
+      );
+
+      if (updateButton) {
+        await fireEvent.click(updateButton);
+
+        await waitFor(() => {
+          expect(goto).toHaveBeenCalledWith('/availability/1');
+        });
+      }
+    });
+  });
+
+  describe('Status: Upcoming without Availability', () => {
+    it('shows Set up button when invitation accepted but no availability', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: true,
+          hasAvailability: false,
+        },
+      });
+
+      expect(container.innerHTML).toContain('Set up');
+    });
+
+    it('shows warning message', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: true,
+          hasAvailability: false,
+        },
+      });
+
+      expect(container.innerHTML).toContain('Please update your availability');
+    });
+  });
+
+  describe('Status: Upcoming without Invitation Accepted', () => {
+    it('shows Copy ticket link button', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: false,
+          hasAvailability: false,
+        },
+      });
+
+      expect(container.innerHTML).toContain('Copy ticket link');
+    });
+
+    it('shows Visit event page button', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: false,
+          hasAvailability: false,
+        },
+      });
+
+      expect(container.innerHTML).toContain('Visit event page');
+    });
+
+    it('opens event page in new tab', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: false,
+          hasAvailability: false,
+        },
+      });
+
+      const buttons = container.querySelectorAll('button');
+      const visitButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Visit event page')
+      );
+
+      if (visitButton) {
+        await fireEvent.click(visitButton);
+
+        await waitFor(() => {
+          expect(window.open).toHaveBeenCalledWith(
+            expect.stringContaining('micdrop.com/events'),
+            '_blank'
+          );
+        });
+      }
+    });
+  });
+
+  describe('View Details Toggle', () => {
+    it('shows View details button for non-upcoming status', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, status: 'past' },
+      });
+
+      expect(container.innerHTML).toContain('View details');
+    });
+
+    it('toggles details visibility on click', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, status: 'past' },
+      });
+
+      const buttons = container.querySelectorAll('button');
+      const detailsButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('View details')
+      );
+
+      if (detailsButton) {
+        await fireEvent.click(detailsButton);
+
+        await waitFor(() => {
+          expect(container.innerHTML).toContain('Close details');
+        });
+      }
+    });
+  });
+
+  describe('Status: Declined', () => {
+    it('shows View details for declined status', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, status: 'declined' },
+      });
+
+      expect(container.innerHTML).toContain('View details');
+    });
+
+    it('does not show Message button for declined status', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, status: 'declined' },
+      });
+
+      const buttons = container.querySelectorAll('button');
+      const messageButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Message')
+      );
+
+      expect(messageButton).toBeUndefined();
+    });
+  });
+
+  describe('Status: Past', () => {
+    it('shows View details for past status', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, status: 'past' },
+      });
+
+      expect(container.innerHTML).toContain('View details');
+    });
+
+    it('does not show Message button for past status', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, status: 'past' },
+      });
+
+      const buttons = container.querySelectorAll('button');
+      const messageButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Message')
+      );
+
+      expect(messageButton).toBeUndefined();
+    });
+  });
+
+  describe('Message Modal', () => {
+    it('has Message button for upcoming without invitation', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: false,
+          hasAvailability: false,
+        },
+      });
+
+      const buttons = container.querySelectorAll('button');
+      const messageButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Message')
+      );
+
+      expect(messageButton).toBeDefined();
+    });
+
+    it('triggers message modal state change on click', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: false,
+          hasAvailability: false,
+        },
+      });
+
+      const buttons = container.querySelectorAll('button');
+      const messageButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Message')
+      );
+
+      if (messageButton) {
+        await fireEvent.click(messageButton);
+        // Component re-renders with modal open state
+        expect(container).toBeDefined();
+      }
+    });
+  });
+
+  describe('Copy Ticket Link', () => {
+    it('copies link to clipboard', async () => {
+      vi.useFakeTimers();
+
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: false,
+          hasAvailability: false,
+        },
+      });
+
+      const buttons = container.querySelectorAll('button');
+      const copyButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Copy ticket link')
+      );
+
+      if (copyButton) {
+        await fireEvent.click(copyButton);
+
+        await waitFor(() => {
+          expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+            expect.stringContaining('micdrop.com/events')
+          );
+        });
+      }
+
+      vi.useRealTimers();
+    });
+  });
+
+  describe('Leave Venue', () => {
+    it('renders dropdown trigger for upcoming with availability', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: true,
+          hasAvailability: true,
+        },
+      });
+
+      // The dropdown trigger should be present (dots menu)
+      const dropdownTrigger = container.querySelector('[data-testid="dropdown-menu"]');
+      expect(dropdownTrigger).toBeDefined();
+    });
+
+    it('handles leave venue flow', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: true,
+          hasAvailability: true,
+        },
+      });
+
+      // The component renders with leave functionality available
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Props Handling', () => {
+    it('renders with minimal required props', async () => {
+      const minimalProps = {
+        venueId: 1,
+        title: 'Test Show',
+        status: 'upcoming',
+        venueName: 'Test Venue',
+        id: 1,
+        invitationAccepted: false,
+        hasAvailability: false,
+      };
+
+      const { container } = render(ShowItemCard, { props: minimalProps });
+      expect(container).toBeDefined();
+    });
+
+    it('handles undefined optional props', async () => {
+      const propsWithUndefined = {
+        venueId: 1,
+        title: 'Test Show',
+        status: 'upcoming',
+        venueName: 'Test Venue',
+        id: 1,
+        invitationAccepted: false,
+        hasAvailability: false,
+        image: undefined,
+        location: undefined,
+        details: undefined,
+      };
+
+      const { container } = render(ShowItemCard, { props: propsWithUndefined });
+      expect(container).toBeDefined();
+    });
+
+    it('handles null optional props', async () => {
+      const propsWithNull = {
+        venueId: 1,
+        title: 'Test Show',
+        status: 'upcoming',
+        venueName: 'Test Venue',
+        id: 1,
+        invitationAccepted: false,
+        hasAvailability: false,
+        image: null,
+        startDateTime: null,
+        doorsOpenTime: null,
+      };
+
+      const { container } = render(ShowItemCard, { props: propsWithNull });
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Dropdown Menu', () => {
+    it('renders dropdown trigger for upcoming with availability', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: true,
+          hasAvailability: true,
+        },
+      });
+
+      const dropdownTrigger = container.querySelector('[data-testid="dropdown-menu"]');
+      expect(dropdownTrigger).toBeDefined();
+    });
+
+    it('renders dropdown trigger for upcoming without availability', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: true,
+          hasAvailability: false,
+        },
+      });
+
+      const dropdownTrigger = container.querySelector('[data-testid="dropdown-menu"]');
+      expect(dropdownTrigger).toBeDefined();
+    });
+  });
+
+  describe('Modal Actions', () => {
+    it('has service imports available', async () => {
+      const { acceptInvite, declineInvite, sendVenueMessage, cancelInvite } = await import('../../../../services/ShowService');
+
+      expect(acceptInvite).toBeDefined();
+      expect(declineInvite).toBeDefined();
+      expect(sendVenueMessage).toBeDefined();
+      expect(cancelInvite).toBeDefined();
+    });
+
+    it('opens accept modal on Confirm click', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, status: 'invitations' },
+      });
+
+      // Find and click Confirm button
+      const buttons = container.querySelectorAll('button');
+      const confirmButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Confirm')
+      );
+
+      expect(confirmButton).toBeDefined();
+      if (confirmButton) {
+        await fireEvent.click(confirmButton);
+        // Modal opens but content may be in portal
+        expect(container).toBeDefined();
+      }
+    });
+
+    it('opens decline modal on Decline click', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, status: 'invitations' },
+      });
+
+      // Find and click Decline button
+      const buttons = container.querySelectorAll('button');
+      const declineButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Decline')
+      );
+
+      expect(declineButton).toBeDefined();
+      if (declineButton) {
+        await fireEvent.click(declineButton);
+        expect(container).toBeDefined();
+      }
+    });
+
+    it('opens message modal on Message click', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: false,
+          hasAvailability: false,
+        },
+      });
+
+      const buttons = container.querySelectorAll('button');
+      const messageButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Message')
+      );
+
+      expect(messageButton).toBeDefined();
+      if (messageButton) {
+        await fireEvent.click(messageButton);
+        expect(container).toBeDefined();
+      }
+    });
+  });
+
+  describe('Styling', () => {
+    it('has correct card container classes', async () => {
+      const { container } = render(ShowItemCard, { props: defaultProps });
+
+      const card = container.querySelector('.bg-bg-secondary');
+      expect(card).toBeDefined();
+    });
+
+    it('applies red styling when needs availability update', async () => {
+      const { container } = render(ShowItemCard, {
+        props: {
+          ...defaultProps,
+          status: 'upcoming',
+          invitationAccepted: true,
+          hasAvailability: false,
+        },
+      });
+
+      expect(container.innerHTML).toContain('red-50');
+    });
+  });
+
+  describe('Modal States', () => {
+    it('toggleModal function opens accept modal', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, status: 'invitations' },
+      });
+
+      // Open accept modal
+      const buttons = container.querySelectorAll('button');
+      const confirmButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Confirm')
+      );
+
+      expect(confirmButton).toBeDefined();
+      if (confirmButton) {
+        await fireEvent.click(confirmButton);
+        // Modal state should change - component re-renders
+        expect(container).toBeDefined();
+      }
+    });
+
+    it('toggleModal function opens decline modal', async () => {
+      const { container } = render(ShowItemCard, {
+        props: { ...defaultProps, status: 'invitations' },
+      });
+
+      // Open decline modal
+      const buttons = container.querySelectorAll('button');
+      const declineButton = Array.from(buttons).find(
+        (btn) => btn.textContent?.includes('Decline')
+      );
+
+      expect(declineButton).toBeDefined();
+      if (declineButton) {
+        await fireEvent.click(declineButton);
+        expect(container).toBeDefined();
+      }
+    });
+  });
+});