+ {#if nlLoading}
+ = {}
+): NlQueryInterpretation => ({
+ resolvedPersons: [],
+ ambiguousPersons: [],
+ keywords: [],
+ rawQuery: 'test',
+ keywordsApplied: true,
+ ...overrides
+});
+
+describe('InterpretationChipRow', () => {
+ it('renders type-prefixed labels for sender, date and keyword chips', async () => {
+ render(InterpretationChipRow, {
+ interpretation: makeInterpretation({
+ resolvedPersons: [makePerson('p1', 'Walter Raddatz')],
+ dateFrom: '1914-01-01',
+ dateTo: '1918-12-31',
+ keywords: ['krieg']
+ }),
+ onRemoveChip: vi.fn()
+ });
+ await expect.element(page.getByText('Absender: Walter Raddatz')).toBeInTheDocument();
+ await expect.element(page.getByText('Zeitraum: 1914–1918')).toBeInTheDocument();
+ await expect.element(page.getByText('Stichwort: krieg')).toBeInTheDocument();
+ });
+
+ it('calls onRemoveChip with "sender" when the sender chip × is clicked', async () => {
+ const onRemoveChip = vi.fn();
+ render(InterpretationChipRow, {
+ interpretation: makeInterpretation({
+ resolvedPersons: [makePerson('p1', 'Walter Raddatz')]
+ }),
+ onRemoveChip
+ });
+ await page.getByRole('button', { name: /Absender: Walter Raddatz/ }).click();
+ expect(onRemoveChip).toHaveBeenCalledWith('sender', undefined);
+ });
+
+ it('removes a chip from the DOM but keeps the rest when one × is clicked', async () => {
+ const { container } = render(InterpretationChipRow, {
+ interpretation: makeInterpretation({
+ resolvedPersons: [makePerson('p1', 'Walter Raddatz')],
+ dateFrom: '1914-01-01',
+ dateTo: '1918-12-31',
+ keywords: ['krieg']
+ }),
+ onRemoveChip: vi.fn()
+ });
+ expect(container.querySelectorAll('[data-chip-type]')).toHaveLength(3);
+ await page.getByRole('button', { name: /Absender/ }).click();
+ await vi.waitFor(() => expect(container.querySelectorAll('[data-chip-type]')).toHaveLength(2));
+ });
+
+ it('renders a single directional chip with an arrow for a 2-name query', async () => {
+ const { container } = render(InterpretationChipRow, {
+ interpretation: makeInterpretation({
+ resolvedPersons: [makePerson('p1', 'Walter Raddatz'), makePerson('p2', 'Emma Raddatz')]
+ }),
+ onRemoveChip: vi.fn()
+ });
+ expect(container.querySelectorAll('[data-chip-type="directional"]')).toHaveLength(1);
+ await expect.element(page.getByText(/→/)).toBeInTheDocument();
+ });
+
+ it('calls onRemoveChip with "directional" when the directional chip × is clicked', async () => {
+ const onRemoveChip = vi.fn();
+ render(InterpretationChipRow, {
+ interpretation: makeInterpretation({
+ resolvedPersons: [makePerson('p1', 'Walter Raddatz'), makePerson('p2', 'Emma Raddatz')]
+ }),
+ onRemoveChip
+ });
+ await page.getByRole('button', { name: /Walter Raddatz/ }).click();
+ expect(onRemoveChip).toHaveBeenCalledWith('directional', undefined);
+ });
+
+ it('does not render keyword chips when keywordsApplied is false', async () => {
+ const { container } = render(InterpretationChipRow, {
+ interpretation: makeInterpretation({
+ keywordsApplied: false,
+ keywords: ['krieg', 'brief']
+ }),
+ onRemoveChip: vi.fn()
+ });
+ expect(container.querySelectorAll('[data-chip-type="keyword"]')).toHaveLength(0);
+ });
+
+ it('renders no keyword chips when keywords is empty', async () => {
+ const { container } = render(InterpretationChipRow, {
+ interpretation: makeInterpretation({ keywordsApplied: true, keywords: [] }),
+ onRemoveChip: vi.fn()
+ });
+ expect(container.querySelectorAll('[data-chip-type="keyword"]')).toHaveLength(0);
+ });
+
+ it('renders exactly one keyword chip per keyword', async () => {
+ const { container } = render(InterpretationChipRow, {
+ interpretation: makeInterpretation({
+ keywordsApplied: true,
+ keywords: ['krieg', 'brief', 'front']
+ }),
+ onRemoveChip: vi.fn()
+ });
+ expect(container.querySelectorAll('[data-chip-type="keyword"]')).toHaveLength(3);
+ });
+
+ it('keeps the × button in the DOM when a display name is 100 characters', async () => {
+ const longName = 'W'.repeat(100);
+ render(InterpretationChipRow, {
+ interpretation: makeInterpretation({
+ resolvedPersons: [makePerson('p1', longName)]
+ }),
+ onRemoveChip: vi.fn()
+ });
+ await expect
+ .element(page.getByRole('button', { name: new RegExp('Absender') }))
+ .toBeInTheDocument();
+ });
+});
diff --git a/frontend/src/routes/search/SmartModeToggle.svelte b/frontend/src/routes/search/SmartModeToggle.svelte
new file mode 100644
index 00000000..a7155bcc
--- /dev/null
+++ b/frontend/src/routes/search/SmartModeToggle.svelte
@@ -0,0 +1,38 @@
+
+
+
diff --git a/frontend/src/routes/search/SmartModeToggle.svelte.spec.ts b/frontend/src/routes/search/SmartModeToggle.svelte.spec.ts
new file mode 100644
index 00000000..01347271
--- /dev/null
+++ b/frontend/src/routes/search/SmartModeToggle.svelte.spec.ts
@@ -0,0 +1,81 @@
+import { describe, expect, it, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import SmartModeToggle from './SmartModeToggle.svelte';
+import SearchFilterBar from '../SearchFilterBar.svelte';
+
+afterEach(() => cleanup());
+
+const SEARCH_PLACEHOLDER = 'Titel, Personen, Tags durchsuchen…';
+
+describe('SmartModeToggle', () => {
+ it('renders aria-pressed="false" by default and toggles on click', async () => {
+ render(SmartModeToggle, { smartMode: false });
+ const btn = page.getByRole('button');
+ await expect.element(btn).toHaveAttribute('aria-pressed', 'false');
+ await btn.click();
+ await expect.element(btn).toHaveAttribute('aria-pressed', 'true');
+ await btn.click();
+ await expect.element(btn).toHaveAttribute('aria-pressed', 'false');
+ });
+
+ it('shows the smart label when smartMode is true', async () => {
+ render(SmartModeToggle, { smartMode: true });
+ const btn = page.getByRole('button');
+ await expect.element(btn).toHaveTextContent('KI');
+ });
+
+ it('shows the keyword label when smartMode is false', async () => {
+ render(SmartModeToggle, { smartMode: false });
+ const btn = page.getByRole('button');
+ await expect.element(btn).toHaveTextContent('Text');
+ });
+
+ it('applies the active pill style only in smart mode', async () => {
+ render(SmartModeToggle, { smartMode: true });
+ const btn = page.getByRole('button');
+ await expect.element(btn).toHaveClass(/bg-primary/);
+ });
+});
+
+describe('SmartModeToggle inside SearchFilterBar', () => {
+ it('adds maxlength="500" to the search input only in smart mode', async () => {
+ render(SearchFilterBar, { onSearch: vi.fn(), sort: 'DATE', dir: 'desc', smartMode: true });
+ await expect
+ .element(page.getByPlaceholder(SEARCH_PLACEHOLDER))
+ .toHaveAttribute('maxlength', '500');
+ });
+
+ it('omits maxlength from the search input in keyword mode', async () => {
+ render(SearchFilterBar, { onSearch: vi.fn(), sort: 'DATE', dir: 'desc', smartMode: false });
+ await expect
+ .element(page.getByPlaceholder(SEARCH_PLACEHOLDER))
+ .not.toHaveAttribute('maxlength');
+ });
+
+ it('does not fire the keyword search on input while in smart mode', async () => {
+ const onSearch = vi.fn();
+ render(SearchFilterBar, { onSearch, sort: 'DATE', dir: 'desc', smartMode: true });
+ await page.getByPlaceholder(SEARCH_PLACEHOLDER).fill('Walter im Krieg');
+ expect(onSearch).not.toHaveBeenCalled();
+ });
+
+ it('fires the smart search callback on Enter in smart mode', async () => {
+ const onSmartSearch = vi.fn();
+ render(SearchFilterBar, {
+ onSearch: vi.fn(),
+ onSmartSearch,
+ sort: 'DATE',
+ dir: 'desc',
+ smartMode: true
+ });
+ const input = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+ await input.fill('Walter im Krieg');
+ await input.click();
+ // Enter submits the NL query in smart mode
+ (document.activeElement as HTMLElement).dispatchEvent(
+ new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
+ );
+ await vi.waitFor(() => expect(onSmartSearch).toHaveBeenCalled());
+ });
+});
diff --git a/frontend/src/routes/search/SmartSearchStatus.svelte b/frontend/src/routes/search/SmartSearchStatus.svelte
new file mode 100644
index 00000000..d6444a7e
--- /dev/null
+++ b/frontend/src/routes/search/SmartSearchStatus.svelte
@@ -0,0 +1,69 @@
+
+
+{#if status === 'loading'}
+
+ {#if nlIsAmbiguous}
+
-
-
- - {#if data.totalElements > 0}{m.docs_result_count({ count: data.totalElements })}{/if} -
- {#if data.canWrite} -
-
+ {/if}
+
- {#if data.totalElements > 0}
-
+ {:else}
+
+
+
+
- {/if}
- + {#if data.totalElements > 0}{m.docs_result_count({ count: data.totalElements })}{/if} +
+ {#if data.canWrite} +
+
- {#if editAllError}
-
+ {#if data.totalElements > 0}
+
+ {/if}
+
- {m.bulk_edit_all_x({ count: data.totalElements })}
-
+ {m.docs_btn_new()}
+
+
+ {#if editAllError}
+ 
- {m.bulk_edit_all_x({ count: data.totalElements })}
-
+ {m.docs_btn_new()}
+ + {editAllError} +
{/if} - - - {m.docs_btn_new()} -
- {m.docs_btn_new()}
- - {editAllError} -
- {/if} - open && closePicker()}>
+
+
+ {#if open}
+
diff --git a/frontend/src/routes/search/DisambiguationPicker.svelte.spec.ts b/frontend/src/routes/search/DisambiguationPicker.svelte.spec.ts
new file mode 100644
index 00000000..5b87a996
--- /dev/null
+++ b/frontend/src/routes/search/DisambiguationPicker.svelte.spec.ts
@@ -0,0 +1,71 @@
+import { describe, expect, it, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import DisambiguationPicker from './DisambiguationPicker.svelte';
+import type { components } from '$lib/generated/api';
+
+type PersonHint = components['schemas']['PersonHint'];
+
+afterEach(() => cleanup());
+
+const persons: PersonHint[] = [
+ { id: 'w1', displayName: 'Walter Raddatz' },
+ { id: 'w2', displayName: 'Walter Müller' }
+];
+
+function pressEscape() {
+ (document.activeElement as HTMLElement).dispatchEvent(
+ new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
+ );
+}
+
+describe('DisambiguationPicker', () => {
+ it('opens the picker and shows a select option per ambiguous person', async () => {
+ render(DisambiguationPicker, { persons, onSelect: vi.fn() });
+ await page.getByRole('button', { name: /Mehrere Personen gefunden/ }).click();
+ await expect
+ .element(page.getByRole('button', { name: 'Walter Raddatz auswählen' }))
+ .toBeInTheDocument();
+ await expect
+ .element(page.getByRole('button', { name: 'Walter Müller auswählen' }))
+ .toBeInTheDocument();
+ });
+
+ it('moves focus into the picker list on open', async () => {
+ render(DisambiguationPicker, { persons, onSelect: vi.fn() });
+ await page.getByRole('button', { name: /Mehrere Personen gefunden/ }).click();
+ await expect
+ .element(page.getByRole('button', { name: 'Walter Raddatz auswählen' }))
+ .toHaveFocus();
+ });
+
+ it('returns focus to the trigger when closed with Escape', async () => {
+ render(DisambiguationPicker, { persons, onSelect: vi.fn() });
+ const trigger = page.getByRole('button', { name: /Mehrere Personen gefunden/ });
+ await trigger.click();
+ await expect
+ .element(page.getByRole('button', { name: 'Walter Raddatz auswählen' }))
+ .toHaveFocus();
+ pressEscape();
+ await expect.element(trigger).toHaveFocus();
+ });
+
+ it('does not call onSelect when dismissed without choosing', async () => {
+ const onSelect = vi.fn();
+ render(DisambiguationPicker, { persons, onSelect });
+ await page.getByRole('button', { name: /Mehrere Personen gefunden/ }).click();
+ await expect
+ .element(page.getByRole('button', { name: 'Walter Raddatz auswählen' }))
+ .toHaveFocus();
+ pressEscape();
+ expect(onSelect).not.toHaveBeenCalled();
+ });
+
+ it('calls onSelect with the chosen person', async () => {
+ const onSelect = vi.fn();
+ render(DisambiguationPicker, { persons, onSelect });
+ await page.getByRole('button', { name: /Mehrere Personen gefunden/ }).click();
+ await page.getByRole('button', { name: 'Walter Müller auswählen' }).click();
+ expect(onSelect).toHaveBeenCalledWith(persons[1]);
+ });
+});
diff --git a/frontend/src/routes/search/InterpretationChipRow.svelte b/frontend/src/routes/search/InterpretationChipRow.svelte
new file mode 100644
index 00000000..8e9cdbc0
--- /dev/null
+++ b/frontend/src/routes/search/InterpretationChipRow.svelte
@@ -0,0 +1,133 @@
+
+
+-
+ {#each persons as person (person.id)}
+
- + + + {/each} +
+ {#each chips as chip (chip.key)}
+ {#if chip.type === 'directional'}
+
+ {chip.from}
+
+ {chip.to}
+
+
+ {:else}
+
+ {chip.label}
+
+
+ {/if}
+ {/each}
+
+
+{#if showKeywordsNotApplied}
+ {m.smart_search_keywords_not_applied()}
+{/if} diff --git a/frontend/src/routes/search/InterpretationChipRow.svelte.spec.ts b/frontend/src/routes/search/InterpretationChipRow.svelte.spec.ts new file mode 100644 index 00000000..f3164389 --- /dev/null +++ b/frontend/src/routes/search/InterpretationChipRow.svelte.spec.ts @@ -0,0 +1,133 @@ +import { describe, expect, it, vi, afterEach } from 'vitest'; +import { cleanup, render } from 'vitest-browser-svelte'; +import { page } from 'vitest/browser'; +import InterpretationChipRow from './InterpretationChipRow.svelte'; +import type { components } from '$lib/generated/api'; + +type NlQueryInterpretation = components['schemas']['NlQueryInterpretation']; +type PersonHint = components['schemas']['PersonHint']; + +afterEach(() => cleanup()); + +const makePerson = (id: string, displayName: string): PersonHint => ({ id, displayName }); + +const makeInterpretation = ( + overrides: Partial
+
+
+{:else if status === 'error'}
+ {m.search_loading_nl()}
++ {m.search_loading_nl_sub()} +
+
+
+
+{/if}
diff --git a/frontend/src/routes/search/SmartSearchStatus.svelte.spec.ts b/frontend/src/routes/search/SmartSearchStatus.svelte.spec.ts
new file mode 100644
index 00000000..605576d0
--- /dev/null
+++ b/frontend/src/routes/search/SmartSearchStatus.svelte.spec.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import SmartSearchStatus from './SmartSearchStatus.svelte';
+
+afterEach(() => {
+ cleanup();
+ vi.restoreAllMocks();
+});
+
+describe('SmartSearchStatus', () => {
+ it('renders a role="status" loading panel with the loading title', async () => {
+ render(SmartSearchStatus, { status: 'loading' });
+ const status = page.getByRole('status');
+ await expect.element(status).toBeInTheDocument();
+ await expect.element(status).toHaveTextContent('Archiv wird befragt');
+ });
+
+ it('hides the loading panel once the status changes away from loading', async () => {
+ const { rerender } = render(SmartSearchStatus, { status: 'loading' });
+ await expect.element(page.getByRole('status')).toBeInTheDocument();
+ await rerender({ status: 'error', errorCode: 'SMART_SEARCH_UNAVAILABLE' });
+ await expect.element(page.getByRole('status')).not.toBeInTheDocument();
+ });
+
+ it('renders the 503 panel with title, body and a switch-to-keyword button', async () => {
+ render(SmartSearchStatus, {
+ status: 'error',
+ errorCode: 'SMART_SEARCH_UNAVAILABLE',
+ onSwitchToKeyword: vi.fn()
+ });
+ await expect.element(page.getByText('Intelligente Suche nicht verfügbar')).toBeInTheDocument();
+ await expect
+ .element(page.getByRole('button', { name: /Volltextsuche wechseln/ }))
+ .toBeInTheDocument();
+ });
+
+ it('invokes onSwitchToKeyword when the 503 fallback button is clicked', async () => {
+ const onSwitchToKeyword = vi.fn();
+ render(SmartSearchStatus, {
+ status: 'error',
+ errorCode: 'SMART_SEARCH_UNAVAILABLE',
+ onSwitchToKeyword
+ });
+ await page.getByRole('button', { name: /Volltextsuche wechseln/ }).click();
+ expect(onSwitchToKeyword).toHaveBeenCalledOnce();
+ });
+
+ it('renders the 429 panel with title and body but no switch-to-keyword button', async () => {
+ render(SmartSearchStatus, {
+ status: 'error',
+ errorCode: 'SMART_SEARCH_RATE_LIMITED',
+ onSwitchToKeyword: vi.fn()
+ });
+ await expect.element(page.getByText('Zu viele Anfragen')).toBeInTheDocument();
+ await expect
+ .element(page.getByRole('button', { name: /Volltextsuche wechseln/ }))
+ .not.toBeInTheDocument();
+ });
+});
{title}
+{body}
+ {#if !isRateLimited} + + {/if} +