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

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import NameHistoryCard from './NameHistoryCard.svelte';
+
+const aliases = [
+	{ id: 'a1', lastName: 'de Gruyter', firstName: null, type: 'BIRTH', sortOrder: 0 },
+	{ id: 'a2', lastName: 'Schmidt', firstName: 'Maria', type: 'WIDOWED', sortOrder: 1 }
+];
+
+describe('NameHistoryCard', () => {
+	it('should render one row per alias', async () => {
+		render(NameHistoryCard, { aliases, personFirstName: 'Clara' });
+
+		await expect.element(page.getByText('de Gruyter')).toBeInTheDocument();
+		await expect.element(page.getByText('Schmidt')).toBeInTheDocument();
+	});
+
+	it('should show empty state when no aliases', async () => {
+		render(NameHistoryCard, { aliases: [], personFirstName: 'Clara' });
+
+		const emptyText = document.querySelector('.italic');
+		expect(emptyText).not.toBeNull();
+		expect(emptyText!.textContent!.length).toBeGreaterThan(0);
+	});
+
+	it('should use personFirstName when alias firstName is null', async () => {
+		render(NameHistoryCard, {
+			aliases: [{ id: 'a1', lastName: 'de Gruyter', firstName: null, type: 'BIRTH', sortOrder: 0 }],
+			personFirstName: 'Clara'
+		});
+
+		await expect.element(page.getByText('Clara')).toBeInTheDocument();
+	});
+
+	it('should use alias firstName when provided', async () => {
+		render(NameHistoryCard, {
+			aliases: [
+				{ id: 'a1', lastName: 'Schmidt', firstName: 'Maria', type: 'WIDOWED', sortOrder: 0 }
+			],
+			personFirstName: 'Clara'
+		});
+
+		await expect.element(page.getByText('Maria')).toBeInTheDocument();
+	});
+
+	it('should show type labels', async () => {
+		render(NameHistoryCard, {
+			aliases: [{ id: 'a1', lastName: 'de Gruyter', firstName: null, type: 'BIRTH', sortOrder: 0 }],
+			personFirstName: 'Clara'
+		});
+
+		await expect.element(page.getByText('geborene/r')).toBeInTheDocument();
+	});
+});