familienarchiv/frontend/src/lib/notification/NotificationDropdown.svelte.test.ts

import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import { goto } from '$app/navigation';
import NotificationDropdown from './NotificationDropdown.svelte';

vi.mock('$app/navigation', () => ({ goto: vi.fn() }));

afterEach(cleanup);

const makeNotification = (overrides: Record<string, unknown> = {}) => ({
	id: 'n1',
	type: 'REPLY' as 'REPLY' | 'MENTION',
	documentId: 'd1',
	documentTitle: 'Brief',
	referenceId: 'c1',
	annotationId: null,
	read: false,
	createdAt: new Date().toISOString(),
	actorName: 'Anna Schmidt',
	...overrides
});

describe('NotificationDropdown', () => {
	it('renders the dialog with the bell label', async () => {
		render(NotificationDropdown, {
			props: {
				notifications: [],
				onMarkRead: () => {},
				onMarkAllRead: () => {},
				onClose: () => {}
			}
		});

		await expect.element(page.getByRole('dialog', { name: /benachrichtigungen/i })).toBeVisible();
	});

	it('renders the empty state when there are no notifications', async () => {
		render(NotificationDropdown, {
			props: {
				notifications: [],
				onMarkRead: () => {},
				onMarkAllRead: () => {},
				onClose: () => {}
			}
		});

		await expect.element(page.getByText('Keine neuen Benachrichtigungen')).toBeVisible();
	});

	it('hides the mark-all-read action when the list is empty', async () => {
		render(NotificationDropdown, {
			props: {
				notifications: [],
				onMarkRead: () => {},
				onMarkAllRead: () => {},
				onClose: () => {}
			}
		});

		await expect
			.element(page.getByRole('button', { name: /alle gelesen/i }))
			.not.toBeInTheDocument();
	});

	it('renders the mark-all-read action when notifications are present', async () => {
		render(NotificationDropdown, {
			props: {
				notifications: [makeNotification()],
				onMarkRead: () => {},
				onMarkAllRead: () => {},
				onClose: () => {}
			}
		});

		await expect.element(page.getByRole('button', { name: /alle gelesen/i })).toBeVisible();
	});

	it('renders one item per notification with the reply text for REPLY type', async () => {
		render(NotificationDropdown, {
			props: {
				notifications: [makeNotification({ type: 'REPLY', actorName: 'Bert' })],
				onMarkRead: () => {},
				onMarkAllRead: () => {},
				onClose: () => {}
			}
		});

		await expect
			.element(page.getByText(/Bert hat auf deinen Kommentar geantwortet/i))
			.toBeVisible();
	});

	it('renders the mention text for MENTION type', async () => {
		render(NotificationDropdown, {
			props: {
				notifications: [makeNotification({ type: 'MENTION', actorName: 'Clara' })],
				onMarkRead: () => {},
				onMarkAllRead: () => {},
				onClose: () => {}
			}
		});

		await expect
			.element(page.getByText(/Clara hat dich in einem Kommentar erwähnt/i))
			.toBeVisible();
	});

	it('renders the unread dot only for unread notifications', async () => {
		render(NotificationDropdown, {
			props: {
				notifications: [
					makeNotification({ id: 'n1', read: false }),
					makeNotification({ id: 'n2', read: true })
				],
				onMarkRead: () => {},
				onMarkAllRead: () => {},
				onClose: () => {}
			}
		});

		const unreadDots = document.querySelectorAll('[aria-label="ungelesen"]');
		expect(unreadDots.length).toBe(1);
	});

	it('calls onMarkRead with the notification when an item is clicked', async () => {
		const onMarkRead = vi.fn();
		const n = makeNotification({ id: 'n42', actorName: 'Anna' });
		render(NotificationDropdown, {
			props: {
				notifications: [n],
				onMarkRead,
				onMarkAllRead: () => {},
				onClose: () => {}
			}
		});

		await page.getByRole('button', { name: /Anna hat auf deinen/i }).click();

		expect(onMarkRead).toHaveBeenCalledWith(n);
	});

	it('calls onMarkAllRead when the mark-all-read button is clicked', async () => {
		const onMarkAllRead = vi.fn();
		render(NotificationDropdown, {
			props: {
				notifications: [makeNotification()],
				onMarkRead: () => {},
				onMarkAllRead,
				onClose: () => {}
			}
		});

		await page.getByRole('button', { name: /alle gelesen/i }).click();

		expect(onMarkAllRead).toHaveBeenCalledOnce();
	});

	it('calls onClose when the view-all link is clicked', async () => {
		const onClose = vi.fn();
		render(NotificationDropdown, {
			props: {
				notifications: [],
				onMarkRead: () => {},
				onMarkAllRead: () => {},
				onClose
			}
		});

		const viewAllLink = page.getByRole('link', { name: /alle aktivitäten|view all/i });
		await expect.element(viewAllLink).toHaveAttribute('href', '/aktivitaeten');
		await viewAllLink.click();

		expect(onClose).toHaveBeenCalledOnce();
		expect(goto).toHaveBeenCalledWith('/aktivitaeten');
	});

	it('renders MENTION items with the mention verb text', async () => {
		render(NotificationDropdown, {
			props: {
				notifications: [makeNotification({ id: 'm1', type: 'MENTION', actorName: 'Anna' })],
				onMarkRead: () => {},
				onMarkAllRead: () => {},
				onClose: () => {}
			}
		});

		expect(document.body.textContent).toMatch(/erwähnt|mention/i);
	});

	it('renders REPLY items with the reply glyph', async () => {
		render(NotificationDropdown, {
			props: {
				notifications: [makeNotification({ id: 'r1', type: 'REPLY', actorName: 'Bert' })],
				onMarkRead: () => {},
				onMarkAllRead: () => {},
				onClose: () => {}
			}
		});

		// Reply uses the curved-arrow glyph
		expect(document.body.textContent).toMatch(/↩|reply|geantwortet/i);
	});

	it('renders multiple notifications in order', async () => {
		render(NotificationDropdown, {
			props: {
				notifications: [
					makeNotification({ id: 'n1', actorName: 'First' }),
					makeNotification({ id: 'n2', actorName: 'Second' })
				],
				onMarkRead: () => {},
				onMarkAllRead: () => {},
				onClose: () => {}
			}
		});

		const items = document.querySelectorAll('button[type="button"]');
		// At least 2 items + mark-all button
		expect(items.length).toBeGreaterThanOrEqual(2);
	});
});