@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/calendar/PublicCard/PublicCard.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PublicCard.spec.d.ts.map

package/dist/calendar/PublicCard/PublicCard.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PublicCard.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/PublicCard/PublicCard.spec.js"],"names":[],"mappings":""}

package/dist/calendar/PublicCard/PublicCard.spec.js

@@ -0,0 +1,301 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/svelte';
+import PublicCard from './PublicCard.svelte';
+
+describe('PublicCard Component', () => {
+  const mockEvent = {
+    name: 'Test Event',
+    date: '2024-03-15',
+    status: 'On Sale',
+    image: 'https://example.com/image.jpg',
+    timeline: '8:00 PM - 11:00 PM',
+    description: 'This is a test event description',
+    doorsTimeline: 'Doors at 7:00 PM',
+  };
+
+  beforeEach(() => {
+    // Mock window.innerWidth
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1024,
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders event name', () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    it('renders nothing when events array is empty', () => {
+      const { container } = render(PublicCard, { props: { events: [] } });
+      expect(container.querySelector('article')).not.toBeInTheDocument();
+    });
+
+    it('renders multiple events', () => {
+      const events = [
+        { name: 'Event 1', date: '2024-03-15' },
+        { name: 'Event 2', date: '2024-03-16' },
+      ];
+      render(PublicCard, { props: { events } });
+      expect(screen.getByText('Event 1')).toBeInTheDocument();
+      expect(screen.getByText('Event 2')).toBeInTheDocument();
+    });
+
+    it('renders event image', () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      const img = screen.getByAltText('Test Event');
+      expect(img).toHaveAttribute('src', 'https://example.com/image.jpg');
+    });
+
+    it('uses placeholder when no image provided', () => {
+      const eventWithoutImage = { ...mockEvent, image: null };
+      render(PublicCard, { props: { events: [eventWithoutImage] } });
+      const img = screen.getByAltText('Test Event');
+      expect(img.src).toContain('data:image/svg+xml');
+    });
+
+    it('uses custom placeholder image', () => {
+      const eventWithoutImage = { ...mockEvent, image: null };
+      render(PublicCard, {
+        props: {
+          events: [eventWithoutImage],
+          placeholderImage: 'https://custom-placeholder.jpg'
+        }
+      });
+      const img = screen.getByAltText('Test Event');
+      expect(img).toHaveAttribute('src', 'https://custom-placeholder.jpg');
+    });
+  });
+
+  describe('date formatting', () => {
+    it('formats date correctly', () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      // Date may vary by timezone
+      const button = screen.getByRole('button');
+      expect(button.textContent).toMatch(/Mar/);
+    });
+
+    it('handles missing date', () => {
+      const eventWithoutDate = { ...mockEvent, date: null };
+      render(PublicCard, { props: { events: [eventWithoutDate] } });
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    it('displays timeline start time', () => {
+      const { container } = render(PublicCard, { props: { events: [mockEvent] } });
+      // Time is rendered within nested spans - check article contains it
+      const article = container.querySelector('article');
+      expect(article.textContent).toContain('8:00 PM');
+    });
+  });
+
+  describe('status badges', () => {
+    it('shows Sold out badge', () => {
+      const soldOutEvent = { ...mockEvent, status: 'Sold out' };
+      render(PublicCard, { props: { events: [soldOutEvent] } });
+      expect(screen.getByText('Sold out')).toBeInTheDocument();
+    });
+
+    it('shows Selling fast badge', () => {
+      const sellingFastEvent = { ...mockEvent, status: 'Selling fast' };
+      render(PublicCard, { props: { events: [sellingFastEvent] } });
+      expect(screen.getByText('Selling fast')).toBeInTheDocument();
+    });
+
+    it('shows Almost sold out badge', () => {
+      const almostSoldOutEvent = { ...mockEvent, status: 'Almost sold out' };
+      render(PublicCard, { props: { events: [almostSoldOutEvent] } });
+      expect(screen.getByText('Almost sold out')).toBeInTheDocument();
+    });
+
+    it('does not show badge for On Sale status', () => {
+      const onSaleEvent = { ...mockEvent, status: 'On Sale' };
+      render(PublicCard, { props: { events: [onSaleEvent] } });
+      // On Sale should not show as a badge
+      expect(screen.queryByText('On Sale')).not.toBeInTheDocument();
+    });
+
+    it('applies correct class for Sold out', () => {
+      const soldOutEvent = { ...mockEvent, status: 'Sold out' };
+      render(PublicCard, { props: { events: [soldOutEvent] } });
+      const badge = screen.getByText('Sold out');
+      expect(badge.className).toContain('bg-red-100');
+    });
+
+    it('applies correct class for Selling fast', () => {
+      const sellingFastEvent = { ...mockEvent, status: 'Selling fast' };
+      render(PublicCard, { props: { events: [sellingFastEvent] } });
+      const badge = screen.getByText('Selling fast');
+      expect(badge.className).toContain('bg-yellow-100');
+    });
+  });
+
+  describe('view modes', () => {
+    it('uses row view by default', () => {
+      const { container } = render(PublicCard, { props: { events: [mockEvent] } });
+      const article = container.querySelector('article');
+      expect(article.className).toContain('grid');
+    });
+
+    it('applies col view classes', () => {
+      const { container } = render(PublicCard, {
+        props: { events: [mockEvent], view: 'col' }
+      });
+      const article = container.querySelector('article');
+      expect(article.className).toContain('flex-col');
+    });
+
+    it('shows description in row view', () => {
+      render(PublicCard, { props: { events: [mockEvent], view: 'row' } });
+      expect(screen.getByText('This is a test event description')).toBeInTheDocument();
+    });
+
+    it('hides description in col view', () => {
+      render(PublicCard, { props: { events: [mockEvent], view: 'col' } });
+      expect(screen.queryByText('This is a test event description')).not.toBeInTheDocument();
+    });
+
+    it('shows doors timeline in row view', () => {
+      render(PublicCard, { props: { events: [mockEvent], view: 'row' } });
+      expect(screen.getByText('Doors at 7:00 PM')).toBeInTheDocument();
+    });
+
+    it('hides doors timeline in col view', () => {
+      render(PublicCard, { props: { events: [mockEvent], view: 'col' } });
+      expect(screen.queryByText('Doors at 7:00 PM')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('click handling', () => {
+    it('calls onEventClick when clicked', async () => {
+      const onEventClick = vi.fn();
+      render(PublicCard, {
+        props: { events: [mockEvent], onEventClick }
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.click(button);
+
+      expect(onEventClick).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it('does not throw when onEventClick is not provided', async () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      const button = screen.getByRole('button');
+
+      await expect(fireEvent.click(button)).resolves.not.toThrow();
+    });
+  });
+
+  describe('keyboard handling', () => {
+    it('calls onEventClick when Enter is pressed', async () => {
+      const onEventClick = vi.fn();
+      render(PublicCard, {
+        props: { events: [mockEvent], onEventClick }
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.keyDown(button, { key: 'Enter' });
+
+      expect(onEventClick).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it('calls onEventClick when Space is pressed', async () => {
+      const onEventClick = vi.fn();
+      render(PublicCard, {
+        props: { events: [mockEvent], onEventClick }
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.keyDown(button, { key: ' ' });
+
+      expect(onEventClick).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it('does not call onEventClick for other keys', async () => {
+      const onEventClick = vi.fn();
+      render(PublicCard, {
+        props: { events: [mockEvent], onEventClick }
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.keyDown(button, { key: 'Tab' });
+
+      expect(onEventClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('has correct aria-label', () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      const button = screen.getByRole('button');
+      const ariaLabel = button.getAttribute('aria-label');
+      expect(ariaLabel).toContain('Test Event');
+      expect(ariaLabel).toContain('On Sale');
+      expect(ariaLabel).toContain('Press Enter to view details');
+    });
+
+    it('is focusable', () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('tabindex', '0');
+    });
+
+    it('has lazy loading on images', () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      const img = screen.getByAltText('Test Event');
+      expect(img).toHaveAttribute('loading', 'lazy');
+    });
+  });
+
+  describe('styling', () => {
+    it('has transition effects', () => {
+      const { container } = render(PublicCard, { props: { events: [mockEvent] } });
+      const article = container.querySelector('article');
+      expect(article).toHaveClass('transition-all');
+    });
+
+    it('has hover effects', () => {
+      const { container } = render(PublicCard, { props: { events: [mockEvent] } });
+      const article = container.querySelector('article');
+      expect(article.className).toContain('hover:shadow-lg');
+    });
+
+    it('has focus ring', () => {
+      const { container } = render(PublicCard, { props: { events: [mockEvent] } });
+      const article = container.querySelector('article');
+      expect(article.className).toContain('focus:ring-4');
+    });
+
+    it('has dark mode support', () => {
+      const { container } = render(PublicCard, { props: { events: [mockEvent] } });
+      const article = container.querySelector('article');
+      expect(article.className).toContain('dark:bg-gray-800');
+    });
+  });
+
+  describe('responsive behavior', () => {
+    it('handles resize events', async () => {
+      const addEventListenerSpy = vi.spyOn(window, 'addEventListener');
+      render(PublicCard, { props: { events: [mockEvent] } });
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+    });
+
+    it('removes resize listener on cleanup', () => {
+      const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+      const { unmount } = render(PublicCard, { props: { events: [mockEvent] } });
+
+      unmount();
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+    });
+  });
+});

package/dist/calendar/ShowCard/ShowCard.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ShowCard.spec.d.ts.map

package/dist/calendar/ShowCard/ShowCard.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowCard.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowCard/ShowCard.spec.js"],"names":[],"mappings":""}