feat(tests): add unit tests for Header, LegalPage, McpPage, and ToolbarActions components

- Implement tests for rendering and interaction in Header
- Add tests for LegalPage section headings and links
- Create tests for McpPage content and navigation
- Include tests for CatalogLink and GridSizeToggle in ToolbarActions

Author: MarkusNeusinger

app/src/analytics/reportWebVitals.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { reportWebVitals } from './reportWebVitals';
+
+describe('reportWebVitals', () => {
+  const originalLocation = window.location;
+
+  afterEach(() => {
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+      writable: true,
+      configurable: true,
+    });
+    delete window.plausible;
+  });
+
+  it('does nothing in non-production environment', () => {
+    Object.defineProperty(window, 'location', {
+      value: { ...originalLocation, hostname: 'localhost' },
+      writable: true,
+      configurable: true,
+    });
+
+    // Should return early without importing web-vitals
+    reportWebVitals();
+    // No error = success, web-vitals is not imported
+  });
+
+  it('does nothing when hostname is not pyplots.ai', () => {
+    Object.defineProperty(window, 'location', {
+      value: { ...originalLocation, hostname: 'staging.pyplots.ai' },
+      writable: true,
+      configurable: true,
+    });
+
+    reportWebVitals();
+    // No error = success
+  });
+
+  it('attempts to load web-vitals in production', async () => {
+    Object.defineProperty(window, 'location', {
+      value: { ...originalLocation, hostname: 'pyplots.ai' },
+      writable: true,
+      configurable: true,
+    });
+    window.plausible = vi.fn();
+
+    // Mock the dynamic import
+    const mockOnLCP = vi.fn();
+    const mockOnCLS = vi.fn();
+    const mockOnINP = vi.fn();
+
+    vi.mock('web-vitals', () => ({
+      onLCP: (cb: (m: { value: number; rating: string }) => void) => cb({ value: 2500, rating: 'good' }),
+      onCLS: (cb: (m: { value: number; rating: string }) => void) => cb({ value: 0.15, rating: 'needs-improvement' }),
+      onINP: (cb: (m: { value: number; rating: string }) => void) => cb({ value: 200, rating: 'good' }),
+    }));
+
+    reportWebVitals();
+
+    // Wait for dynamic import to resolve
+    await vi.dynamicImportSettled();
+
+    expect(window.plausible).toHaveBeenCalledWith('LCP', {
+      props: { value: '2500', rating: 'good' },
+    });
+    expect(window.plausible).toHaveBeenCalledWith('CLS', {
+      props: { value: '0.15', rating: 'needs-improvement' },
+    });
+    expect(window.plausible).toHaveBeenCalledWith('INP', {
+      props: { value: '200', rating: 'good' },
+    });
+
+    vi.restoreAllMocks();
+  });
+});

app/src/components/Footer.test.tsx

@@ -42,4 +42,71 @@ describe('Footer', () => {
     render(<Footer />);
     expect(screen.getByText('github')).toBeInTheDocument();
   });
