Files
familienarchiv/frontend/src/lib/timeline/LetterCard.svelte.spec.ts
Marcel e25001f7c9 feat(timeline): add LetterCard component
Single archive letter: sender → receiver (Unbekannt fallback for empty names,
REQ-014), title, precision date chip via timelineDateLabel (omitted when null,
REQ-013), linking to exactly /documents/{documentId} with no target (REQ-023).
44px touch target enforced inline + focus-visible ring (REQ-020). OCR/import
text via {...} escaping + whitespace-pre-line, no {@html} (REQ-021).

Refs #779
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-13 19:30:55 +02:00

59 lines
2.4 KiB
TypeScript

import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import LetterCard from './LetterCard.svelte';
import { timelineDateLabel } from './dateLabel';
import { makeEntry } from './test-factories';
afterEach(() => cleanup());
const DOC_ID = '22222222-2222-2222-2222-222222222222';
describe('LetterCard', () => {
it('renders sender, receiver, and title', () => {
render(LetterCard, {
entry: makeEntry({ senderName: 'Karl', receiverName: 'Elfriede', title: 'Feldpost' })
});
expect(document.body.textContent).toContain('Karl');
expect(document.body.textContent).toContain('Elfriede');
expect(document.body.textContent).toContain('Feldpost');
});
it('renders the precision date exactly as timelineDateLabel returns (REQ-013)', () => {
const entry = makeEntry({ eventDate: '1915-06-15', precision: 'MONTH' });
const expected = timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd);
expect(expected).toBeTruthy();
render(LetterCard, { entry });
expect(document.body.textContent).toContain(expected as string);
});
it('renders no date chip when timelineDateLabel returns null (REQ-013)', () => {
const entry = makeEntry({ precision: 'UNKNOWN', eventDate: undefined });
render(LetterCard, { entry });
const chip = document.querySelector('[data-testid="letter-date"]');
expect(chip).toBeNull();
});
it('shows "Unbekannt" for an empty sender, never a bare arrow (REQ-014)', () => {
render(LetterCard, { entry: makeEntry({ senderName: '', receiverName: 'Elfriede' }) });
expect(document.body.textContent).toContain('Unbekannt');
});
it('shows "Unbekannt" for an empty receiver (REQ-014)', () => {
render(LetterCard, { entry: makeEntry({ senderName: 'Karl', receiverName: '' }) });
expect(document.body.textContent).toContain('Unbekannt');
});
it('links to exactly /documents/{documentId} with no target (REQ-023)', () => {
render(LetterCard, { entry: makeEntry({ documentId: DOC_ID }) });
const link = document.querySelector('a') as HTMLAnchorElement;
expect(link.getAttribute('href')).toBe(`/documents/${DOC_ID}`);
expect(link.hasAttribute('target')).toBe(false);
});
it('has a touch target of at least 44px (REQ-020)', () => {
render(LetterCard, { entry: makeEntry() });
const link = document.querySelector('a') as HTMLAnchorElement;
expect(link.getBoundingClientRect().height).toBeGreaterThanOrEqual(44);
});
});