release: v0.20.0

app/[...path]/__tests__/photo-wall-label.test.tsx

@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import { PhotoGrid, type PhotoItem } from '../PhotoGrid';
+
+/**
+ * Kunsthalle's wall label was the EXIF overlay with a CSS-counter number in
+ * front of it, so a photo without camera or lens got no label and no number.
+ * Each photo is now a <figure> with a figcaption that always carries its
+ * number; globals.css hides it outside the presets that show it.
+ */
+
+vi.mock('next/image', () => ({
+  // eslint-disable-next-line @next/next/no-img-element
+  default: ({ alt }: { alt?: string }) => <img alt={alt ?? ''} />,
+}));
+vi.mock('@/components/FadeIn', () => ({
+  FadeIn: ({
+    children,
+    as: Wrapper = 'div',
+  }: {
+    children: React.ReactNode;
+    as?: 'div' | 'figure';
+  }) => <Wrapper>{children}</Wrapper>,
+}));
+
+const photo = (id: string, extra: Partial<PhotoItem> = {}): PhotoItem => ({
+  id,
+  type: 'image',
+  thumbUrl: `/t/${id}`,
+  previewUrl: `/p/${id}`,
+  exifUrl: `/e/${id}`,
+  aspectRatio: 1.5,
+  ...extra,
+});
+
+const ASSETS = [
+  photo('a1', { camera: 'Leica M11', lens: 'Summicron 35', focalLength: '35mm' }),
+  photo('a2'),
+  photo('a3', { caption: 'Cloister at dusk' }),
+  photo('a4', { focalLength: '50mm' }),
+];
+
+let store: Map<string, string>;
+
+beforeEach(() => {
+  store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+  window.history.replaceState(null, '', '/kloster');
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+const labels = (container: HTMLElement) =>
+  [...container.querySelectorAll('figure > figcaption.photo-grid__label')] as HTMLElement[];
+
+describe('photo wall label', () => {
+  it('numbers every photo, with or without EXIF', () => {
+    const { container } = render(<PhotoGrid assets={ASSETS} />);
+    const numbers = labels(container).map(
+      (l) => l.querySelector('.photo-grid__label-no')?.textContent,
+    );
+    expect(numbers).toEqual(['01', '02', '03', '04']);
+  });
+
+  it('sits next to the tile, not inside its clipped box', () => {
+    const { container } = render(<PhotoGrid assets={ASSETS} />);
+    for (const label of labels(container)) {
+      expect(label.closest('.photo-grid__item')).toBeNull();
+      expect(label.previousElementSibling?.classList.contains('photo-grid__item')).toBe(true);
+    }
+  });
+
+  it('carries the caption only where one is published, and names the figure with it', () => {
+    const { container } = render(<PhotoGrid assets={ASSETS} />);
+    const titles = labels(container).map(
+      (l) => l.querySelector('.photo-grid__label-title')?.textContent ?? null,
+    );
+    expect(titles).toEqual([null, null, 'Cloister at dusk', null]);
+    // The same text the photo already publishes as its alt text.
+    expect(container.querySelector('img[alt="Cloister at dusk"]')).not.toBeNull();
+    // What assistive tech reads off the label (the figure's name, by HTML-AAM)
+    // is the caption alone.
+    const spoken = (l: HTMLElement) =>
+      [...l.children]
+        .filter((c) => c.getAttribute('aria-hidden') !== 'true')
+        .map((c) => c.textContent)
+        .join('');
+    expect(labels(container).map(spoken)).toEqual(['', '', 'Cloister at dusk', '']);
+  });
+
+  it('prints the EXIF line only for a camera or lens, as the tile does', () => {
+    const { container } = render(<PhotoGrid assets={ASSETS} />);
+    const exif = labels(container).map(
+      (l) => l.querySelector('.photo-grid__label-exif')?.textContent ?? null,
+    );
+    expect(exif).toEqual(['Leica M11 · Summicron 35 · 35mm', null, null, null]);
+  });
+
+  it('keeps the number and EXIF, which repeat the tile and lightbox, out of the figure name', () => {
+    const { container } = render(<PhotoGrid assets={ASSETS} />);
+    const [first] = labels(container);
+    expect(first.querySelector('.photo-grid__label-no')?.getAttribute('aria-hidden')).toBe('true');
+    expect(first.querySelector('.photo-grid__label-exif')?.getAttribute('aria-hidden')).toBe(
+      'true',
+    );
+  });
+
+  it('keeps a photo’s album number when the favourites filter hides the others', async () => {
+    store.set('folio_fav_kloster', JSON.stringify(['a3']));
+    const { container } = render(<PhotoGrid assets={ASSETS} proofing albumName="Kloster" />);
+    fireEvent.click(await screen.findByText('❤️ 1 Selected'));
+    const numbers = labels(container).map(
+      (l) => l.querySelector('.photo-grid__label-no')?.textContent,
+    );
+    expect(numbers).toEqual(['03']);
+  });
+});