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

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

afterEach(cleanup);

const baseData = (overrides: Record<string, unknown> = {}) => ({
	user: null,
	canWrite: false,
	canBlogWrite: false,
	isReader: false,
	resumeDoc: null,
	incompleteDocs: [],
	incompleteTotal: 0,
	segmentationDocs: [],
	transcriptionDocs: [],
	readyDocs: [],
	weeklyStats: null,
	pulse: null,
	activityFeed: [],
	drafts: [],
	topPersons: [],
	recentDocs: [],
	recentStories: [],
	readerStats: null,
	...overrides
});

describe('home page (/)', () => {
	it('renders the reader dashboard layout when isReader is true', async () => {
		render(HomePage, {
			props: { data: baseData({ isReader: true, user: { firstName: 'Anna' } }) }
		});

		// ReaderHeaderBar rendering — at least the page mounts without error
		const main = document.querySelector('main');
		expect(main).not.toBeNull();
	});

	it('renders the contributor dashboard for non-reader users', async () => {
		render(HomePage, { props: { data: baseData({ user: { firstName: 'Anna' } }) } });

		// Should render the greeting heading
		const heading = document.querySelector('h1');
		expect(heading).not.toBeNull();
	});

	it('omits the greeting when there is no user', async () => {
		render(HomePage, { props: { data: baseData() } });

		const heading = document.querySelector('h1');
		expect(heading).toBeNull();
	});

	it('renders the DropZone when canWrite is true', async () => {
		render(HomePage, {
			props: { data: baseData({ user: { firstName: 'Anna' }, canWrite: true }) }
		});

		const main = document.querySelector('main');
		expect(main).not.toBeNull();
	});

	it('omits the DropZone when canWrite is false', async () => {
		render(HomePage, { props: { data: baseData({ user: { firstName: 'Anna' } }) } });

		// DropZone has a file input — verify there isn't one in the rendered tree.
		const fileInput = document.querySelector('main input[type="file"]');
		expect(fileInput).toBeNull();
	});

	it('renders the ReaderDraftsModule when isReader and canBlogWrite are both true', async () => {
		render(HomePage, {
			props: {
				data: baseData({
					isReader: true,
					canBlogWrite: true,
					user: { firstName: 'Anna' }
				})
			}
		});

		const main = document.querySelector('main');
		expect(main).not.toBeNull();
	});

	it('renders the mission-control caption for the contributor dashboard', async () => {
		render(HomePage, { props: { data: baseData({ user: { firstName: 'Anna' } }) } });

		// MissionControl section has aria-label, find its parent section
		const section = document.querySelector('section[aria-label]');
		expect(section).not.toBeNull();
	});

	it('renders the reader stats counts when isReader is true and stats are provided', async () => {
		render(HomePage, {
			props: {
				data: baseData({
					isReader: true,
					user: { firstName: 'Anna' },
					readerStats: { totalDocuments: 50, totalPersons: 20, totalStories: 5 }
				})
			}
		});

		expect(document.body.textContent).toContain('50');
		expect(document.body.textContent).toContain('20');
	});

	it('renders ReaderRecentDocs and ReaderRecentStories grid in reader view', async () => {
		render(HomePage, {
			props: {
				data: baseData({
					isReader: true,
					user: { firstName: 'Anna' },
					recentDocs: [],
					recentStories: []
				})
			}
		});

		const grids = document.querySelectorAll('.grid.grid-cols-1');
		expect(grids.length).toBeGreaterThan(0);
	});

	it('renders the morning greeting before noon', async () => {
		vi.useFakeTimers();
		vi.setSystemTime(new Date('2026-04-14T08:00:00Z'));
		try {
			render(HomePage, { props: { data: baseData({ user: { firstName: 'Anna' } }) } });
			const heading = document.querySelector('h1');
			expect(heading?.textContent?.toLowerCase()).toMatch(/guten morgen|morning|morgen/);
		} finally {
			vi.useRealTimers();
		}
	});

	it('renders the day greeting between noon and 18', async () => {
		vi.useFakeTimers();
		vi.setSystemTime(new Date('2026-04-14T14:00:00Z'));
		try {
			render(HomePage, { props: { data: baseData({ user: { firstName: 'Anna' } }) } });
			const heading = document.querySelector('h1');
			// Just verify some heading is rendered with the user's name
			expect(heading?.textContent).toContain('Anna');
		} finally {
			vi.useRealTimers();
		}
	});

	it('renders the evening greeting after 18', async () => {
		vi.useFakeTimers();
		vi.setSystemTime(new Date('2026-04-14T20:00:00Z'));
		try {
			render(HomePage, { props: { data: baseData({ user: { firstName: 'Anna' } }) } });
			const heading = document.querySelector('h1');
			expect(heading?.textContent).toContain('Anna');
		} finally {
			vi.useRealTimers();
		}
	});

	it('falls back to empty firstName when user has no name', async () => {
		render(HomePage, {
			props: { data: baseData({ user: { firstName: undefined, lastName: undefined } }) }
		});

		// The page mounts and computes greeting with empty name without throwing
		expect(document.querySelector('main')).not.toBeNull();
	});

	it('renders without throwing when data props are undefined (uses ?? fallbacks)', async () => {
		const minimalData = {
			isReader: false,
			user: { firstName: 'Anna' },
			canWrite: false,
			canBlogWrite: false
		};

		expect(() => render(HomePage, { props: { data: minimalData } })).not.toThrow();
	});

	it('renders without throwing when reader data has all undefined fields', async () => {
		const readerData = {
			isReader: true,
			user: { firstName: 'Anna' },
			canBlogWrite: false
		};

		expect(() => render(HomePage, { props: { data: readerData } })).not.toThrow();
	});

	it('renders without throwing when isReader and canBlogWrite are both true (drafts module)', async () => {
		render(HomePage, {
			props: {
				data: baseData({
					isReader: true,
					canBlogWrite: true,
					user: { firstName: 'Anna' },
					readerStats: { totalDocuments: 100, totalPersons: 25, totalStories: 5 },
					drafts: [
						{
							id: 'd1',
							title: 'Reise nach Berlin',
							updatedAt: '2026-04-15T10:00:00Z'
						}
					]
				})
			}
		});

		const main = document.querySelector('main');
		expect(main).not.toBeNull();
	});

	it('renders writer dashboard without throwing with weeklyStats + pulse populated', async () => {
		// Stub-shaped objects that satisfy whichever child components expect them
		expect(() =>
			render(HomePage, {
				props: {
					data: baseData({
						isReader: false,
						user: { firstName: 'Anna' },
						canWrite: true,
						incompleteTotal: 25
					})
				}
			})
		).not.toThrow();
	});
});