Convert remaining hook tests to RTL (#10166)

* convert useProfileInfo to RTL
* convert useLatestResult to RTL

test/hooks/useLatestResult-test.tsx

@@ -14,77 +14,123 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
-import { sleep } from "matrix-js-sdk/src/utils";
-import React, { useEffect, useState } from "react";
-import { act } from "react-dom/test-utils";
+import { renderHook, RenderHookResult } from "@testing-library/react-hooks/dom";
 
 import { useLatestResult } from "../../src/hooks/useLatestResult";
 
-function LatestResultsComponent({ query, doRequest }: { query: number; doRequest(query: number): Promise<number> }) {
-    const [value, setValueInternal] = useState<number>(0);
-    const [updateQuery, updateResult] = useLatestResult(setValueInternal);
-    useEffect(() => {
-        updateQuery(query);
-        doRequest(query).then((it: number) => {
-            updateResult(query, it);
-        });
-    }, [doRequest, query, updateQuery, updateResult]);
+// All tests use fake timers throughout, comments will show the elapsed time in ms
+jest.useFakeTimers();
 
-    return <div>{value}</div>;
+const mockSetter = jest.fn();
+
+beforeEach(() => {
+    mockSetter.mockClear();
+});
+
+function simulateRequest(
+    hookResult: RenderHookResult<typeof useLatestResult, ReturnType<typeof useLatestResult>>["result"],
+    { id, delayInMs, result }: { id: string; delayInMs: number; result: string },
+) {
+    const [setQuery, setResult] = hookResult.current;
+    setQuery(id);
+    setTimeout(() => setResult(id, result), delayInMs);
 }
 
-describe("useLatestResult", () => {
-    it("should return results", async () => {
-        const doRequest = async (query: number) => {
-            await sleep(180);
-            return query;
-        };
+describe("renderhook tests", () => {
+    it("should return a result", () => {
+        const { result: hookResult } = renderHook(() => useLatestResult(mockSetter));
 
-        const wrapper = mount(<LatestResultsComponent query={0} doRequest={doRequest} />);
-        await act(async () => {
-            await sleep(100);
-        });
-        expect(wrapper.text()).toEqual("0");
-        wrapper.setProps({ doRequest, query: 1 });
-        await act(async () => {
-            await sleep(70);
-        });
-        wrapper.setProps({ doRequest, query: 2 });
-        await act(async () => {
-            await sleep(70);
-        });
-        expect(wrapper.text()).toEqual("0");
-        await act(async () => {
-            await sleep(120);
-        });
-        expect(wrapper.text()).toEqual("2");
+        const query = { id: "query1", delayInMs: 100, result: "result1" };
+        simulateRequest(hookResult, query);
+
+        // check we have made no calls to the setter
+        expect(mockSetter).not.toHaveBeenCalled();
+
+        // advance timer until the timeout elapses, check we have called the setter
+        jest.advanceTimersToNextTimer();
+        expect(mockSetter).toHaveBeenCalledTimes(1);
+        expect(mockSetter).toHaveBeenLastCalledWith(query.result);
     });
 
-    it("should prevent out-of-order results", async () => {
-        const doRequest = async (query: number) => {
-            await sleep(query);
-            return query;
-        };
+    it("should not let a slower response to an earlier query overwrite the result of a later query", () => {
+        const { result: hookResult } = renderHook(() => useLatestResult(mockSetter));
 
-        const wrapper = mount(<LatestResultsComponent query={0} doRequest={doRequest} />);
-        await act(async () => {
-            await sleep(5);
-        });
-        expect(wrapper.text()).toEqual("0");
-        wrapper.setProps({ doRequest, query: 50 });
-        await act(async () => {
-            await sleep(5);
-        });
-        wrapper.setProps({ doRequest, query: 1 });
-        await act(async () => {
-            await sleep(5);
-        });
-        expect(wrapper.text()).toEqual("1");
-        await act(async () => {
-            await sleep(50);
-        });
-        expect(wrapper.text()).toEqual("1");
+        const slowQuery = { id: "slowQuery", delayInMs: 500, result: "slowResult" };
+        const fastQuery = { id: "fastQuery", delayInMs: 100, result: "fastResult" };
+
+        simulateRequest(hookResult, slowQuery);
+        simulateRequest(hookResult, fastQuery);
+
+        // advance to fastQuery response, check the setter call
+        jest.advanceTimersToNextTimer();
+        expect(mockSetter).toHaveBeenCalledTimes(1);
+        expect(mockSetter).toHaveBeenLastCalledWith(fastQuery.result);
+
+        // advance time to slowQuery response, check the setter has _not_ been
+        // called again and that the result is still from the fast query
+        jest.advanceTimersToNextTimer();
+        expect(mockSetter).toHaveBeenCalledTimes(1);
+        expect(mockSetter).toHaveBeenLastCalledWith(fastQuery.result);
+    });
+
+    it("should return expected results when all response times similar", () => {
+        const { result: hookResult } = renderHook(() => useLatestResult(mockSetter));
+
+        const commonDelayInMs = 180;
+        const query1 = { id: "q1", delayInMs: commonDelayInMs, result: "r1" };
+        const query2 = { id: "q2", delayInMs: commonDelayInMs, result: "r2" };
+        const query3 = { id: "q3", delayInMs: commonDelayInMs, result: "r3" };
+
+        // ELAPSED: 0ms, no queries sent
+        simulateRequest(hookResult, query1);
+        jest.advanceTimersByTime(100);
+
+        // ELAPSED: 100ms, query1 sent, no responses
+        expect(mockSetter).not.toHaveBeenCalled();
+        simulateRequest(hookResult, query2);
+        jest.advanceTimersByTime(70);
+
+        // ELAPSED: 170ms, query1 and query2 sent, no responses
+        expect(mockSetter).not.toHaveBeenCalled();
+        simulateRequest(hookResult, query3);
+        jest.advanceTimersByTime(70);
+
+        // ELAPSED: 240ms, all queries sent, responses for query1 and query2
+        expect(mockSetter).not.toHaveBeenCalled();
+
+        // ELAPSED: 360ms, all queries sent, all queries have responses
+        jest.advanceTimersByTime(120);
+        expect(mockSetter).toHaveBeenLastCalledWith(query3.result);
+    });
+
+    it("should prevent out of order results", () => {
+        const { result: hookResult } = renderHook(() => useLatestResult(mockSetter));
+
+        const query1 = { id: "q1", delayInMs: 0, result: "r1" };
+        const query2 = { id: "q2", delayInMs: 50, result: "r2" };
+        const query3 = { id: "q3", delayInMs: 1, result: "r3" };
+
+        // ELAPSED: 0ms, no queries sent
+        simulateRequest(hookResult, query1);
+        jest.advanceTimersByTime(5);
+
+        // ELAPSED: 5ms, query1 sent, response from query1
+        expect(mockSetter).toHaveBeenCalledTimes(1);
+        expect(mockSetter).toHaveBeenLastCalledWith(query1.result);
+        simulateRequest(hookResult, query2);
+        jest.advanceTimersByTime(5);
+
+        // ELAPSED: 10ms, query1 and query2 sent, response from query1
+        simulateRequest(hookResult, query3);
+        jest.advanceTimersByTime(5);
+
+        // ELAPSED: 15ms, all queries sent, responses from query1 and query3
+        expect(mockSetter).toHaveBeenCalledTimes(2);
+        expect(mockSetter).toHaveBeenLastCalledWith(query3.result);
+
+        // ELAPSED: 65ms, all queries sent, all queries have responses
+        // so check that the result is still from query3, not query2
+        jest.advanceTimersByTime(50);
+        expect(mockSetter).toHaveBeenLastCalledWith(query3.result);
     });
 });