feat(tests): add unit tests for Breadcrumb, Footer, LibraryPills, LoaderSpinner, NotFoundPage, tooltip, useCopyCode, useLayoutContext, and useUrlSync

- Update Node.js version in CI configuration
- Implement tests for Breadcrumb component
- Implement tests for Footer component
- Implement tests for LibraryPills component
- Implement tests for LoaderSpinner component
- Implement tests for NotFoundPage component
- Implement tests for tooltip utility functions
- Implement tests for useCopyCode hook
- Implement tests for useLayoutContext hook
- Implement tests for useUrlSync hook

Author: MarkusNeusinger

.github/workflows/ci-tests.yml

@@ -185,7 +185,7 @@ jobs:
       if: steps.check.outputs.should_test == 'true'
       uses: actions/setup-node@v6
       with:
-        node-version: '20'
+        node-version: '24'
         cache: 'yarn'
         cache-dependency-path: app/yarn.lock
 

app/src/components/Breadcrumb.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '../test-utils';
+import { Breadcrumb } from './Breadcrumb';
+
+describe('Breadcrumb', () => {
+  it('renders breadcrumb items', () => {
+    render(<Breadcrumb items={[{ label: 'pyplots.ai', to: '/' }, { label: 'catalog' }]} />);
+
+    expect(screen.getByText('pyplots.ai')).toBeInTheDocument();
+    expect(screen.getByText('catalog')).toBeInTheDocument();
+  });
+
+  it('renders linked items as links', () => {
+    render(<Breadcrumb items={[{ label: 'pyplots.ai', to: '/' }, { label: 'catalog' }]} />);
+
+    const link = screen.getByText('pyplots.ai');
+    expect(link.closest('a')).toHaveAttribute('href', '/');
+  });
+
+  it('renders current page as plain text', () => {
+    render(<Breadcrumb items={[{ label: 'pyplots.ai', to: '/' }, { label: 'catalog' }]} />);
+
+    const current = screen.getByText('catalog');
+    expect(current.closest('a')).toBeNull();
+  });
+
+  it('renders separator between items', () => {
+    render(<Breadcrumb items={[{ label: 'pyplots.ai', to: '/' }, { label: 'catalog' }]} />);
+
+    expect(screen.getByText('›')).toBeInTheDocument();
+  });
+
+  it('renders right action when provided', () => {
+    render(
+      <Breadcrumb
+        items={[{ label: 'pyplots.ai', to: '/' }]}
+        rightAction={<span>action</span>}
+      />
+    );
+
+    expect(screen.getByText('action')).toBeInTheDocument();
+  });
+
+  it('has navigation aria-label', () => {
+    render(<Breadcrumb items={[{ label: 'home', to: '/' }]} />);
+
+    expect(screen.getByRole('navigation')).toHaveAttribute('aria-label', 'breadcrumb');
+  });
+});

app/src/components/Footer.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent } from '../test-utils';
+import { Footer } from './Footer';
+
+describe('Footer', () => {
+  it('renders footer links', () => {
+    render(<Footer />);
+
+    expect(screen.getByText('github')).toBeInTheDocument();
+    expect(screen.getByText('stats')).toBeInTheDocument();
+    expect(screen.getByText('legal')).toBeInTheDocument();
+    expect(screen.getByText('mcp')).toBeInTheDocument();
+  });
+
+  it('renders markus neusinger link', () => {
+    render(<Footer />);
+
+    expect(screen.getByText('markus neusinger')).toBeInTheDocument();
+  });
+
+  it('calls onTrackEvent when clicking github link', async () => {
+    const onTrackEvent = vi.fn();
+    const user = userEvent.setup();
+
+    render(<Footer onTrackEvent={onTrackEvent} />);
+
+    await user.click(screen.getByText('github'));
+    expect(onTrackEvent).toHaveBeenCalledWith('external_link', expect.objectContaining({ destination: 'github' }));
+  });
+
+  it('calls onTrackEvent when clicking stats link', async () => {
+    const onTrackEvent = vi.fn();
+    const user = userEvent.setup();
+
+    render(<Footer onTrackEvent={onTrackEvent} />);
+
+    await user.click(screen.getByText('stats'));
+    expect(onTrackEvent).toHaveBeenCalledWith('external_link', expect.objectContaining({ destination: 'stats' }));
+  });
+
+  it('renders without onTrackEvent', () => {
+    render(<Footer />);
+    expect(screen.getByText('github')).toBeInTheDocument();
+  });
+});

