frontend/src/routes/aktivitaeten/page.svelte.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+
+const mockNavigating = { type: null };
+const mockPage = { url: new URL('http://localhost/aktivitaeten') };
+
+vi.mock('$app/state', () => ({
+	get navigating() {
+		return mockNavigating;
+	},
+	get page() {
+		return mockPage;
+	}
+}));
+
+vi.mock('$app/navigation', () => ({
+	beforeNavigate: () => {},
+	afterNavigate: () => {},
+	goto: vi.fn(),
+	invalidate: vi.fn(),
+	invalidateAll: vi.fn(),
+	preloadCode: vi.fn(),
+	preloadData: vi.fn(),
+	pushState: vi.fn(),
+	replaceState: vi.fn(),
+	disableScrollHandling: vi.fn(),
+	onNavigate: () => () => {}
+}));
+
+vi.mock('$lib/notification/notifications.svelte', () => ({
+	notificationStore: {
+		notifications: [],
+		init: vi.fn(),
+		destroy: vi.fn(),
+		markRead: vi.fn(),
+		markAllRead: vi.fn()
+	}
+}));
+
+const { default: AktivitaetenPage } = await import('./+page.svelte');
+
+afterEach(cleanup);
+
+const baseData = (overrides: Record<string, unknown> = {}) => ({
+	filter: 'alle' as const,
+	activityFeed: [],
+	unreadNotifications: [],
+	loadError: null,
+	...overrides
+});
+
+describe('aktivitaeten page', () => {
+	it('renders the page heading', async () => {
+		render(AktivitaetenPage, { props: { data: baseData() } });
+
+		await expect.element(page.getByRole('heading', { name: /aktivitäten/i })).toBeVisible();
+	});
+
+	it('renders the error card when loadError is "activity"', async () => {
+		render(AktivitaetenPage, { props: { data: baseData({ loadError: 'activity' }) } });
+
+		// ChronikErrorCard renders some retry mechanism
+		const main = document.querySelector('main');
+		expect(main).not.toBeNull();
+	});
+
+	it('renders the empty state when activityFeed is empty', async () => {
+		render(AktivitaetenPage, { props: { data: baseData() } });
+
+		const main = document.querySelector('main');
+		expect(main).not.toBeNull();
+	});
+
+	it('renders without crashing when filter is set to non-default value', async () => {
+		render(AktivitaetenPage, { props: { data: baseData({ filter: 'mentions' as const }) } });
+
+		const main = document.querySelector('main');
+		expect(main).not.toBeNull();
+	});
+});