@getmicdrop/svelte-components 2.0.4 → 2.0.6

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

@@ -1,606 +1,606 @@
-import { describe, it, expect, vi, beforeEach, beforeAll, afterEach } from 'vitest';
-import { render, waitFor, cleanup, fireEvent } from '@testing-library/svelte';
-
-// Mock IntersectionObserver
-vi.stubGlobal('IntersectionObserver', vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  disconnect: vi.fn(),
-  unobserve: vi.fn(),
-})));
-
-// Mock ResizeObserver
-vi.stubGlobal('ResizeObserver', vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  disconnect: vi.fn(),
-  unobserve: vi.fn(),
-})));
-
-// Mock jwt-decode
-vi.mock('jwt-decode', () => ({
-  jwtDecode: vi.fn().mockReturnValue({
-    id: '123',
-    userId: '123',
-    FullName: 'Test User',
-  }),
-}));
-
-// Mock $app/environment
-vi.mock('$app/environment', () => ({
-  browser: true,
-}));
-
-// Mock stores/auth
-vi.mock('@/stores/auth.js', () => ({
-  auth: {
-    subscribe: vi.fn((callback) => {
-      callback({ token: 'mock-token', isAuthenticated: true });
-      return () => {};
-    }),
-  },
-  initializeAuthState: vi.fn(),
-}));
-
-// Mock utils
-vi.mock('@/utils/utils/utils', () => ({
-  timeAgo: vi.fn(() => '2 hours ago'),
-}));
-
-vi.mock('@/utils/apiConfig.js', () => ({
-  buildApiUrl: vi.fn((endpoint) => `http://localhost:8080${endpoint}`),
-  API_ENDPOINTS: {
-    PERFORMER_AVAILABILITIES: '/api/performer/performerAvailabilities',
-  },
-}));
-
-// Mock QuarterView component - needs $set method for Svelte reactivity
-vi.mock('@/components/Calendar/QuarterView.svelte', () => ({
-  default: vi.fn().mockImplementation(() => ({
-    $$: { on_mount: [], on_destroy: [], before_update: [], after_update: [] },
-    $set: vi.fn(),
-    $destroy: vi.fn(),
-  })),
-}));
-
-// Mock fetch
-global.fetch = vi.fn();
-
-describe('AvailabilityCalendarModal', () => {
-  let AvailabilityCalendarModal;
-
-  const defaultVenue = {
-    venueId: 123,
-    name: 'Test Venue',
-    image: '/test-image.jpg',
-    location: '123 Main St, City, CA 90210',
-    lastUpdated: '2025-01-01T12:00:00Z',
-  };
-
-  beforeAll(async () => {
-    vi.resetModules();
-
-    // Mock document.cookie
-    Object.defineProperty(document, 'cookie', {
-      writable: true,
-      value: 'performer_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEyMyJ9.test',
-    });
-
-    // Mock window.webkit
-    Object.defineProperty(window, 'webkit', {
-      value: {
-        messageHandlers: {
-          haptic: { postMessage: vi.fn() },
-        },
-      },
-      writable: true,
-    });
-
-    // Mock navigator.vibrate
-    Object.defineProperty(navigator, 'vibrate', {
-      value: vi.fn(),
-      writable: true,
-    });
-
-    AvailabilityCalendarModal = (await import('./AvailabilityCalendarModal.svelte')).default;
-  }, 60000);
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    global.fetch.mockReset();
-    global.fetch.mockResolvedValue({
-      ok: true,
-      json: async () => [],
-    });
-  });
-
-  afterEach(() => {
-    cleanup();
-  });
-
-  describe('Basic Rendering', () => {
-    it('renders when show is false', async () => {
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: false,
-          venue: defaultVenue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-      // When show is false, modal should not be visible
-      expect(container).toBeDefined();
-    });
-
-    it('renders modal when show is true', async () => {
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      await waitFor(() => {
-        expect(container).toBeDefined();
-      });
-    });
-
-    it('renders venue name in modal', async () => {
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      await waitFor(() => {
-        expect(container.innerHTML).toContain('Test Venue');
-      });
-    });
-  });
-
-  describe('Location Parsing', () => {
-    it('parses location with 3+ parts correctly', async () => {
-      const venue = {
-        ...defaultVenue,
-        location: '3400 Warner Blvd, Burbank, CA 91505',
-      };
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      expect(container).toBeDefined();
-    });
-
-    it('parses location with 2 parts correctly', async () => {
-      const venue = {
-        ...defaultVenue,
-        location: '123 Main St, City CA 90210',
-      };
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      expect(container).toBeDefined();
-    });
-
-    it('handles single part location', async () => {
-      const venue = {
-        ...defaultVenue,
-        location: '123 Main Street',
-      };
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      expect(container).toBeDefined();
-    });
-
-    it('handles empty location', async () => {
-      const venue = {
-        ...defaultVenue,
-        location: '',
-      };
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      expect(container).toBeDefined();
-    });
-
-    it('handles null location', async () => {
-      const venue = {
-        ...defaultVenue,
-        location: null,
-      };
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      expect(container).toBeDefined();
-    });
-  });
-
-  describe('Image Handling', () => {
-    it('uses full URL for image starting with http', async () => {
-      const venue = {
-        ...defaultVenue,
-        image: 'https://example.com/image.jpg',
-      };
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      await waitFor(() => {
-        const img = container.querySelector('img');
-        expect(img?.src).toContain('https://example.com/image.jpg');
-      });
-    });
-
-    it('prepends CDN URL for relative image paths', async () => {
-      const venue = {
-        ...defaultVenue,
-        image: '/uploads/image.jpg',
-      };
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      await waitFor(() => {
-        const img = container.querySelector('img');
-        expect(img).toBeDefined();
-      });
-    });
-
-    it('uses placeholder for empty image', async () => {
-      const venue = {
-        ...defaultVenue,
-        image: '',
-      };
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      await waitFor(() => {
-        const img = container.querySelector('img');
-        expect(img).toBeDefined();
-      });
-    });
-  });
-
-  describe('Modal Interactions', () => {
-    it('calls onClose when back button is clicked', async () => {
-      const onClose = vi.fn();
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose,
-          onUpdate: vi.fn(),
-        },
-      });
-
-      await waitFor(() => {
-        const backButton = container.querySelector('.modal-back-btn');
-        if (backButton) {
-          fireEvent.click(backButton);
-        }
-      });
-
-      // Give time for click to be processed
-      await new Promise(resolve => setTimeout(resolve, 100));
-    });
-
-    it('handles ESC key press', async () => {
-      const onClose = vi.fn();
-
-      render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose,
-          onUpdate: vi.fn(),
-        },
-      });
-
-      await fireEvent.keyDown(window, { key: 'Escape' });
-    });
-  });
-
-  describe('API Loading', () => {
-    it('loads availability data when show becomes true', async () => {
-      global.fetch.mockResolvedValueOnce({
-        ok: true,
-        json: async () => [
-          { VenueID: 123, Date: '2025-03-15' },
-          { VenueID: 123, Date: '2025-03-16' },
-        ],
-      });
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      await waitFor(() => {
-        expect(global.fetch).toHaveBeenCalled();
-      });
-    });
-
-    it('handles API error gracefully', async () => {
-      global.fetch.mockRejectedValueOnce(new Error('Network error'));
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      await waitFor(() => {
-        expect(container).toBeDefined();
-      });
-    });
-
-    it('handles non-ok response', async () => {
-      global.fetch.mockResolvedValueOnce({
-        ok: false,
-        json: async () => ({ error: 'Failed' }),
-      });
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      await waitFor(() => {
-        expect(container).toBeDefined();
-      });
-    });
-
-    it('filters events by venueId', async () => {
-      global.fetch.mockResolvedValueOnce({
-        ok: true,
-        json: async () => [
-          { VenueID: 123, Date: '2025-03-15' },
-          { VenueID: 999, Date: '2025-03-16' }, // Different venue
-        ],
-      });
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      await waitFor(() => {
-        expect(container).toBeDefined();
-      });
-    });
-  });
-
-  describe('Props Handling', () => {
-    it('handles null venue', async () => {
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: null,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      expect(container).toBeDefined();
-    });
-
-    it('handles undefined venue', async () => {
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: undefined,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      expect(container).toBeDefined();
-    });
-
-    it('handles venueId 0', async () => {
-      const venue = {
-        ...defaultVenue,
-        venueId: 0,
-      };
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      expect(container).toBeDefined();
-    });
-  });
-
-  describe('Loading State', () => {
-    it('shows loading skeleton while fetching', async () => {
-      // Delay the fetch response
-      global.fetch.mockImplementationOnce(() =>
-        new Promise((resolve) => setTimeout(() => resolve({
-          ok: true,
-          json: async () => [],
-        }), 500))
-      );
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      // Check for loading skeleton
-      await waitFor(() => {
-        const skeleton = container.querySelector('.loading-skeleton');
-        expect(skeleton || container).toBeDefined();
-      });
-    });
-  });
-
-  describe('Save Status Messages', () => {
-    it('initializes with empty message', async () => {
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      expect(container).toBeDefined();
-    });
-  });
-
-  describe('Cookie Handling', () => {
-    it('handles missing token cookie', async () => {
-      const originalCookie = document.cookie;
-      Object.defineProperty(document, 'cookie', {
-        writable: true,
-        value: '',
-      });
-
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      expect(container).toBeDefined();
-
-      // Restore
-      Object.defineProperty(document, 'cookie', {
-        writable: true,
-        value: originalCookie,
-      });
-    });
-  });
-
-  describe('Modal Variants', () => {
-    it('renders mobile modal variant', async () => {
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      await waitFor(() => {
-        const mobileModal = container.querySelector('.fullscreen-modal');
-        expect(mobileModal).toBeDefined();
-      });
-    });
-
-    it('renders desktop side panel', async () => {
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      expect(container).toBeDefined();
-    });
-  });
-
-  describe('Transitions', () => {
-    it('applies fade transition to modal', async () => {
-      const { container } = render(AvailabilityCalendarModal, {
-        props: {
-          show: true,
-          venue: defaultVenue,
-          onClose: vi.fn(),
-          onUpdate: vi.fn(),
-        },
-      });
-
-      expect(container).toBeDefined();
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach, beforeAll, afterEach } from 'vitest';
+import { render, waitFor, cleanup, fireEvent } from '@testing-library/svelte';
+
+// Mock IntersectionObserver
+vi.stubGlobal('IntersectionObserver', vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  disconnect: vi.fn(),
+  unobserve: vi.fn(),
+})));
+
+// Mock ResizeObserver
+vi.stubGlobal('ResizeObserver', vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  disconnect: vi.fn(),
+  unobserve: vi.fn(),
+})));
+
+// Mock jwt-decode
+vi.mock('jwt-decode', () => ({
+  jwtDecode: vi.fn().mockReturnValue({
+    id: '123',
+    userId: '123',
+    FullName: 'Test User',
+  }),
+}));
+
+// Mock $app/environment
+vi.mock('$app/environment', () => ({
+  browser: true,
+}));
+
+// Mock stores/auth
+vi.mock('@/stores/auth.js', () => ({
+  auth: {
+    subscribe: vi.fn((callback) => {
+      callback({ token: 'mock-token', isAuthenticated: true });
+      return () => {};
+    }),
+  },
+  initializeAuthState: vi.fn(),
+}));
+
+// Mock utils
+vi.mock('@/utils/utils/utils', () => ({
+  timeAgo: vi.fn(() => '2 hours ago'),
+}));
+
+vi.mock('@/utils/apiConfig.js', () => ({
+  buildApiUrl: vi.fn((endpoint) => `http://localhost:8080${endpoint}`),
+  API_ENDPOINTS: {
+    PERFORMER_AVAILABILITIES: '/api/performer/performerAvailabilities',
+  },
+}));
+
+// Mock QuarterView component - needs $set method for Svelte reactivity
+vi.mock('@/components/Calendar/QuarterView.svelte', () => ({
+  default: vi.fn().mockImplementation(() => ({
+    $$: { on_mount: [], on_destroy: [], before_update: [], after_update: [] },
+    $set: vi.fn(),
+    $destroy: vi.fn(),
+  })),
+}));
+
+// Mock fetch
+global.fetch = vi.fn();
+
+describe('AvailabilityCalendarModal', () => {
+  let AvailabilityCalendarModal;
+
+  const defaultVenue = {
+    venueId: 123,
+    name: 'Test Venue',
+    image: '/test-image.jpg',
+    location: '123 Main St, City, CA 90210',
+    lastUpdated: '2025-01-01T12:00:00Z',
+  };
+
+  beforeAll(async () => {
+    vi.resetModules();
+
+    // Mock document.cookie
+    Object.defineProperty(document, 'cookie', {
+      writable: true,
+      value: 'performer_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEyMyJ9.test',
+    });
+
+    // Mock window.webkit
+    Object.defineProperty(window, 'webkit', {
+      value: {
+        messageHandlers: {
+          haptic: { postMessage: vi.fn() },
+        },
+      },
+      writable: true,
+    });
+
+    // Mock navigator.vibrate
+    Object.defineProperty(navigator, 'vibrate', {
+      value: vi.fn(),
+      writable: true,
+    });
+
+    AvailabilityCalendarModal = (await import('./AvailabilityCalendarModal.svelte')).default;
+  }, 60000);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch.mockReset();
+    global.fetch.mockResolvedValue({
+      ok: true,
+      json: async () => [],
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('Basic Rendering', () => {
+    it('renders when show is false', async () => {
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: false,
+          venue: defaultVenue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+      // When show is false, modal should not be visible
+      expect(container).toBeDefined();
+    });
+
+    it('renders modal when show is true', async () => {
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      await waitFor(() => {
+        expect(container).toBeDefined();
+      });
+    });
+
+    it('renders venue name in modal', async () => {
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      await waitFor(() => {
+        expect(container.innerHTML).toContain('Test Venue');
+      });
+    });
+  });
+
+  describe('Location Parsing', () => {
+    it('parses location with 3+ parts correctly', async () => {
+      const venue = {
+        ...defaultVenue,
+        location: '3400 Warner Blvd, Burbank, CA 91505',
+      };
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      expect(container).toBeDefined();
+    });
+
+    it('parses location with 2 parts correctly', async () => {
+      const venue = {
+        ...defaultVenue,
+        location: '123 Main St, City CA 90210',
+      };
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      expect(container).toBeDefined();
+    });
+
+    it('handles single part location', async () => {
+      const venue = {
+        ...defaultVenue,
+        location: '123 Main Street',
+      };
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      expect(container).toBeDefined();
+    });
+
+    it('handles empty location', async () => {
+      const venue = {
+        ...defaultVenue,
+        location: '',
+      };
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      expect(container).toBeDefined();
+    });
+
+    it('handles null location', async () => {
+      const venue = {
+        ...defaultVenue,
+        location: null,
+      };
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Image Handling', () => {
+    it('uses full URL for image starting with http', async () => {
+      const venue = {
+        ...defaultVenue,
+        image: 'https://example.com/image.jpg',
+      };
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      await waitFor(() => {
+        const img = container.querySelector('img');
+        expect(img?.src).toContain('https://example.com/image.jpg');
+      });
+    });
+
+    it('prepends CDN URL for relative image paths', async () => {
+      const venue = {
+        ...defaultVenue,
+        image: '/uploads/image.jpg',
+      };
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      await waitFor(() => {
+        const img = container.querySelector('img');
+        expect(img).toBeDefined();
+      });
+    });
+
+    it('uses placeholder for empty image', async () => {
+      const venue = {
+        ...defaultVenue,
+        image: '',
+      };
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      await waitFor(() => {
+        const img = container.querySelector('img');
+        expect(img).toBeDefined();
+      });
+    });
+  });
+
+  describe('Modal Interactions', () => {
+    it('calls onClose when back button is clicked', async () => {
+      const onClose = vi.fn();
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose,
+          onUpdate: vi.fn(),
+        },
+      });
+
+      await waitFor(() => {
+        const backButton = container.querySelector('.modal-back-btn');
+        if (backButton) {
+          fireEvent.click(backButton);
+        }
+      });
+
+      // Give time for click to be processed
+      await new Promise(resolve => setTimeout(resolve, 100));
+    });
+
+    it('handles ESC key press', async () => {
+      const onClose = vi.fn();
+
+      render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose,
+          onUpdate: vi.fn(),
+        },
+      });
+
+      await fireEvent.keyDown(window, { key: 'Escape' });
+    });
+  });
+
+  describe('API Loading', () => {
+    it('loads availability data when show becomes true', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => [
+          { VenueID: 123, Date: '2025-03-15' },
+          { VenueID: 123, Date: '2025-03-16' },
+        ],
+      });
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      await waitFor(() => {
+        expect(global.fetch).toHaveBeenCalled();
+      });
+    });
+
+    it('handles API error gracefully', async () => {
+      global.fetch.mockRejectedValueOnce(new Error('Network error'));
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      await waitFor(() => {
+        expect(container).toBeDefined();
+      });
+    });
+
+    it('handles non-ok response', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: false,
+        json: async () => ({ error: 'Failed' }),
+      });
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      await waitFor(() => {
+        expect(container).toBeDefined();
+      });
+    });
+
+    it('filters events by venueId', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => [
+          { VenueID: 123, Date: '2025-03-15' },
+          { VenueID: 999, Date: '2025-03-16' }, // Different venue
+        ],
+      });
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      await waitFor(() => {
+        expect(container).toBeDefined();
+      });
+    });
+  });
+
+  describe('Props Handling', () => {
+    it('handles null venue', async () => {
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: null,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      expect(container).toBeDefined();
+    });
+
+    it('handles undefined venue', async () => {
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: undefined,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      expect(container).toBeDefined();
+    });
+
+    it('handles venueId 0', async () => {
+      const venue = {
+        ...defaultVenue,
+        venueId: 0,
+      };
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Loading State', () => {
+    it('shows loading skeleton while fetching', async () => {
+      // Delay the fetch response
+      global.fetch.mockImplementationOnce(() =>
+        new Promise((resolve) => setTimeout(() => resolve({
+          ok: true,
+          json: async () => [],
+        }), 500))
+      );
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      // Check for loading skeleton
+      await waitFor(() => {
+        const skeleton = container.querySelector('.loading-skeleton');
+        expect(skeleton || container).toBeDefined();
+      });
+    });
+  });
+
+  describe('Save Status Messages', () => {
+    it('initializes with empty message', async () => {
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Cookie Handling', () => {
+    it('handles missing token cookie', async () => {
+      const originalCookie = document.cookie;
+      Object.defineProperty(document, 'cookie', {
+        writable: true,
+        value: '',
+      });
+
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      expect(container).toBeDefined();
+
+      // Restore
+      Object.defineProperty(document, 'cookie', {
+        writable: true,
+        value: originalCookie,
+      });
+    });
+  });
+
+  describe('Modal Variants', () => {
+    it('renders mobile modal variant', async () => {
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      await waitFor(() => {
+        const mobileModal = container.querySelector('.fullscreen-modal');
+        expect(mobileModal).toBeDefined();
+      });
+    });
+
+    it('renders desktop side panel', async () => {
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Transitions', () => {
+    it('applies fade transition to modal', async () => {
+      const { container } = render(AvailabilityCalendarModal, {
+        props: {
+          show: true,
+          venue: defaultVenue,
+          onClose: vi.fn(),
+          onUpdate: vi.fn(),
+        },
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+});