familienarchiv/frontend/src/lib/components/chronik/ChronikFuerDichBox.svelte.spec.ts

import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page, userEvent } from 'vitest/browser';

import ChronikFuerDichBox from './ChronikFuerDichBox.svelte';
import type { NotificationItem } from '$lib/stores/notifications.svelte';

afterEach(cleanup);

function notif(partial: Partial<NotificationItem>): NotificationItem {
	return {
		id: 'n1',
		type: 'MENTION',
		documentId: 'doc-1',
		documentTitle: 'Ein Dokument',
		referenceId: 'ref-1',
		annotationId: null,
		read: false,
		createdAt: new Date(Date.now() - 5 * 60_000).toISOString(),
		actorName: 'Anna',
		...partial
	};
}

describe('ChronikFuerDichBox', () => {
	it('renders inbox-zero state when there are no unread items', async () => {
		render(ChronikFuerDichBox, {
			unread: [],
			onMarkRead: vi.fn(),
			onMarkAllRead: vi.fn()
		});
		const zero = document.querySelector('[data-testid="chronik-inbox-zero"]');
		expect(zero).not.toBeNull();
		await expect.element(page.getByText('Keine neuen Erwähnungen')).toBeInTheDocument();
	});

	it('links to the archived mentions in the inbox-zero state', async () => {
		render(ChronikFuerDichBox, {
			unread: [],
			onMarkRead: vi.fn(),
			onMarkAllRead: vi.fn()
		});
		const link = document.querySelector('a[href="/chronik?filter=fuer-dich"]');
		expect(link).not.toBeNull();
	});

	it('renders the count badge with correct total when unread exists', async () => {
		render(ChronikFuerDichBox, {
			unread: [notif({ id: 'a' }), notif({ id: 'b' })],
			onMarkRead: vi.fn(),
			onMarkAllRead: vi.fn()
		});
		await expect.element(page.getByText('2 neu')).toBeInTheDocument();
	});

	it('count badge has aria-live=polite when unread exists', async () => {
		render(ChronikFuerDichBox, {
			unread: [notif({ id: 'a' })],
			onMarkRead: vi.fn(),
			onMarkAllRead: vi.fn()
		});
		// Wait for render
		await expect.element(page.getByText('1 neu')).toBeInTheDocument();
		const badge = document.querySelector('[data-testid="chronik-fuerdich-count"]');
		expect(badge?.getAttribute('aria-live')).toBe('polite');
		expect(badge?.getAttribute('aria-atomic')).toBe('true');
	});

	it('does not render the "Alle gelesen" button when there are no unread items', async () => {
		render(ChronikFuerDichBox, {
			unread: [],
			onMarkRead: vi.fn(),
			onMarkAllRead: vi.fn()
		});
		await expect.element(page.getByText('Keine neuen Erwähnungen')).toBeInTheDocument();
		const all = document.querySelector('[data-testid="chronik-mark-all-read"]');
		expect(all).toBeNull();
	});

	it('renders the "Alle gelesen" button when unread exists', async () => {
		render(ChronikFuerDichBox, {
			unread: [notif({ id: 'a' })],
			onMarkRead: vi.fn(),
			onMarkAllRead: vi.fn()
		});
		await expect.element(page.getByText('Alle gelesen')).toBeInTheDocument();
	});

	it('calls onMarkAllRead when the "Alle gelesen" button is clicked', async () => {
		const onMarkAllRead = vi.fn();
		render(ChronikFuerDichBox, {
			unread: [notif({ id: 'a' })],
			onMarkRead: vi.fn(),
			onMarkAllRead
		});
		await userEvent.click(page.getByText('Alle gelesen'));
		expect(onMarkAllRead).toHaveBeenCalledTimes(1);
	});

	it('calls onMarkRead (and not navigation) when a per-item Dismiss button is clicked', async () => {
		const onMarkRead = vi.fn();
		const n = notif({ id: 'xyz' });
		render(ChronikFuerDichBox, {
			unread: [n],
			onMarkRead,
			onMarkAllRead: vi.fn()
		});
		const dismiss = document.querySelector(
			'[data-testid="chronik-fuerdich-dismiss"]'
		) as HTMLButtonElement | null;
		expect(dismiss).not.toBeNull();
		dismiss?.click();
		expect(onMarkRead).toHaveBeenCalledTimes(1);
		expect(onMarkRead.mock.calls[0][0]).toEqual(n);
	});
});