test(places): the picture chosen in the editor, the gallery and the lightbox

Tests for the picker, the shared image field, staging and saving the picture, the gallery hook and trigger, the lightbox's dialog, focus and reading direction, the credit and the enrichment cache; the inspector, phone sheet, details column, form and wiring tests follow the picture into the editor. The picker's upload tile and credit line are components of their own, the heading goes with an empty picker, the gallery's state names its place, and 'No picture' only shows when a picture is being removed.
2026-10-24 16:03:02 +00:00 · 2026-10-23 20:06:09 +02:00
parent 35566690e9
commit bebfeeff97
25 changed files with 1687 additions and 199 deletions
@@ -0,0 +1,106 @@
+// FE-PLANNER-PLIMGFIELD-001 to FE-PLANNER-PLIMGFIELD-004: the editor's picture field the
+// desktop dialog and the phone sheet share: the place's attached images, the waiting
+// picture's preview, and which tile stands for the choice.
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { buildReservation, buildTripFile } from '../../../tests/helpers/factories';
+import { resetAllStores } from '../../../tests/helpers/store';
+import { useTripStore } from '../../store/tripStore';
+import type { TripFile } from '../../types';
+import type { PendingPlaceImage } from './placeImageChoice';
+import { usePlaceImageField } from './usePlaceImageField';
+
+const PHOTO = buildTripFile({ id: 1, place_id: 5, mime_type: 'image/jpeg', original_name: 'front.jpg' });
+const PDF = buildTripFile({ id: 2, place_id: 5, mime_type: 'application/pdf' });
+const ELSEWHERE = buildTripFile({ id: 3, place_id: 6, mime_type: 'image/png' });
+const ON_BOOKING = buildTripFile({
+  id: 4,
+  place_id: null,
+  reservation_id: 90,
+  mime_type: 'image/webp',
+} as Partial<TripFile>);
+
+const handlers = () => ({ stageUpload: vi.fn(), stageAttached: vi.fn(), removeImage: vi.fn() });
+
+beforeEach(() => {
+  resetAllStores();
+  useTripStore.setState({
+    files: [PHOTO, PDF, ELSEWHERE, ON_BOOKING],
+    reservations: [buildReservation({ id: 90, place_id: 5 })],
+  } as never);
+});
+
+describe('usePlaceImageField', () => {
+  it("FE-PLANNER-PLIMGFIELD-001: offers the place's attached images, its booking's included, and its current picture", () => {
+    const h = handlers();
+    const { result } = renderHook(() =>
+      usePlaceImageField({
+        place: { id: 5, image_url: '/uploads/places/5.jpg' },
+        imageUrl: undefined,
+        pendingImage: null,
+        canUploadFiles: true,
+        ...h,
+      })
+    );
+    expect(result.current.own.attached).toEqual([PHOTO, ON_BOOKING]);
+    expect(result.current.own.currentUrl).toBe('/uploads/places/5.jpg');
+    expect(result.current.own.pendingPreview).toBeNull();
+    expect(result.current.own.canUpload).toBe(true);
+    expect(result.current.own.onUpload).toBe(h.stageUpload);
+    expect(result.current.own.onPickAttached).toBe(h.stageAttached);
+    expect(result.current.own.onRemove).toBe(h.removeImage);
+    expect(result.current.chosen).toEqual({ kind: 'current' });
+  });
+
+  it('FE-PLANNER-PLIMGFIELD-002: a new place has nothing attached and no picture, but can still be given one', () => {
+    const { result } = renderHook(() =>
+      usePlaceImageField({ place: null, imageUrl: undefined, pendingImage: null, canUploadFiles: true, ...handlers() })
+    );
+    expect(result.current.own.attached).toEqual([]);
+    expect(result.current.own.currentUrl).toBeNull();
+    expect(result.current.own.canUpload).toBe(true);
+    expect(result.current.chosen).toEqual({ kind: 'none' });
+  });
+
+  it('FE-PLANNER-PLIMGFIELD-003: a waiting upload shows as its preview and is the choice', () => {
+    const pending: PendingPlaceImage = { kind: 'upload', file: new File(['x'], 'a.png'), preview: 'blob:a' };
+    const { result } = renderHook(() =>
+      usePlaceImageField({
+        place: { id: 5, image_url: null },
+        imageUrl: undefined,
+        pendingImage: pending,
+        canUploadFiles: false,
+        ...handlers(),
+      })
+    );
+    expect(result.current.own.pendingPreview).toBe('blob:a');
+    expect(result.current.own.canUpload).toBe(false);
+    expect(result.current.chosen).toEqual({ kind: 'upload' });
+  });
+
+  it('FE-PLANNER-PLIMGFIELD-004: a waiting attached image has no preview, and a dropped picture reads as none', () => {
+    const attached = renderHook(() =>
+      usePlaceImageField({
+        place: { id: 5, image_url: '/uploads/places/5.jpg' },
+        imageUrl: undefined,
+        pendingImage: { kind: 'attached', file: PHOTO },
+        canUploadFiles: true,
+        ...handlers(),
+      })
+    );
+    expect(attached.result.current.own.pendingPreview).toBeNull();
+    expect(attached.result.current.chosen).toEqual({ kind: 'attached', fileId: 1 });
+
+    const dropped = renderHook(() =>
+      usePlaceImageField({
+        place: { id: 5, image_url: '/uploads/places/5.jpg' },
+        imageUrl: null,
+        pendingImage: null,
+        canUploadFiles: true,
+        ...handlers(),
+      })
+    );
+    expect(dropped.result.current.chosen).toEqual({ kind: 'none' });
+  });
+});