test: add unit tests for ImagesGrid, PlotOfTheDay, RelatedSpecs, useInfiniteScroll, responsiveImage, and stats endpoints

- Implement tests for ImagesGrid component
- Add tests for PlotOfTheDay functionality
- Create tests for RelatedSpecs component
- Introduce tests for useInfiniteScroll hook
- Add tests for responsiveImage utility functions
- Implement tests for stats endpoint and refresh functionality

Author: MarkusNeusinger

app/src/components/ImagesGrid.test.tsx

@@ -0,0 +1,133 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '../test-utils';
+import { ImagesGrid } from './ImagesGrid';
+import type { PlotImage, LibraryInfo, SpecInfo } from '../types';
+import type { ImageSize } from '../constants';
+import { createRef } from 'react';
+
+// Mock child components to isolate ImagesGrid
+vi.mock('./ImageCard', () => ({
+  ImageCard: ({ image, index }: { image: PlotImage; index: number }) => (
+    <div data-testid={`image-card-${index}`}>{image.library}</div>
+  ),
+}));
+
+vi.mock('./LoaderSpinner', () => ({
+  LoaderSpinner: ({ size }: { size: string }) => (
+    <div data-testid="loader-spinner">{size}</div>
+  ),
+}));
+
+const mockLibraries: LibraryInfo[] = [
+  { id: 'matplotlib', name: 'Matplotlib', description: 'Matplotlib desc', documentation_url: 'https://matplotlib.org' },
+];
+
+const mockSpecs: SpecInfo[] = [
+  { id: 'scatter-basic', title: 'Basic Scatter Plot', description: 'A scatter plot' },
+];
+
+function makeImages(n: number): PlotImage[] {
+  return Array.from({ length: n }, (_, i) => ({
+    library: 'matplotlib',
+    url: `https://example.com/img${i}.png`,
+    spec_id: `scatter-${i}`,
+  }));
+}
+
+interface DefaultProps {
+  images: PlotImage[];
+  viewMode: 'spec' | 'library';
+  selectedSpec: string;
+  selectedLibrary: string;
+  loading: boolean;
+  hasMore: boolean;
+  isLoadingMore: boolean;
+  isTransitioning: boolean;
+  librariesData: LibraryInfo[];
+  specsData: SpecInfo[];
+  openTooltip: string | null;
+  loadMoreRef: React.RefObject<HTMLDivElement | null>;
+  imageSize: ImageSize;
+  onTooltipToggle: ReturnType<typeof vi.fn>;
+  onCardClick: ReturnType<typeof vi.fn>;
+}
+
+function getDefaultProps(overrides: Partial<DefaultProps> = {}): DefaultProps {
+  return {
+    images: [],
+    viewMode: 'library',
+    selectedSpec: '',
+    selectedLibrary: '',
+    loading: false,
+    hasMore: false,
+    isLoadingMore: false,
+    isTransitioning: false,
+    librariesData: mockLibraries,
+    specsData: mockSpecs,
+    openTooltip: null,
+    loadMoreRef: createRef<HTMLDivElement>(),
+    imageSize: 'normal',
+    onTooltipToggle: vi.fn(),
+    onCardClick: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe('ImagesGrid', () => {
+  it('shows loading spinner when loading with no images', () => {
+    render(<ImagesGrid {...getDefaultProps({ loading: true })} />);
+    expect(screen.getByTestId('loader-spinner')).toBeInTheDocument();
+    expect(screen.getByTestId('loader-spinner')).toHaveTextContent('large');
+  });
+
+  it('shows "No images found" alert when images are empty and not loading', () => {
+    render(<ImagesGrid {...getDefaultProps({ loading: false, images: [] })} />);
+    expect(screen.getByText('No images found for this spec.')).toBeInTheDocument();
+  });
+
+  it('renders an ImageCard for each image', () => {
+    const images = makeImages(3);
+    render(<ImagesGrid {...getDefaultProps({ images })} />);
+
+    expect(screen.getByTestId('image-card-0')).toBeInTheDocument();
+    expect(screen.getByTestId('image-card-1')).toBeInTheDocument();
+    expect(screen.getByTestId('image-card-2')).toBeInTheDocument();
+  });
+
+  it('renders correctly with compact image size', () => {
+    const images = makeImages(2);
+    render(<ImagesGrid {...getDefaultProps({ images, imageSize: 'compact' })} />);
+
+    expect(screen.getByTestId('image-card-0')).toBeInTheDocument();
+    expect(screen.getByTestId('image-card-1')).toBeInTheDocument();
+  });
+
+  it('renders bottom loading indicator when isLoadingMore and hasMore', () => {
+    const images = makeImages(3);
+    render(
+      <ImagesGrid {...getDefaultProps({ images, hasMore: true, isLoadingMore: true })} />,
+    );
+    // There should be two loader spinners: one is the bottom small spinner
+    const spinners = screen.getAllByTestId('loader-spinner');
+    expect(spinners.some((s) => s.textContent === 'small')).toBe(true);
+  });
+
+  it('does not show loading spinner when loading but isTransitioning is true', () => {
+    render(
+      <ImagesGrid {...getDefaultProps({ loading: true, isTransitioning: true })} />,
+    );
+    // When isTransitioning is true and images is empty and loading, the first branch
+    // is skipped. The second branch renders the empty alert because images.length===0
+    // and !loading is false — so the condition (images.length > 0 || !loading) is false
+    // and the component returns null.
+    expect(screen.queryByTestId('loader-spinner')).not.toBeInTheDocument();
+  });
+
+  it('returns null when images empty, loading true, and transitioning true', () => {
+    const { container } = render(
+      <ImagesGrid {...getDefaultProps({ loading: true, isTransitioning: true, images: [] })} />,
+    );
+    // The component returns null in this case (neither spinner nor alert)
+    expect(container.firstChild).toBeNull();
+  });
+});

app/src/components/PlotOfTheDay.test.tsx

@@ -0,0 +1,165 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor } from '../test-utils';
+import { PlotOfTheDay } from './PlotOfTheDay';
+
+// Mock sessionStorage
+const sessionStorageMock: Record<string, string> = {};
+const sessionStorageStub = {
+  getItem: vi.fn((key: string) => sessionStorageMock[key] ?? null),
+  setItem: vi.fn((key: string, value: string) => { sessionStorageMock[key] = value; }),
+  removeItem: vi.fn((key: string) => { delete sessionStorageMock[key]; }),
+  clear: vi.fn(() => { Object.keys(sessionStorageMock).forEach(k => delete sessionStorageMock[k]); }),
+  get length() { return Object.keys(sessionStorageMock).length; },
+  key: vi.fn(() => null),
+};
+
+const mockData = {
+  spec_id: 'scatter-basic',
+  spec_title: 'Basic Scatter Plot',
+  description: 'A scatter plot',
+  library_id: 'matplotlib',
+  library_name: 'Matplotlib',
+  quality_score: 9,
+  preview_url: 'https://cdn.example.com/plots/scatter-basic/matplotlib/plot.png',
+  image_description: 'Shows data points with clear labels',
+  library_version: '3.8.0',
+  python_version: '3.12',
+  date: '2026-04-11',
+};
+
+describe('PlotOfTheDay', () => {
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    fetchMock = vi.fn();
+    vi.stubGlobal('fetch', fetchMock);
+    // Reset sessionStorage mock state
+    Object.keys(sessionStorageMock).forEach(k => delete sessionStorageMock[k]);
+    vi.stubGlobal('sessionStorage', sessionStorageStub);
+    sessionStorageStub.getItem.mockClear();
+    sessionStorageStub.setItem.mockClear();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders a placeholder while loading', () => {
+    // Never resolve the fetch, so component stays in loading state
+    fetchMock.mockReturnValue(new Promise(() => {}));
+
+    const { container } = render(<PlotOfTheDay />);
+
+    // The loading state renders a Box with minHeight for CLS prevention
+    const placeholder = container.firstChild as HTMLElement;
+    expect(placeholder).toBeInTheDocument();
+    // Should not show any text content yet
+    expect(screen.queryByText('plot of the day')).not.toBeInTheDocument();
+  });
+
+  it('shows the card after successful fetch', async () => {
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(mockData),
+    });
+
+    render(<PlotOfTheDay />);
+
+    await waitFor(() => {
+      expect(screen.getByText('plot of the day')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Basic Scatter Plot')).toBeInTheDocument();
+  });
+
+  it('shows image description when present', async () => {
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(mockData),
+    });
+
+    render(<PlotOfTheDay />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Shows data points with clear labels/)).toBeInTheDocument();
+    });
+  });
+
+  it('shows library version and python version in bottom bar', async () => {
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(mockData),
+    });
+
+    render(<PlotOfTheDay />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Matplotlib 3\.8\.0/)).toBeInTheDocument();
+      expect(screen.getByText(/Python 3\.12/)).toBeInTheDocument();
+    });
+  });
+
+  it('returns null immediately when dismissed via sessionStorage', () => {
+    sessionStorageMock['potd_dismissed'] = 'true';
+
+    const { container } = render(<PlotOfTheDay />);
+
+    // Dismissed state returns null — no DOM output
+    expect(container.firstChild).toBeNull();
+    // Should not have fetched
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it('returns null after API error', async () => {
+    fetchMock.mockResolvedValueOnce({ ok: false });
+
+    const { container } = render(<PlotOfTheDay />);
+
+    await waitFor(() => {
+      // After loading finishes with error, data is null so component returns null
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  it('dismisses on close button click', async () => {
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(mockData),
+    });
+
+    const { userEvent } = await import('../test-utils');
+    const user = userEvent.setup();
+
+    const { container } = render(<PlotOfTheDay />);
+
+    await waitFor(() => {
+      expect(screen.getByText('plot of the day')).toBeInTheDocument();
+    });
+
+    const dismissButton = screen.getByLabelText('Dismiss plot of the day');
+    await user.click(dismissButton);
+
+    // After dismiss, component should return null
+    expect(container.firstChild).toBeNull();
+    expect(sessionStorageStub.setItem).toHaveBeenCalledWith('potd_dismissed', 'true');
+  });
+
+  it('hides library version when it is "unknown"', async () => {
+    const dataWithUnknownVersion = { ...mockData, library_version: 'unknown' };
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(dataWithUnknownVersion),
+    });
+
+    render(<PlotOfTheDay />);
+
+    await waitFor(() => {
+      expect(screen.getByText('plot of the day')).toBeInTheDocument();
+    });
+
+    // Should show "Matplotlib" without " unknown" appended
+    // The bottom bar text node should contain just "Matplotlib" followed by python version
+    const bottomText = screen.getByText(/Matplotlib/);
+    expect(bottomText.textContent).not.toContain('unknown');
+  });
+});