familienarchiv/frontend/src/lib/timeline/EventCluster.svelte.spec.ts

import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { tick } from 'svelte';
import * as m from '$lib/paraglide/messages.js';
import EventCluster from './EventCluster.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 makeEvent = (overrides: Partial<TimelineEntryDTO> = {}): TimelineEntryDTO =>
	makeEntry({
		kind: 'EVENT',
		type: 'PERSONAL',
		documentId: undefined,
		eventId: EV_ID,
		eventDate: '1916-07-06',
		precision: 'DAY',
		title: 'Ein gewaltiger Stadtbrand',
		...overrides
	});

const letters = (n: number): TimelineEntryDTO[] =>
	Array.from({ length: n }, (_, i) =>
		makeEntry({ kind: 'LETTER', documentId: `doc-${i}`, title: `Brief ${i}`, linkedEventId: EV_ID })
	);

describe('EventCluster — contained event card (#850)', () => {
	it('renders a data-testid event-card with the event title once (REQ-002)', () => {
		render(EventCluster, { letters: letters(2), event: makeEvent() });
		expect(document.querySelector('[data-testid="event-card"]')).not.toBeNull();
		const occurrences = (document.body.textContent?.match(/Ein gewaltiger Stadtbrand/g) ?? [])
			.length;
		expect(occurrences).toBe(1);
	});

	it('shows the event-edit link for a curator on a curated event (REQ-002)', () => {
		render(EventCluster, { letters: letters(2), event: makeEvent(), 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 event-edit link when canWrite is false', () => {
		render(EventCluster, { letters: letters(2), event: makeEvent(), canWrite: false });
		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
	});

	it('hides the event-edit link for a derived event even with canWrite', () => {
		render(EventCluster, {
			letters: letters(2),
			event: makeEvent({ derived: true, eventId: undefined, derivedType: 'BIRTH' }),
			canWrite: true
		});
		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
	});

	it('renders its letters as compact a.lcard.ev cards (REQ-002)', () => {
		render(EventCluster, { letters: letters(2), event: makeEvent() });
		expect(document.querySelectorAll('a.lcard.ev').length).toBeGreaterThan(0);
	});

	it('shows the first 5 of 8 letters + a show-more toggle that expands to 8 then back to 5 (REQ-003)', async () => {
		render(EventCluster, { letters: letters(8), event: makeEvent() });
		expect(document.querySelectorAll('a.lcard').length).toBe(5);
		const toggle = document.querySelector('[data-testid="bucket-show-more"]') as HTMLButtonElement;
		expect(toggle).not.toBeNull();
		expect(toggle.getAttribute('aria-expanded')).toBe('false');
		expect(toggle.getBoundingClientRect().height).toBeGreaterThanOrEqual(44);

		toggle.click();
		await tick();
		expect(document.querySelectorAll('a.lcard').length).toBe(8);
		expect(toggle.getAttribute('aria-expanded')).toBe('true');

		toggle.click();
		await tick();
		expect(document.querySelectorAll('a.lcard').length).toBe(5);
	});

	it('renders no show-more toggle when the cluster holds 5 or fewer letters', () => {
		render(EventCluster, { letters: letters(5), event: makeEvent() });
		expect(document.querySelector('[data-testid="bucket-show-more"]')).toBeNull();
	});

	it('renders a cross-year text header (✉ title, no event-edit, no pill) when no event is given (REQ-004)', () => {
		render(EventCluster, {
			letters: letters(2),
			title: 'Briefe von der Front',
			canWrite: true
		});
		expect(document.querySelector('[data-testid="event-card"]')).not.toBeNull();
		expect(document.body.textContent).toContain('✉');
		expect(document.body.textContent).toContain('Briefe von der Front');
		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
	});

	it('pairs the cross-year ✉ glyph with an sr-only label so it is not a silent glyph (finding #6)', () => {
		render(EventCluster, { letters: letters(2), title: 'Briefe von der Front' });
		const header = document.querySelector('[data-testid="event-header"]') as HTMLElement;
		const hidden = header.querySelector('[aria-hidden="true"]');
		expect(hidden?.textContent).toContain('✉');
		const srOnly = header.querySelector('.sr-only');
		expect(srOnly?.textContent).toBe(m.timeline_letter_glyph_label());
	});

	it('gives the letter count an sr-only "{count} Briefe" label so "· 2" is not announced bare (finding #6)', () => {
		render(EventCluster, { letters: letters(2), title: 'Briefe von der Front' });
		const count = document.querySelector('[data-testid="event-count"]') as HTMLElement;
		// the visible "· 2" stays aria-hidden; the sr-only sibling carries the meaning
		expect(count.querySelector('[aria-hidden="true"]')?.textContent).toContain('· 2');
		expect(count.querySelector('.sr-only')?.textContent).toBe(
			m.timeline_cluster_letter_count({ count: 2 })
		);
	});

	it('renders an HTML-bearing event title verbatim as text, never as markup (REQ-010)', () => {
		render(EventCluster, {
			letters: letters(1),
			event: makeEvent({ title: '<img src=x onerror=alert(1)>' })
		});
		expect(document.querySelector('[data-testid="event-card"] img')).toBeNull();
		expect(document.body.textContent).toContain('<img src=x onerror=alert(1)>');
	});
});