familienarchiv/frontend/src/routes/persons/[id]/PersonCard.svelte.test.ts

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

afterEach(cleanup);

const basePerson = {
	id: 'p-1',
	firstName: 'Anna',
	lastName: 'Schmidt',
	displayName: 'Anna Schmidt',
	personType: 'PERSON' as const
};

describe('PersonCard', () => {
	it('renders the displayName as the primary heading', async () => {
		render(PersonCard, { props: { person: basePerson, canWrite: false } });

		await expect.element(page.getByRole('heading', { name: 'Anna Schmidt' })).toBeVisible();
	});

	it('renders the title above the name when personType is PERSON and title is set', async () => {
		render(PersonCard, {
			props: { person: { ...basePerson, title: 'Frau Dr.' }, canWrite: false }
		});

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

	it('omits the title for non-PERSON types even if title is set', async () => {
		render(PersonCard, {
			props: {
				person: { ...basePerson, personType: 'INSTITUTION', title: 'Frau Dr.' },
				canWrite: false
			}
		});

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

	it('renders the firstName/lastName initials inside the avatar for PERSON type', async () => {
		render(PersonCard, { props: { person: basePerson, canWrite: false } });

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

	it('falls back to lastName-only initials when firstName is missing', async () => {
		render(PersonCard, {
			props: {
				person: { ...basePerson, firstName: null, displayName: 'Schmidt' },
				canWrite: false
			}
		});

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

	it('renders the PersonTypeBadge for non-PERSON types', async () => {
		render(PersonCard, {
			props: {
				person: { ...basePerson, personType: 'INSTITUTION', displayName: 'Acme Inc.' },
				canWrite: false
			}
		});

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

	it('omits the PersonTypeBadge for PERSON type', async () => {
		render(PersonCard, { props: { person: basePerson, canWrite: false } });

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

	it('renders the alias in italic typography when alias is provided', async () => {
		render(PersonCard, {
			props: { person: { ...basePerson, alias: 'Annerl' }, canWrite: false }
		});

		await expect.element(page.getByText(/Annerl/)).toBeVisible();
	});

	it('renders DAY-precision life dates as full localized dates', async () => {
		render(PersonCard, {
			props: {
				person: {
					...basePerson,
					birthDate: '1901-03-14',
					birthDatePrecision: 'DAY' as const,
					deathDate: '1944-11-02',
					deathDatePrecision: 'DAY' as const
				},
				canWrite: false
			}
		});

		await expect.element(page.getByText(/14\. März 1901/)).toBeVisible();
		await expect.element(page.getByText(/2\. November 1944/)).toBeVisible();
	});

	it('wraps the * and † glyphs in aria-hidden spans', async () => {
		const { container } = render(PersonCard, {
			props: {
				person: {
					...basePerson,
					birthDate: '1901-03-14',
					birthDatePrecision: 'DAY' as const,
					deathDate: '1944-11-02',
					deathDatePrecision: 'DAY' as const
				},
				canWrite: false
			}
		});

		const hidden = [...container.querySelectorAll('span[aria-hidden="true"]')].map((el) =>
			el.textContent?.trim()
		);
		expect(hidden).toContain('*');
		expect(hidden).toContain('†');
	});

	it('renders birth-only without dash or dagger', async () => {
		const { container } = render(PersonCard, {
			props: {
				person: {
					...basePerson,
					birthDate: '1901-03-14',
					birthDatePrecision: 'DAY' as const
				},
				canWrite: false
			}
		});

		await expect.element(page.getByText(/14\. März 1901/)).toBeVisible();
		expect(container.textContent).not.toContain('–');
		expect(container.textContent).not.toContain('†');
	});

	it('renders APPROX-precision legacy dates with the ca. prefix', async () => {
		render(PersonCard, {
			props: {
				person: {
					...basePerson,
					birthDate: '1882-01-01',
					birthDatePrecision: 'APPROX' as const
				},
				canWrite: false
			}
		});

		await expect.element(page.getByText(/ca\. 1882/)).toBeVisible();
	});

	it('renders no life-date line when both dates are missing', async () => {
		const { container } = render(PersonCard, {
			props: { person: basePerson, canWrite: false }
		});

		expect(container.textContent).not.toContain('*');
		expect(container.textContent).not.toContain('†');
	});

	it('renders the notes section when notes are provided', async () => {
		render(PersonCard, {
			props: {
				person: { ...basePerson, notes: 'Wohnte in Berlin.' },
				canWrite: false
			}
		});

		await expect.element(page.getByText('Wohnte in Berlin.')).toBeVisible();
	});

	it('renders the edit link when canWrite is true', async () => {
		render(PersonCard, { props: { person: basePerson, canWrite: true } });

		await expect
			.element(page.getByRole('link', { name: /bearbeiten/i }))
			.toHaveAttribute('href', '/persons/p-1/edit');
	});

	it('does not render the edit link when canWrite is false', async () => {
		render(PersonCard, { props: { person: basePerson, canWrite: false } });

		await expect.element(page.getByRole('link', { name: /bearbeiten/i })).not.toBeInTheDocument();
	});
});