@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/components/Layout/BottomNav.spec.js

@@ -1,130 +1,130 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import BottomNav from './BottomNav.svelte';
-
-// Mock fetch for API calls
-global.fetch = vi.fn(() =>
-  Promise.resolve({
-    ok: true,
-    json: () => Promise.resolve([]),
-  })
-);
-
-// Mock SvelteKit modules
-vi.mock('$app/stores', () => ({
-  page: {
-    subscribe: (fn) => {
-      fn({ url: { pathname: '/shows' } });
-      return () => {};
-    }
-  }
-}));
-
-vi.mock('$app/paths', () => ({
-  base: '/performers'
-}));
-
-describe('BottomNav', () => {
-  const defaultLinks = [
-    { label: 'Home', href: '/', icon: 'home' },
-    { label: 'Shows', href: '/shows', icon: 'shows' },
-    { label: 'Availability', href: '/availability', icon: 'availability' },
-    { label: 'Profile', href: '/profile', icon: 'profile' }
-  ];
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    global.fetch.mockImplementation(() =>
-      Promise.resolve({
-        ok: true,
-        json: () => Promise.resolve([]),
-      })
-    );
-  });
-
-  describe('basic rendering', () => {
-    it('renders all navigation links', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const navItems = container.querySelectorAll('.bottom-nav-item');
-      expect(navItems.length).toBe(4);
-    });
-
-    it('renders link labels as aria-label', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const homeLink = container.querySelector('[aria-label="Home"]');
-      expect(homeLink).toBeTruthy();
-    });
-
-    it('renders icons for each link', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const icons = container.querySelectorAll('.bottom-nav-icon');
-      expect(icons.length).toBe(4);
-    });
-  });
-
-  describe('active state', () => {
-    it('marks current path as active', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const showsLink = container.querySelector('a[href="/shows"]');
-      expect(showsLink.classList.contains('active')).toBe(true);
-    });
-
-    it('non-current paths are not active', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const homeLink = container.querySelector('a[href="/"]');
-      expect(homeLink.classList.contains('active')).toBe(false);
-    });
-  });
-
-  describe('notification dot', () => {
-    it('shows notification dot when there are invitations', async () => {
-      global.fetch.mockImplementationOnce(() =>
-        Promise.resolve({
-          ok: true,
-          json: () => Promise.resolve([{ acceptedState: 0 }]),
-        })
-      );
-
-      const { container } = render(BottomNav, { links: defaultLinks });
-
-      // Wait for the fetch to complete
-      await vi.waitFor(() => {
-        const dot = container.querySelector('.notification-dot');
-        return dot !== null;
-      }, { timeout: 1000 }).catch(() => null);
-    });
-
-    it('does not show notification dot when no invitations', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const dot = container.querySelector('.notification-dot');
-      expect(dot).toBeFalsy();
-    });
-  });
-
-  describe('empty links', () => {
-    it('renders nothing when links array is empty', () => {
-      const { container } = render(BottomNav, { links: [] });
-      const navItems = container.querySelectorAll('.bottom-nav-item');
-      expect(navItems.length).toBe(0);
-    });
-  });
-
-  describe('API error handling', () => {
-    it('handles fetch error gracefully', async () => {
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      global.fetch.mockImplementationOnce(() =>
-        Promise.resolve({
-          ok: false,
-        })
-      );
-
-      const { container } = render(BottomNav, { links: defaultLinks });
-
-      // Component should still render despite fetch error
-      const navItems = container.querySelectorAll('.bottom-nav-item');
-      expect(navItems.length).toBe(4);
-
-      consoleSpy.mockRestore();
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import BottomNav from './BottomNav.svelte';
+
+// Mock fetch for API calls
+global.fetch = vi.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve([]),
+  })
+);
+
+// Mock SvelteKit modules
+vi.mock('$app/stores', () => ({
+  page: {
+    subscribe: (fn) => {
+      fn({ url: { pathname: '/shows' } });
+      return () => {};
+    }
+  }
+}));
+
+vi.mock('$app/paths', () => ({
+  base: '/performers'
+}));
+
+describe('BottomNav', () => {
+  const defaultLinks = [
+    { label: 'Home', href: '/', icon: 'home' },
+    { label: 'Shows', href: '/shows', icon: 'shows' },
+    { label: 'Availability', href: '/availability', icon: 'availability' },
+    { label: 'Profile', href: '/profile', icon: 'profile' }
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch.mockImplementation(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve([]),
+      })
+    );
+  });
+
+  describe('basic rendering', () => {
+    it('renders all navigation links', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const navItems = container.querySelectorAll('.bottom-nav-item');
+      expect(navItems.length).toBe(4);
+    });
+
+    it('renders link labels as aria-label', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const homeLink = container.querySelector('[aria-label="Home"]');
+      expect(homeLink).toBeTruthy();
+    });
+
+    it('renders icons for each link', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const icons = container.querySelectorAll('.bottom-nav-icon');
+      expect(icons.length).toBe(4);
+    });
+  });
+
+  describe('active state', () => {
+    it('marks current path as active', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const showsLink = container.querySelector('a[href="/shows"]');
+      expect(showsLink.classList.contains('active')).toBe(true);
+    });
+
+    it('non-current paths are not active', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const homeLink = container.querySelector('a[href="/"]');
+      expect(homeLink.classList.contains('active')).toBe(false);
+    });
+  });
+
+  describe('notification dot', () => {
+    it('shows notification dot when there are invitations', async () => {
+      global.fetch.mockImplementationOnce(() =>
+        Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve([{ acceptedState: 0 }]),
+        })
+      );
+
+      const { container } = render(BottomNav, { links: defaultLinks });
+
+      // Wait for the fetch to complete
+      await vi.waitFor(() => {
+        const dot = container.querySelector('.notification-dot');
+        return dot !== null;
+      }, { timeout: 1000 }).catch(() => null);
+    });
+
+    it('does not show notification dot when no invitations', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const dot = container.querySelector('.notification-dot');
+      expect(dot).toBeFalsy();
+    });
+  });
+
+  describe('empty links', () => {
+    it('renders nothing when links array is empty', () => {
+      const { container } = render(BottomNav, { links: [] });
+      const navItems = container.querySelectorAll('.bottom-nav-item');
+      expect(navItems.length).toBe(0);
+    });
+  });
+
+  describe('API error handling', () => {
+    it('handles fetch error gracefully', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      global.fetch.mockImplementationOnce(() =>
+        Promise.resolve({
+          ok: false,
+        })
+      );
+
+      const { container } = render(BottomNav, { links: defaultLinks });
+
+      // Component should still render despite fetch error
+      const navItems = container.querySelectorAll('.bottom-nav-item');
+      expect(navItems.length).toBe(4);
+
+      consoleSpy.mockRestore();
+    });
+  });
+});

