Files
familienarchiv/frontend/src/lib/timeline/EventHeader.svelte.spec.ts
marcel 49d8ab78b4
Some checks failed
CI / Unit & Component Tests (push) Successful in 7m35s
CI / OCR Service Tests (push) Successful in 36s
CI / Backend Unit Tests (push) Failing after 12m42s
CI / fail2ban Regex (push) Successful in 1m50s
CI / Semgrep Security Scan (push) Successful in 37s
CI / Compose Bucket Idempotency (push) Successful in 1m18s
Cluster event letters inline in the chronological /zeitstrahl (no grouping toggle) (#851)
Closes #850

## Summary

On `/zeitstrahl`, a curated event that has letters linked to it now renders as a contained event card — the event is the card header (accent glyph, title, `{date} · {kuratiert|abgeleitet}` subtitle, count, and a curator edit link), with its linked letters listed inside (first 5, then a keyboard-operable show-more/less toggle). Letters in a year *other* than the event's band get a lighter cross-year `✉ title` card. Every other letter stays a plain, alternating, density-folding chronological letter. There is **no grouping control** — clustering is automatic and always on. The meta-line drops its `Gruppierung: Datum` segment.

This supersedes #827: it keeps that branch's event-card clustering and the computed `linkedEventId`, and drops the toggle, the Thema mode, and the "Weitere Briefe" drawer.

## What changed

**Backend**
- `TimelineEntryDTO` gains a nullable `linkedEventId` (UUID; not `@Schema(REQUIRED)`).
- `TimelineService.resolveLetterEventLinks` resolves each letter's curated event in one batched pass over the events it already loads — no per-letter query, no new column, no Flyway migration.
- Regenerated the single `linkedEventId?` field in `api.ts`.

**Frontend**
- New `eventClustering.ts` (`buildEventLookup`, `splitYearLetters`, `CLUSTER_PREVIEW=5`) — filter-then-cluster: a letter clusters only if its `linkedEventId` is set AND present in the lookup, otherwise it stays loose.
- New `EventCluster.svelte` — the contained event card (same-year event header + edit link, or cross-year ✉ text header; first-5 + show-more).
- `LetterCard.svelte` gains `compact` + `variant='event'` (the `.lcard.ev` in-card letter).
- `YearBand.svelte` rebuilt to render event clusters inline; loose letters keep the alternating layout and density strip, and the strip counts **only** loose letters (no duplication).
- `TimelineView.svelte` builds the event lookup once and threads it + `canWrite` to each band.
- `+page.svelte` drops the grouping meta segment; the unused `timeline_grouping_date` key removed from de/en/es.
- New `timeline_bucket_show_more`/`_less` keys in all locales.
- REQ-010 `{@html}` grep gate over `lib/timeline/`.

## Tests (real runs)

- Backend `TimelineServiceTest`: **30 passed** (incl. the 2 new `linkedEventId` tests); `DerivedEventsAssemblyTest`: 17 passed; backend main sources compile.
- Frontend client sweep (`LetterCard`, `EventCluster`, `YearBand`, `TimelineView`, `zeitstrahl/page`): **81 passed** (5 files).
- Frontend server sweep (`eventClustering`, `messages`, `timeline-no-raw-html`): **18 passed** (3 files).
- `svelte-check`: no new errors in the touched files (pre-existing baseline noise elsewhere unchanged).

RTM: thirteen `REQ-001..013` rows added for #850 (feature `inline-event-clustering`), Status Done.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Marcel <marcel@familienarchiv>
Reviewed-on: #851
2026-06-16 14:38:09 +02:00

67 lines
2.7 KiB
TypeScript

import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import * as m from '$lib/paraglide/messages.js';
import EventHeader from './EventHeader.svelte';
import { makeEntry } from './test-factories';
import type { components } from '$lib/generated/api';
type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
afterEach(() => cleanup());
const EV_ID = 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa';
const curated = (overrides: Partial<TimelineEntryDTO> = {}): TimelineEntryDTO =>
makeEntry({
kind: 'EVENT',
type: 'PERSONAL',
derived: false,
eventId: EV_ID,
eventDate: '1916-07-06',
precision: 'DAY',
title: 'Ein gewaltiger Stadtbrand',
documentId: undefined,
...overrides
});
describe('EventHeader', () => {
it('renders the glyph with an sr-only label, the title, and the provenance subtitle', () => {
render(EventHeader, { entry: curated() });
expect(document.querySelector('.sr-only')?.textContent).toBe(m.timeline_layer_family());
expect(document.body.textContent).toContain('Ein gewaltiger Stadtbrand');
expect(document.body.textContent).toContain(m.timeline_provenance_curated());
});
it('shows the edit pencil for a writer on a curated event (canEditEvent gate)', () => {
render(EventHeader, { entry: curated(), canWrite: true });
const edit = document.querySelector('[data-testid="event-edit"]') as HTMLAnchorElement;
expect(edit).not.toBeNull();
expect(edit.getAttribute('href')).toBe(`/zeitstrahl/events/${EV_ID}/edit`);
});
it('hides the edit pencil without write, for a derived event, and for a null eventId', () => {
render(EventHeader, { entry: curated(), canWrite: false });
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
cleanup();
render(EventHeader, { entry: curated({ derived: true }), canWrite: true });
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
cleanup();
render(EventHeader, { entry: curated({ eventId: undefined }), canWrite: true });
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
});
it('renders a screen-reader-labeled letter count when a count is given', () => {
render(EventHeader, { entry: curated(), count: 3 });
const count = document.querySelector('[data-testid="event-count"]') as HTMLElement;
expect(count.querySelector('[aria-hidden="true"]')?.textContent).toContain('· 3');
expect(count.querySelector('.sr-only')?.textContent).toBe(
m.timeline_cluster_letter_count({ count: 3 })
);
});
it('omits the letter count when no count is given (the pill case)', () => {
render(EventHeader, { entry: curated() });
expect(document.querySelector('[data-testid="event-count"]')).toBeNull();
});
});