From fb52db12535d9f8e2d0ab0fa8aa29ed1a9eceb86 Mon Sep 17 00:00:00 2001 From: Marcel Date: Sat, 9 May 2026 20:14:16 +0200 Subject: [PATCH] test: cover CorrespondentSuggestionsDropdown and PersonCard branches MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CorrespondentSuggestionsDropdown: empty list still renders the static heading and 'Alle Korrespondenten' row, populated rows when not loading, loading hides correspondent rows, initials fallback (lastName-only when firstName is null), click + keyboard selection, Escape closes. PersonCard: full matrix of conditional UI — title visibility for PERSON vs non-PERSON, avatar initials path (firstName+lastName vs lastName-only fallback), PersonTypeBadge presence for non-PERSON types, alias, life dates, notes, and the canWrite=true/false branches that gate the edit link (Nora's authorization-rendering rule). 21 tests covering ~50 branches. Refs #496. Co-Authored-By: Claude Sonnet 4.6 --- ...spondentSuggestionsDropdown.svelte.test.ts | 155 ++++++++++++++++++ .../persons/[id]/PersonCard.svelte.test.ts | 120 ++++++++++++++ 2 files changed, 275 insertions(+) create mode 100644 frontend/src/routes/briefwechsel/CorrespondentSuggestionsDropdown.svelte.test.ts create mode 100644 frontend/src/routes/persons/[id]/PersonCard.svelte.test.ts diff --git a/frontend/src/routes/briefwechsel/CorrespondentSuggestionsDropdown.svelte.test.ts b/frontend/src/routes/briefwechsel/CorrespondentSuggestionsDropdown.svelte.test.ts new file mode 100644 index 00000000..227edbea --- /dev/null +++ b/frontend/src/routes/briefwechsel/CorrespondentSuggestionsDropdown.svelte.test.ts @@ -0,0 +1,155 @@ +import { describe, it, expect, vi, afterEach } from 'vitest'; +import { cleanup, render } from 'vitest-browser-svelte'; +import { page } from 'vitest/browser'; +import CorrespondentSuggestionsDropdown from './CorrespondentSuggestionsDropdown.svelte'; + +afterEach(cleanup); + +const corrA = { id: 'a', firstName: 'Anna', lastName: 'Schmidt', displayName: 'Anna Schmidt' }; +const corrB = { id: 'b', firstName: null, lastName: 'Müller', displayName: 'Müller' }; + +describe('CorrespondentSuggestionsDropdown', () => { + it('renders the heading and the "all correspondents" row even when the list is empty', async () => { + render(CorrespondentSuggestionsDropdown, { + props: { + correspondents: [], + loading: false, + senderName: 'Anna', + onselect: () => {}, + onclose: () => {} + } + }); + + await expect.element(page.getByText('Häufigste Korrespondenten')).toBeVisible(); + await expect.element(page.getByText('Alle Korrespondenten von Anna')).toBeVisible(); + }); + + it('renders one row per correspondent when not loading', async () => { + render(CorrespondentSuggestionsDropdown, { + props: { + correspondents: [corrA, corrB], + loading: false, + senderName: 'Anna', + onselect: () => {}, + onclose: () => {} + } + }); + + await expect.element(page.getByText('Anna Schmidt')).toBeVisible(); + await expect.element(page.getByText('Müller')).toBeVisible(); + }); + + it('hides correspondent rows while loading is true', async () => { + render(CorrespondentSuggestionsDropdown, { + props: { + correspondents: [corrA], + loading: true, + senderName: 'Anna', + onselect: () => {}, + onclose: () => {} + } + }); + + await expect.element(page.getByText('Anna Schmidt')).not.toBeInTheDocument(); + await expect.element(page.getByText('Häufigste Korrespondenten')).toBeVisible(); + }); + + it('builds initials from firstName + lastName when available', async () => { + render(CorrespondentSuggestionsDropdown, { + props: { + correspondents: [corrA], + loading: false, + senderName: 'Anna', + onselect: () => {}, + onclose: () => {} + } + }); + + await expect.element(page.getByText('AS')).toBeVisible(); + }); + + it('falls back to the first two letters of lastName when firstName is missing', async () => { + render(CorrespondentSuggestionsDropdown, { + props: { + correspondents: [corrB], + loading: false, + senderName: 'Anna', + onselect: () => {}, + onclose: () => {} + } + }); + + await expect.element(page.getByText('MÜ')).toBeVisible(); + }); + + it('calls onselect with the correspondent id when a row is clicked', async () => { + const onselect = vi.fn(); + render(CorrespondentSuggestionsDropdown, { + props: { + correspondents: [corrA], + loading: false, + senderName: 'Anna', + onselect, + onclose: () => {} + } + }); + + await page.getByText('Anna Schmidt').click(); + + expect(onselect).toHaveBeenCalledWith('a'); + }); + + it('calls onselect with an empty string when the "all correspondents" row is clicked', async () => { + const onselect = vi.fn(); + render(CorrespondentSuggestionsDropdown, { + props: { + correspondents: [], + loading: false, + senderName: 'Anna', + onselect, + onclose: () => {} + } + }); + + await page.getByText('Alle Korrespondenten von Anna').click(); + + expect(onselect).toHaveBeenCalledWith(''); + }); + + it('calls onselect via Enter key on a focused row', async () => { + const onselect = vi.fn(); + render(CorrespondentSuggestionsDropdown, { + props: { + correspondents: [corrA], + loading: false, + senderName: 'Anna', + onselect, + onclose: () => {} + } + }); + + const row = (await page.getByText('Anna Schmidt').element()) as HTMLElement; + row.focus(); + row.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); + + expect(onselect).toHaveBeenCalledWith('a'); + }); + + it('calls onclose when the Escape key is pressed', async () => { + const onclose = vi.fn(); + render(CorrespondentSuggestionsDropdown, { + props: { + correspondents: [corrA], + loading: false, + senderName: 'Anna', + onselect: () => {}, + onclose + } + }); + + const list = (await page.getByRole('listbox').element()) as HTMLElement; + list.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })); + + expect(onclose).toHaveBeenCalledOnce(); + }); +}); diff --git a/frontend/src/routes/persons/[id]/PersonCard.svelte.test.ts b/frontend/src/routes/persons/[id]/PersonCard.svelte.test.ts new file mode 100644 index 00000000..b2c7c4fc --- /dev/null +++ b/frontend/src/routes/persons/[id]/PersonCard.svelte.test.ts @@ -0,0 +1,120 @@ +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 the life-date range when birthYear or deathYear are present', async () => { + render(PersonCard, { + props: { + person: { ...basePerson, birthYear: 1899, deathYear: 1972 }, + canWrite: false + } + }); + + await expect.element(page.getByText(/1899/)).toBeVisible(); + }); + + 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(); + }); +});