2982c8330c
All under src/lib/components/chronik/: - ChronikRow.svelte — single orchestrator for four variants (comment / for-you / rollup / simple), discriminated via $derived. Outer <a> wraps avatar + body + time; document title is a styled <span> (no nested anchors). Rollup shows count badge + en-dash time range; for-you gets accent left border + @ marker hidden below sm:. - ChronikTimeline.svelte — buckets items by day using bucketByDay() and renders Heute/Gestern/Diese Woche/Älter section headers with <span> trailing rule. - ChronikFuerDichBox.svelte — unread mentions card with inbox-zero variant, per-row Dismiss button (prevents bubbling, calls onMarkRead), aria-live count badge, and a .fade-in class gated by prefers-reduced-motion. - ChronikFilterPills.svelte — role=radiogroup with 5 pills, ArrowLeft/Right keyboard navigation wrapping across the group, single tabstop via dynamic tabindex. - ChronikEmptyState.svelte — three variants (first-run / filter-empty / inbox-zero) sharing a centered-column layout. - ChronikErrorCard.svelte — warning card with retry button, optional custom message override. Verbs map to chronik_singleton_* / chronik_rollup_* per AuditKind so no ICU pluralization is needed. Comment preview is a TODO placeholder (currently the document title) pending a backend preview DTO follow-up. All 40 unit tests green. No type-check or lint errors in these files. Part of #285. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import { describe, it, expect, afterEach } from 'vitest';
|
|
import { cleanup, render } from 'vitest-browser-svelte';
|
|
import { page } from 'vitest/browser';
|
|
|
|
import ChronikEmptyState from './ChronikEmptyState.svelte';
|
|
|
|
afterEach(cleanup);
|
|
|
|
describe('ChronikEmptyState', () => {
|
|
it('renders first-run variant title', async () => {
|
|
render(ChronikEmptyState, { variant: 'first-run' });
|
|
await expect.element(page.getByText('Noch nichts geschehen')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders filter-empty variant title', async () => {
|
|
render(ChronikEmptyState, { variant: 'filter-empty' });
|
|
await expect.element(page.getByText('Nichts in dieser Ansicht')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders inbox-zero variant title', async () => {
|
|
render(ChronikEmptyState, { variant: 'inbox-zero' });
|
|
await expect.element(page.getByText('Keine neuen Erwähnungen')).toBeInTheDocument();
|
|
});
|
|
|
|
it('applies the expected data-variant attribute', async () => {
|
|
render(ChronikEmptyState, { variant: 'first-run' });
|
|
const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
|
|
expect(wrapper?.getAttribute('data-variant')).toBe('first-run');
|
|
});
|
|
});
|