peter
2d5bd275fa
The query read the typing-debounced search, so for 300 ms after a jump it mixed the new view's filters with the old view's text and fetched rows neither view shows. useDebounced takes a settle key whose change applies the value immediately.
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
import { act, renderHook } from "@testing-library/react";
|
|
|
|
import { useDebounced } from "./useDebounced";
|
|
|
|
afterEach(() => {
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
describe("useDebounced", () => {
|
|
it("hands a value on once it stopped changing for the delay", () => {
|
|
vi.useFakeTimers();
|
|
const { result, rerender } = renderHook(({ v }) => useDebounced(v, 300), {
|
|
initialProps: { v: "a" },
|
|
});
|
|
rerender({ v: "ab" });
|
|
expect(result.current).toBe("a");
|
|
act(() => vi.advanceTimersByTime(300));
|
|
expect(result.current).toBe("ab");
|
|
});
|
|
|
|
it("takes the value at once when `settle` changes — a jump, not typing", () => {
|
|
vi.useFakeTimers();
|
|
const { result, rerender } = renderHook(({ v, s }) => useDebounced(v, 300, s), {
|
|
initialProps: { v: "", s: 0 },
|
|
});
|
|
rerender({ v: "boom", s: 1 });
|
|
expect(result.current).toBe("boom");
|
|
rerender({ v: "boomx", s: 1 });
|
|
expect(result.current).toBe("boom");
|
|
act(() => vi.advanceTimersByTime(300));
|
|
expect(result.current).toBe("boomx");
|
|
});
|
|
});
|