feat(search): SearchStore fuer Live-Search mit Web-Fallback
Extrahiert die duplizierte Such-Logik aus +page.svelte und +layout.svelte in eine gemeinsame Klasse. Pure Datenschicht mit injizierbarem fetch — UI-Concerns (URL-Sync, Dropdown, Snapshot) bleiben in den Komponenten. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
220
tests/unit/search-store.test.ts
Normal file
220
tests/unit/search-store.test.ts
Normal file
@@ -0,0 +1,220 @@
|
||||
// @vitest-environment jsdom
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { SearchStore, type SearchSnapshot } from '../../src/lib/client/search.svelte';
|
||||
|
||||
type FetchMock = ReturnType<typeof vi.fn>;
|
||||
|
||||
function mockFetch(responses: Array<{ ok?: boolean; status?: number; body: unknown }>): FetchMock {
|
||||
const calls = [...responses];
|
||||
return vi.fn(async () => {
|
||||
const r = calls.shift();
|
||||
if (!r) throw new Error('fetch called more times than expected');
|
||||
return {
|
||||
ok: r.ok ?? true,
|
||||
status: r.status ?? 200,
|
||||
json: async () => r.body
|
||||
} as Response;
|
||||
});
|
||||
}
|
||||
|
||||
describe('SearchStore', () => {
|
||||
beforeEach(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it('keeps results empty while query is <= 3 chars (debounced)', async () => {
|
||||
vi.useFakeTimers();
|
||||
const fetchImpl = mockFetch([]);
|
||||
const store = new SearchStore({ fetchImpl, debounceMs: 50 });
|
||||
store.query = 'abc';
|
||||
store.runDebounced(store.query);
|
||||
await vi.advanceTimersByTimeAsync(100);
|
||||
expect(store.searching).toBe(false);
|
||||
expect(fetchImpl).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('fires local search after debounce when query > 3 chars', async () => {
|
||||
vi.useFakeTimers();
|
||||
const fetchImpl = mockFetch([
|
||||
{ body: { hits: [{ id: 1, title: 'Pasta', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
|
||||
]);
|
||||
const store = new SearchStore({ fetchImpl, debounceMs: 50, pageSize: 30 });
|
||||
store.query = 'pasta';
|
||||
store.runDebounced(store.query);
|
||||
expect(store.searching).toBe(true);
|
||||
await vi.advanceTimersByTimeAsync(100);
|
||||
await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalled());
|
||||
expect(fetchImpl.mock.calls[0][0]).toMatch(/\/api\/recipes\/search\?q=pasta&limit=30/);
|
||||
expect(store.hits).toHaveLength(1);
|
||||
expect(store.searchedFor).toBe('pasta');
|
||||
expect(store.localExhausted).toBe(true);
|
||||
});
|
||||
|
||||
it('falls back to web search when local returns zero hits', async () => {
|
||||
vi.useFakeTimers();
|
||||
const fetchImpl = mockFetch([
|
||||
{ body: { hits: [] } },
|
||||
{ body: { hits: [{ url: 'https://chefkoch.de/x', title: 'Foo', domain: 'chefkoch.de', snippet: null, thumbnail: null }] } }
|
||||
]);
|
||||
const store = new SearchStore({ fetchImpl, debounceMs: 50 });
|
||||
store.query = 'pizza';
|
||||
store.runDebounced(store.query);
|
||||
await vi.advanceTimersByTimeAsync(100);
|
||||
await vi.waitFor(() => expect(store.webHits).toHaveLength(1));
|
||||
expect(fetchImpl).toHaveBeenCalledTimes(2);
|
||||
expect(fetchImpl.mock.calls[1][0]).toMatch(/\/api\/recipes\/search\/web\?q=pizza&pageno=1/);
|
||||
expect(store.webPageno).toBe(1);
|
||||
});
|
||||
|
||||
it('races-guards: stale response discarded when query changed mid-flight', async () => {
|
||||
vi.useFakeTimers();
|
||||
const fetchImpl = mockFetch([
|
||||
{ body: { hits: [{ id: 99, title: 'Stale', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
|
||||
]);
|
||||
const store = new SearchStore({ fetchImpl, debounceMs: 10 });
|
||||
store.query = 'stale-query';
|
||||
store.runDebounced(store.query);
|
||||
await vi.advanceTimersByTimeAsync(15);
|
||||
store.query = 'different';
|
||||
await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalled());
|
||||
expect(store.hits).toEqual([]);
|
||||
});
|
||||
|
||||
it('loadMore: drains local first (offset pagination)', async () => {
|
||||
vi.useFakeTimers();
|
||||
const page1 = Array.from({ length: 30 }, (_, i) => ({ id: i, title: `r${i}`, description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }));
|
||||
const page2 = Array.from({ length: 5 }, (_, i) => ({ id: i + 30, title: `r${i + 30}`, description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }));
|
||||
const fetchImpl = mockFetch([
|
||||
{ body: { hits: page1 } },
|
||||
{ body: { hits: page2 } }
|
||||
]);
|
||||
const store = new SearchStore({ fetchImpl, debounceMs: 10, pageSize: 30 });
|
||||
store.query = 'meal';
|
||||
store.runDebounced(store.query);
|
||||
await vi.advanceTimersByTimeAsync(15);
|
||||
await vi.waitFor(() => expect(store.hits).toHaveLength(30));
|
||||
expect(store.localExhausted).toBe(false);
|
||||
await store.loadMore();
|
||||
expect(store.hits).toHaveLength(35);
|
||||
expect(fetchImpl.mock.calls[1][0]).toMatch(/offset=30/);
|
||||
expect(store.localExhausted).toBe(true);
|
||||
});
|
||||
|
||||
it('loadMore: switches to web pagination after local exhausted', async () => {
|
||||
vi.useFakeTimers();
|
||||
const local = [{ id: 1, title: 'local', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }];
|
||||
const webP1 = [{ url: 'https://a.com', title: 'A', domain: 'a.com', snippet: null, thumbnail: null }];
|
||||
const webP2 = [{ url: 'https://b.com', title: 'B', domain: 'b.com', snippet: null, thumbnail: null }];
|
||||
const fetchImpl = mockFetch([
|
||||
{ body: { hits: local } },
|
||||
{ body: { hits: webP1 } },
|
||||
{ body: { hits: webP2 } }
|
||||
]);
|
||||
const store = new SearchStore({ fetchImpl, debounceMs: 10, pageSize: 30 });
|
||||
store.query = 'soup';
|
||||
store.runDebounced(store.query);
|
||||
await vi.advanceTimersByTimeAsync(15);
|
||||
await vi.waitFor(() => expect(store.hits).toHaveLength(1));
|
||||
expect(store.localExhausted).toBe(true);
|
||||
await store.loadMore();
|
||||
expect(store.webHits).toHaveLength(1);
|
||||
await store.loadMore();
|
||||
expect(store.webHits).toHaveLength(2);
|
||||
expect(store.webPageno).toBe(2);
|
||||
});
|
||||
|
||||
it('web search error sets webError and marks webExhausted', async () => {
|
||||
vi.useFakeTimers();
|
||||
const fetchImpl = mockFetch([
|
||||
{ body: { hits: [] } },
|
||||
{ ok: false, status: 502, body: { message: 'SearXNG unreachable' } }
|
||||
]);
|
||||
const store = new SearchStore({ fetchImpl, debounceMs: 10 });
|
||||
store.query = 'anything';
|
||||
store.runDebounced(store.query);
|
||||
await vi.advanceTimersByTimeAsync(15);
|
||||
await vi.waitFor(() => expect(store.webError).toBe('SearXNG unreachable'));
|
||||
expect(store.webExhausted).toBe(true);
|
||||
});
|
||||
|
||||
it('reset(): clears query, results, and pending debounce', async () => {
|
||||
vi.useFakeTimers();
|
||||
const fetchImpl = mockFetch([]);
|
||||
const store = new SearchStore({ fetchImpl, debounceMs: 100 });
|
||||
store.query = 'foobar';
|
||||
store.runDebounced(store.query);
|
||||
store.reset();
|
||||
await vi.advanceTimersByTimeAsync(200);
|
||||
expect(store.query).toBe('');
|
||||
expect(store.hits).toEqual([]);
|
||||
expect(fetchImpl).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('captureSnapshot / restoreSnapshot: round-trips without re-fetching', async () => {
|
||||
vi.useFakeTimers();
|
||||
const fetchImpl = mockFetch([]);
|
||||
const store = new SearchStore({ fetchImpl, debounceMs: 50 });
|
||||
const snap: SearchSnapshot = {
|
||||
query: 'lasagne',
|
||||
hits: [{ id: 7, title: 'Lasagne', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }],
|
||||
webHits: [],
|
||||
searchedFor: 'lasagne',
|
||||
webError: null,
|
||||
localExhausted: true,
|
||||
webPageno: 0,
|
||||
webExhausted: false
|
||||
};
|
||||
store.restoreSnapshot(snap);
|
||||
expect(store.query).toBe('lasagne');
|
||||
expect(store.hits).toHaveLength(1);
|
||||
store.runDebounced(store.query);
|
||||
await vi.advanceTimersByTimeAsync(100);
|
||||
expect(fetchImpl).not.toHaveBeenCalled();
|
||||
const round = store.captureSnapshot();
|
||||
expect(round).toEqual(snap);
|
||||
});
|
||||
|
||||
it('filterParam option: gets appended to both local and web requests', async () => {
|
||||
vi.useFakeTimers();
|
||||
const fetchImpl = mockFetch([
|
||||
{ body: { hits: [] } },
|
||||
{ body: { hits: [] } }
|
||||
]);
|
||||
const store = new SearchStore({
|
||||
fetchImpl,
|
||||
debounceMs: 10,
|
||||
filterParam: () => '&domains=chefkoch.de'
|
||||
});
|
||||
store.query = 'curry';
|
||||
store.runDebounced(store.query);
|
||||
await vi.advanceTimersByTimeAsync(15);
|
||||
await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalledTimes(2));
|
||||
expect(fetchImpl.mock.calls[0][0]).toMatch(/&domains=chefkoch\.de/);
|
||||
expect(fetchImpl.mock.calls[1][0]).toMatch(/&domains=chefkoch\.de/);
|
||||
});
|
||||
|
||||
it('reSearch: immediate re-run with current query on filter change', async () => {
|
||||
vi.useFakeTimers();
|
||||
let filter = '';
|
||||
const fetchImpl = mockFetch([
|
||||
{ body: { hits: [] } },
|
||||
{ body: { hits: [] } },
|
||||
{ body: { hits: [{ id: 1, title: 'filtered', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
|
||||
]);
|
||||
const store = new SearchStore({
|
||||
fetchImpl,
|
||||
debounceMs: 10,
|
||||
filterDebounceMs: 5,
|
||||
filterParam: () => filter
|
||||
});
|
||||
store.query = 'broth';
|
||||
store.runDebounced(store.query);
|
||||
await vi.advanceTimersByTimeAsync(15);
|
||||
filter = '&domains=chefkoch.de';
|
||||
store.reSearch();
|
||||
await vi.advanceTimersByTimeAsync(10);
|
||||
await vi.waitFor(() => expect(store.hits).toHaveLength(1));
|
||||
const last = fetchImpl.mock.calls.at(-1)?.[0] as string;
|
||||
expect(last).toMatch(/&domains=chefkoch\.de/);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user