familienarchiv/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts

import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page, userEvent } from 'vitest/browser';
import MentionDropdown from './MentionDropdown.svelte';
import MentionDropdownHost from './MentionDropdown.test-host.svelte';
import { m } from '$lib/paraglide/messages.js';
import type { components } from '$lib/generated/api';

type Person = components['schemas']['Person'];

afterEach(cleanup);

const makePerson = (id: string, name: string, overrides: Partial<Person> = {}): Person => {
	const parts = name.split(' ');
	return {
		id,
		firstName: parts[0],
		lastName: parts.slice(1).join(' ') || name,
		displayName: name,
		personType: 'PERSON',
		familyMember: false,
		...overrides
	};
};

type DropdownState = {
	items: Person[];
	command: (item: Person) => void;
	clientRect: (() => DOMRect | null) | null;
};

const baseModel = (overrides: Partial<DropdownState> = {}): DropdownState => ({
	items: [],
	command: vi.fn(),
	clientRect: () => new DOMRect(100, 100, 0, 24),
	...overrides
});

describe('MentionDropdown', () => {
	it('renders the listbox with the mention label', async () => {
		render(MentionDropdown, { props: { model: baseModel() } });

		await expect.element(page.getByRole('listbox', { name: /person verlinken/i })).toBeVisible();
	});

	it('shows the "enter a name" prompt when the search field is empty', async () => {
		render(MentionDropdown, { props: { model: baseModel() } });

		await expect.element(page.getByText(m.person_mention_search_prompt())).toBeVisible();
		await expect.element(page.getByText(m.person_mention_popup_empty())).not.toBeInTheDocument();
	});

	it('shows "no persons found" when the search has a query but the list is empty', async () => {
		render(MentionDropdown, { props: { model: baseModel(), editorQuery: 'WdG' } });

		await expect.element(page.getByText(m.person_mention_popup_empty())).toBeVisible();
		await expect.element(page.getByText(m.person_mention_search_prompt())).not.toBeInTheDocument();
	});

	it('shows the create-new escape hatch link in the empty state', async () => {
		render(MentionDropdown, { props: { model: baseModel(), editorQuery: 'unknown' } });

		const link = (await page
			.getByRole('link', { name: /neue person anlegen/i })
			.element()) as HTMLAnchorElement;
		expect(link.href).toContain('/persons/new');
		expect(link.target).toBe('_blank');
		expect(link.rel).toContain('noopener');
		expect(link.rel).toContain('noreferrer');
	});

	it('renders one option per item when populated', async () => {
		render(MentionDropdown, {
			props: {
				model: baseModel({
					items: [makePerson('p1', 'Anna Schmidt'), makePerson('p2', 'Bert Meier')]
				})
			}
		});

		await expect.element(page.getByText('Anna Schmidt')).toBeVisible();
		await expect.element(page.getByText('Bert Meier')).toBeVisible();
	});

	it('marks the first item as aria-selected by default', async () => {
		render(MentionDropdown, {
			props: { model: baseModel({ items: [makePerson('p1', 'Anna Schmidt')] }) }
		});

		const option = document.querySelector('[role="option"]');
		expect(option?.getAttribute('aria-selected')).toBe('true');
	});

	it('renders the life-date range when birthYear or deathYear is present', async () => {
		render(MentionDropdown, {
			props: {
				model: baseModel({
					items: [makePerson('p1', 'Anna', { birthYear: 1899, deathYear: 1972 })]
				})
			}
		});

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

	it('falls back to a default position when clientRect returns null', async () => {
		render(MentionDropdown, {
			props: {
				model: baseModel({ clientRect: () => null })
			}
		});

		const dropdown = document.querySelector('[role="listbox"]') as HTMLElement;
		expect(dropdown.style.left).toBe('0px');
	});

	it('positions itself based on the clientRect callback', async () => {
		render(MentionDropdown, {
			props: {
				model: baseModel({
					clientRect: () => new DOMRect(123, 200, 50, 24)
				})
			}
		});

		const dropdown = document.querySelector('[role="listbox"]') as HTMLElement;
		expect(dropdown.style.left).toBe('123px');
	});
});

// ─── Search input — Issue #380 ────────────────────────────────────────────────

describe('MentionDropdown — search input', () => {
	it('renders a search input pre-filled with the editorQuery prop', async () => {
		render(MentionDropdown, {
			props: { model: baseModel(), editorQuery: 'WdG' }
		});

		await expect.element(page.getByRole('searchbox')).toHaveValue('WdG');
	});

	it('exposes a data-test-search-input attribute for E2E selectors', async () => {
		render(MentionDropdown, { props: { model: baseModel() } });

		const input = document.querySelector('[data-test-search-input]');
		expect(input).not.toBeNull();
		expect((input as HTMLInputElement).type).toBe('search');
	});

	it('search input wrapper meets the 44px touch target (WCAG 2.2 AA)', async () => {
		render(MentionDropdown, { props: { model: baseModel() } });

		const input = document.querySelector('[data-test-search-input]') as HTMLElement;
		expect(input).not.toBeNull();
		expect(input.className).toContain('min-h-[44px]');
	});

	it('announces empty-state copy via aria-live="polite" (Leonie FINDING-MENTION-002 on PR #629)', async () => {
		render(MentionDropdown, { props: { model: baseModel() } });

		const listbox = document.querySelector('[role="listbox"]');
		expect(listbox).not.toBeNull();
		const live = listbox!.querySelector('p[aria-live="polite"]');
		expect(live).not.toBeNull();
		expect(live!.textContent ?? '').toContain(m.person_mention_search_prompt());
	});

	it('renders the magnifier icon at h-5 w-5 with text-ink-2 (Leonie BLOCKER on PR #629)', async () => {
		render(MentionDropdown, { props: { model: baseModel() } });

		const icon = document.querySelector('[data-test-search-input]')
			?.previousElementSibling as SVGElement | null;
		expect(icon).not.toBeNull();
		expect(icon!.tagName.toLowerCase()).toBe('svg');
		expect(icon!.getAttribute('class') ?? '').toContain('h-5');
		expect(icon!.getAttribute('class') ?? '').toContain('w-5');
		expect(icon!.getAttribute('class') ?? '').toContain('text-ink-2');
	});

	it('caps the search input at maxlength=100 (CWE-400 amplification — Nora on PR #629)', async () => {
		render(MentionDropdown, { props: { model: baseModel() } });

		const input = document.querySelector('[data-test-search-input]') as HTMLInputElement;
		expect(input).not.toBeNull();
		expect(input.maxLength).toBe(100);
	});

	it('invokes onSearch with the current value whenever the user types', async () => {
		const onSearch = vi.fn();
		render(MentionDropdown, { props: { model: baseModel(), onSearch } });

		await userEvent.type(page.getByRole('searchbox'), 'Walter');

		await vi.waitFor(() => {
			expect(onSearch).toHaveBeenCalled();
			expect(onSearch).toHaveBeenLastCalledWith('Walter');
		});
	});

	it('keeps the user-edited search value when editorQuery changes after the takeover (Felix on PR #629)', async () => {
		let setEditorQuery!: (q: string) => void;
		render(MentionDropdownHost, {
			model: baseModel(),
			initialEditorQuery: 'WdG',
			onReady: (s: (q: string) => void) => {
				setEditorQuery = s;
			}
		});

		await expect.element(page.getByRole('searchbox')).toHaveValue('WdG');

		await page.getByRole('searchbox').fill('Walter');
		await expect.element(page.getByRole('searchbox')).toHaveValue('Walter');

		setEditorQuery('WdGruyter');
		await new Promise((r) => setTimeout(r, 50));

		await expect.element(page.getByRole('searchbox')).toHaveValue('Walter');
	});
});