← Wszystkie zadaniaReact · Senior

Wyszukiwanie bez wyścigu odpowiedzi

Napisz hook useSearch(query, search). search(query) zwraca obietnicę z tablicą wyników. Hook zwraca { results, loading }: gdy zapytanie trwa, loading ma wartość true.

Odpowiedzi mogą przychodzić w innej kolejności niż zapytania. Pokazywać trzeba tylko wynik dla bieżącego query: przestarzała odpowiedź, która przyjdzie później, nie może go nadpisać. Dla pustego query - results = [] bez wywoływania search.

function useSearch(query, search) {
  // search(query) returns a promise of results
  // return { results, loading }
}

Ctrl+Enter uruchamia testy. Tab robi wcięcie; aby wyjść z edytora klawiaturą, naciśnij Esc, a potem Tab. Kod zapisuje się w tej przeglądarce.

Testy (4)

const search = (q) => Promise.resolve([q + '1']);
const { result } = renderHook(({ q }) => useSearch(q, search), { initialProps: { q: 'a' } });
await waitFor(() => expect(result.current.results).toEqual(['a1']));
expect(result.current.loading).toBe(false);

const search = () => new Promise(() => {});
const { result } = renderHook(({ q }) => useSearch(q, search), { initialProps: { q: 'a' } });
await waitFor(() => expect(result.current.loading).toBe(true));

const pending = {};
const search = (q) => new Promise((resolve) => { pending[q] = resolve; });
const { result, rerender } = renderHook(({ q }) => useSearch(q, search), { initialProps: { q: 'a' } });
await waitFor(() => expect(typeof pending.a).toBe('function'));
rerender({ q: 'ab' });
await waitFor(() => expect(typeof pending.ab).toBe('function'));
pending.ab(['AB']);
await waitFor(() => expect(result.current.results).toEqual(['AB']));
pending.a(['A']);
await wait(30);
expect(result.current.results).toEqual(['AB']);

const search = fn(() => Promise.resolve(['x']));
const { result } = renderHook(({ q }) => useSearch(q, search), { initialProps: { q: '' } });
await wait(30);
expect(search).toHaveBeenCalledTimes(0);
expect(result.current.results).toEqual([]);
expect(result.current.loading).toBe(false);