From f0eb3a76bed3af38c50fc81fd1d99b15cd5e882d Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 7 Apr 2026 13:43:09 +0200
Subject: [PATCH] test(ui): add component tests for NameHistoryCard

Verifies alias rendering, empty state, firstName fallback,
and type label display. 5 browser-based Svelte tests.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../[id]/NameHistoryCard.svelte.test.ts       | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 frontend/src/routes/persons/[id]/NameHistoryCard.svelte.test.ts

diff --git a/frontend/src/routes/persons/[id]/NameHistoryCard.svelte.test.ts b/frontend/src/routes/persons/[id]/NameHistoryCard.svelte.test.ts
new file mode 100644
index 00000000..044c4614
--- /dev/null
+++ b/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();
+	});
+});