@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/calendar/ShowCard/ShowCard.spec.js

@@ -0,0 +1,714 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, waitFor } from '@testing-library/svelte';
+import ShowCard from './ShowCard.svelte';
+
+describe('ShowCard Component', () => {
+  const mockEvent = {
+    name: 'Rock Concert',
+    startDateTime: '2024-03-15T20:00:00',
+    endDateTime: '2024-03-15T23:00:00',
+    doorsOpenTime: '2024-03-15T19:00:00',
+    displayStartTime: true,
+    displayEndTime: true,
+    venue: {
+      name: 'The Music Hall',
+      address: '123 Main St, New York, NY 10001',
+      googleLocationNameCache: 'The Music Hall, New York'
+    },
+    ageRequirement: 21
+  };
+
+  const mockShowtimes = [
+    { day: 'Friday', date: '2024-03-15', time: '19:30:00' },
+    { day: 'Saturday', date: '2024-03-16', time: '20:00:00' },
+    { day: 'Sunday', date: '2024-03-17', time: '18:00:00' }
+  ];
+
+  beforeEach(() => {
+    // Mock window.location
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { href: 'https://example.com/event/123' }
+    });
+
+    // Mock clipboard API
+    Object.defineProperty(navigator, 'clipboard', {
+      writable: true,
+      value: {
+        writeText: vi.fn().mockResolvedValue(undefined)
+      }
+    });
+
+    // Mock share API
+    Object.defineProperty(navigator, 'share', {
+      writable: true,
+      value: undefined
+    });
+
+    Object.defineProperty(navigator, 'canShare', {
+      writable: true,
+      value: undefined
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+    vi.clearAllTimers();
+  });
+
+  describe('rendering', () => {
+    it('renders the component wrapper', () => {
+      const { container } = render(ShowCard, { props: { event: mockEvent } });
+      const wrapper = container.querySelector('.rounded-lg');
+      expect(wrapper).toBeInTheDocument();
+    });
+
+    it('renders event name when showTitle is true', () => {
+      render(ShowCard, { props: { event: mockEvent, showTitle: true } });
+      expect(screen.getByText('Rock Concert')).toBeInTheDocument();
+    });
+
+    it('does not render event name when showTitle is false', () => {
+      render(ShowCard, { props: { event: mockEvent, showTitle: false } });
+      expect(screen.queryByText('Rock Concert')).not.toBeInTheDocument();
+    });
+
+    it('renders with empty event object', () => {
+      const { container } = render(ShowCard, { props: { event: {} } });
+      expect(container.querySelector('.rounded-lg')).toBeInTheDocument();
+    });
+
+    it('renders without event prop', () => {
+      const { container } = render(ShowCard);
+      expect(container.querySelector('.rounded-lg')).toBeInTheDocument();
+    });
+  });
+
+  describe('date and time formatting', () => {
+    it('formats startDateTime correctly', () => {
+      const { container } = render(ShowCard, { props: { event: mockEvent } });
+      // Check that some part of the formatted date appears
+      expect(container.textContent).toMatch(/March|Mar/i);
+    });
+
+    it('displays doors open time when provided', () => {
+      render(ShowCard, {
+        props: {
+          event: {
+            ...mockEvent,
+            displayStartTime: true,
+            doorsOpenTime: '2024-03-15T19:00:00'
+          }
+        }
+      });
+      expect(screen.getByText(/Doors open/i)).toBeInTheDocument();
+    });
+
+    it('hides doors open time when displayStartTime is false', () => {
+      render(ShowCard, {
+        props: {
+          event: {
+            ...mockEvent,
+            displayStartTime: false,
+            doorsOpenTime: '2024-03-15T19:00:00'
+          }
+        }
+      });
+      expect(screen.queryByText(/Doors open/i)).not.toBeInTheDocument();
+    });
+
+    it('displays end time when provided', () => {
+      render(ShowCard, {
+        props: {
+          event: {
+            ...mockEvent,
+            displayEndTime: true,
+            endDateTime: '2024-03-15T23:00:00'
+          }
+        }
+      });
+      expect(screen.getByText(/Ends/i)).toBeInTheDocument();
+    });
+
+    it('hides end time when displayEndTime is false', () => {
+      render(ShowCard, {
+        props: {
+          event: {
+            ...mockEvent,
+            displayEndTime: false,
+            endDateTime: '2024-03-15T23:00:00'
+          }
+        }
+      });
+      expect(screen.queryByText(/Ends/i)).not.toBeInTheDocument();
+    });
+
+    it('handles invalid date gracefully', () => {
+      const { container } = render(ShowCard, {
+        props: { event: { startDateTime: 'invalid-date' } }
+      });
+      expect(container).toBeInTheDocument();
+    });
+
+    it('handles missing date', () => {
+      const { container } = render(ShowCard, {
+        props: { event: { startDateTime: null } }
+      });
+      expect(container).toBeInTheDocument();
+    });
+
+    it('uses custom formatDateTime function', () => {
+      const customFormat = vi.fn(() => 'Custom Date Format');
+      render(ShowCard, {
+        props: {
+          event: mockEvent,
+          formatDateTime: customFormat
+        }
+      });
+      expect(customFormat).toHaveBeenCalled();
+      expect(screen.getByText('Custom Date Format')).toBeInTheDocument();
+    });
+
+    it('uses custom formatTimeline function', () => {
+      const customFormat = vi.fn(() => 'Custom Time');
+      render(ShowCard, {
+        props: {
+          event: { ...mockEvent, displayStartTime: true },
+          formatTimeline: customFormat
+        }
+      });
+      expect(customFormat).toHaveBeenCalled();
+    });
+  });
+
+  describe('share functionality', () => {
+    it('renders share button when showTitle is true', () => {
+      render(ShowCard, { props: { event: mockEvent, showTitle: true } });
+      const shareButton = screen.getByLabelText('Share event');
+      expect(shareButton).toBeInTheDocument();
+    });
+
+    it('does not render share button when showTitle is false', () => {
+      render(ShowCard, { props: { event: mockEvent, showTitle: false } });
+      expect(screen.queryByLabelText('Share event')).not.toBeInTheDocument();
+    });
+
+    it('uses native share API when available', async () => {
+      const shareMock = vi.fn().mockResolvedValue(undefined);
+      const canShareMock = vi.fn().mockReturnValue(true);
+
+      Object.defineProperty(navigator, 'share', { value: shareMock });
+      Object.defineProperty(navigator, 'canShare', { value: canShareMock });
+
+      render(ShowCard, { props: { event: mockEvent, showTitle: true } });
+      const shareButton = screen.getByLabelText('Share event');
+
+      await fireEvent.click(shareButton);
+
+      expect(canShareMock).toHaveBeenCalledWith({
+        title: 'Rock Concert',
+        text: 'Check out Rock Concert at The Music Hall!',
+        url: 'https://example.com/event/123'
+      });
+      expect(shareMock).toHaveBeenCalled();
+    });
+
+    it('falls back to clipboard when share API not available', async () => {
+      render(ShowCard, { props: { event: mockEvent, showTitle: true } });
+      const shareButton = screen.getByLabelText('Share event');
+
+      await fireEvent.click(shareButton);
+
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('https://example.com/event/123');
+    });
+
+    it('shows success indicator after clipboard copy', async () => {
+      vi.useFakeTimers();
+
+      render(ShowCard, { props: { event: mockEvent, showTitle: true } });
+      const shareButton = screen.getByLabelText('Share event');
+
+      await fireEvent.click(shareButton);
+
+      // Should show check icon
+      await waitFor(() => {
+        const checkIcon = shareButton.querySelector('.text-green-600, .text-green-500');
+        expect(checkIcon).toBeInTheDocument();
+      });
+
+      // After 2 seconds, should revert to share icon
+      vi.advanceTimersByTime(2000);
+
+      await waitFor(() => {
+        const shareIcon = shareButton.querySelector('.text-gray-500, .text-gray-400');
+        expect(shareIcon).toBeInTheDocument();
+      });
+
+      vi.useRealTimers();
+    });
+
+    it('handles share API abort error gracefully', async () => {
+      const shareMock = vi.fn().mockRejectedValue({ name: 'AbortError' });
+      const canShareMock = vi.fn().mockReturnValue(true);
+
+      Object.defineProperty(navigator, 'share', { value: shareMock });
+      Object.defineProperty(navigator, 'canShare', { value: canShareMock });
+
+      render(ShowCard, { props: { event: mockEvent, showTitle: true } });
+      const shareButton = screen.getByLabelText('Share event');
+
+      await fireEvent.click(shareButton);
+
+      // AbortError should NOT fall back to clipboard (user cancelled)
+      expect(navigator.clipboard.writeText).not.toHaveBeenCalled();
+    });
+
+    it('handles share API error by falling back to clipboard', async () => {
+      const shareMock = vi.fn().mockRejectedValue(new Error('Share failed'));
+      const canShareMock = vi.fn().mockReturnValue(true);
+
+      Object.defineProperty(navigator, 'share', { value: shareMock });
+      Object.defineProperty(navigator, 'canShare', { value: canShareMock });
+
+      render(ShowCard, { props: { event: mockEvent, showTitle: true } });
+      const shareButton = screen.getByLabelText('Share event');
+
+      await fireEvent.click(shareButton);
+
+      // Should fall back to clipboard
+      expect(navigator.clipboard.writeText).toHaveBeenCalled();
+    });
+
+    it('handles clipboard error gracefully', async () => {
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      navigator.clipboard.writeText = vi.fn().mockRejectedValue(new Error('Clipboard failed'));
+
+      render(ShowCard, { props: { event: mockEvent, showTitle: true } });
+      const shareButton = screen.getByLabelText('Share event');
+
+      await fireEvent.click(shareButton);
+
+      await waitFor(() => {
+        expect(consoleErrorSpy).toHaveBeenCalled();
+      });
+
+      consoleErrorSpy.mockRestore();
+    });
+
+    it('handles missing venue name in share text', async () => {
+      const eventWithoutVenue = { ...mockEvent, venue: null };
+
+      render(ShowCard, { props: { event: eventWithoutVenue, showTitle: true } });
+      const shareButton = screen.getByLabelText('Share event');
+
+      await fireEvent.click(shareButton);
+
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('https://example.com/event/123');
+    });
+  });
+
+  describe('showtimes section', () => {
+    it('renders showtimes when multiple are provided', () => {
+      render(ShowCard, { props: { event: mockEvent, showtimes: mockShowtimes } });
+      expect(screen.getByText('More showtimes')).toBeInTheDocument();
+    });
+
+    it('does not render showtimes section with single showtime', () => {
+      render(ShowCard, { props: { event: mockEvent, showtimes: [mockShowtimes[0]] } });
+      expect(screen.queryByText('More showtimes')).not.toBeInTheDocument();
+    });
+
+    it('does not render showtimes section with empty array', () => {
+      render(ShowCard, { props: { event: mockEvent, showtimes: [] } });
+      expect(screen.queryByText('More showtimes')).not.toBeInTheDocument();
+    });
+
+    it('renders all showtimes', () => {
+      render(ShowCard, { props: { event: mockEvent, showtimes: mockShowtimes } });
+      expect(screen.getByText('Friday')).toBeInTheDocument();
+      expect(screen.getByText('Saturday')).toBeInTheDocument();
+      expect(screen.getByText('Sunday')).toBeInTheDocument();
+    });
+
+    it('calls onShowtimeSelect when showtime is clicked', async () => {
+      const onShowtimeSelect = vi.fn();
+      render(ShowCard, {
+        props: {
+          event: mockEvent,
+          showtimes: mockShowtimes,
+          onShowtimeSelect
+        }
+      });
+
+      // Find all buttons (share button + showtime buttons)
+      const buttons = screen.getAllByRole('button');
+      // First button is share, rest are showtimes
+      const showtimeButton = buttons[1];
+
+      await fireEvent.click(showtimeButton);
+
+      expect(onShowtimeSelect).toHaveBeenCalled();
+      expect(onShowtimeSelect.mock.calls[0][0]).toHaveProperty('date');
+    });
+
+    it('updates selected date when showtime is clicked', async () => {
+      render(ShowCard, {
+        props: {
+          event: mockEvent,
+          showtimes: mockShowtimes
+        }
+      });
+
+      const buttons = screen.getAllByRole('button');
+      const firstShowtime = buttons[1];
+
+      await fireEvent.click(firstShowtime);
+
+      // Selected state should be reflected in aria-pressed
+      expect(firstShowtime).toHaveAttribute('aria-pressed', 'true');
+    });
+
+    it('does not throw when onShowtimeSelect is not provided', async () => {
+      render(ShowCard, {
+        props: {
+          event: mockEvent,
+          showtimes: mockShowtimes
+        }
+      });
+
+      const buttons = screen.getAllByRole('button');
+      const showtimeButton = buttons[1];
+
+      await expect(fireEvent.click(showtimeButton)).resolves.not.toThrow();
+    });
+  });
+
+  describe('venue section', () => {
+    it('renders venue name and address', () => {
+      render(ShowCard, { props: { event: mockEvent } });
+      expect(screen.getByText('The Music Hall')).toBeInTheDocument();
+      expect(screen.getByText('123 Main St, New York, NY 10001')).toBeInTheDocument();
+    });
+
+    it('does not render venue section when venue is missing', () => {
+      const eventWithoutVenue = { ...mockEvent, venue: null };
+      render(ShowCard, { props: { event: eventWithoutVenue } });
+      expect(screen.queryByText('The Music Hall')).not.toBeInTheDocument();
+    });
+
+    it('renders Google Maps link with correct URL', () => {
+      render(ShowCard, { props: { event: mockEvent } });
+      const link = screen.getByText('The Music Hall').closest('a');
+      expect(link).toHaveAttribute('href', expect.stringContaining('google.com/maps'));
+      expect(link).toHaveAttribute('href', expect.stringContaining('The%20Music%20Hall%2C%20New%20York'));
+      expect(link).toHaveAttribute('target', '_blank');
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+
+    it('falls back to address in Google Maps URL when googleLocationNameCache is missing', () => {
+      const eventWithoutCache = {
+        ...mockEvent,
+        venue: {
+          name: 'The Music Hall',
+          address: '123 Main St, New York, NY 10001'
+        }
+      };
+      render(ShowCard, { props: { event: eventWithoutCache } });
+      const link = screen.getByText('The Music Hall').closest('a');
+      expect(link).toHaveAttribute('href', expect.stringContaining('123%20Main%20St'));
+    });
+
+    it('falls back to venue name in Google Maps URL when address is missing', () => {
+      const eventWithoutAddress = {
+        ...mockEvent,
+        venue: {
+          name: 'The Music Hall'
+        }
+      };
+      render(ShowCard, { props: { event: eventWithoutAddress } });
+      const link = screen.getByText('The Music Hall').closest('a');
+      expect(link).toHaveAttribute('href', expect.stringContaining('The%20Music%20Hall'));
+    });
+
+    it('handles missing address gracefully', () => {
+      const eventWithoutAddress = {
+        ...mockEvent,
+        venue: {
+          name: 'The Music Hall',
+          googleLocationNameCache: 'The Music Hall, New York'
+        }
+      };
+      render(ShowCard, { props: { event: eventWithoutAddress } });
+      expect(screen.getByText('The Music Hall')).toBeInTheDocument();
+    });
+  });
+
+  describe('age restrictions', () => {
+    it('displays age requirement when provided', () => {
+      render(ShowCard, { props: { event: { ...mockEvent, ageRequirement: 21 } } });
+      expect(screen.getByText('21+')).toBeInTheDocument();
+    });
+
+    it('displays "All ages" for ageRequirement 0', () => {
+      const event = { ...mockEvent, hasAgeRestriction: true, ageRequirement: 0 };
+      render(ShowCard, { props: { event } });
+      expect(screen.getByText('All ages')).toBeInTheDocument();
+    });
+
+    it('displays "All ages" for ageRequirement 1', () => {
+      const event = { ...mockEvent, hasAgeRestriction: true, ageRequirement: 1 };
+      render(ShowCard, { props: { event } });
+      expect(screen.getByText('All ages')).toBeInTheDocument();
+    });
+
+    it('displays minimum age when ageRequirement not set', () => {
+      const event = { ...mockEvent, ageRequirement: null, minimumAge: 18 };
+      render(ShowCard, { props: { event } });
+      expect(screen.getByText('18+')).toBeInTheDocument();
+    });
+
+    it('displays "All ages" for minimumAge 1', () => {
+      const event = { ...mockEvent, hasAgeRestriction: true, ageRequirement: null, minimumAge: 1 };
+      render(ShowCard, { props: { event } });
+      expect(screen.getByText('All ages')).toBeInTheDocument();
+    });
+
+    it('falls back to ageRestriction when others not set', () => {
+      const event = {
+        ...mockEvent,
+        hasAgeRestriction: true,
+        ageRequirement: null,
+        minimumAge: null,
+        ageRestriction: 16
+      };
+      render(ShowCard, { props: { event } });
+      expect(screen.getByText('16+')).toBeInTheDocument();
+    });
+
+    it('displays "All ages" for ageRestriction 1', () => {
+      const event = {
+        ...mockEvent,
+        hasAgeRestriction: true,
+        ageRequirement: null,
+        minimumAge: null,
+        ageRestriction: 1
+      };
+      render(ShowCard, { props: { event } });
+      expect(screen.getByText('All ages')).toBeInTheDocument();
+    });
+
+    it('does not display age info when no age fields present', () => {
+      const eventWithoutAge = {
+        ...mockEvent,
+        hasAgeRestriction: false,
+        ageRequirement: null,
+        minimumAge: null,
+        ageRestriction: null
+      };
+      render(ShowCard, { props: { event: eventWithoutAge } });
+      expect(screen.queryByText(/\d+\+|All ages/)).not.toBeInTheDocument();
+    });
+
+    it('displays age info when hasAgeRestriction is true', () => {
+      const event = {
+        ...mockEvent,
+        hasAgeRestriction: true,
+        ageRequirement: 18
+      };
+      render(ShowCard, { props: { event } });
+      expect(screen.getByText('18+')).toBeInTheDocument();
+    });
+
+    it('prefers ageRequirement over minimumAge', () => {
+      const event = {
+        ...mockEvent,
+        ageRequirement: 21,
+        minimumAge: 18
+      };
+      render(ShowCard, { props: { event } });
+      expect(screen.getByText('21+')).toBeInTheDocument();
+      expect(screen.queryByText('18+')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('has proper heading hierarchy', () => {
+      render(ShowCard, { props: { event: mockEvent, showTitle: true } });
+      const heading = screen.getByRole('heading', { level: 2 });
+      expect(heading).toHaveTextContent('Rock Concert');
+    });
+
+    it('share button has aria-label', () => {
+      render(ShowCard, { props: { event: mockEvent, showTitle: true } });
+      const shareButton = screen.getByLabelText('Share event');
+      expect(shareButton).toBeInTheDocument();
+    });
+
+    it('venue link is keyboard accessible', () => {
+      render(ShowCard, { props: { event: mockEvent } });
+      const link = screen.getByText('The Music Hall').closest('a');
+      expect(link).toBeInTheDocument();
+      expect(link.tagName).toBe('A');
+    });
+  });
+
+  describe('styling', () => {
+    it('has correct base classes', () => {
+      const { container } = render(ShowCard, { props: { event: mockEvent } });
+      const wrapper = container.querySelector('.rounded-lg');
+      expect(wrapper).toHaveClass('h-fit', 'rounded-lg', 'py-4');
+    });
+
+    it('has dark mode support', () => {
+      const { container } = render(ShowCard, { props: { event: mockEvent } });
+      const wrapper = container.querySelector('.rounded-lg');
+      expect(wrapper.className).toContain('dark:bg-gray-800');
+    });
+
+    it('has border on medium screens and up', () => {
+      const { container } = render(ShowCard, { props: { event: mockEvent } });
+      const wrapper = container.querySelector('.rounded-lg');
+      expect(wrapper.className).toContain('md:border');
+    });
+
+    it('applies hover styles to share button', () => {
+      const { container } = render(ShowCard, { props: { event: mockEvent, showTitle: true } });
+      const shareButton = screen.getByLabelText('Share event');
+      expect(shareButton.className).toContain('hover:bg-gray-100');
+      expect(shareButton.className).toContain('dark:hover:bg-gray-700');
+    });
+
+    it('applies hover styles to venue link', () => {
+      const { container } = render(ShowCard, { props: { event: mockEvent } });
+      const venueName = screen.getByText('The Music Hall');
+      expect(venueName.className).toContain('group-hover:text-blue-700');
+      expect(venueName.className).toContain('dark:group-hover:text-blue-500');
+    });
+
+    it('has border between sections', () => {
+      const { container } = render(ShowCard, {
+        props: {
+          event: mockEvent,
+          showtimes: mockShowtimes
+        }
+      });
+      const borders = container.querySelectorAll('.border-t');
+      expect(borders.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles undefined props gracefully', () => {
+      const { container } = render(ShowCard);
+      expect(container.querySelector('.rounded-lg')).toBeInTheDocument();
+    });
+
+    it('handles null showtimes', () => {
+      const { container } = render(ShowCard, {
+        props: { event: mockEvent, showtimes: null }
+      });
+      expect(container.querySelector('.rounded-lg')).toBeInTheDocument();
+      expect(screen.queryByText('More showtimes')).not.toBeInTheDocument();
+    });
+
+    it('handles event with only name', () => {
+      render(ShowCard, { props: { event: { name: 'Simple Event' }, showTitle: true } });
+      expect(screen.getByText('Simple Event')).toBeInTheDocument();
+    });
+
+    it('handles missing venue properties', () => {
+      const event = {
+        ...mockEvent,
+        venue: { name: 'Minimal Venue' }
+      };
+      render(ShowCard, { props: { event } });
+      expect(screen.getByText('Minimal Venue')).toBeInTheDocument();
+    });
+
+    it('handles SSR environment without window', () => {
+      const originalWindow = global.window;
+      // @ts-ignore
+      delete global.window;
+
+      const { container } = render(ShowCard, { props: { event: mockEvent } });
+      expect(container.querySelector('.rounded-lg')).toBeInTheDocument();
+
+      global.window = originalWindow;
+    });
+
+    it('handles SSR environment without navigator', () => {
+      const originalNavigator = global.navigator;
+      // @ts-ignore
+      delete global.navigator;
+
+      const { container } = render(ShowCard, { props: { event: mockEvent, showTitle: true } });
+      expect(container.querySelector('.rounded-lg')).toBeInTheDocument();
+
+      global.navigator = originalNavigator;
+    });
+  });
+
+  describe('integration', () => {
+    it('renders complete event card with all sections', () => {
+      render(ShowCard, {
+        props: {
+          event: mockEvent,
+          showtimes: mockShowtimes,
+          showTitle: true
+        }
+      });
+
+      // Title
+      expect(screen.getByText('Rock Concert')).toBeInTheDocument();
+
+      // Share button
+      expect(screen.getByLabelText('Share event')).toBeInTheDocument();
+
+      // Showtimes
+      expect(screen.getByText('More showtimes')).toBeInTheDocument();
+
+      // Venue
+      expect(screen.getByText('The Music Hall')).toBeInTheDocument();
+
+      // Age restriction
+      expect(screen.getByText('21+')).toBeInTheDocument();
+    });
+
+    it('handles complex user interaction flow', async () => {
+      vi.useFakeTimers();
+      const onShowtimeSelect = vi.fn();
+
+      render(ShowCard, {
+        props: {
+          event: mockEvent,
+          showtimes: mockShowtimes,
+          showTitle: true,
+          onShowtimeSelect
+        }
+      });
+
+      // Click share button
+      const shareButton = screen.getByLabelText('Share event');
+      await fireEvent.click(shareButton);
+      expect(navigator.clipboard.writeText).toHaveBeenCalled();
+
+      // Wait for success indicator
+      await waitFor(() => {
+        const checkIcon = shareButton.querySelector('.text-green-600, .text-green-500');
+        expect(checkIcon).toBeInTheDocument();
+      });
+
+      // Select a showtime
+      const buttons = screen.getAllByRole('button');
+      await fireEvent.click(buttons[1]);
+      expect(onShowtimeSelect).toHaveBeenCalled();
+
+      // Click venue link (verify it's interactive)
+      const venueLink = screen.getByText('The Music Hall').closest('a');
+      expect(venueLink).toHaveAttribute('href');
+
+      vi.useRealTimers();
+    });
+  });
+});