package/dist/components/Layout/Header.spec.js

@@ -1,203 +1,203 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import Header from './Header.svelte';
-
-// Mock SvelteKit modules
-vi.mock('$app/stores', () => ({
-  page: {
-    subscribe: (fn) => {
-      fn({ url: { pathname: '/shows' } });
-      return () => {};
-    }
-  }
-}));
-
-vi.mock('$app/paths', () => ({
-  base: '/performers'
-}));
-
-vi.mock('$app/navigation', () => ({
-  goto: vi.fn()
-}));
-
-describe('Header', () => {
-  const defaultProps = {
-    name: 'Test Performer',
-    email: 'test@example.com',
-    avatar: 'https://example.com/avatar.jpg',
-    navLinks: [
-      { label: 'Shows', href: '/shows' },
-      { label: 'Availability', href: '/availability' },
-      { label: 'Profile', href: '/profile' }
-    ],
-    dropdownLinks: [
-      { label: 'Account Settings', href: '/account-settings' },
-      { label: 'Payment Settings', href: '/payment-settings' }
-    ],
-    signoutHandler: vi.fn(),
-    showBackButton: false
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('basic rendering', () => {
-    it('renders the logo', () => {
-      const { container } = render(Header, defaultProps);
-      const logo = container.querySelector('img[alt="Micdrop"]');
-      expect(logo).toBeTruthy();
-    });
-
-    it('renders navigation links', () => {
-      render(Header, defaultProps);
-      expect(screen.getByText('Shows')).toBeTruthy();
-      expect(screen.getByText('Availability')).toBeTruthy();
-      expect(screen.getByText('Profile')).toBeTruthy();
-    });
-
-    it('renders dark mode toggle', () => {
-      const { container } = render(Header, defaultProps);
-      // DarkModeToggle should be present
-      expect(container.querySelector('button[aria-label]')).toBeTruthy();
-    });
-  });
-
-  describe('back button mode', () => {
-    it('shows back button when showBackButton is true', () => {
-      const { container } = render(Header, { ...defaultProps, showBackButton: true });
-      const backButton = container.querySelector('.header-back-button');
-      expect(backButton).toBeTruthy();
-    });
-
-    it('does not show back button by default', () => {
-      const { container } = render(Header, defaultProps);
-      const backButton = container.querySelector('.header-back-button');
-      expect(backButton).toBeFalsy();
-    });
-  });
-
-  describe('avatar buttons', () => {
-    it('renders mobile avatar button', () => {
-      const { container } = render(Header, defaultProps);
-      const mobileButton = container.querySelector('.avatar-button--mobile');
-      expect(mobileButton).toBeTruthy();
-    });
-
-    it('renders desktop avatar button', () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-      expect(desktopButton).toBeTruthy();
-    });
-  });
-
-  describe('desktop dropdown', () => {
-    it('shows dropdown when desktop avatar is clicked', async () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      const dropdown = container.querySelector('.desktop-dropdown');
-      expect(dropdown).toBeTruthy();
-    });
-
-    it('displays user name and email in dropdown', async () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      expect(screen.getByText('Test Performer')).toBeTruthy();
-      expect(screen.getByText('test@example.com')).toBeTruthy();
-    });
-
-    it('displays dropdown links', async () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      expect(screen.getByText('Account Settings')).toBeTruthy();
-      expect(screen.getByText('Payment Settings')).toBeTruthy();
-    });
-
-    it('displays sign out button', async () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      expect(screen.getByText('Sign out')).toBeTruthy();
-    });
-
-    it('closes dropdown when backdrop is clicked', async () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      const backdrop = container.querySelector('.dropdown-backdrop');
-      await fireEvent.click(backdrop);
-
-      const dropdown = container.querySelector('.desktop-dropdown');
-      expect(dropdown).toBeFalsy();
-    });
-
-    it('calls signoutHandler when sign out is clicked', async () => {
-      const signoutHandler = vi.fn();
-      const { container } = render(Header, { ...defaultProps, signoutHandler });
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      const signOutButton = screen.getByText('Sign out');
-      await fireEvent.click(signOutButton);
-
-      expect(signoutHandler).toHaveBeenCalled();
-    });
-
-    it('toggles dropdown on repeated clicks', async () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-      expect(container.querySelector('.desktop-dropdown')).toBeTruthy();
-
-      await fireEvent.click(desktopButton);
-      expect(container.querySelector('.desktop-dropdown')).toBeFalsy();
-    });
-  });
-
-  describe('mobile sheet', () => {
-    it('triggers mobile sheet state when mobile avatar is clicked', async () => {
-      const { container } = render(Header, defaultProps);
-      const mobileButton = container.querySelector('.avatar-button--mobile');
-
-      // Click should trigger the sheet opening (internal state)
-      await fireEvent.click(mobileButton);
-
-      // The mobile button should exist and be clickable
-      expect(mobileButton).toBeTruthy();
-    });
-  });
-
-  describe('navigation active state', () => {
-    it('marks current path as active', () => {
-      const { container } = render(Header, defaultProps);
-      const showsLink = container.querySelector('a[href="/shows"]');
-      expect(showsLink.classList.contains('active')).toBe(true);
-    });
-  });
-
-  describe('default values', () => {
-    it('shows "Performer" when name is empty', async () => {
-      const { container } = render(Header, { ...defaultProps, name: '' });
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      expect(screen.getByText('Performer')).toBeTruthy();
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import Header from './Header.svelte';
+
+// Mock SvelteKit modules
+vi.mock('$app/stores', () => ({
+  page: {
+    subscribe: (fn) => {
+      fn({ url: { pathname: '/shows' } });
+      return () => {};
+    }
+  }
+}));
+
+vi.mock('$app/paths', () => ({
+  base: '/performers'
+}));
+
+vi.mock('$app/navigation', () => ({
+  goto: vi.fn()
+}));
+
+describe('Header', () => {
+  const defaultProps = {
+    name: 'Test Performer',
+    email: 'test@example.com',
+    avatar: 'https://example.com/avatar.jpg',
+    navLinks: [
+      { label: 'Shows', href: '/shows' },
+      { label: 'Availability', href: '/availability' },
+      { label: 'Profile', href: '/profile' }
+    ],
+    dropdownLinks: [
+      { label: 'Account Settings', href: '/account-settings' },
+      { label: 'Payment Settings', href: '/payment-settings' }
+    ],
+    signoutHandler: vi.fn(),
+    showBackButton: false
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('basic rendering', () => {
+    it('renders the logo', () => {
+      const { container } = render(Header, defaultProps);
+      const logo = container.querySelector('img[alt="Micdrop"]');
+      expect(logo).toBeTruthy();
+    });
+
+    it('renders navigation links', () => {
+      render(Header, defaultProps);
+      expect(screen.getByText('Shows')).toBeTruthy();
+      expect(screen.getByText('Availability')).toBeTruthy();
+      expect(screen.getByText('Profile')).toBeTruthy();
+    });
+
+    it('renders dark mode toggle', () => {
+      const { container } = render(Header, defaultProps);
+      // DarkModeToggle should be present
+      expect(container.querySelector('button[aria-label]')).toBeTruthy();
+    });
+  });
+
+  describe('back button mode', () => {
+    it('shows back button when showBackButton is true', () => {
+      const { container } = render(Header, { ...defaultProps, showBackButton: true });
+      const backButton = container.querySelector('.header-back-button');
+      expect(backButton).toBeTruthy();
+    });
+
+    it('does not show back button by default', () => {
+      const { container } = render(Header, defaultProps);
+      const backButton = container.querySelector('.header-back-button');
+      expect(backButton).toBeFalsy();
+    });
+  });
+
+  describe('avatar buttons', () => {
+    it('renders mobile avatar button', () => {
+      const { container } = render(Header, defaultProps);
+      const mobileButton = container.querySelector('.avatar-button--mobile');
+      expect(mobileButton).toBeTruthy();
+    });
+
+    it('renders desktop avatar button', () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+      expect(desktopButton).toBeTruthy();
+    });
+  });
+
+  describe('desktop dropdown', () => {
+    it('shows dropdown when desktop avatar is clicked', async () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      const dropdown = container.querySelector('.desktop-dropdown');
+      expect(dropdown).toBeTruthy();
+    });
+
+    it('displays user name and email in dropdown', async () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      expect(screen.getByText('Test Performer')).toBeTruthy();
+      expect(screen.getByText('test@example.com')).toBeTruthy();
+    });
+
+    it('displays dropdown links', async () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      expect(screen.getByText('Account Settings')).toBeTruthy();
+      expect(screen.getByText('Payment Settings')).toBeTruthy();
+    });
+
+    it('displays sign out button', async () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      expect(screen.getByText('Sign out')).toBeTruthy();
+    });
+
+    it('closes dropdown when backdrop is clicked', async () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      const backdrop = container.querySelector('.dropdown-backdrop');
+      await fireEvent.click(backdrop);
+
+      const dropdown = container.querySelector('.desktop-dropdown');
+      expect(dropdown).toBeFalsy();
+    });
+
+    it('calls signoutHandler when sign out is clicked', async () => {
+      const signoutHandler = vi.fn();
+      const { container } = render(Header, { ...defaultProps, signoutHandler });
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      const signOutButton = screen.getByText('Sign out');
+      await fireEvent.click(signOutButton);
+
+      expect(signoutHandler).toHaveBeenCalled();
+    });
+
+    it('toggles dropdown on repeated clicks', async () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+      expect(container.querySelector('.desktop-dropdown')).toBeTruthy();
+
+      await fireEvent.click(desktopButton);
+      expect(container.querySelector('.desktop-dropdown')).toBeFalsy();
+    });
+  });
+
+  describe('mobile sheet', () => {
+    it('triggers mobile sheet state when mobile avatar is clicked', async () => {
+      const { container } = render(Header, defaultProps);
+      const mobileButton = container.querySelector('.avatar-button--mobile');
+
+      // Click should trigger the sheet opening (internal state)
+      await fireEvent.click(mobileButton);
+
+      // The mobile button should exist and be clickable
+      expect(mobileButton).toBeTruthy();
+    });
+  });
+
+  describe('navigation active state', () => {
+    it('marks current path as active', () => {
+      const { container } = render(Header, defaultProps);
+      const showsLink = container.querySelector('a[href="/shows"]');
+      expect(showsLink.classList.contains('active')).toBe(true);
+    });
+  });
+
+  describe('default values', () => {
+    it('shows "Performer" when name is empty', async () => {
+      const { container } = render(Header, { ...defaultProps, name: '' });
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      expect(screen.getByText('Performer')).toBeTruthy();
+    });
+  });
+});