element-web/test/unit-tests/hooks/useDebouncedCallback-test.tsx

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/

import { renderHook } from "@testing-library/react-hooks";

import { useDebouncedCallback } from "../../../src/hooks/spotlight/useDebouncedCallback";

describe("useDebouncedCallback", () => {
    beforeAll(() => jest.useFakeTimers());
    afterAll(() => jest.useRealTimers());

    function render(enabled: boolean, callback: (...params: any[]) => void, params: any[]) {
        return renderHook(({ enabled, callback, params }) => useDebouncedCallback(enabled, callback, params), {
            initialProps: {
                enabled,
                callback,
                params,
            },
        });
    }

    it("should be able to handle empty parameters", async () => {
        // When
        const params: any[] = [];
        const callback = jest.fn();
        render(true, callback, params);
        jest.advanceTimersByTime(1);

        // Then
        expect(callback).toHaveBeenCalledTimes(0);

        // When
        jest.advanceTimersByTime(500);

        // Then
        expect(callback).toHaveBeenCalledTimes(1);
    });

    it("should call the callback with the parameters", async () => {
        // When
        const params = ["USER NAME"];
        const callback = jest.fn();
        render(true, callback, params);
        jest.advanceTimersByTime(500);

        // Then
        expect(callback).toHaveBeenCalledTimes(1);
        expect(callback).toHaveBeenCalledWith(...params);
    });

    it("should call the callback with the parameters when parameters change during the timeout", async () => {
        // When
        const params = ["USER NAME"];
        const callback = jest.fn();
        const { rerender } = render(true, callback, []);

        jest.advanceTimersByTime(1);
        rerender({ enabled: true, callback, params });
        jest.advanceTimersByTime(500);

        // Then
        expect(callback).toHaveBeenCalledTimes(1);
        expect(callback).toHaveBeenCalledWith(...params);
    });

    it("should handle multiple parameters", async () => {
        // When
        const params = [4, 8, 15, 16, 23, 42];
        const callback = jest.fn();
        const { rerender } = render(true, callback, []);

        jest.advanceTimersByTime(1);
        rerender({ enabled: true, callback, params });
        jest.advanceTimersByTime(500);

        // Then
        expect(callback).toHaveBeenCalledTimes(1);
        expect(callback).toHaveBeenCalledWith(...params);
    });

    it("should debounce quick changes", async () => {
        // When
        const queries = [
            "U",
            "US",
            "USE",
            "USER",
            "USER ",
            "USER N",
            "USER NM",
            "USER NMA",
            "USER NM",
            "USER N",
            "USER NA",
            "USER NAM",
            "USER NAME",
        ];
        const callback = jest.fn();

        const { rerender } = render(true, callback, []);
        jest.advanceTimersByTime(1);

        for (const query of queries) {
            rerender({ enabled: true, callback, params: [query] });
            jest.advanceTimersByTime(50);
        }

        jest.advanceTimersByTime(500);

        // Then
        const query = queries[queries.length - 1];
        expect(callback).toHaveBeenCalledTimes(1);
        expect(callback).toHaveBeenCalledWith(query);
    });

    it("should not debounce slow changes", async () => {
        // When
        const queries = [
            "U",
            "US",
            "USE",
            "USER",
            "USER ",
            "USER N",
            "USER NM",
            "USER NMA",
            "USER NM",
            "USER N",
            "USER NA",
            "USER NAM",
            "USER NAME",
        ];
        const callback = jest.fn();

        const { rerender } = render(true, callback, []);
        jest.advanceTimersByTime(1);
        for (const query of queries) {
            rerender({ enabled: true, callback, params: [query] });
            jest.advanceTimersByTime(200);
        }

        jest.advanceTimersByTime(500);

        // Then
        const query = queries[queries.length - 1];
        expect(callback).toHaveBeenCalledTimes(queries.length);
        expect(callback).toHaveBeenCalledWith(query);
    });

    it("should not call the callback if it’s disabled", async () => {
        // When
        const queries = [
            "U",
            "US",
            "USE",
            "USER",
            "USER ",
            "USER N",
            "USER NM",
            "USER NMA",
            "USER NM",
            "USER N",
            "USER NA",
            "USER NAM",
            "USER NAME",
        ];
        const callback = jest.fn();

        const { rerender } = render(false, callback, []);
        jest.advanceTimersByTime(1);
        for (const query of queries) {
            rerender({ enabled: false, callback, params: [query] });
            jest.advanceTimersByTime(200);
        }

        jest.advanceTimersByTime(500);

        // Then
        expect(callback).toHaveBeenCalledTimes(0);
    });
});