@getmicdrop/svelte-components 2.0.4 → 2.0.6

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

@@ -1,166 +1,166 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import ShowDetails from './ShowDetails.svelte';
-
-describe('ShowDetails', () => {
-  const defaultProps = {
-    status: 'upcoming',
-    showFullDate: 'January 15, 2024',
-    formattedDoorsOpenTime: '6:00 PM',
-    formattedStartTime: '7:00 PM',
-    venue: { name: 'Test Venue' },
-    stageName: 'Main Stage',
-    setLength: '15 min',
-    eventDetails: 'Please arrive early',
-    role: 'performer',
-    onToggleModal: vi.fn(),
-  };
-
-  describe('rendering', () => {
-    it('renders showtime section', () => {
-      render(ShowDetails, { props: defaultProps });
-      expect(screen.getByText('Showtime')).toBeInTheDocument();
-    });
-
-    it('displays doors open time', () => {
-      render(ShowDetails, { props: defaultProps });
-      expect(screen.getByText('Doors: 6:00 PM')).toBeInTheDocument();
-    });
-
-    it('displays show start time', () => {
-      render(ShowDetails, { props: defaultProps });
-      expect(screen.getByText('Show: 7:00 PM')).toBeInTheDocument();
-    });
-
-    it('renders stage section', () => {
-      render(ShowDetails, { props: defaultProps });
-      expect(screen.getByText('Stage')).toBeInTheDocument();
-    });
-
-    it('displays stage name', () => {
-      render(ShowDetails, { props: defaultProps });
-      expect(screen.getByText('Main Stage')).toBeInTheDocument();
-    });
-
-    it('displays default stage name when none provided', () => {
-      render(ShowDetails, {
-        props: { ...defaultProps, stageName: '' },
-      });
-      expect(screen.getByText('Main Stage')).toBeInTheDocument();
-    });
-  });
-
-  describe('set length', () => {
-    it('displays set length when provided', () => {
-      render(ShowDetails, { props: defaultProps });
-      expect(screen.getByText('Set length')).toBeInTheDocument();
-      expect(screen.getByText('15 min')).toBeInTheDocument();
-    });
-
-    it('does not show set length section when length is 0', () => {
-      render(ShowDetails, {
-        props: { ...defaultProps, setLength: '0 min' },
-      });
-      expect(screen.queryByText('Set length')).toBeNull();
-    });
-
-    it('does not show set length section when not provided', () => {
-      render(ShowDetails, {
-        props: { ...defaultProps, setLength: null },
-      });
-      expect(screen.queryByText('Set length')).toBeNull();
-    });
-  });
-
-  describe('host role', () => {
-    it('shows hosting spot badge for host role', () => {
-      render(ShowDetails, {
-        props: { ...defaultProps, role: 'Host' },
-      });
-      expect(screen.getByText('Hosting spot')).toBeInTheDocument();
-    });
-
-    it('shows hosting spot badge for lowercase host', () => {
-      render(ShowDetails, {
-        props: { ...defaultProps, role: 'host' },
-      });
-      expect(screen.getByText('Hosting spot')).toBeInTheDocument();
-    });
-
-    it('does not show hosting badge for performer role', () => {
-      render(ShowDetails, {
-        props: { ...defaultProps, role: 'performer' },
-      });
-      expect(screen.queryByText('Hosting spot')).toBeNull();
-    });
-  });
-
-  describe('event details', () => {
-    it('displays event details when provided', () => {
-      render(ShowDetails, { props: defaultProps });
-      expect(screen.getByText('Note from venue')).toBeInTheDocument();
-      expect(screen.getByText('Please arrive early')).toBeInTheDocument();
-    });
-
-    it('does not show event details when empty', () => {
-      render(ShowDetails, {
-        props: { ...defaultProps, eventDetails: '' },
-      });
-      expect(screen.queryByText('Note from venue')).toBeNull();
-    });
-
-    it('does not show default no details message', () => {
-      render(ShowDetails, {
-        props: { ...defaultProps, eventDetails: 'No additional details available.' },
-      });
-      expect(screen.queryByText('Note from venue')).toBeNull();
-    });
-  });
-
-  describe('cancel booking button', () => {
-    it('shows cancel button for upcoming shows', () => {
-      render(ShowDetails, { props: defaultProps });
-      expect(screen.getByText('Cancel booking')).toBeInTheDocument();
-    });
-
-    it('does not show cancel button for past shows', () => {
-      render(ShowDetails, {
-        props: { ...defaultProps, status: 'past' },
-      });
-      expect(screen.queryByText('Cancel booking')).toBeNull();
-    });
-
-    it('calls onToggleModal when cancel is clicked', async () => {
-      const onToggleModal = vi.fn();
-      render(ShowDetails, {
-        props: { ...defaultProps, onToggleModal },
-      });
-
-      await fireEvent.click(screen.getByText('Cancel booking'));
-      expect(onToggleModal).toHaveBeenCalledWith('cancelation', true);
-    });
-  });
-
-  describe('grid layout', () => {
-    it('shows bottom row when has set length', () => {
-      const { container } = render(ShowDetails, { props: defaultProps });
-      // Grid has: Showtime, Stage, Set length sections + event details section
-      expect(container.querySelectorAll('.bg-bg-tertiary').length).toBeGreaterThan(2);
-    });
-
-    it('shows bottom row when is host', () => {
-      render(ShowDetails, {
-        props: { ...defaultProps, setLength: '0 min', role: 'Host' },
-      });
-      expect(screen.getByText('Hosting spot')).toBeInTheDocument();
-    });
-
-    it('hides bottom row when no set length and not host', () => {
-      const { container } = render(ShowDetails, {
-        props: { ...defaultProps, setLength: '0 min', role: 'performer', eventDetails: '' },
-      });
-      // Only 2 sections in top row: Showtime and Stage (no event details or set length)
-      expect(container.querySelectorAll('.bg-bg-tertiary').length).toBe(2);
-    });
-  });
-});
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import ShowDetails from './ShowDetails.svelte';
+
+describe('ShowDetails', () => {
+  const defaultProps = {
+    status: 'upcoming',
+    showFullDate: 'January 15, 2024',
+    formattedDoorsOpenTime: '6:00 PM',
+    formattedStartTime: '7:00 PM',
+    venue: { name: 'Test Venue' },
+    stageName: 'Main Stage',
+    setLength: '15 min',
+    eventDetails: 'Please arrive early',
+    role: 'performer',
+    onToggleModal: vi.fn(),
+  };
+
+  describe('rendering', () => {
+    it('renders showtime section', () => {
+      render(ShowDetails, { props: defaultProps });
+      expect(screen.getByText('Showtime')).toBeInTheDocument();
+    });
+
+    it('displays doors open time', () => {
+      render(ShowDetails, { props: defaultProps });
+      expect(screen.getByText('Doors: 6:00 PM')).toBeInTheDocument();
+    });
+
+    it('displays show start time', () => {
+      render(ShowDetails, { props: defaultProps });
+      expect(screen.getByText('Show: 7:00 PM')).toBeInTheDocument();
+    });
+
+    it('renders stage section', () => {
+      render(ShowDetails, { props: defaultProps });
+      expect(screen.getByText('Stage')).toBeInTheDocument();
+    });
+
+    it('displays stage name', () => {
+      render(ShowDetails, { props: defaultProps });
+      expect(screen.getByText('Main Stage')).toBeInTheDocument();
+    });
+
+    it('displays default stage name when none provided', () => {
+      render(ShowDetails, {
+        props: { ...defaultProps, stageName: '' },
+      });
+      expect(screen.getByText('Main Stage')).toBeInTheDocument();
+    });
+  });
+
+  describe('set length', () => {
+    it('displays set length when provided', () => {
+      render(ShowDetails, { props: defaultProps });
+      expect(screen.getByText('Set length')).toBeInTheDocument();
+      expect(screen.getByText('15 min')).toBeInTheDocument();
+    });
+
+    it('does not show set length section when length is 0', () => {
+      render(ShowDetails, {
+        props: { ...defaultProps, setLength: '0 min' },
+      });
+      expect(screen.queryByText('Set length')).toBeNull();
+    });
+
+    it('does not show set length section when not provided', () => {
+      render(ShowDetails, {
+        props: { ...defaultProps, setLength: null },
+      });
+      expect(screen.queryByText('Set length')).toBeNull();
+    });
+  });
+
+  describe('host role', () => {
+    it('shows hosting spot badge for host role', () => {
+      render(ShowDetails, {
+        props: { ...defaultProps, role: 'Host' },
+      });
+      expect(screen.getByText('Hosting spot')).toBeInTheDocument();
+    });
+
+    it('shows hosting spot badge for lowercase host', () => {
+      render(ShowDetails, {
+        props: { ...defaultProps, role: 'host' },
+      });
+      expect(screen.getByText('Hosting spot')).toBeInTheDocument();
+    });
+
+    it('does not show hosting badge for performer role', () => {
+      render(ShowDetails, {
+        props: { ...defaultProps, role: 'performer' },
+      });
+      expect(screen.queryByText('Hosting spot')).toBeNull();
+    });
+  });
+
+  describe('event details', () => {
+    it('displays event details when provided', () => {
+      render(ShowDetails, { props: defaultProps });
+      expect(screen.getByText('Note from venue')).toBeInTheDocument();
+      expect(screen.getByText('Please arrive early')).toBeInTheDocument();
+    });
+
+    it('does not show event details when empty', () => {
+      render(ShowDetails, {
+        props: { ...defaultProps, eventDetails: '' },
+      });
+      expect(screen.queryByText('Note from venue')).toBeNull();
+    });
+
+    it('does not show default no details message', () => {
+      render(ShowDetails, {
+        props: { ...defaultProps, eventDetails: 'No additional details available.' },
+      });
+      expect(screen.queryByText('Note from venue')).toBeNull();
+    });
+  });
+
+  describe('cancel booking button', () => {
+    it('shows cancel button for upcoming shows', () => {
+      render(ShowDetails, { props: defaultProps });
+      expect(screen.getByText('Cancel booking')).toBeInTheDocument();
+    });
+
+    it('does not show cancel button for past shows', () => {
+      render(ShowDetails, {
+        props: { ...defaultProps, status: 'past' },
+      });
+      expect(screen.queryByText('Cancel booking')).toBeNull();
+    });
+
+    it('calls onToggleModal when cancel is clicked', async () => {
+      const onToggleModal = vi.fn();
+      render(ShowDetails, {
+        props: { ...defaultProps, onToggleModal },
+      });
+
+      await fireEvent.click(screen.getByText('Cancel booking'));
+      expect(onToggleModal).toHaveBeenCalledWith('cancelation', true);
+    });
+  });
+
+  describe('grid layout', () => {
+    it('shows bottom row when has set length', () => {
+      const { container } = render(ShowDetails, { props: defaultProps });
+      // Grid has: Showtime, Stage, Set length sections + event details section
+      expect(container.querySelectorAll('.bg-bg-tertiary').length).toBeGreaterThan(2);
+    });
+
+    it('shows bottom row when is host', () => {
+      render(ShowDetails, {
+        props: { ...defaultProps, setLength: '0 min', role: 'Host' },
+      });
+      expect(screen.getByText('Hosting spot')).toBeInTheDocument();
+    });
+
+    it('hides bottom row when no set length and not host', () => {
+      const { container } = render(ShowDetails, {
+        props: { ...defaultProps, setLength: '0 min', role: 'performer', eventDetails: '' },
+      });
+      // Only 2 sections in top row: Showtime and Stage (no event details or set length)
+      expect(container.querySelectorAll('.bg-bg-tertiary').length).toBe(2);
+    });
+  });
+});