refactor(stammbaum): extract RelationshipChip and AddRelationshipForm

Split StammbaumCard from 366 to 196 lines by extracting:
- RelationshipChip.svelte — single relationship list item with optional delete
- AddRelationshipForm.svelte — self-contained add-relationship form with open/close state

Both components have browser-mode spec tests covering rendering and interaction.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-28 10:41:51 +02:00
committed by marcel
parent 1d14c32c23
commit 48649e67f9
5 changed files with 308 additions and 179 deletions

View File

@@ -0,0 +1,48 @@
import { describe, it, expect, afterEach, vi } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import RelationshipChip from './RelationshipChip.svelte';
vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
afterEach(cleanup);
const baseProps = {
chipLabel: 'Elternteil',
otherName: 'Anna Schmidt',
yearRange: '',
canWrite: false,
relId: 'rel-1'
};
describe('RelationshipChip', () => {
it('renders the chip label', async () => {
render(RelationshipChip, baseProps);
await expect.element(page.getByText('Elternteil')).toBeInTheDocument();
});
it('renders the other person name', async () => {
render(RelationshipChip, baseProps);
await expect.element(page.getByText('Anna Schmidt')).toBeInTheDocument();
});
it('shows year range when provided', async () => {
render(RelationshipChip, { ...baseProps, yearRange: '19201980' });
await expect.element(page.getByText('19201980')).toBeInTheDocument();
});
it('does not show year range span when empty', async () => {
render(RelationshipChip, { ...baseProps, yearRange: '' });
expect(document.querySelector('[data-testid="year-range"]')).toBeNull();
});
it('shows delete button when canWrite is true', async () => {
render(RelationshipChip, { ...baseProps, canWrite: true });
await expect.element(page.getByRole('button')).toBeInTheDocument();
});
it('hides delete button when canWrite is false', async () => {
render(RelationshipChip, { ...baseProps, canWrite: false });
expect(document.querySelector('button')).toBeNull();
});
});