familienarchiv/frontend/src/lib/activity/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/notification/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="/aktivitaeten?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);
	});

	it('mention row href includes both commentId and annotationId when annotationId is present', async () => {
		render(ChronikFuerDichBox, {
			unread: [
				notif({
					id: 'n-link',
					documentId: 'doc-42',
					referenceId: 'comment-7',
					annotationId: 'annot-9'
				})
			],
			onMarkRead: vi.fn(),
			onMarkAllRead: vi.fn()
		});
		const link = document.querySelector(
			'a[href="/documents/doc-42?commentId=comment-7&annotationId=annot-9"]'
		);
		expect(link).not.toBeNull();
	});

	it('Dismiss button is a sibling of the document link, never nested inside <a>', async () => {
		render(ChronikFuerDichBox, {
			unread: [notif({ id: 'x' })],
			onMarkRead: vi.fn(),
			onMarkAllRead: vi.fn()
		});
		const dismiss = document.querySelector('[data-testid="chronik-fuerdich-dismiss"]');
		expect(dismiss).not.toBeNull();
		// HTML spec forbids interactive content descendants of <a>.
		// Prevents the senior-audience tap-drag bug flagged by Leonie.
		expect(dismiss?.closest('a')).toBeNull();
	});
});