mirror of
https://github.com/element-hq/element-web
synced 2024-10-23 03:05:45 +03:00
Convert remaining hook tests to RTL (#10166)
* convert useProfileInfo to RTL * convert useLatestResult to RTL
This commit is contained in:
alunturner
GitHub
parent
8feed1a225
commit
73360026ab
2 changed files with 146 additions and 148 deletions
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,28 +14,16 @@ 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 { waitFor } from "@testing-library/react";
|
||||
import { renderHook, act } from "@testing-library/react-hooks/dom";
|
||||
import { MatrixClient } from "matrix-js-sdk/src/matrix";
|
||||
import { sleep } from "matrix-js-sdk/src/utils";
|
||||
import React from "react";
|
||||
import { act } from "react-dom/test-utils";
|
||||
|
||||
import { useProfileInfo } from "../../src/hooks/useProfileInfo";
|
||||
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
|
||||
import { stubClient } from "../test-utils/test-utils";
|
||||
|
||||
function ProfileInfoComponent({ onClick }: { onClick(hook: ReturnType<typeof useProfileInfo>): void }) {
|
||||
const profileInfo = useProfileInfo();
|
||||
|
||||
const { ready, loading, profile } = profileInfo;
|
||||
|
||||
return (
|
||||
<div onClick={() => onClick(profileInfo)}>
|
||||
{(!ready || loading) && `ready: ${ready}, loading: ${loading}`}
|
||||
{profile && `Name: ${profile.display_name}`}
|
||||
</div>
|
||||
);
|
||||
function render() {
|
||||
return renderHook(() => useProfileInfo());
|
||||
}
|
||||
|
||||
describe("useProfileInfo", () => {
|
||||
|
|
@ -55,66 +43,44 @@ describe("useProfileInfo", () => {
|
|||
it("should display user profile when searching", async () => {
|
||||
const query = "@user:home.server";
|
||||
|
||||
const wrapper = mount(
|
||||
<ProfileInfoComponent
|
||||
onClick={(hook) => {
|
||||
hook.search({
|
||||
query,
|
||||
});
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
const { result } = render();
|
||||
|
||||
await act(async () => {
|
||||
await sleep(1);
|
||||
wrapper.simulate("click");
|
||||
return act(() => sleep(1));
|
||||
act(() => {
|
||||
result.current.search({ query });
|
||||
});
|
||||
|
||||
expect(wrapper.text()).toContain(query);
|
||||
await waitFor(() => expect(result.current.ready).toBe(true));
|
||||
|
||||
expect(result.current.profile?.display_name).toBe(query);
|
||||
});
|
||||
|
||||
it("should work with empty queries", async () => {
|
||||
const wrapper = mount(
|
||||
<ProfileInfoComponent
|
||||
onClick={(hook) => {
|
||||
hook.search({
|
||||
query: "",
|
||||
});
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
const query = "";
|
||||
|
||||
await act(async () => {
|
||||
await sleep(1);
|
||||
wrapper.simulate("click");
|
||||
return act(() => sleep(1));
|
||||
const { result } = render();
|
||||
|
||||
act(() => {
|
||||
result.current.search({ query });
|
||||
});
|
||||
|
||||
expect(wrapper.text()).toBe("");
|
||||
await waitFor(() => expect(result.current.ready).toBe(true));
|
||||
|
||||
expect(result.current.profile).toBeNull();
|
||||
});
|
||||
|
||||
it("should treat invalid mxids as empty queries", async () => {
|
||||
const queries = ["@user", "user@home.server"];
|
||||
|
||||
for (const query of queries) {
|
||||
const wrapper = mount(
|
||||
<ProfileInfoComponent
|
||||
onClick={(hook) => {
|
||||
hook.search({
|
||||
query,
|
||||
});
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
const { result } = render();
|
||||
|
||||
await act(async () => {
|
||||
await sleep(1);
|
||||
wrapper.simulate("click");
|
||||
return act(() => sleep(1));
|
||||
act(() => {
|
||||
result.current.search({ query });
|
||||
});
|
||||
|
||||
expect(wrapper.text()).toBe("");
|
||||
await waitFor(() => expect(result.current.ready).toBe(true));
|
||||
|
||||
expect(result.current.profile).toBeNull();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -124,43 +90,29 @@ describe("useProfileInfo", () => {
|
|||
};
|
||||
const query = "@user:home.server";
|
||||
|
||||
const wrapper = mount(
|
||||
<ProfileInfoComponent
|
||||
onClick={(hook) => {
|
||||
hook.search({
|
||||
query,
|
||||
});
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
await act(async () => {
|
||||
await sleep(1);
|
||||
wrapper.simulate("click");
|
||||
return act(() => sleep(1));
|
||||
const { result } = render();
|
||||
|
||||
act(() => {
|
||||
result.current.search({ query });
|
||||
});
|
||||
|
||||
expect(wrapper.text()).toBe("");
|
||||
await waitFor(() => expect(result.current.ready).toBe(true));
|
||||
|
||||
expect(result.current.profile).toBeNull();
|
||||
});
|
||||
|
||||
it("should be able to handle an empty result", async () => {
|
||||
cli.getProfileInfo = () => null as unknown as Promise<{}>;
|
||||
const query = "@user:home.server";
|
||||
|
||||
const wrapper = mount(
|
||||
<ProfileInfoComponent
|
||||
onClick={(hook) => {
|
||||
hook.search({
|
||||
query,
|
||||
});
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
await act(async () => {
|
||||
await sleep(1);
|
||||
wrapper.simulate("click");
|
||||
return act(() => sleep(1));
|
||||
const { result } = render();
|
||||
|
||||
act(() => {
|
||||
result.current.search({ query });
|
||||
});
|
||||
|
||||
expect(wrapper.text()).toBe("");
|
||||
await waitFor(() => expect(result.current.ready).toBe(true));
|
||||
|
||||
expect(result.current.profile?.display_name).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue