Files
immich-folio/lib/__tests__/derive-gallery.test.ts
Ralksta 84c7eeef40 experimental: portfolio features (justified layout, unlisted pages, captions, per-album grid, focal point, nav links, cover hero) (#431)
## Was ist das?

Sieben neue Portfolio-Features, alle als **experimental** gekennzeichnet
— in YAML-Kommentaren, Admin-Panel-Labels und Commit-Scopes, damit sie
einzeln nachvollziehbar und revertierbar bleiben.

## Features (je ein Commit)

| Commit | Feature |
| --- | --- |
| `justified rows gallery layout` | Neues Grid-Layout `justified`:
zeilenbasiert, gleiche Höhen, volle Breite — Flexbox ohne JS-Messung,
letzte Zeile bleibt natürlich klein |
| `hide subpages from navigation` | `hidden: true`: Seite aus
Nav/Homepage raus, per Direktlink erreichbar — im Gegensatz zu `enabled:
false` (404) |
| `lightbox captions` | Immich-Asset-Description als Bildunterschrift im
Info-Panel; EXIF-Route liefert bei `exifOnHover: false` jetzt nur noch
die Caption statt 403 |
| `per-album grid overrides` | `grid:` pro Album-Eintrag, Präzedenz
global < Subpage < Album |
| `per-album cover focal point` | `coverPosition:` → `object-position`
auf Cover-Karten, strikt validiert |
| `external links in header navigation` | `navLinks:` in settings.yaml,
nur http(s), sanitisiert |
| `cover splash hero style` | `heroStyle: cover`: Fullscreen-Splash mit
Enter-Link ins Portfolio |

Alle Optionen sind im Admin-Panel editierbar (PageBuilder /
SettingsEditor).

## Tests

- 356 Unit-Tests grün (13 neue: deriveGallery hidden/grid/coverPosition,
sanitizeNavLinks, EXIF-Route-Captions, justified-Layout-Validierung)
- `npx tsc --noEmit`: 0 Fehler
- `npm run build`: sauber
- Justified-Zeilenmathematik und Cover-Splash per Browser-Harness
visuell/numerisch verifiziert (volle Zeilen enden exakt an der
Containerkante, letzte Zeile bleibt natürlich)

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: ralksta <ralksta@users.noreply.github.com>
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: lancetm714 <108419425+lancetm714@users.noreply.github.com>
2026-08-14 17:56:22 +02:00

255 lines
9.2 KiB
TypeScript

import { describe, it, expect, vi } from 'vitest';
vi.mock('@/lib/env', () => ({
env: {
IMMICH_API_URL: 'http://localhost:2283',
IMMICH_API_KEY: 'test-key',
SITE_TITLE: 'Test Gallery',
SITE_SUBTITLE: '',
CACHE_TTL: 300,
IMMICH_TIMEOUT_MS: 15000,
RATE_LIMIT_RPM: 120,
TRUSTED_PROXY_HOPS: 0,
},
}));
vi.mock('@/lib/config/parser', () => ({
loadYaml: vi.fn(),
clearYamlCache: vi.fn(),
validateUuid: (id: string) => id,
}));
import { deriveGallery } from '@/lib/config';
import type { GalleryYaml } from '@/lib/config/schema';
const A = '11111111-1111-1111-1111-111111111111';
const B = '22222222-2222-2222-2222-222222222222';
/**
* The admin PUT calls this before writing, so that a save the site cannot load
* is rejected with a 400 instead of reported as successful. These are the exact
* shapes the page builder can produce.
*/
describe('deriveGallery rejects what the site cannot load', () => {
it('rejects a subpage with no name', () => {
expect(() =>
deriveGallery({ albums: [A], subpages: [{ albums: [A] }] } as unknown as GalleryYaml),
).toThrow(/must have a name/i);
});
it('rejects a subpage with neither albums nor sections', () => {
expect(() =>
deriveGallery({
albums: [A],
subpages: [{ name: 'Empty', albums: [] }],
} as unknown as GalleryYaml),
).toThrow(/Empty/);
});
// The message reaches the admin UI as the 400 body, so it has to identify
// which subpage is at fault — "invalid gallery" would be useless in a builder
// with a dozen subpages.
it('names the offending subpage so the error is actionable', () => {
expect(() =>
deriveGallery({
albums: [A],
subpages: [
{ name: 'Fine', albums: [A] },
{ name: 'Broken One', albums: [] },
],
} as unknown as GalleryYaml),
).toThrow(/Broken One/);
});
});
describe('deriveGallery accepts valid structures', () => {
it('derives an empty gallery (no albums or subpages)', () => {
// The install wizard can finish without selecting an album, so an empty
// gallery must be a valid, rendered state rather than an error.
const result = deriveGallery({ albums: [] } as GalleryYaml);
expect(result.albums).toEqual([]);
expect(result.standaloneAlbums).toEqual([]);
expect(result.subpages).toEqual([]);
});
it('derives standalone albums', () => {
const result = deriveGallery({ albums: [A, B] } as GalleryYaml);
expect(result.albums).toEqual([A, B]);
expect(result.standaloneAlbums).toEqual([A, B]);
expect(result.subpages).toEqual([]);
});
it('treats an album inside a subpage as no longer standalone', () => {
const result = deriveGallery({
albums: [A],
subpages: [{ name: 'Trips', albums: [B] }],
} as unknown as GalleryYaml);
expect(result.albums).toEqual([A, B]);
expect(result.standaloneAlbums).toEqual([A]);
expect(result.subpages[0].slug).toBe('trips');
});
it('accepts a subpage that has sections instead of albums', () => {
const result = deriveGallery({
subpages: [{ name: 'Work', sections: [{ title: 'Recent Work', albums: [A] }] }],
} as unknown as GalleryYaml);
expect(result.subpages[0].sections?.[0].slug).toBe('recent-work');
expect(result.albums).toEqual([A]);
});
it('collects per-album overrides and hero images', () => {
const result = deriveGallery({
albums: [{ [A]: { title: 'Renamed', description: 'A note', heroImage: B } }],
} as unknown as GalleryYaml);
expect(result.albumOverrides[A]).toBe('Renamed');
expect(result.albumDescriptions[A]).toBe('A note');
expect(result.albumHeroImages[A]).toBe(B);
});
it('collects the per-album sort mode', () => {
const result = deriveGallery({
albums: [{ [A]: { title: 'Series', sort: 'filename' } }, B],
} as unknown as GalleryYaml);
expect(result.albumSortModes[A]).toBe('filename');
// Absent means the default; an explicit entry would make `immich` and
// "never configured" indistinguishable downstream.
expect(result.albumSortModes[B]).toBeUndefined();
});
// A typo would otherwise be invisible: the album would keep rendering in
// Immich order and nothing would say why. Throwing is also what gives the
// admin PUT its 400, via the deriveGallery dry-run.
it('rejects an unknown sort mode, naming the album and the valid values', () => {
expect(() =>
deriveGallery({ albums: [{ [A]: { sort: 'alphabetical' } }] } as unknown as GalleryYaml),
).toThrow(/alphabetical/);
expect(() =>
deriveGallery({ albums: [{ [A]: { sort: 'alphabetical' } }] } as unknown as GalleryYaml),
).toThrow(new RegExp(A));
expect(() =>
deriveGallery({ albums: [{ [A]: { sort: 'alphabetical' } }] } as unknown as GalleryYaml),
).toThrow(/filename/);
});
it('collects the manual asset order, preserving its order', () => {
const result = deriveGallery({
albums: [{ [A]: { sort: 'manual', assetOrder: [B, A] } }],
} as unknown as GalleryYaml);
expect(result.albumManualOrders[A]).toEqual([B, A]);
});
// Kept regardless of the mode, so toggling manual → newest → manual in the
// admin panel does not silently destroy a hand-curated order.
it('keeps the asset order even when the mode is not manual', () => {
const result = deriveGallery({
albums: [{ [A]: { sort: 'newest', assetOrder: [B] } }],
} as unknown as GalleryYaml);
expect(result.albumSortModes[A]).toBe('newest');
expect(result.albumManualOrders[A]).toEqual([B]);
});
// EXPERIMENTAL: hidden keeps a subpage reachable by direct link while
// removing it from navigation — distinct from enabled:false, which 404s.
it('derives the hidden flag on array-style subpages', () => {
const result = deriveGallery({
subpages: [{ name: 'Preview', hidden: true, albums: [A] }],
} as unknown as GalleryYaml);
expect(result.subpages[0].hidden).toBe(true);
expect(result.subpages[0].enabled).toBe(true);
});
it('derives the hidden flag on map-style subpages, defaulting to falsy', () => {
const result = deriveGallery({
subpages: { Preview: { hidden: true, albums: [A] }, Open: [B] },
} as unknown as GalleryYaml);
const preview = result.subpages.find((sp) => sp.name === 'Preview');
const open = result.subpages.find((sp) => sp.name === 'Open');
expect(preview?.hidden).toBe(true);
expect(open?.hidden).toBeFalsy();
});
// EXPERIMENTAL: per-album grid overrides — merged over subpage/global grid.
it('collects per-album grid overrides, dropping unknown layouts to masonry', () => {
const result = deriveGallery({
albums: [
{ [A]: { title: 'Panoramas', grid: { layout: 'filmstrip', columns: 2 } } },
{ [B]: { grid: { layout: 'not-a-layout' } } },
],
} as unknown as GalleryYaml);
expect(result.albumGrids[A]).toEqual({ layout: 'filmstrip', columns: 2 });
expect(result.albumGrids[B]).toEqual({ layout: 'masonry' });
});
it('leaves albumGrids empty for entries without a grid', () => {
const result = deriveGallery({ albums: [A] } as unknown as GalleryYaml);
expect(result.albumGrids).toEqual({});
});
// EXPERIMENTAL: coverPosition feeds object-position on cover images, so it
// must be a strict CSS position value — anything else is a typo or an
// injection attempt and both should fail loudly.
it('collects a valid coverPosition', () => {
const result = deriveGallery({
albums: [{ [A]: { coverPosition: '50% 25%' } }, { [B]: { coverPosition: 'top' } }],
} as unknown as GalleryYaml);
expect(result.albumCoverPositions[A]).toBe('50% 25%');
expect(result.albumCoverPositions[B]).toBe('top');
});
it('rejects a malformed coverPosition, naming the album', () => {
expect(() =>
deriveGallery({
albums: [{ [A]: { coverPosition: 'javascript:alert(1)' } }],
} as unknown as GalleryYaml),
).toThrow(new RegExp(A));
});
it('ignores an empty asset order rather than storing one', () => {
const result = deriveGallery({
albums: [{ [A]: { sort: 'manual', assetOrder: [] } }],
} as unknown as GalleryYaml);
expect(result.albumManualOrders[A]).toBeUndefined();
});
// processAlbumEntry is reached from four places; only the array-subpage path
// was covered before, so a regression in the others would go unnoticed.
it('applies the sort mode to section and map-style subpage albums too', () => {
const sectioned = deriveGallery({
subpages: [
{ name: 'Work', sections: [{ title: 'Recent', albums: [{ [A]: { sort: 'oldest' } }] }] },
],
} as unknown as GalleryYaml);
expect(sectioned.albumSortModes[A]).toBe('oldest');
const mapStyle = deriveGallery({
subpages: { Trips: { albums: [{ [B]: { sort: 'filename' } }] } },
} as unknown as GalleryYaml);
expect(mapStyle.albumSortModes[B]).toBe('filename');
});
it('parses enabled property on subpages correctly', () => {
const result = deriveGallery({
subpages: [
{ name: 'Active Page', albums: [A], enabled: true },
{ name: 'Disabled Page', albums: [B], enabled: false },
],
} as unknown as GalleryYaml);
expect(result.subpages[0].enabled).toBe(true);
expect(result.subpages[1].enabled).toBe(false);
});
});