familienarchiv/frontend/src/routes/users/[id]/page.svelte.test.ts

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

afterEach(cleanup);

const baseData = (overrides: Record<string, unknown> = {}) => ({
	profileUser: {
		firstName: 'Anna',
		lastName: 'Schmidt',
		email: 'anna@example.com',
		contact: 'Telefon: 030-12345',
		...overrides
	}
});

describe('users/[id] page', () => {
	it('renders the heading and back link', async () => {
		render(UserProfilePage, { props: { data: baseData() } });

		await expect.element(page.getByRole('heading', { level: 1 })).toBeVisible();
		await expect.element(page.getByRole('link', { name: /zurück/i })).toHaveAttribute('href', '/');
	});

	it('renders the full name when both firstName and lastName are present', async () => {
		render(UserProfilePage, { props: { data: baseData() } });

		await expect.element(page.getByRole('heading', { level: 2 })).toHaveTextContent('Anna Schmidt');
	});

	it('renders firstName-only when lastName is missing', async () => {
		render(UserProfilePage, {
			props: { data: baseData({ firstName: 'Anna', lastName: '' }) }
		});

		await expect.element(page.getByRole('heading', { level: 2 })).toHaveTextContent('Anna');
	});

	it('renders lastName-only when firstName is missing', async () => {
		render(UserProfilePage, {
			props: { data: baseData({ firstName: '', lastName: 'Schmidt' }) }
		});

		await expect.element(page.getByRole('heading', { level: 2 })).toHaveTextContent('Schmidt');
	});

	it('falls back to email when both firstName and lastName are missing', async () => {
		render(UserProfilePage, {
			props: { data: baseData({ firstName: '', lastName: '', email: 'fallback@example.com' }) }
		});

		await expect
			.element(page.getByRole('heading', { level: 2 }))
			.toHaveTextContent('fallback@example.com');
	});

	it('renders avatar initials when both names are present', async () => {
		render(UserProfilePage, { props: { data: baseData() } });

		await expect.element(page.getByText('AS')).toBeVisible();
	});

	it('renders avatar firstName initial when only firstName is present', async () => {
		render(UserProfilePage, {
			props: { data: baseData({ firstName: 'Anna', lastName: '' }) }
		});

		const avatarInitial = document.querySelector('.h-16.w-16 span.font-serif');
		expect(avatarInitial?.textContent).toBe('A');
	});

	it('renders avatar lastName initial when only lastName is present', async () => {
		render(UserProfilePage, {
			props: { data: baseData({ firstName: '', lastName: 'Schmidt' }) }
		});

		const avatarInitial = document.querySelector('.h-16.w-16 span.font-serif');
		expect(avatarInitial?.textContent).toBe('S');
	});

	it('omits the email row when email is empty', async () => {
		render(UserProfilePage, {
			props: { data: baseData({ email: '' }) }
		});

		await expect.element(page.getByText('E-Mail')).not.toBeInTheDocument();
	});

	it('omits the contact row when contact is empty', async () => {
		render(UserProfilePage, {
			props: { data: baseData({ contact: '' }) }
		});

		await expect.element(page.getByText('Kontakt')).not.toBeInTheDocument();
	});

	it('renders both email and contact rows when populated', async () => {
		render(UserProfilePage, { props: { data: baseData() } });

		await expect.element(page.getByText('E-Mail')).toBeVisible();
		await expect.element(page.getByText('Kontakt')).toBeVisible();
		await expect.element(page.getByText('anna@example.com')).toBeVisible();
		await expect.element(page.getByText('Telefon: 030-12345')).toBeVisible();
	});
});