marcel/familienarchiv
1
0
Fork 0
Code Issues 118 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(search): wire SmartModeToggle into SearchFilterBar (#739)

Browse Source 
Add smartMode $bindable plus onSmartSearch/onModeToggle callbacks. The
toggle pill sits in the input's right slot (decorative icon moved to the
left); smart mode disables the live oninput keyword search, adds
maxlength=500, and submits the NL query on Enter. 4 integration specs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-06 17:47:05 +02:00
parent fa41394e66
commit 5945824b54
2 changed files with 72 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/routes/search/SmartModeToggle.svelte.spec.ts
View File

@@ -1,10 +1,13 @@
import { describe, expect, it, afterEach } from 'vitest';
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 });
@@ -34,3 +37,45 @@ describe('SmartModeToggle', () => {
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());
});
});