app/src/components/LibraryPills.test.tsx

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent } from '../test-utils';
+import { LibraryPills } from './LibraryPills';
+
+const mockImplementations = [
+  { library_id: 'matplotlib', library_name: 'Matplotlib', quality_score: 85 },
+  { library_id: 'seaborn', library_name: 'Seaborn', quality_score: 90 },
+  { library_id: 'plotly', library_name: 'Plotly', quality_score: 78 },
+];
+
+describe('LibraryPills', () => {
+  it('renders nothing for empty implementations', () => {
+    const { container } = render(
+      <LibraryPills implementations={[]} selectedLibrary="matplotlib" onSelect={vi.fn()} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders selected library', () => {
+    render(
+      <LibraryPills
+        implementations={mockImplementations}
+        selectedLibrary="matplotlib"
+        onSelect={vi.fn()}
+      />
+    );
+
+    expect(screen.getAllByText('matplotlib').length).toBeGreaterThan(0);
+  });
+
+  it('calls onSelect when clicking a pill', async () => {
+    const onSelect = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <LibraryPills
+        implementations={mockImplementations}
+        selectedLibrary="matplotlib"
+        onSelect={onSelect}
+      />
+    );
+
+    // Click the next arrow to navigate
+    const buttons = screen.getAllByRole('button');
+    await user.click(buttons[1]); // right arrow
+
+    expect(onSelect).toHaveBeenCalled();
+  });
+
+  it('calls onSelect when clicking prev arrow', async () => {
+    const onSelect = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <LibraryPills
+        implementations={mockImplementations}
+        selectedLibrary="matplotlib"
+        onSelect={onSelect}
+      />
+    );
+
+    const buttons = screen.getAllByRole('button');
+    await user.click(buttons[0]); // left arrow
+
+    expect(onSelect).toHaveBeenCalled();
+  });
+
+  it('handles single implementation', () => {
+    render(
+      <LibraryPills
+        implementations={[mockImplementations[0]]}
+        selectedLibrary="matplotlib"
+        onSelect={vi.fn()}
+      />
+    );
+
+    expect(screen.getAllByText('matplotlib').length).toBeGreaterThan(0);
+  });
+
+  it('handles two implementations', () => {
+    render(
+      <LibraryPills
+        implementations={mockImplementations.slice(0, 2)}
+        selectedLibrary="matplotlib"
+        onSelect={vi.fn()}
+      />
+    );
+
+    expect(screen.getAllByText('matplotlib').length).toBeGreaterThan(0);
+  });
+});

app/src/components/LoaderSpinner.test.tsx

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '../test-utils';
+import { LoaderSpinner } from './LoaderSpinner';
+
+describe('LoaderSpinner', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<LoaderSpinner />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('renders with small size', () => {
+    const { container } = render(<LoaderSpinner size="small" />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('renders with large size by default', () => {
+    const { container } = render(<LoaderSpinner />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+});

app/src/hooks/useCopyCode.test.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useCopyCode } from './useCopyCode';
+
+describe('useCopyCode', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    Object.assign(navigator, {
+      clipboard: { writeText: vi.fn().mockResolvedValue(undefined) },
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('starts with copied = false', () => {
+    const { result } = renderHook(() => useCopyCode());
+    expect(result.current.copied).toBe(false);
+  });
+
+  it('copies text to clipboard', async () => {
+    const { result } = renderHook(() => useCopyCode());
+
+    await act(async () => {
+      await result.current.copyToClipboard('hello');
+    });
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('hello');
+    expect(result.current.copied).toBe(true);
+  });
+
+  it('resets copied after timeout', async () => {
+    const { result } = renderHook(() => useCopyCode({ timeout: 1000 }));
+
+    await act(async () => {
+      await result.current.copyToClipboard('hello');
+    });
+    expect(result.current.copied).toBe(true);
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    expect(result.current.copied).toBe(false);
+  });
+
+  it('calls onCopy callback', async () => {
+    const onCopy = vi.fn();
+    const { result } = renderHook(() => useCopyCode({ onCopy }));
+
+    await act(async () => {
+      await result.current.copyToClipboard('hello');
+    });
+
+    expect(onCopy).toHaveBeenCalledOnce();
+  });
+
+  it('reset sets copied to false', async () => {
+    const { result } = renderHook(() => useCopyCode());
+
+    await act(async () => {
+      await result.current.copyToClipboard('hello');
+    });
+    expect(result.current.copied).toBe(true);
+
+    act(() => {
+      result.current.reset();
+    });
+    expect(result.current.copied).toBe(false);
+  });
+
+  it('handles clipboard failure gracefully', async () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    (navigator.clipboard.writeText as ReturnType<typeof vi.fn>).mockRejectedValueOnce(new Error('denied'));
+
+    const { result } = renderHook(() => useCopyCode());
+
+    await act(async () => {
+      await result.current.copyToClipboard('hello');
+    });
+
+    expect(result.current.copied).toBe(false);
+    expect(consoleSpy).toHaveBeenCalled();
+    consoleSpy.mockRestore();
+  });
+});

app/src/hooks/useLayoutContext.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useAppData, useHomeState, initialHomeState } from './useLayoutContext';
+
+describe('useAppData', () => {
+  it('throws when used outside provider', () => {
+    expect(() => {
+      renderHook(() => useAppData());
+    }).toThrow('useAppData must be used within AppDataProvider');
+  });
+});
+
+describe('useHomeState', () => {
+  it('throws when used outside provider', () => {
+    expect(() => {
+      renderHook(() => useHomeState());
+    }).toThrow('useHomeState must be used within AppDataProvider');
+  });
+});
+
+describe('initialHomeState', () => {
+  it('has correct default values', () => {
+    expect(initialHomeState).toEqual({
+      allImages: [],
+      displayedImages: [],
+      activeFilters: [],
+      filterCounts: null,
+      globalCounts: null,
+      orCounts: [],
+      hasMore: false,
+      scrollY: 0,
+      initialized: false,
+    });
+  });
+});