Focus the thread panel when clicking on an item in the TAC (#12410)

* Focus the thread panel when clicking on an item in the TAC

actually the 'close' button in the threads panel as it's the only
interactive element: we can improve this later when we use landmarks
& generally have better a11y.

* Undo minor refactoring

as none of it is test3ed, it's not worth it.

* add unit test

* Add matrixchat tests

* Needs awaits

* ts-ignore

* Fix test (I think...)

* Remove unnecessary value set

* Not how assignments work

test/components/structures/MatrixChat-test.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React, { ComponentProps } from "react";
-import { fireEvent, render, RenderResult, screen, within } from "@testing-library/react";
+import { fireEvent, render, RenderResult, screen, waitFor, within } from "@testing-library/react";
 import fetchMock from "fetch-mock-jest";
 import { Mocked, mocked } from "jest-mock";
 import { ClientEvent, MatrixClient, MatrixEvent, Room, SyncState } from "matrix-js-sdk/src/matrix";
@@ -59,6 +59,7 @@ import { SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY } from "../../../src/Base
 import SettingsStore from "../../../src/settings/SettingsStore";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
 import { MatrixClientPeg as peg } from "../../../src/MatrixClientPeg";
+import DMRoomMap from "../../../src/utils/DMRoomMap";
 
 jest.mock("matrix-js-sdk/src/oidc/authorize", () => ({
     completeAuthorizationCodeGrant: jest.fn(),
@@ -220,6 +221,9 @@ describe("<MatrixChat />", () => {
         jest.spyOn(StorageManager, "idbLoad").mockReset();
         jest.spyOn(StorageManager, "idbSave").mockResolvedValue(undefined);
         jest.spyOn(defaultDispatcher, "dispatch").mockClear();
+        jest.spyOn(defaultDispatcher, "fire").mockClear();
+
+        DMRoomMap.makeShared(mockClient);
 
         await clearAllModals();
     });
@@ -227,6 +231,9 @@ describe("<MatrixChat />", () => {
     resetJsDomAfterEach();
 
     afterEach(() => {
+        // @ts-ignore
+        DMRoomMap.setShared(null);
+
         jest.restoreAllMocks();
 
         // emit a loggedOut event so that all of the Store singletons forget about their references to the mock client
@@ -239,6 +246,22 @@ describe("<MatrixChat />", () => {
         expect(container).toMatchSnapshot();
     });
 
+    it("should fire to focus the message composer", async () => {
+        getComponent();
+        defaultDispatcher.dispatch({ action: Action.ViewRoom, room_id: "!room:server.org", focusNext: "composer" });
+        await waitFor(() => {
+            expect(defaultDispatcher.fire).toHaveBeenCalledWith(Action.FocusSendMessageComposer);
+        });
+    });
+
+    it("should fire to focus the threads panel", async () => {
+        getComponent();
+        defaultDispatcher.dispatch({ action: Action.ViewRoom, room_id: "!room:server.org", focusNext: "threadsPanel" });
+        await waitFor(() => {
+            expect(defaultDispatcher.fire).toHaveBeenCalledWith(Action.FocusThreadsPanel);
+        });
+    });
+
     describe("when query params have a OIDC params", () => {
         const issuer = "https://auth.com/";
         const homeserverUrl = "https://matrix.org";

test/components/structures/ThreadPanel-test.tsx

@@ -37,6 +37,8 @@ import ResizeNotifier from "../../../src/utils/ResizeNotifier";
 import { createTestClient, getRoomContext, mkRoom, mockPlatformPeg, stubClient } from "../../test-utils";
 import { mkThread } from "../../test-utils/threads";
 import { IRoomState } from "../../../src/components/structures/RoomView";
+import defaultDispatcher from "../../../src/dispatcher/dispatcher";
+import { Action } from "../../../src/dispatcher/actions";
 
 jest.mock("../../../src/utils/Feedback");
 
@@ -156,6 +158,43 @@ describe("ThreadPanel", () => {
             fireEvent.click(getByRole(container, "button", { name: "Mark all as read" }));
             await waitFor(() => expect(mockClient.sendReadReceipt).not.toHaveBeenCalled());
         });
+
+        it("focuses the close button on FocusThreadsPanel dispatch", () => {
+            const ROOM_ID = "!roomId:example.org";
+
+            stubClient();
+            mockPlatformPeg();
+            const mockClient = mocked(MatrixClientPeg.safeGet());
+
+            const room = new Room(ROOM_ID, mockClient, mockClient.getUserId() ?? "", {
+                pendingEventOrdering: PendingEventOrdering.Detached,
+            });
+
+            render(
+                <MatrixClientContext.Provider value={mockClient}>
+                    <RoomContext.Provider
+                        value={getRoomContext(room, {
+                            canSendMessages: true,
+                        })}
+                    >
+                        <ThreadPanel
+                            roomId={ROOM_ID}
+                            onClose={jest.fn()}
+                            resizeNotifier={new ResizeNotifier()}
+                            permalinkCreator={new RoomPermalinkCreator(room)}
+                        />
+                    </RoomContext.Provider>
+                </MatrixClientContext.Provider>,
+            );
+
+            // Unfocus it first so we know it's not just focused by coincidence
+            screen.getByTestId("base-card-close-button").blur();
+            expect(screen.getByTestId("base-card-close-button")).not.toHaveFocus();
+
+            defaultDispatcher.dispatch({ action: Action.FocusThreadsPanel }, true);
+
+            expect(screen.getByTestId("base-card-close-button")).toHaveFocus();
+        });
     });
 
     describe("Filtering", () => {