+
+  it('calls onTrackEvent when clicking linkedin link', async () => {
+    const onTrackEvent = vi.fn();
+    const user = userEvent.setup();
+
+    render(<Footer onTrackEvent={onTrackEvent} />);
+
+    await user.click(screen.getByText('markus neusinger'));
+    expect(onTrackEvent).toHaveBeenCalledWith('external_link', expect.objectContaining({ destination: 'linkedin' }));
+  });
+
+  it('calls onTrackEvent when clicking mcp link', async () => {
+    const onTrackEvent = vi.fn();
+    const user = userEvent.setup();
+
+    render(<Footer onTrackEvent={onTrackEvent} />);
+
+    await user.click(screen.getByText('mcp'));
+    expect(onTrackEvent).toHaveBeenCalledWith('internal_link', expect.objectContaining({ destination: 'mcp' }));
+  });
+
+  it('calls onTrackEvent when clicking legal link', async () => {
+    const onTrackEvent = vi.fn();
+    const user = userEvent.setup();
+
+    render(<Footer onTrackEvent={onTrackEvent} />);
+
+    await user.click(screen.getByText('legal'));
+    expect(onTrackEvent).toHaveBeenCalledWith('internal_link', expect.objectContaining({ destination: 'legal' }));
+  });
+
+  it('passes selectedSpec and selectedLibrary to tracking', async () => {
+    const onTrackEvent = vi.fn();
+    const user = userEvent.setup();
+
+    render(<Footer onTrackEvent={onTrackEvent} selectedSpec="scatter-basic" selectedLibrary="matplotlib" />);
+
+    await user.click(screen.getByText('github'));
+    expect(onTrackEvent).toHaveBeenCalledWith('external_link', {
+      destination: 'github',
+      spec: 'scatter-basic',
+      library: 'matplotlib',
+    });
+  });
+
+  it('renders github link with correct href', () => {
+    render(<Footer />);
+
+    const githubLink = screen.getByText('github').closest('a');
+    expect(githubLink).toHaveAttribute('href', 'https://github.com/MarkusNeusinger/pyplots');
+    expect(githubLink).toHaveAttribute('target', '_blank');
+    expect(githubLink).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('renders mcp as internal router link to /mcp', () => {
+    render(<Footer />);
+
+    const mcpLink = screen.getByText('mcp').closest('a');
+    expect(mcpLink).toHaveAttribute('href', '/mcp');
+  });
+
+  it('renders legal as internal router link to /legal', () => {
+    render(<Footer />);
+
+    const legalLink = screen.getByText('legal').closest('a');
+    expect(legalLink).toHaveAttribute('href', '/legal');
+  });
 });

app/src/components/Header.test.tsx

@@ -0,0 +1,104 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { fireEvent } from '@testing-library/react';
+import { render, screen, userEvent } from '../test-utils';
+import { Header } from './Header';
+
+// Mock useNavigate
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return { ...actual, useNavigate: () => mockNavigate };
+});
+
+describe('Header', () => {
+  beforeEach(() => {
+    mockNavigate.mockClear();
+  });
+
+  it('renders the pyplots.ai logo text', () => {
+    render(<Header />);
+
+    expect(screen.getByText('py')).toBeInTheDocument();
+    expect(screen.getByText('plots')).toBeInTheDocument();
+    expect(screen.getByText('.ai')).toBeInTheDocument();
+  });
+
+  it('renders tagline text', () => {
+    render(<Header />);
+
+    expect(screen.getByText(/ai-powered python/i)).toBeInTheDocument();
+  });
+
+  it('renders "get inspired" call to action', () => {
+    render(<Header />);
+
+    expect(screen.getByText(/get inspired/)).toBeInTheDocument();
+  });
+
+  it('renders stats tooltip content when stats provided', () => {
+    render(<Header stats={{ specs: 254, plots: 1800, libraries: 9 }} />);
+
+    expect(screen.getByText('✦')).toBeInTheDocument();
+  });
+
+  it('renders shuffle icon when onRandom is provided', () => {
+    render(<Header onRandom={vi.fn()} />);
+
+    expect(screen.getByRole('button', { name: /random filter/i })).toBeInTheDocument();
+  });
+
+  it('does not render shuffle icon when onRandom is not provided', () => {
+    render(<Header />);
+
+    expect(screen.queryByRole('button', { name: /random filter/i })).toBeNull();
+  });
+
+  it('calls onRandom with "click" when shuffle icon is clicked', async () => {
+    const onRandom = vi.fn();
+    const user = userEvent.setup();
+
+    render(<Header onRandom={onRandom} />);
+
+    await user.click(screen.getByRole('button', { name: /random filter/i }));
+    expect(onRandom).toHaveBeenCalledWith('click');
+  });
+
+  it('navigates to "/" on single click of logo', () => {
+    vi.useFakeTimers();
+    render(<Header />);
+
+    const logo = screen.getByRole('link');
+    fireEvent.click(logo);
+
+    // Wait for the 400ms debounce
+    vi.advanceTimersByTime(400);
+
+    expect(mockNavigate).toHaveBeenCalledWith('/');
+    vi.useRealTimers();
+  });
+
+  it('navigates to "/debug" on triple click of logo', () => {
+    vi.useFakeTimers();
+    render(<Header />);
+
+    const logo = screen.getByRole('link');
+    fireEvent.click(logo);
+    fireEvent.click(logo);
+    fireEvent.click(logo);
+
+    expect(mockNavigate).toHaveBeenCalledWith('/debug');
+    vi.useRealTimers();
+  });
+
+  it('has a header element', () => {
+    render(<Header />);
+
+    expect(screen.getByRole('banner')).toBeInTheDocument();
+  });
+
+  it('renders heading as h1', () => {
+    render(<Header />);
+
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
+  });
+});

