Convert usePublicRoomDirectory to RTL (#10162)

* convert enzyme to rtl
* sort out TS issues

test/hooks/usePublicRoomDirectory-test.tsx

@@ -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 { waitFor } from "@testing-library/react";
-import { mount } from "enzyme";
+import { renderHook, act } from "@testing-library/react-hooks/dom";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { IRoomDirectoryOptions, 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 { usePublicRoomDirectory } from "../../src/hooks/usePublicRoomDirectory";
 import { MatrixClientPeg } from "../../src/MatrixClientPeg";
 import { stubClient } from "../test-utils/test-utils";
 
-function PublicRoomComponent({ onClick }: { onClick(hook: ReturnType<typeof usePublicRoomDirectory>): void }) {
+function render() {
-    const roomDirectory = usePublicRoomDirectory();
+    return renderHook(() => usePublicRoomDirectory());
-
-    const { ready, loading, publicRooms } = roomDirectory;
-
-    return (
-        <div onClick={() => onClick(roomDirectory)}>
-            {(!ready || loading) && `ready: ${ready}, loading: ${loading}`}
-            {publicRooms[0] && `Name: ${publicRooms[0].name}`}
-        </div>
-    );
 }
 
 describe("usePublicRoomDirectory", () => {
@@ -47,65 +35,62 @@ describe("usePublicRoomDirectory", () => {
 
         MatrixClientPeg.getHomeserverName = () => "matrix.org";
         cli.getThirdpartyProtocols = () => Promise.resolve({});
-        cli.publicRooms = ({ filter: { generic_search_term: query } }) =>
+        cli.publicRooms = ({ filter }: IRoomDirectoryOptions) => {
-            Promise.resolve({
+            const chunk = filter?.generic_search_term
-                chunk: [
+                ? [
-                    {
+                      {
-                        room_id: "hello world!",
+                          room_id: "hello world!",
-                        name: query,
+                          name: filter.generic_search_term,
-                        world_readable: true,
+                          world_readable: true,
-                        guest_can_join: true,
+                          guest_can_join: true,
-                        num_joined_members: 1,
+                          num_joined_members: 1,
-                    },
+                      },
-                ],
+                  ]
+                : [];
+            return Promise.resolve({
+                chunk,
                 total_room_count_estimate: 1,
             });
+        };
     });
 
     it("should display public rooms when searching", async () => {
         const query = "ROOM NAME";
+        const { result } = render();
 
-        const wrapper = mount(
+        expect(result.current.ready).toBe(false);
-            <PublicRoomComponent
+        expect(result.current.loading).toBe(false);
-                onClick={(hook) => {
-                    hook.search({
-                        limit: 1,
-                        query,
-                    });
-                }}
-            />,
-        );
 
-        expect(wrapper.text()).toBe("ready: false, loading: false");
+        act(() => {
-
+            result.current.search({
-        await act(async () => {
+                limit: 1,
-            await sleep(1);
+                query,
-            wrapper.simulate("click");
+            });
-            return act(() => sleep(1));
         });
 
-        expect(wrapper.text()).toContain(query);
+        await waitFor(() => {
+            expect(result.current.ready).toBe(true);
+        });
+
+        expect(result.current.publicRooms[0].name).toBe(query);
     });
 
     it("should work with empty queries", async () => {
-        const wrapper = mount(
+        const query = "ROOM NAME";
-            <PublicRoomComponent
+        const { result } = render();
-                onClick={(hook) => {
-                    hook.search({
-                        limit: 1,
-                        query: "",
-                    });
-                }}
-            />,
-        );
 
-        await act(async () => {
+        act(() => {
-            await sleep(1);
+            result.current.search({
-            wrapper.simulate("click");
+                limit: 1,
-            return act(() => sleep(1));
+                query,
+            });
         });
 
-        expect(wrapper.text()).toBe("");
+        await waitFor(() => {
+            expect(result.current.ready).toBe(true);
+        });
+
+        expect(result.current.publicRooms[0].name).toEqual(query);
     });
 
     it("should recover from a server exception", async () => {
@@ -114,22 +99,19 @@ describe("usePublicRoomDirectory", () => {
         };
         const query = "ROOM NAME";
 
-        const wrapper = mount(
+        const { result } = render();
-            <PublicRoomComponent
+
-                onClick={(hook) => {
+        act(() => {
-                    hook.search({
+            result.current.search({
-                        limit: 1,
+                limit: 1,
-                        query,
+                query,
-                    });
+            });
-                }}
-            />,
-        );
-        await act(async () => {
-            await sleep(1);
-            wrapper.simulate("click");
-            return act(() => sleep(1));
         });
 
-        expect(wrapper.text()).toBe("");
+        await waitFor(() => {
+            expect(result.current.ready).toBe(true);
+        });
+
+        expect(result.current.publicRooms).toEqual([]);
     });
 });