app/src/components/ToolbarActions.test.tsx

@@ -0,0 +1,122 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent } from '../test-utils';
+import { CatalogLink, GridSizeToggle, ToolbarActions } from './ToolbarActions';
+
+describe('CatalogLink', () => {
+  it('renders a link to /catalog', () => {
+    render(<CatalogLink />);
+
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/catalog');
+  });
+
+  it('has a "catalog" tooltip', async () => {
+    const user = userEvent.setup();
+    render(<CatalogLink />);
+
+    const link = screen.getByRole('link');
+    await user.hover(link);
+
+    expect(await screen.findByText('catalog')).toBeInTheDocument();
+  });
+});
+
+describe('GridSizeToggle', () => {
+  const defaultProps = {
+    imageSize: 'normal' as const,
+    onImageSizeChange: vi.fn(),
+    onTrackEvent: vi.fn(),
+  };
+
+  it('renders with aria-label for current state', () => {
+    render(<GridSizeToggle {...defaultProps} />);
+
+    expect(screen.getByRole('button')).toHaveAttribute(
+      'aria-label',
+      'Switch to compact view'
+    );
+  });
+
+  it('shows "Switch to normal view" when in compact mode', () => {
+    render(<GridSizeToggle {...defaultProps} imageSize="compact" />);
+
+    expect(screen.getByRole('button')).toHaveAttribute(
+      'aria-label',
+      'Switch to normal view'
+    );
+  });
+
+  it('toggles to compact on click and fires tracking event', async () => {
+    const onImageSizeChange = vi.fn();
+    const onTrackEvent = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <GridSizeToggle
+        imageSize="normal"
+        onImageSizeChange={onImageSizeChange}
+        onTrackEvent={onTrackEvent}
+      />
+    );
+
+    await user.click(screen.getByRole('button'));
+
+    expect(onImageSizeChange).toHaveBeenCalledWith('compact');
+    expect(onTrackEvent).toHaveBeenCalledWith('grid_resize', { size: 'compact' });
+  });
+
+  it('toggles to normal when already compact', async () => {
+    const onImageSizeChange = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <GridSizeToggle
+        {...defaultProps}
+        imageSize="compact"
+        onImageSizeChange={onImageSizeChange}
+      />
+    );
+
+    await user.click(screen.getByRole('button'));
+    expect(onImageSizeChange).toHaveBeenCalledWith('normal');
+  });
+
+  it('responds to Enter key', async () => {
+    const onImageSizeChange = vi.fn();
+    const user = userEvent.setup();
+
+    render(<GridSizeToggle {...defaultProps} onImageSizeChange={onImageSizeChange} />);
+
+    screen.getByRole('button').focus();
+    await user.keyboard('{Enter}');
+
+    expect(onImageSizeChange).toHaveBeenCalledWith('compact');
+  });
+
+  it('responds to Space key', async () => {
+    const onImageSizeChange = vi.fn();
+    const user = userEvent.setup();
+
+    render(<GridSizeToggle {...defaultProps} onImageSizeChange={onImageSizeChange} />);
+
+    screen.getByRole('button').focus();
+    await user.keyboard(' ');
+
+    expect(onImageSizeChange).toHaveBeenCalledWith('compact');
+  });
+});
+
+describe('ToolbarActions', () => {
+  it('renders both CatalogLink and GridSizeToggle', () => {
+    render(
+      <ToolbarActions
+        imageSize="normal"
+        onImageSizeChange={vi.fn()}
+        onTrackEvent={vi.fn()}
+      />
+    );
+
+    expect(screen.getByRole('link')).toHaveAttribute('href', '/catalog');
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+});