Merge branch 'develop' of https://github.com/vector-im/element-web into dbkr/stateafter

# Conflicts:
#	test/unit-tests/components/structures/RoomView-test.tsx
#	test/unit-tests/components/structures/TimelinePanel-test.tsx

test/unit-tests/components/views/auth/__snapshots__/AuthFooter-test.tsx.snap

@@ -14,11 +14,11 @@ exports[`<AuthFooter /> should match snapshot 1`] = `
       Blog
     </a>
     <a
-      href="https://twitter.com/element_hq"
+      href="https://mastodon.matrix.org/@Element"
       rel="noreferrer noopener"
       target="_blank"
     >
-      Twitter
+      Mastodon
     </a>
     <a
       href="https://github.com/element-hq/element-web"

test/unit-tests/components/views/auth/__snapshots__/AuthPage-test.tsx.snap

@@ -30,11 +30,11 @@ exports[`<AuthPage /> should match snapshot 1`] = `
         Blog
       </a>
       <a
-        href="https://twitter.com/element_hq"
+        href="https://mastodon.matrix.org/@Element"
         rel="noreferrer noopener"
         target="_blank"
       >
-        Twitter
+        Mastodon
       </a>
       <a
         href="https://github.com/element-hq/element-web"

test/unit-tests/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap

@@ -8,9 +8,18 @@ exports[`<BeaconViewDialog /> renders a fallback when there are no locations 1`]
   <div
     class="mx_MapFallback_bg"
   />
-  <div
+  <svg
     class="mx_MapFallback_icon"
-  />
+    fill="currentColor"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
+    />
+  </svg>
   <span
     class="mx_BeaconViewDialog_mapFallbackMessage"
   >

test/unit-tests/components/views/context_menus/RoomGeneralContextMenu-test.tsx

@@ -150,7 +150,7 @@ describe("RoomGeneralContextMenu", () => {
 
         await sleep(0);
 
-        expect(mockClient.setRoomAccountData).toHaveBeenCalledWith(ROOM_ID, "com.famedly.marked_unread", {
+        expect(mockClient.setRoomAccountData).toHaveBeenCalledWith(ROOM_ID, "m.marked_unread", {
             unread: true,
         });
         expect(onFinished).toHaveBeenCalled();

test/unit-tests/components/views/dialogs/AccessSecretStorageDialog-test.tsx

@@ -122,4 +122,34 @@ describe("AccessSecretStorageDialog", () => {
 
         expect(screen.getByPlaceholderText("Security Phrase")).toHaveFocus();
     });
+
+    it("Can reset secret storage", async () => {
+        jest.spyOn(mockClient.secretStorage, "checkKey").mockResolvedValue(true);
+
+        const onFinished = jest.fn();
+        const checkPrivateKey = jest.fn().mockResolvedValue(true);
+        renderComponent({ onFinished, checkPrivateKey });
+
+        await userEvent.click(screen.getByText("Reset all"), { delay: null });
+
+        // It will prompt the user to confirm resetting
+        expect(screen.getByText("Reset everything")).toBeInTheDocument();
+        await userEvent.click(screen.getByText("Reset"), { delay: null });
+
+        // Then it will prompt the user to create a key/passphrase
+        await screen.findByText("Set up Secure Backup");
+        document.execCommand = jest.fn().mockReturnValue(true);
+        jest.spyOn(mockClient.getCrypto()!, "createRecoveryKeyFromPassphrase").mockResolvedValue({
+            privateKey: new Uint8Array(),
+            encodedPrivateKey: securityKey,
+        });
+        screen.getByRole("button", { name: "Continue" }).click();
+
+        await screen.findByText(/Save your Security Key/);
+        screen.getByRole("button", { name: "Copy" }).click();
+        await screen.findByText("Copied!");
+        screen.getByRole("button", { name: "Continue" }).click();
+
+        await screen.findByText("Secure Backup successful");
+    });
 });

test/unit-tests/components/views/dialogs/LogoutDialog-test.tsx

@@ -10,7 +10,7 @@ import React from "react";
 import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { CryptoApi, KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
-import { render, RenderResult } from "jest-matrix-react";
+import { fireEvent, render, RenderResult, screen } from "jest-matrix-react";
 
 import { filterConsole, getMockClientWithEventEmitter, mockClientMethodsCrypto } from "../../../../test-utils";
 import LogoutDialog from "../../../../../src/components/views/dialogs/LogoutDialog";
@@ -22,7 +22,6 @@ describe("LogoutDialog", () => {
     beforeEach(() => {
         mockClient = getMockClientWithEventEmitter({
             ...mockClientMethodsCrypto(),
-            getKeyBackupVersion: jest.fn(),
         });
 
         mockCrypto = mocked(mockClient.getCrypto()!);
@@ -50,23 +49,26 @@ describe("LogoutDialog", () => {
     });
 
     it("Prompts user to connect backup if there is a backup on the server", async () => {
-        mockClient.getKeyBackupVersion.mockResolvedValue({} as KeyBackupInfo);
+        mockCrypto.getKeyBackupInfo.mockResolvedValue({} as KeyBackupInfo);
         const rendered = renderComponent();
         await rendered.findByText("Connect this session to Key Backup");
         expect(rendered.container).toMatchSnapshot();
     });
 
     it("Prompts user to set up backup if there is no backup on the server", async () => {
-        mockClient.getKeyBackupVersion.mockResolvedValue(null);
+        mockCrypto.getKeyBackupInfo.mockResolvedValue(null);
         const rendered = renderComponent();
         await rendered.findByText("Start using Key Backup");
         expect(rendered.container).toMatchSnapshot();
+
+        fireEvent.click(await screen.findByRole("button", { name: "Manually export keys" }));
+        await expect(screen.findByRole("heading", { name: "Export room keys" })).resolves.toBeInTheDocument();
     });
 
     describe("when there is an error fetching backups", () => {
         filterConsole("Unable to fetch key backup status");
         it("prompts user to set up backup", async () => {
-            mockClient.getKeyBackupVersion.mockImplementation(async () => {
+            mockCrypto.getKeyBackupInfo.mockImplementation(async () => {
                 throw new Error("beep");
             });
             const rendered = renderComponent();

test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx

@@ -239,7 +239,7 @@ describe("Spotlight Dialog", () => {
         });
 
         it("should call getVisibleRooms with MSC3946 dynamic room predecessors", async () => {
-            render(<SpotlightDialog onFinished={() => null} />, { legacyRoot: false });
+            render(<SpotlightDialog onFinished={() => null} />);
             jest.advanceTimersByTime(200);
             await flushPromisesWithFakeTimers();
             expect(mockedClient.getVisibleRooms).toHaveBeenCalledWith(true);

test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap

@@ -33,7 +33,6 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     >
       Room ID: !id
       <div
-        aria-describedby=":r2:"
         aria-label="Copy"
         class="mx_AccessibleButton mx_CopyableText_copyButton"
         role="button"

test/unit-tests/components/views/dialogs/security/CreateSecretStorageDialog-test.tsx

@@ -13,7 +13,7 @@ import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
 import { sleep } from "matrix-js-sdk/src/utils";
 
-import { filterConsole, stubClient } from "../../../../../test-utils";
+import { filterConsole, flushPromises, stubClient } from "../../../../../test-utils";
 import CreateSecretStorageDialog from "../../../../../../src/async-components/views/dialogs/security/CreateSecretStorageDialog";
 
 describe("CreateSecretStorageDialog", () => {
@@ -77,7 +77,7 @@ describe("CreateSecretStorageDialog", () => {
         filterConsole("Error fetching backup data from server");
 
         it("shows an error", async () => {
-            mockClient.getKeyBackupVersion.mockImplementation(async () => {
+            jest.spyOn(mockClient.getCrypto()!, "getKeyBackupInfo").mockImplementation(async () => {
                 throw new Error("bleh bleh");
             });
 
@@ -92,9 +92,44 @@ describe("CreateSecretStorageDialog", () => {
             expect(result.container).toMatchSnapshot();
 
             // Now we can get the backup and we retry
-            mockClient.getKeyBackupVersion.mockRestore();
+            jest.spyOn(mockClient.getCrypto()!, "getKeyBackupInfo").mockRestore();
             await userEvent.click(screen.getByRole("button", { name: "Retry" }));
             await screen.findByText("Your keys are now being backed up from this device.");
         });
     });
+
+    it("resets keys in the right order when resetting secret storage and cross-signing", async () => {
+        const result = renderComponent({ forceReset: true, resetCrossSigning: true });
+
+        await result.findByText(/Set up Secure Backup/);
+        jest.spyOn(mockClient.getCrypto()!, "createRecoveryKeyFromPassphrase").mockResolvedValue({
+            privateKey: new Uint8Array(),
+            encodedPrivateKey: "abcd efgh ijkl",
+        });
+        result.getByRole("button", { name: "Continue" }).click();
+
+        await result.findByText(/Save your Security Key/);
+        result.getByRole("button", { name: "Copy" }).click();
+
+        // Resetting should reset secret storage, cross signing, and key
+        // backup.  We make sure that all three are reset, and done in the
+        // right order.
+        const resetFunctionCallLog: string[] = [];
+        jest.spyOn(mockClient.getCrypto()!, "bootstrapSecretStorage").mockImplementation(async () => {
+            resetFunctionCallLog.push("bootstrapSecretStorage");
+        });
+        jest.spyOn(mockClient.getCrypto()!, "bootstrapCrossSigning").mockImplementation(async () => {
+            resetFunctionCallLog.push("bootstrapCrossSigning");
+        });
+        jest.spyOn(mockClient.getCrypto()!, "resetKeyBackup").mockImplementation(async () => {
+            resetFunctionCallLog.push("resetKeyBackup");
+        });
+
+        await flushPromises();
+        result.getByRole("button", { name: "Continue" }).click();
+
+        await result.findByText("Your keys are now being backed up from this device.");
+
+        expect(resetFunctionCallLog).toEqual(["bootstrapSecretStorage", "bootstrapCrossSigning", "resetKeyBackup"]);
+    });
 });

test/unit-tests/components/views/dialogs/security/ExportE2eKeysDialog-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { screen, fireEvent, render, waitFor } from "jest-matrix-react";
+import { screen, fireEvent, render, waitFor, act } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { Crypto, IMegolmSessionData } from "matrix-js-sdk/src/matrix";
 
@@ -23,12 +23,12 @@ describe("ExportE2eKeysDialog", () => {
         expect(asFragment()).toMatchSnapshot();
     });
 
-    it("should have disabled submit button initially", () => {
+    it("should have disabled submit button initially", async () => {
         const cli = createTestClient();
         const onFinished = jest.fn();
         const { container } = render(<ExportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
-        fireEvent.click(container.querySelector("[type=submit]")!);
-        expect(screen.getByText("Enter passphrase")).toBeInTheDocument();
+        await act(() => fireEvent.click(container.querySelector("[type=submit]")!));
+        expect(screen.getByLabelText("Enter passphrase")).toBeInTheDocument();
     });
 
     it("should complain about weak passphrases", async () => {
@@ -38,7 +38,7 @@ describe("ExportE2eKeysDialog", () => {
         const { container } = render(<ExportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
         const input = screen.getByLabelText("Enter passphrase");
         await userEvent.type(input, "password");
-        fireEvent.click(container.querySelector("[type=submit]")!);
+        await act(() => fireEvent.click(container.querySelector("[type=submit]")!));
         await expect(screen.findByText("This is a top-10 common password")).resolves.toBeInTheDocument();
     });
 
@@ -49,7 +49,7 @@ describe("ExportE2eKeysDialog", () => {
         const { container } = render(<ExportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
         await userEvent.type(screen.getByLabelText("Enter passphrase"), "ThisIsAMoreSecurePW123$$");
         await userEvent.type(screen.getByLabelText("Confirm passphrase"), "ThisIsAMoreSecurePW124$$");
-        fireEvent.click(container.querySelector("[type=submit]")!);
+        await act(() => fireEvent.click(container.querySelector("[type=submit]")!));
         await expect(screen.findByText("Passphrases must match")).resolves.toBeInTheDocument();
     });
 
@@ -74,7 +74,7 @@ describe("ExportE2eKeysDialog", () => {
         const { container } = render(<ExportE2eKeysDialog matrixClient={cli} onFinished={jest.fn()} />);
         await userEvent.type(screen.getByLabelText("Enter passphrase"), passphrase);
         await userEvent.type(screen.getByLabelText("Confirm passphrase"), passphrase);
-        fireEvent.click(container.querySelector("[type=submit]")!);
+        await act(() => fireEvent.click(container.querySelector("[type=submit]")!));
 
         // Then it exports keys and encrypts them
         await waitFor(() => expect(exportRoomKeysAsJson).toHaveBeenCalled());

test/unit-tests/components/views/dialogs/security/RestoreKeyBackupDialog-test.tsx

@@ -9,6 +9,8 @@
 import React from "react";
 import { screen, render, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
 // Needed to be able to mock decodeRecoveryKey
 // eslint-disable-next-line no-restricted-imports
 import * as recoveryKeyModule from "matrix-js-sdk/src/crypto-api/recovery-key";
@@ -17,9 +19,16 @@ import RestoreKeyBackupDialog from "../../../../../../src/components/views/dialo
 import { stubClient } from "../../../../../test-utils";
 
 describe("<RestoreKeyBackupDialog />", () => {
+    const keyBackupRestoreResult = {
+        total: 2,
+        imported: 1,
+    };
+
+    let matrixClient: MatrixClient;
     beforeEach(() => {
-        stubClient();
+        matrixClient = stubClient();
         jest.spyOn(recoveryKeyModule, "decodeRecoveryKey").mockReturnValue(new Uint8Array(32));
+        jest.spyOn(matrixClient.getCrypto()!, "getKeyBackupInfo").mockResolvedValue({ version: "1" } as KeyBackupInfo);
     });
 
     it("should render", async () => {
@@ -48,4 +57,71 @@ describe("<RestoreKeyBackupDialog />", () => {
         await waitFor(() => expect(screen.getByText("👍 This looks like a valid Security Key!")).toBeInTheDocument());
         expect(asFragment()).toMatchSnapshot();
     });
+
+    it("should restore key backup when the key is cached", async () => {
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackup").mockResolvedValue(keyBackupRestoreResult);
+
+        const { asFragment } = render(<RestoreKeyBackupDialog onFinished={jest.fn()} />);
+        await waitFor(() => expect(screen.getByText("Successfully restored 1 keys")).toBeInTheDocument());
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should restore key backup when the key is in secret storage", async () => {
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackup")
+            // Reject when trying to restore from cache
+            .mockRejectedValueOnce(new Error("key backup not found"))
+            // Resolve when trying to restore from secret storage
+            .mockResolvedValue(keyBackupRestoreResult);
+        jest.spyOn(matrixClient.secretStorage, "hasKey").mockResolvedValue(true);
+        jest.spyOn(matrixClient, "isKeyBackupKeyStored").mockResolvedValue({});
+
+        const { asFragment } = render(<RestoreKeyBackupDialog onFinished={jest.fn()} />);
+        await waitFor(() => expect(screen.getByText("Successfully restored 1 keys")).toBeInTheDocument());
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should restore key backup when security key is filled by user", async () => {
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackup")
+            // Reject when trying to restore from cache
+            .mockRejectedValueOnce(new Error("key backup not found"))
+            // Resolve when trying to restore from recovery key
+            .mockResolvedValue(keyBackupRestoreResult);
+
+        const { asFragment } = render(<RestoreKeyBackupDialog onFinished={jest.fn()} />);
+        await waitFor(() => expect(screen.getByText("Enter Security Key")).toBeInTheDocument());
+
+        await userEvent.type(screen.getByRole("textbox"), "my security key");
+        await userEvent.click(screen.getByRole("button", { name: "Next" }));
+
+        await waitFor(() => expect(screen.getByText("Successfully restored 1 keys")).toBeInTheDocument());
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    test("should restore key backup when passphrase is filled", async () => {
+        // Determine that the passphrase is required
+        jest.spyOn(matrixClient.getCrypto()!, "getKeyBackupInfo").mockResolvedValue({
+            version: "1",
+            auth_data: {
+                private_key_salt: "salt",
+                private_key_iterations: 1,
+            },
+        } as KeyBackupInfo);
+
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackup")
+            // Reject when trying to restore from cache
+            .mockRejectedValue(new Error("key backup not found"));
+
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackupWithPassphrase").mockResolvedValue(
+            keyBackupRestoreResult,
+        );
+
+        const { asFragment } = render(<RestoreKeyBackupDialog onFinished={jest.fn()} />);
+        await waitFor(() => expect(screen.getByText("Enter Security Phrase")).toBeInTheDocument());
+        // Not role for password https://github.com/w3c/aria/issues/935
+        await userEvent.type(screen.getByTestId("passphraseInput"), "my passphrase");
+        await userEvent.click(screen.getByRole("button", { name: "Next" }));
+
+        await waitFor(() => expect(screen.getByText("Successfully restored 1 keys")).toBeInTheDocument());
+        expect(asFragment()).toMatchSnapshot();
+    });
 });

test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap

@@ -296,3 +296,263 @@ exports[`<RestoreKeyBackupDialog /> should render 1`] = `
   />
 </DocumentFragment>
 `;
+
+exports[`<RestoreKeyBackupDialog /> should restore key backup when passphrase is filled 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Keys restored
+      </h1>
+    </div>
+    <div
+      class="mx_RestoreKeyBackupDialog_content"
+    >
+      <div>
+        <p>
+          Successfully restored 1 keys
+        </p>
+        <p>
+          Failed to decrypt 1 sessions!
+        </p>
+        <div
+          class="mx_Dialog_buttons"
+        >
+          <span
+            class="mx_Dialog_buttons_row"
+          >
+            <button
+              class="mx_Dialog_primary"
+              data-testid="dialog-primary-button"
+              type="button"
+            >
+              OK
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<RestoreKeyBackupDialog /> should restore key backup when security key is filled by user 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Keys restored
+      </h1>
+    </div>
+    <div
+      class="mx_RestoreKeyBackupDialog_content"
+    >
+      <div>
+        <p>
+          Successfully restored 1 keys
+        </p>
+        <p>
+          Failed to decrypt 1 sessions!
+        </p>
+        <div
+          class="mx_Dialog_buttons"
+        >
+          <span
+            class="mx_Dialog_buttons_row"
+          >
+            <button
+              class="mx_Dialog_primary"
+              data-testid="dialog-primary-button"
+              type="button"
+            >
+              OK
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is cached 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Keys restored
+      </h1>
+    </div>
+    <div
+      class="mx_RestoreKeyBackupDialog_content"
+    >
+      <div>
+        <p>
+          Successfully restored 1 keys
+        </p>
+        <p>
+          Failed to decrypt 1 sessions!
+        </p>
+        <div
+          class="mx_Dialog_buttons"
+        >
+          <span
+            class="mx_Dialog_buttons_row"
+          >
+            <button
+              class="mx_Dialog_primary"
+              data-testid="dialog-primary-button"
+              type="button"
+            >
+              OK
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is in secret storage 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Keys restored
+      </h1>
+    </div>
+    <div
+      class="mx_RestoreKeyBackupDialog_content"
+    >
+      <div>
+        <p>
+          Successfully restored 1 keys
+        </p>
+        <p>
+          Failed to decrypt 1 sessions!
+        </p>
+        <div
+          class="mx_Dialog_buttons"
+        >
+          <span
+            class="mx_Dialog_buttons_row"
+          >
+            <button
+              class="mx_Dialog_primary"
+              data-testid="dialog-primary-button"
+              type="button"
+            >
+              OK
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;

test/unit-tests/components/views/elements/AppTile-test.tsx

@@ -7,13 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { jest } from "@jest/globals";
 import { Room, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { ClientWidgetApi, IWidget, MatrixWidgetType } from "matrix-widget-api";
 import { Optional } from "matrix-events-sdk";
-import { act, render, RenderResult } from "jest-matrix-react";
+import { act, render, RenderResult, waitForElementToBeRemoved, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
-import { SpiedFunction } from "jest-mock";
 import {
     ApprovalOpts,
     WidgetInfo,
@@ -31,7 +29,6 @@ import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { RightPanelPhases } from "../../../../../src/stores/right-panel/RightPanelStorePhases";
 import RightPanelStore from "../../../../../src/stores/right-panel/RightPanelStore";
-import { UPDATE_EVENT } from "../../../../../src/stores/AsyncStore";
 import WidgetStore, { IApp } from "../../../../../src/stores/WidgetStore";
 import ActiveWidgetStore from "../../../../../src/stores/ActiveWidgetStore";
 import AppTile from "../../../../../src/components/views/elements/AppTile";
@@ -61,16 +58,6 @@ describe("AppTile", () => {
     let app1: IApp;
     let app2: IApp;
 
-    const waitForRps = (roomId: string) =>
-        new Promise<void>((resolve) => {
-            const update = () => {
-                if (RightPanelStore.instance.currentCardForRoom(roomId).phase !== RightPanelPhases.Widget) return;
-                RightPanelStore.instance.off(UPDATE_EVENT, update);
-                resolve();
-            };
-            RightPanelStore.instance.on(UPDATE_EVENT, update);
-        });
-
     beforeAll(async () => {
         stubClient();
         cli = MatrixClientPeg.safeGet();
@@ -162,29 +149,28 @@ describe("AppTile", () => {
                 />
             </MatrixClientContext.Provider>,
         );
-        // Wait for RPS room 1 updates to fire
-        const rpsUpdated = waitForRps("r1");
-        dis.dispatch({
-            action: Action.ViewRoom,
-            room_id: "r1",
-        });
-        await rpsUpdated;
+        act(() =>
+            dis.dispatch({
+                action: Action.ViewRoom,
+                room_id: "r1",
+            }),
+        );
 
-        expect(renderResult.getByText("Example 1")).toBeInTheDocument();
+        await expect(renderResult.findByText("Example 1")).resolves.toBeInTheDocument();
         expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(true);
 
-        const { container, asFragment } = renderResult;
-        expect(container.getElementsByClassName("mx_Spinner").length).toBeTruthy();
+        const { asFragment } = renderResult;
         expect(asFragment()).toMatchSnapshot();
-
         // We want to verify that as we change to room 2, we should close the
         // right panel and destroy the widget.
 
         // Switch to room 2
-        dis.dispatch({
-            action: Action.ViewRoom,
-            room_id: "r2",
-        });
+        act(() =>
+            dis.dispatch({
+                action: Action.ViewRoom,
+                room_id: "r2",
+            }),
+        );
 
         renderResult.rerender(
             <MatrixClientContext.Provider value={cli}>
@@ -235,16 +221,17 @@ describe("AppTile", () => {
                 />
             </MatrixClientContext.Provider>,
         );
-        // Wait for RPS room 1 updates to fire
-        const rpsUpdated1 = waitForRps("r1");
-        dis.dispatch({
-            action: Action.ViewRoom,
-            room_id: "r1",
-        });
-        await rpsUpdated1;
+        act(() =>
+            dis.dispatch({
+                action: Action.ViewRoom,
+                room_id: "r1",
+            }),
+        );
 
-        expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(true);
-        expect(ActiveWidgetStore.instance.isLive("1", "r2")).toBe(false);
+        await waitFor(() => {
+            expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(true);
+            expect(ActiveWidgetStore.instance.isLive("1", "r2")).toBe(false);
+        });
 
         jest.spyOn(SettingsStore, "getValue").mockImplementation((name, roomId) => {
             if (name === "RightPanel.phases") {
@@ -265,13 +252,13 @@ describe("AppTile", () => {
             }
             return realGetValue(name, roomId);
         });
-        // Wait for RPS room 2 updates to fire
-        const rpsUpdated2 = waitForRps("r2");
         // Switch to room 2
-        dis.dispatch({
-            action: Action.ViewRoom,
-            room_id: "r2",
-        });
+        act(() =>
+            dis.dispatch({
+                action: Action.ViewRoom,
+                room_id: "r2",
+            }),
+        );
         renderResult.rerender(
             <MatrixClientContext.Provider value={cli}>
                 <RightPanel
@@ -281,10 +268,11 @@ describe("AppTile", () => {
                 />
             </MatrixClientContext.Provider>,
         );
-        await rpsUpdated2;
 
-        expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(false);
-        expect(ActiveWidgetStore.instance.isLive("1", "r2")).toBe(true);
+        await waitFor(() => {
+            expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(false);
+            expect(ActiveWidgetStore.instance.isLive("1", "r2")).toBe(true);
+        });
     });
 
     it("preserves non-persisted widget on container move", async () => {
@@ -345,9 +333,9 @@ describe("AppTile", () => {
 
     describe("for a pinned widget", () => {
         let renderResult: RenderResult;
-        let moveToContainerSpy: SpiedFunction<typeof WidgetLayoutStore.instance.moveToContainer>;
+        let moveToContainerSpy: jest.SpyInstance<void, [room: Room, widget: IWidget, toContainer: Container]>;
 
-        beforeEach(() => {
+        beforeEach(async () => {
             renderResult = render(
                 <MatrixClientContext.Provider value={cli}>
                     <AppTile key={app1.id} app={app1} room={r1} />
@@ -355,12 +343,12 @@ describe("AppTile", () => {
             );
 
             moveToContainerSpy = jest.spyOn(WidgetLayoutStore.instance, "moveToContainer");
+            await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
         });
 
         it("should render", () => {
-            const { container, asFragment } = renderResult;
+            const { asFragment } = renderResult;
 
-            expect(container.querySelector(".mx_Spinner")).toBeFalsy(); // Assert that the spinner is gone
             expect(asFragment()).toMatchSnapshot(); // Take a snapshot of the pinned widget
         });
 
@@ -461,18 +449,19 @@ describe("AppTile", () => {
     describe("for a persistent app", () => {
         let renderResult: RenderResult;
 
-        beforeEach(() => {
+        beforeEach(async () => {
             renderResult = render(
                 <MatrixClientContext.Provider value={cli}>
                     <AppTile key={app1.id} app={app1} fullWidth={true} room={r1} miniMode={true} showMenubar={false} />
                 </MatrixClientContext.Provider>,
             );
+
+            await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
         });
 
-        it("should render", () => {
-            const { container, asFragment } = renderResult;
+        it("should render", async () => {
+            const { asFragment } = renderResult;
 
-            expect(container.querySelector(".mx_Spinner")).toBeFalsy();
             expect(asFragment()).toMatchSnapshot();
         });
     });

test/unit-tests/components/views/elements/MiniAvatarUploader-test.tsx

@@ -0,0 +1,40 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { render } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+import { mocked } from "jest-mock";
+
+import MiniAvatarUploader from "../../../../../src/components/views/elements/MiniAvatarUploader.tsx";
+import { stubClient, withClientContextRenderOptions } from "../../../../test-utils";
+
+const BASE64_GIF = "R0lGODlhAQABAAAAACw=";
+const AVATAR_FILE = new File([Uint8Array.from(atob(BASE64_GIF), (c) => c.charCodeAt(0))], "avatar.gif", {
+    type: "image/gif",
+});
+
+describe("<MiniAvatarUploader />", () => {
+    it("calls setAvatarUrl when a file is uploaded", async () => {
+        const cli = stubClient();
+        mocked(cli.uploadContent).mockResolvedValue({ content_uri: "mxc://example.com/1234" });
+
+        const setAvatarUrl = jest.fn();
+        const user = userEvent.setup();
+
+        const { container, findByText } = render(
+            <MiniAvatarUploader hasAvatar={false} noAvatarLabel="Upload" setAvatarUrl={setAvatarUrl} isUserAvatar />,
+            withClientContextRenderOptions(cli),
+        );
+
+        await findByText("Upload");
+        await user.upload(container.querySelector("input")!, AVATAR_FILE);
+
+        expect(cli.uploadContent).toHaveBeenCalledWith(AVATAR_FILE);
+        expect(setAvatarUrl).toHaveBeenCalledWith("mxc://example.com/1234");
+    });
+});

test/unit-tests/components/views/elements/Pill-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { act, render, RenderResult, screen } from "jest-matrix-react";
+import { render, RenderResult, screen } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { mocked, Mocked } from "jest-mock";
 import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
@@ -214,9 +214,7 @@ describe("<Pill>", () => {
         });
 
         // wait for profile query via API
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
 
         expect(renderResult.asFragment()).toMatchSnapshot();
     });
@@ -228,9 +226,7 @@ describe("<Pill>", () => {
         });
 
         // wait for profile query via API
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
 
         expect(renderResult.asFragment()).toMatchSnapshot();
     });

test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -60,29 +60,9 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
         id="1"
       >
         <div
-          class="mx_AppTileBody mx_AppTileBody--large"
+          class="mx_AppTile_persistedWrapper"
         >
-          <div
-            class="mx_AppTileBody_fadeInSpinner"
-          >
-            <div
-              class="mx_Spinner"
-            >
-              <div
-                class="mx_Spinner_Msg"
-              >
-                Loading…
-              </div>
-               
-              <div
-                aria-label="Loading…"
-                class="mx_Spinner_icon"
-                data-testid="spinner"
-                role="progressbar"
-                style="width: 32px; height: 32px;"
-              />
-            </div>
-          </div>
+          <div />
         </div>
       </div>
     </div>
@@ -356,8 +336,8 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
             <span>
               Using this widget may share data 
               <div
-                aria-describedby=":r2n:"
-                aria-labelledby=":r2m:"
+                aria-describedby=":r2j:"
+                aria-labelledby=":r2i:"
                 class="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
               >
                 <svg

test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap

@@ -21,7 +21,6 @@ exports[`<ImageView /> renders correctly 1`] = `
         class="mx_ImageView_toolbar"
       >
         <div
-          aria-describedby=":r2:"
           aria-label="Zoom out"
           class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomOut"
           role="button"

test/unit-tests/components/views/emojipicker/EmojiPicker-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { createRef } from "react";
-import { render, waitFor } from "jest-matrix-react";
+import { render, waitFor, act } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 
 import EmojiPicker from "../../../../../src/components/views/emojipicker/EmojiPicker";
@@ -27,12 +27,12 @@ describe("EmojiPicker", function () {
 
         // Apply a filter and assert that the HTML has changed
         //@ts-ignore private access
-        ref.current!.onChangeFilter("test");
+        act(() => ref.current!.onChangeFilter("test"));
         expect(beforeHtml).not.toEqual(container.innerHTML);
 
         // Clear the filter and assert that the HTML matches what it was before filtering
         //@ts-ignore private access
-        ref.current!.onChangeFilter("");
+        act(() => ref.current!.onChangeFilter(""));
         await waitFor(() => expect(beforeHtml).toEqual(container.innerHTML));
     });
 
@@ -40,7 +40,7 @@ describe("EmojiPicker", function () {
         const ep = new EmojiPicker({ onChoose: (str: string) => false, onFinished: jest.fn() });
 
         //@ts-ignore private access
-        ep.onChangeFilter("heart");
+        act(() => ep.onChangeFilter("heart"));
 
         //@ts-ignore private access
         expect(ep.memoizedDataByCategory["people"][0].shortcodes[0]).toEqual("heart");

test/unit-tests/components/views/location/LocationShareMenu-test.tsx

@@ -139,7 +139,7 @@ describe("<LocationShareMenu />", () => {
         const [, onGeolocateCallback] = mocked(mockGeolocate.on).mock.calls.find(([event]) => event === "geolocate")!;
 
         // set the location
-        onGeolocateCallback(position);
+        act(() => onGeolocateCallback(position));
     };
 
     const setLocationClick = () => {
@@ -151,7 +151,7 @@ describe("<LocationShareMenu />", () => {
             lngLat: { lng: position.coords.longitude, lat: position.coords.latitude },
         } as unknown as maplibregl.MapMouseEvent;
         // set the location
-        onMapClickCallback(event);
+        act(() => onMapClickCallback(event));
     };
 
     const shareTypeLabels: Record<LocationShareType, string> = {

test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap

@@ -13,9 +13,18 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
       <div
         class="mx_Marker_border"
       >
-        <div
+        <svg
           class="mx_Marker_icon"
-        />
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
+          />
+        </svg>
       </div>
     </div>
   </span>
@@ -23,7 +32,6 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
     class="mx_ZoomButtons"
   >
     <div
-      aria-describedby=":r2:"
       aria-label="Zoom in"
       class="mx_AccessibleButton mx_ZoomButtons_button"
       data-testid="map-zoom-in-button"

test/unit-tests/components/views/location/__snapshots__/Marker-test.tsx.snap

@@ -9,9 +9,18 @@ exports[`<Marker /> renders with location icon when no room member 1`] = `
     <div
       class="mx_Marker_border"
     >
-      <div
+      <svg
         class="mx_Marker_icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
+        />
+      </svg>
     </div>
   </div>
 </DocumentFragment>

test/unit-tests/components/views/location/__snapshots__/SmartMarker-test.tsx.snap

@@ -9,9 +9,18 @@ exports[`<SmartMarker /> creates a marker on mount 1`] = `
       <div
         class="mx_Marker_border"
       >
-        <div
+        <svg
           class="mx_Marker_icon"
-        />
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
+          />
+        </svg>
       </div>
     </div>
   </span>
@@ -27,9 +36,18 @@ exports[`<SmartMarker /> removes marker on unmount 1`] = `
       <div
         class="mx_Marker_border"
       >
-        <div
+        <svg
           class="mx_Marker_icon"
-        />
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
+          />
+        </svg>
       </div>
     </div>
   </span>

test/unit-tests/components/views/messages/DateSeparator-test.tsx

@@ -91,6 +91,12 @@ describe("DateSeparator", () => {
         expect(getComponent({ ts, forExport: false }).container.textContent).toEqual(result);
     });
 
+    it("renders invalid date separator correctly", () => {
+        const ts = new Date(-8640000000000004).getTime();
+        const { asFragment } = getComponent({ ts });
+        expect(asFragment()).toMatchSnapshot();
+    });
+
     describe("when forExport is true", () => {
         it.each(testCases)("formats date in full when current time is %s", (_d, ts) => {
             expect(getComponent({ ts, forExport: true }).container.textContent).toEqual(
@@ -258,10 +264,12 @@ describe("DateSeparator", () => {
             fireEvent.click(jumpToLastWeekButton);
 
             // Expect error to be shown. We have to wait for the UI to transition.
-            expect(await screen.findByTestId("jump-to-date-error-content")).toBeInTheDocument();
+            await expect(screen.findByTestId("jump-to-date-error-content")).resolves.toBeInTheDocument();
 
             // Expect an option to submit debug logs to be shown when a non-network error occurs
-            expect(await screen.findByTestId("jump-to-date-error-submit-debug-logs-button")).toBeInTheDocument();
+            await expect(
+                screen.findByTestId("jump-to-date-error-submit-debug-logs-button"),
+            ).resolves.toBeInTheDocument();
         });
 
         [
@@ -274,19 +282,20 @@ describe("DateSeparator", () => {
             ),
         ].forEach((fakeError) => {
             it(`should show error dialog without submit debug logs option when networking error (${fakeError.name}) occurs`, async () => {
+                // Try to jump to "last week" but we want a network error to occur
+                mockClient.timestampToEvent.mockRejectedValue(fakeError);
+
                 // Render the component
                 getComponent();
 
                 // Open the jump to date context menu
                 fireEvent.click(screen.getByTestId("jump-to-date-separator-button"));
 
-                // Try to jump to "last week" but we want a network error to occur
-                mockClient.timestampToEvent.mockRejectedValue(fakeError);
                 const jumpToLastWeekButton = await screen.findByTestId("jump-to-date-last-week");
                 fireEvent.click(jumpToLastWeekButton);
 
                 // Expect error to be shown. We have to wait for the UI to transition.
-                expect(await screen.findByTestId("jump-to-date-error-content")).toBeInTheDocument();
+                await expect(screen.findByTestId("jump-to-date-error-content")).resolves.toBeInTheDocument();
 
                 // The submit debug logs option should *NOT* be shown for network errors.
                 //

test/unit-tests/components/views/messages/EncryptionEvent-test.tsx

@@ -10,6 +10,7 @@ import React from "react";
 import { mocked } from "jest-mock";
 import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { render, screen } from "jest-matrix-react";
+import { waitFor } from "@testing-library/dom";
 
 import EncryptionEvent from "../../../../../src/components/views/messages/EncryptionEvent";
 import { createTestClient, mkMessage } from "../../../../test-utils";
@@ -26,9 +27,9 @@ const renderEncryptionEvent = (client: MatrixClient, event: MatrixEvent) => {
     );
 };
 
-const checkTexts = (title: string, subTitle: string) => {
-    screen.getByText(title);
-    screen.getByText(subTitle);
+const checkTexts = async (title: string, subTitle: string) => {
+    await screen.findByText(title);
+    await screen.findByText(subTitle);
 };
 
 describe("EncryptionEvent", () => {
@@ -55,17 +56,19 @@ describe("EncryptionEvent", () => {
     describe("for an encrypted room", () => {
         beforeEach(() => {
             event.event.content!.algorithm = algorithm;
-            mocked(client.isRoomEncrypted).mockReturnValue(true);
+            jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
             const room = new Room(roomId, client, client.getUserId()!);
             mocked(client.getRoom).mockReturnValue(room);
         });
 
-        it("should show the expected texts", () => {
+        it("should show the expected texts", async () => {
             renderEncryptionEvent(client, event);
-            checkTexts(
-                "Encryption enabled",
-                "Messages in this room are end-to-end encrypted. " +
-                    "When people join, you can verify them in their profile, just tap on their profile picture.",
+            await waitFor(() =>
+                checkTexts(
+                    "Encryption enabled",
+                    "Messages in this room are end-to-end encrypted. " +
+                        "When people join, you can verify them in their profile, just tap on their profile picture.",
+                ),
             );
         });
 
@@ -76,9 +79,9 @@ describe("EncryptionEvent", () => {
                 });
             });
 
-            it("should show the expected texts", () => {
+            it("should show the expected texts", async () => {
                 renderEncryptionEvent(client, event);
-                checkTexts("Encryption enabled", "Some encryption parameters have been changed.");
+                await waitFor(() => checkTexts("Encryption enabled", "Some encryption parameters have been changed."));
             });
         });
 
@@ -87,37 +90,39 @@ describe("EncryptionEvent", () => {
                 event.event.content!.algorithm = "unknown";
             });
 
-            it("should show the expected texts", () => {
+            it("should show the expected texts", async () => {
                 renderEncryptionEvent(client, event);
-                checkTexts("Encryption enabled", "Ignored attempt to disable encryption");
+                await waitFor(() => checkTexts("Encryption enabled", "Ignored attempt to disable encryption"));
             });
         });
     });
 
     describe("for an unencrypted room", () => {
         beforeEach(() => {
-            mocked(client.isRoomEncrypted).mockReturnValue(false);
+            jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
             renderEncryptionEvent(client, event);
         });
 
-        it("should show the expected texts", () => {
-            expect(client.isRoomEncrypted).toHaveBeenCalledWith(roomId);
-            checkTexts("Encryption not enabled", "The encryption used by this room isn't supported.");
+        it("should show the expected texts", async () => {
+            expect(client.getCrypto()!.isEncryptionEnabledInRoom).toHaveBeenCalledWith(roomId);
+            await waitFor(() =>
+                checkTexts("Encryption not enabled", "The encryption used by this room isn't supported."),
+            );
         });
     });
 
     describe("for an encrypted local room", () => {
         beforeEach(() => {
             event.event.content!.algorithm = algorithm;
-            mocked(client.isRoomEncrypted).mockReturnValue(true);
+            jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
             const localRoom = new LocalRoom(roomId, client, client.getUserId()!);
             mocked(client.getRoom).mockReturnValue(localRoom);
             renderEncryptionEvent(client, event);
         });
 
-        it("should show the expected texts", () => {
-            expect(client.isRoomEncrypted).toHaveBeenCalledWith(roomId);
-            checkTexts("Encryption enabled", "Messages in this chat will be end-to-end encrypted.");
+        it("should show the expected texts", async () => {
+            expect(client.getCrypto()!.isEncryptionEnabledInRoom).toHaveBeenCalledWith(roomId);
+            await checkTexts("Encryption enabled", "Messages in this chat will be end-to-end encrypted.");
         });
     });
 });

test/unit-tests/components/views/messages/MPollBody-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, RenderResult, waitFor } from "jest-matrix-react";
+import { act, fireEvent, render, RenderResult, waitForElementToBeRemoved, waitFor } from "jest-matrix-react";
 import {
     MatrixEvent,
     Relations,
@@ -226,7 +226,7 @@ describe("MPollBody", () => {
         clickOption(renderResult, "pizza");
 
         // When a new vote from me comes in
-        await room.processPollEvents([responseEvent("@me:example.com", "wings", 101)]);
+        await act(() => room.processPollEvents([responseEvent("@me:example.com", "wings", 101)]));
 
         // Then the new vote is counted, not the old one
         expect(votesCount(renderResult, "pizza")).toBe("0 votes");
@@ -255,7 +255,7 @@ describe("MPollBody", () => {
         clickOption(renderResult, "pizza");
 
         // When a new vote from someone else comes in
-        await room.processPollEvents([responseEvent("@xx:example.com", "wings", 101)]);
+        await act(() => room.processPollEvents([responseEvent("@xx:example.com", "wings", 101)]));
 
         // Then my vote is still for pizza
         // NOTE: the new event does not affect the counts for other people -
@@ -596,11 +596,13 @@ describe("MPollBody", () => {
         ];
         const renderResult = await newMPollBody(votes, ends);
 
-        expect(endedVotesCount(renderResult, "pizza")).toBe("2 votes");
-        expect(endedVotesCount(renderResult, "poutine")).toBe("0 votes");
-        expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
-        expect(endedVotesCount(renderResult, "wings")).toBe('<div class="mx_PollOption_winnerIcon"></div>3 votes');
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 5 votes");
+        await waitFor(() => {
+            expect(endedVotesCount(renderResult, "pizza")).toBe("2 votes");
+            expect(endedVotesCount(renderResult, "poutine")).toBe("0 votes");
+            expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
+            expect(endedVotesCount(renderResult, "wings")).toBe('<div class="mx_PollOption_winnerIcon"></div>3 votes');
+            expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 5 votes");
+        });
     });
 
     it("ignores votes that arrived after the first end poll event", async () => {
@@ -890,12 +892,14 @@ async function newMPollBody(
         room_id: "#myroom:example.com",
         content: newPollStart(answers, undefined, disclosed),
     });
-    const result = newMPollBodyFromEvent(mxEvent, relationEvents, endEvents);
-    // flush promises from loading relations
+    const prom = newMPollBodyFromEvent(mxEvent, relationEvents, endEvents);
     if (waitForResponsesLoad) {
-        await flushPromises();
+        const result = await prom;
+        if (result.queryByTestId("spinner")) {
+            await waitForElementToBeRemoved(() => result.getByTestId("spinner"));
+        }
     }
-    return result;
+    return prom;
 }
 
 function getMPollBodyPropsFromEvent(mxEvent: MatrixEvent): IBodyProps {

test/unit-tests/components/views/messages/MPollEndBody-test.tsx

@@ -121,12 +121,13 @@ describe("<MPollEndBody />", () => {
     describe("when poll start event does not exist in current timeline", () => {
         it("fetches the related poll start event and displays a poll tile", async () => {
             await setupRoomWithEventsTimeline(pollEndEvent);
-            const { container, getByTestId, getByRole } = getComponent();
+            const { container, getByTestId, getByRole, queryByRole } = getComponent();
 
             // while fetching event, only icon is shown
             expect(container).toMatchSnapshot();
 
             await waitFor(() => expect(getByRole("progressbar")).toBeInTheDocument());
+            await waitFor(() => expect(queryByRole("progressbar")).not.toBeInTheDocument());
 
             expect(mockClient.fetchRoomEvent).toHaveBeenCalledWith(roomId, pollStartEvent.getId());
 

test/unit-tests/components/views/messages/MessageEvent-test.tsx

@@ -33,6 +33,16 @@ jest.mock("../../../../../src/components/views/messages/MImageBody", () => ({
     default: () => <div data-testid="image-body" />,
 }));
 
+jest.mock("../../../../../src/components/views/messages/MVideoBody", () => ({
+    __esModule: true,
+    default: () => <div data-testid="video-body" />,
+}));
+
+jest.mock("../../../../../src/components/views/messages/MFileBody", () => ({
+    __esModule: true,
+    default: () => <div data-testid="file-body" />,
+}));
+
 jest.mock("../../../../../src/components/views/messages/MImageReplyBody", () => ({
     __esModule: true,
     default: () => <div data-testid="image-reply-body" />,
@@ -95,8 +105,8 @@ describe("MessageEvent", () => {
     describe("when an image with a caption is sent", () => {
         let result: RenderResult;
 
-        beforeEach(() => {
-            event = mkEvent({
+        function createEvent(mimetype: string, filename: string, msgtype: string) {
+            return mkEvent({
                 event: true,
                 type: EventType.RoomMessage,
                 user: client.getUserId()!,
@@ -105,19 +115,19 @@ describe("MessageEvent", () => {
                     body: "caption for a test image",
                     format: "org.matrix.custom.html",
                     formatted_body: "<strong>caption for a test image</strong>",
-                    msgtype: MsgType.Image,
-                    filename: "image.webp",
+                    msgtype: msgtype,
+                    filename: filename,
                     info: {
                         w: 40,
                         h: 50,
+                        mimetype: mimetype,
                     },
                     url: "mxc://server/image",
                 },
             });
-            result = renderMessageEvent();
-        });
+        }
 
-        it("should render a TextualBody and an ImageBody", () => {
+        function mockMedia() {
             fetchMock.getOnce(
                 "https://server/_matrix/media/v3/download/server/image",
                 {
@@ -125,8 +135,38 @@ describe("MessageEvent", () => {
                 },
                 { sendAsJson: false },
             );
+        }
+
+        it("should render a TextualBody and an ImageBody", () => {
+            event = createEvent("image/webp", "image.webp", MsgType.Image);
+            result = renderMessageEvent();
+            mockMedia();
             result.getByTestId("image-body");
             result.getByTestId("textual-body");
         });
+
+        it("should render a TextualBody and a FileBody for mismatched extension", () => {
+            event = createEvent("image/webp", "image.exe", MsgType.Image);
+            result = renderMessageEvent();
+            mockMedia();
+            result.getByTestId("file-body");
+            result.getByTestId("textual-body");
+        });
+
+        it("should render a TextualBody and an VideoBody", () => {
+            event = createEvent("video/mp4", "video.mp4", MsgType.Video);
+            result = renderMessageEvent();
+            mockMedia();
+            result.getByTestId("video-body");
+            result.getByTestId("textual-body");
+        });
+
+        it("should render a TextualBody and a FileBody for non-video mimetype", () => {
+            event = createEvent("application/octet-stream", "video.mp4", MsgType.Video);
+            result = renderMessageEvent();
+            mockMedia();
+            result.getByTestId("file-body");
+            result.getByTestId("textual-body");
+        });
     });
 });

test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap

@@ -1,5 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DateSeparator renders invalid date separator correctly 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Invalid timestamp"
+    class="mx_TimelineSeparator"
+    role="separator"
+  >
+    <hr
+      role="none"
+    />
+    <div
+      class="mx_DateSeparator_dateContent"
+    >
+      <h2
+        aria-hidden="true"
+        class="mx_DateSeparator_dateHeading"
+      >
+        Invalid timestamp
+      </h2>
+    </div>
+    <hr
+      role="none"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`DateSeparator renders the date separator correctly 1`] = `
 <DocumentFragment>
   <div

test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap

@@ -49,9 +49,18 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
             <div
               class="mx_Marker_border"
             >
-              <div
+              <svg
                 class="mx_Marker_icon"
-              />
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
+                />
+              </svg>
             </div>
           </div>
         </span>

test/unit-tests/components/views/polls/pollHistory/PollHistory-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { act, fireEvent, render } from "jest-matrix-react";
+import { fireEvent, render } from "jest-matrix-react";
 import { Filter, EventTimeline, Room, MatrixEvent, M_POLL_START } from "matrix-js-sdk/src/matrix";
 
 import { PollHistory } from "../../../../../../src/components/views/polls/pollHistory/PollHistory";
@@ -110,7 +110,7 @@ describe("<PollHistory />", () => {
         expect(getByText("Loading polls")).toBeInTheDocument();
 
         // flush filter creation request
-        await act(flushPromises);
+        await flushPromises();
 
         expect(liveTimeline.getPaginationToken).toHaveBeenCalledWith(EventTimeline.BACKWARDS);
         expect(mockClient.paginateEventTimeline).toHaveBeenCalledWith(liveTimeline, { backwards: true });
@@ -140,7 +140,7 @@ describe("<PollHistory />", () => {
         );
 
         // flush filter creation request
-        await act(flushPromises);
+        await flushPromises();
         // once per page
         expect(mockClient.paginateEventTimeline).toHaveBeenCalledTimes(3);
 
@@ -175,7 +175,7 @@ describe("<PollHistory />", () => {
 
     it("renders a no polls message when there are no active polls in the room", async () => {
         const { getByText } = getComponent();
-        await act(flushPromises);
+        await flushPromises();
 
         expect(getByText("There are no active polls in this room")).toBeTruthy();
     });
@@ -199,7 +199,7 @@ describe("<PollHistory />", () => {
             .mockReturnValueOnce("test-pagination-token-3");
 
         const { getByText } = getComponent();
-        await act(flushPromises);
+        await flushPromises();
 
         expect(mockClient.paginateEventTimeline).toHaveBeenCalledTimes(1);
 
@@ -212,7 +212,7 @@ describe("<PollHistory />", () => {
         // load more polls button still in UI, with loader
         expect(getByText("Load more polls")).toMatchSnapshot();
 
-        await act(flushPromises);
+        await flushPromises();
 
         // no more spinner
         expect(getByText("Load more polls")).toMatchSnapshot();

test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap

@@ -91,7 +91,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
             tabindex="0"
           >
             <div
-              aria-labelledby=":ra:"
+              aria-labelledby=":rc:"
               class="mx_PollListItem_content"
             >
               <span>
@@ -116,7 +116,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
             tabindex="0"
           >
             <div
-              aria-labelledby=":rg:"
+              aria-labelledby=":rh:"
               class="mx_PollListItem_content"
             >
               <span>

test/unit-tests/components/views/right_panel/RoomSummaryCard-test.tsx

@@ -23,7 +23,7 @@ import * as settingsHooks from "../../../../../src/hooks/useSettings";
 import Modal from "../../../../../src/Modal";
 import RightPanelStore from "../../../../../src/stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../../../../src/stores/right-panel/RightPanelStorePhases";
-import { flushPromises, getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../test-utils";
+import { flushPromises, stubClient } from "../../../../test-utils";
 import { PollHistoryDialog } from "../../../../../src/components/views/dialogs/PollHistoryDialog";
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import { _t } from "../../../../../src/languageHandler";
@@ -56,16 +56,7 @@ describe("<RoomSummaryCard />", () => {
     };
 
     beforeEach(() => {
-        mockClient = getMockClientWithEventEmitter({
-            ...mockClientMethodsUser(userId),
-            getAccountData: jest.fn(),
-            isRoomEncrypted: jest.fn(),
-            getOrCreateFilter: jest.fn().mockResolvedValue({ filterId: 1 }),
-            getRoom: jest.fn(),
-            isGuest: jest.fn().mockReturnValue(false),
-            deleteRoomTag: jest.fn().mockResolvedValue({}),
-            setRoomTag: jest.fn().mockResolvedValue({}),
-        });
+        mockClient = mocked(stubClient());
         room = new Room(roomId, mockClient, userId);
         const roomCreateEvent = new MatrixEvent({
             type: "m.room.create",

test/unit-tests/components/views/right_panel/UserInfo-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, screen, waitFor, cleanup, act, within } from "jest-matrix-react";
+import { fireEvent, render, screen, cleanup, act, within, waitForElementToBeRemoved } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { Mocked, mocked } from "jest-mock";
 import { Room, User, MatrixClient, RoomMember, MatrixEvent, EventType, Device } from "matrix-js-sdk/src/matrix";
@@ -134,6 +134,7 @@ beforeEach(() => {
         getUserDeviceInfo: jest.fn(),
         userHasCrossSigningKeys: jest.fn().mockResolvedValue(false),
         getUserVerificationStatus: jest.fn(),
+        isEncryptionEnabledInRoom: jest.fn().mockResolvedValue(false),
     } as unknown as CryptoApi);
 
     mockClient = mocked({
@@ -148,7 +149,6 @@ beforeEach(() => {
         on: jest.fn(),
         off: jest.fn(),
         isSynapseAdministrator: jest.fn().mockResolvedValue(false),
-        isRoomEncrypted: jest.fn().mockReturnValue(false),
         doesServerSupportUnstableFeature: jest.fn().mockReturnValue(false),
         doesServerSupportExtendedProfiles: jest.fn().mockResolvedValue(false),
         getExtendedProfileProperty: jest.fn().mockRejectedValue(new Error("Not supported")),
@@ -439,7 +439,7 @@ describe("<UserInfo />", () => {
 
         it("renders a device list which can be expanded", async () => {
             renderComponent();
-            await act(flushPromises);
+            await flushPromises();
 
             // check the button exists with the expected text
             const devicesButton = screen.getByRole("button", { name: "1 session" });
@@ -459,9 +459,9 @@ describe("<UserInfo />", () => {
                 verificationRequest,
                 room: mockRoom,
             });
-            await act(flushPromises);
+            await flushPromises();
 
-            await waitFor(() => expect(screen.getByRole("button", { name: "Verify" })).toBeInTheDocument());
+            await expect(screen.findByRole("button", { name: "Verify" })).resolves.toBeInTheDocument();
             expect(container).toMatchSnapshot();
         });
 
@@ -490,7 +490,7 @@ describe("<UserInfo />", () => {
                 mockCrypto.getUserDeviceInfo.mockResolvedValue(userDeviceMap);
 
                 renderComponent({ room: mockRoom });
-                await act(flushPromises);
+                await flushPromises();
 
                 // check the button exists with the expected text (the dehydrated device shouldn't be counted)
                 const devicesButton = screen.getByRole("button", { name: "1 session" });
@@ -538,7 +538,7 @@ describe("<UserInfo />", () => {
                 } as DeviceVerificationStatus);
 
                 renderComponent({ room: mockRoom });
-                await act(flushPromises);
+                await flushPromises();
 
                 // check the button exists with the expected text (the dehydrated device shouldn't be counted)
                 const devicesButton = screen.getByRole("button", { name: "1 verified session" });
@@ -583,7 +583,7 @@ describe("<UserInfo />", () => {
                 mockCrypto.getUserVerificationStatus.mockResolvedValue(new UserVerificationStatus(true, true, true));
 
                 renderComponent({ room: mockRoom });
-                await act(flushPromises);
+                await flushPromises();
 
                 // the dehydrated device should be shown as an unverified device, which means
                 // there should now be a button with the device id ...
@@ -618,7 +618,7 @@ describe("<UserInfo />", () => {
                 mockCrypto.getUserDeviceInfo.mockResolvedValue(userDeviceMap);
 
                 renderComponent({ room: mockRoom });
-                await act(flushPromises);
+                await flushPromises();
 
                 // check the button exists with the expected text (the dehydrated device shouldn't be counted)
                 const devicesButton = screen.getByRole("button", { name: "2 sessions" });
@@ -653,20 +653,23 @@ describe("<UserInfo />", () => {
                 room: mockRoom,
             });
 
-            await waitFor(() => expect(screen.getByRole("button", { name: "Deactivate user" })).toBeInTheDocument());
+            await expect(screen.findByRole("button", { name: "Deactivate user" })).resolves.toBeInTheDocument();
+            if (screen.queryAllByRole("progressbar").length) {
+                await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar"));
+            }
             expect(container).toMatchSnapshot();
         });
     });
 
     describe("with an encrypted room", () => {
         beforeEach(() => {
-            mockClient.isRoomEncrypted.mockReturnValue(true);
+            jest.spyOn(mockClient.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
         });
 
         it("renders unverified user info", async () => {
             mockCrypto.getUserVerificationStatus.mockResolvedValue(new UserVerificationStatus(false, false, false));
             renderComponent({ room: mockRoom });
-            await act(flushPromises);
+            await flushPromises();
 
             const userHeading = screen.getByRole("heading", { name: /@user:example.com/ });
 
@@ -677,7 +680,7 @@ describe("<UserInfo />", () => {
         it("renders verified user info", async () => {
             mockCrypto.getUserVerificationStatus.mockResolvedValue(new UserVerificationStatus(true, false, false));
             renderComponent({ room: mockRoom });
-            await act(flushPromises);
+            await flushPromises();
 
             const userHeading = screen.getByRole("heading", { name: /@user:example.com/ });
 
@@ -768,7 +771,7 @@ describe("<DeviceItem />", () => {
 
     it("with unverified user and device, displays button without a label", async () => {
         renderComponent();
-        await act(flushPromises);
+        await flushPromises();
 
         expect(screen.getByRole("button", { name: device.displayName! })).toBeInTheDocument();
         expect(screen.queryByText(/trusted/i)).not.toBeInTheDocument();
@@ -776,7 +779,7 @@ describe("<DeviceItem />", () => {
 
     it("with verified user only, displays button with a 'Not trusted' label", async () => {
         renderComponent({ isUserVerified: true });
-        await act(flushPromises);
+        await flushPromises();
 
         const button = screen.getByRole("button", { name: device.displayName });
         expect(button).toHaveTextContent(`${device.displayName}Not trusted`);
@@ -785,7 +788,7 @@ describe("<DeviceItem />", () => {
     it("with verified device only, displays no button without a label", async () => {
         setMockDeviceTrust(true);
         renderComponent();
-        await act(flushPromises);
+        await flushPromises();
 
         expect(screen.getByText(device.displayName!)).toBeInTheDocument();
         expect(screen.queryByText(/trusted/)).not.toBeInTheDocument();
@@ -798,7 +801,7 @@ describe("<DeviceItem />", () => {
         mockClient.getSafeUserId.mockReturnValueOnce(defaultUserId);
         mockClient.getUserId.mockReturnValueOnce(defaultUserId);
         renderComponent();
-        await act(flushPromises);
+        await flushPromises();
 
         // set trust to be false for isVerified, true for isCrossSigningVerified
         deferred.resolve({
@@ -814,7 +817,7 @@ describe("<DeviceItem />", () => {
     it("with verified user and device, displays no button and a 'Trusted' label", async () => {
         setMockDeviceTrust(true);
         renderComponent({ isUserVerified: true });
-        await act(flushPromises);
+        await flushPromises();
 
         expect(screen.queryByRole("button")).not.toBeInTheDocument();
         expect(screen.getByText(device.displayName!)).toBeInTheDocument();
@@ -824,7 +827,7 @@ describe("<DeviceItem />", () => {
     it("does not call verifyDevice if client.getUser returns null", async () => {
         mockClient.getUser.mockReturnValueOnce(null);
         renderComponent();
-        await act(flushPromises);
+        await flushPromises();
 
         const button = screen.getByRole("button", { name: device.displayName! });
         expect(button).toBeInTheDocument();
@@ -839,7 +842,7 @@ describe("<DeviceItem />", () => {
         // even more mocking
         mockClient.isGuest.mockReturnValueOnce(true);
         renderComponent();
-        await act(flushPromises);
+        await flushPromises();
 
         const button = screen.getByRole("button", { name: device.displayName! });
         expect(button).toBeInTheDocument();
@@ -851,7 +854,7 @@ describe("<DeviceItem />", () => {
 
     it("with display name", async () => {
         const { container } = renderComponent();
-        await act(flushPromises);
+        await flushPromises();
 
         expect(container).toMatchSnapshot();
     });
@@ -859,7 +862,7 @@ describe("<DeviceItem />", () => {
     it("without display name", async () => {
         const device = { deviceId: "deviceId" } as Device;
         const { container } = renderComponent({ device, userId: defaultUserId });
-        await act(flushPromises);
+        await flushPromises();
 
         expect(container).toMatchSnapshot();
     });
@@ -867,7 +870,7 @@ describe("<DeviceItem />", () => {
     it("ambiguous display name", async () => {
         const device = { deviceId: "deviceId", ambiguous: true, displayName: "my display name" };
         const { container } = renderComponent({ device, userId: defaultUserId });
-        await act(flushPromises);
+        await flushPromises();
 
         expect(container).toMatchSnapshot();
     });
@@ -1033,9 +1036,7 @@ describe("<UserOptionsSection />", () => {
         expect(inviteSpy).toHaveBeenCalledWith([member.userId]);
 
         // check that the test error message is displayed
-        await waitFor(() => {
-            expect(screen.getByText(mockErrorMessage.message)).toBeInTheDocument();
-        });
+        await expect(screen.findByText(mockErrorMessage.message)).resolves.toBeInTheDocument();
     });
 
     it("if calling .invite throws something strange, show default error message", async () => {
@@ -1048,9 +1049,7 @@ describe("<UserOptionsSection />", () => {
         await userEvent.click(inviteButton);
 
         // check that the default test error message is displayed
-        await waitFor(() => {
-            expect(screen.getByText(/operation failed/i)).toBeInTheDocument();
-        });
+        await expect(screen.findByText(/operation failed/i)).resolves.toBeInTheDocument();
     });
 
     it.each([

test/unit-tests/components/views/room_settings/UrlPreviewSettings-test.tsx

@@ -0,0 +1,90 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
+import { render, screen } from "jest-matrix-react";
+import { waitFor } from "@testing-library/dom";
+
+import { createTestClient, mkStubRoom, withClientContextRenderOptions } from "../../../../test-utils";
+import { UrlPreviewSettings } from "../../../../../src/components/views/room_settings/UrlPreviewSettings.tsx";
+import SettingsStore from "../../../../../src/settings/SettingsStore.ts";
+import dis from "../../../../../src/dispatcher/dispatcher.ts";
+import { Action } from "../../../../../src/dispatcher/actions.ts";
+
+describe("UrlPreviewSettings", () => {
+    let client: MatrixClient;
+    let room: Room;
+
+    beforeEach(() => {
+        client = createTestClient();
+        room = mkStubRoom("roomId", "room", client);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    function renderComponent() {
+        return render(<UrlPreviewSettings room={room} />, withClientContextRenderOptions(client));
+    }
+
+    it("should display the correct preview when the setting is in a loading state", () => {
+        jest.spyOn(client, "getCrypto").mockReturnValue(undefined);
+        const { asFragment } = renderComponent();
+        expect(screen.getByText("URL Previews")).toBeInTheDocument();
+
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should display the correct preview when the room is encrypted and the url preview is enabled", async () => {
+        jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
+        jest.spyOn(SettingsStore, "getValueAt").mockReturnValue(true);
+
+        const { asFragment } = renderComponent();
+        await waitFor(() => {
+            expect(
+                screen.getByText(
+                    "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.",
+                ),
+            ).toBeInTheDocument();
+        });
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should display the correct preview when the room is unencrypted and the url preview is enabled", async () => {
+        jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
+        jest.spyOn(SettingsStore, "getValueAt").mockReturnValue(true);
+        jest.spyOn(dis, "fire").mockReturnValue(undefined);
+
+        const { asFragment } = renderComponent();
+        await waitFor(() => {
+            expect(screen.getByRole("button", { name: "enabled" })).toBeInTheDocument();
+            expect(
+                screen.getByText("URL previews are enabled by default for participants in this room."),
+            ).toBeInTheDocument();
+        });
+        expect(asFragment()).toMatchSnapshot();
+
+        screen.getByRole("button", { name: "enabled" }).click();
+        expect(dis.fire).toHaveBeenCalledWith(Action.ViewUserSettings);
+    });
+
+    it("should display the correct preview when the room is unencrypted and the url preview is disabled", async () => {
+        jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
+        jest.spyOn(SettingsStore, "getValueAt").mockReturnValue(false);
+
+        const { asFragment } = renderComponent();
+        await waitFor(() => {
+            expect(screen.getByRole("button", { name: "disabled" })).toBeInTheDocument();
+            expect(
+                screen.getByText("URL previews are disabled by default for participants in this room."),
+            ).toBeInTheDocument();
+        });
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap

@@ -0,0 +1,236 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UrlPreviewSettings should display the correct preview when the room is encrypted and the url preview is enabled 1`] = `
+<DocumentFragment>
+  <fieldset
+    class="mx_SettingsFieldset"
+  >
+    <legend
+      class="mx_SettingsFieldset_legend"
+    >
+      URL Previews
+    </legend>
+    <div
+      class="mx_SettingsFieldset_description"
+    >
+      <div
+        class="mx_SettingsSubsection_text"
+      >
+        <p>
+          When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
+        </p>
+        <p>
+          In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.
+        </p>
+      </div>
+    </div>
+    <div
+      class="mx_SettingsFieldset_content"
+    >
+      <div
+        class="mx_SettingsFlag"
+      >
+        <label
+          class="mx_SettingsFlag_label"
+          for="mx_SettingsFlag_vY7Q4uEh9K38"
+        >
+          <span
+            class="mx_SettingsFlag_labelText"
+          />
+        </label>
+        <div
+          aria-checked="true"
+          aria-disabled="false"
+          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+          id="mx_SettingsFlag_vY7Q4uEh9K38"
+          role="switch"
+          tabindex="0"
+        >
+          <div
+            class="mx_ToggleSwitch_ball"
+          />
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</DocumentFragment>
+`;
+
+exports[`UrlPreviewSettings should display the correct preview when the room is unencrypted and the url preview is disabled 1`] = `
+<DocumentFragment>
+  <fieldset
+    class="mx_SettingsFieldset"
+  >
+    <legend
+      class="mx_SettingsFieldset_legend"
+    >
+      URL Previews
+    </legend>
+    <div
+      class="mx_SettingsFieldset_description"
+    >
+      <div
+        class="mx_SettingsSubsection_text"
+      >
+        <p>
+          When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
+        </p>
+        <p>
+          <span>
+            You have 
+          </span>
+        </p>
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+          role="button"
+          tabindex="0"
+        >
+          disabled
+        </div>
+         URL previews by default.
+        <p />
+      </div>
+    </div>
+    <div
+      class="mx_SettingsFieldset_content"
+    >
+      <div>
+        URL previews are disabled by default for participants in this room.
+      </div>
+      <div
+        class="mx_SettingsFlag"
+      >
+        <label
+          class="mx_SettingsFlag_label"
+          for="mx_SettingsFlag_vY7Q4uEh9K38"
+        >
+          <span
+            class="mx_SettingsFlag_labelText"
+          >
+            Enable inline URL previews by default
+          </span>
+        </label>
+        <div
+          aria-checked="false"
+          aria-disabled="true"
+          aria-label="Enable inline URL previews by default"
+          class="mx_AccessibleButton mx_ToggleSwitch"
+          id="mx_SettingsFlag_vY7Q4uEh9K38"
+          role="switch"
+          tabindex="0"
+        >
+          <div
+            class="mx_ToggleSwitch_ball"
+          />
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</DocumentFragment>
+`;
+
+exports[`UrlPreviewSettings should display the correct preview when the room is unencrypted and the url preview is enabled 1`] = `
+<DocumentFragment>
+  <fieldset
+    class="mx_SettingsFieldset"
+  >
+    <legend
+      class="mx_SettingsFieldset_legend"
+    >
+      URL Previews
+    </legend>
+    <div
+      class="mx_SettingsFieldset_description"
+    >
+      <div
+        class="mx_SettingsSubsection_text"
+      >
+        <p>
+          When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
+        </p>
+        <p>
+          <span>
+            You have 
+          </span>
+        </p>
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+          role="button"
+          tabindex="0"
+        >
+          enabled
+        </div>
+         URL previews by default.
+        <p />
+      </div>
+    </div>
+    <div
+      class="mx_SettingsFieldset_content"
+    >
+      <div>
+        URL previews are enabled by default for participants in this room.
+      </div>
+      <div
+        class="mx_SettingsFlag"
+      >
+        <label
+          class="mx_SettingsFlag_label"
+          for="mx_SettingsFlag_vY7Q4uEh9K38"
+        >
+          <span
+            class="mx_SettingsFlag_labelText"
+          >
+            Enable inline URL previews by default
+          </span>
+        </label>
+        <div
+          aria-checked="true"
+          aria-disabled="false"
+          aria-label="Enable inline URL previews by default"
+          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+          id="mx_SettingsFlag_vY7Q4uEh9K38"
+          role="switch"
+          tabindex="0"
+        >
+          <div
+            class="mx_ToggleSwitch_ball"
+          />
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</DocumentFragment>
+`;
+
+exports[`UrlPreviewSettings should display the correct preview when the setting is in a loading state 1`] = `
+<DocumentFragment>
+  <fieldset
+    class="mx_SettingsFieldset"
+  >
+    <legend
+      class="mx_SettingsFieldset_legend"
+    >
+      URL Previews
+    </legend>
+    <div
+      class="mx_SettingsFieldset_content"
+    >
+      <svg
+        class="_icon_1ye7b_27"
+        fill="currentColor"
+        height="1em"
+        style="width: 20px; height: 20px;"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2Z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+  </fieldset>
+</DocumentFragment>
+`;

test/unit-tests/components/views/rooms/EventTile-test.tsx

@@ -260,7 +260,7 @@ describe("EventTile", () => {
             } as EventEncryptionInfo);
 
             const { container } = getComponent();
-            await act(flushPromises);
+            await flushPromises();
 
             const eventTiles = container.getElementsByClassName("mx_EventTile");
             expect(eventTiles).toHaveLength(1);
@@ -285,7 +285,7 @@ describe("EventTile", () => {
             } as EventEncryptionInfo);
 
             const { container } = getComponent();
-            await act(flushPromises);
+            await flushPromises();
 
             const eventTiles = container.getElementsByClassName("mx_EventTile");
             expect(eventTiles).toHaveLength(1);
@@ -301,6 +301,8 @@ describe("EventTile", () => {
             [EventShieldReason.UNKNOWN_DEVICE, "unknown or deleted device"],
             [EventShieldReason.AUTHENTICITY_NOT_GUARANTEED, "can't be guaranteed"],
             [EventShieldReason.MISMATCHED_SENDER_KEY, "Encrypted by an unverified session"],
+            [EventShieldReason.SENT_IN_CLEAR, "Not encrypted"],
+            [EventShieldReason.VERIFICATION_VIOLATION, "Sender's verified identity has changed"],
         ])("shows the correct reason code for %i (%s)", async (reasonCode: EventShieldReason, expectedText: string) => {
             mxEvent = await mkEncryptedMatrixEvent({
                 plainContent: { msgtype: "m.text", body: "msg1" },
@@ -314,7 +316,7 @@ describe("EventTile", () => {
             } as EventEncryptionInfo);
 
             const { container } = getComponent();
-            await act(flushPromises);
+            await flushPromises();
 
             const e2eIcons = container.getElementsByClassName("mx_EventTile_e2eIcon");
             expect(e2eIcons).toHaveLength(1);
@@ -346,7 +348,7 @@ describe("EventTile", () => {
                 await mxEvent.attemptDecryption(mockCrypto);
 
                 const { container } = getComponent();
-                await act(flushPromises);
+                await flushPromises();
 
                 const eventTiles = container.getElementsByClassName("mx_EventTile");
                 expect(eventTiles).toHaveLength(1);
@@ -400,7 +402,7 @@ describe("EventTile", () => {
             const roomContext = getRoomContext(room, {});
             const { container, rerender } = render(<WrappedEventTile roomContext={roomContext} />);
 
-            await act(flushPromises);
+            await flushPromises();
 
             const eventTiles = container.getElementsByClassName("mx_EventTile");
             expect(eventTiles).toHaveLength(1);
@@ -451,7 +453,7 @@ describe("EventTile", () => {
 
             const roomContext = getRoomContext(room, {});
             const { container, rerender } = render(<WrappedEventTile roomContext={roomContext} />);
-            await act(flushPromises);
+            await flushPromises();
 
             const eventTiles = container.getElementsByClassName("mx_EventTile");
             expect(eventTiles).toHaveLength(1);

test/unit-tests/components/views/rooms/EventTile/__snapshots__/EventTileThreadToolbar-test.tsx.snap

@@ -22,7 +22,17 @@ exports[`EventTileThreadToolbar renders 1`] = `
       role="button"
       tabindex="-1"
     >
-      <div />
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"
+        />
+      </svg>
     </div>
   </div>
 </DocumentFragment>

test/unit-tests/components/views/rooms/MemberList-test.tsx

@@ -8,7 +8,16 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { act, fireEvent, render, RenderResult, screen, waitFor, waitForElementToBeRemoved } from "jest-matrix-react";
+import {
+    act,
+    fireEvent,
+    render,
+    RenderResult,
+    screen,
+    waitFor,
+    waitForElementToBeRemoved,
+    cleanup,
+} from "jest-matrix-react";
 import { Room, MatrixClient, RoomState, RoomMember, User, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { mocked, MockedObject } from "jest-mock";
@@ -361,6 +370,7 @@ describe("MemberList", () => {
 
             afterEach(() => {
                 jest.restoreAllMocks();
+                cleanup();
             });
 
             const renderComponent = () => {
@@ -397,21 +407,22 @@ describe("MemberList", () => {
                 jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
                 jest.spyOn(room, "canInvite").mockReturnValue(false);
 
-                renderComponent();
-                await flushPromises();
+                const { findByLabelText } = renderComponent();
 
                 // button rendered but disabled
-                expect(screen.getByText("Invite to this room")).toHaveAttribute("aria-disabled", "true");
+                await expect(findByLabelText("You do not have permission to invite users")).resolves.toHaveAttribute(
+                    "aria-disabled",
+                    "true",
+                );
             });
 
             it("renders enabled invite button when current user is a member and has rights to invite", async () => {
                 jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
                 jest.spyOn(room, "canInvite").mockReturnValue(true);
 
-                renderComponent();
-                await flushPromises();
+                const { findByText } = renderComponent();
 
-                expect(screen.getByText("Invite to this room")).not.toBeDisabled();
+                await expect(findByText("Invite to this room")).resolves.not.toBeDisabled();
             });
 
             it("opens room inviter on button click", async () => {

test/unit-tests/components/views/rooms/MessageComposer-test.tsx

@@ -42,17 +42,13 @@ import { mkVoiceBroadcastInfoStateEvent } from "../../../voice-broadcast/utils/t
 import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
 
 const openStickerPicker = async (): Promise<void> => {
-    await act(async () => {
-        await userEvent.click(screen.getByLabelText("More options"));
-        await userEvent.click(screen.getByLabelText("Sticker"));
-    });
+    await userEvent.click(screen.getByLabelText("More options"));
+    await userEvent.click(screen.getByLabelText("Sticker"));
 };
 
 const startVoiceMessage = async (): Promise<void> => {
-    await act(async () => {
-        await userEvent.click(screen.getByLabelText("More options"));
-        await userEvent.click(screen.getByLabelText("Voice Message"));
-    });
+    await userEvent.click(screen.getByLabelText("More options"));
+    await userEvent.click(screen.getByLabelText("Voice Message"));
 };
 
 const setCurrentBroadcastRecording = (room: Room, state: VoiceBroadcastInfoState): void => {
@@ -61,7 +57,7 @@ const setCurrentBroadcastRecording = (room: Room, state: VoiceBroadcastInfoState
         MatrixClientPeg.safeGet(),
         state,
     );
-    SdkContextClass.instance.voiceBroadcastRecordingsStore.setCurrent(recording);
+    act(() => SdkContextClass.instance.voiceBroadcastRecordingsStore.setCurrent(recording));
 };
 
 const expectVoiceMessageRecordingTriggered = (): void => {
@@ -97,6 +93,45 @@ describe("MessageComposer", () => {
         });
     });
 
+    it("wysiwyg correctly persists state to and from localStorage", async () => {
+        const room = mkStubRoom("!roomId:server", "Room 1", cli);
+        const messageText = "Test Text";
+        await SettingsStore.setValue("feature_wysiwyg_composer", null, SettingLevel.DEVICE, true);
+        const { renderResult, rawComponent } = wrapAndRender({ room });
+        const { unmount } = renderResult;
+
+        await flushPromises();
+
+        const key = `mx_wysiwyg_state_${room.roomId}`;
+
+        await userEvent.click(screen.getByRole("textbox"));
+        fireEvent.input(screen.getByRole("textbox"), {
+            data: messageText,
+            inputType: "insertText",
+        });
+
+        await waitFor(() => expect(screen.getByRole("textbox")).toHaveTextContent(messageText));
+
+        // Wait for event dispatch to happen
+        await flushPromises();
+
+        // assert there is state persisted
+        expect(localStorage.getItem(key)).toBeNull();
+
+        // ensure the right state was persisted to localStorage
+        unmount();
+
+        // assert the persisted state
+        expect(JSON.parse(localStorage.getItem(key)!)).toStrictEqual({
+            content: messageText,
+            isRichText: true,
+        });
+
+        // ensure the correct state is re-loaded
+        render(rawComponent);
+        await waitFor(() => expect(screen.getByRole("textbox")).toHaveTextContent(messageText));
+    }, 10000);
+
     describe("for a Room", () => {
         const room = mkStubRoom("!roomId:server", "Room 1", cli);
 
@@ -185,14 +220,12 @@ describe("MessageComposer", () => {
             [true, false].forEach((value: boolean) => {
                 describe(`when ${setting} = ${value}`, () => {
                     beforeEach(async () => {
-                        SettingsStore.setValue(setting, null, SettingLevel.DEVICE, value);
+                        await act(() => SettingsStore.setValue(setting, null, SettingLevel.DEVICE, value));
                         wrapAndRender({ room });
-                        await act(async () => {
-                            await userEvent.click(screen.getByLabelText("More options"));
-                        });
+                        await userEvent.click(screen.getByLabelText("More options"));
                     });
 
-                    it(`should${value || "not"} display the button`, () => {
+                    it(`should${value ? "" : " not"} display the button`, () => {
                         if (value) {
                             // eslint-disable-next-line jest/no-conditional-expect
                             expect(screen.getByLabelText(buttonLabel)).toBeInTheDocument();
@@ -205,15 +238,17 @@ describe("MessageComposer", () => {
                     describe(`and setting ${setting} to ${!value}`, () => {
                         beforeEach(async () => {
                             // simulate settings update
-                            await SettingsStore.setValue(setting, null, SettingLevel.DEVICE, !value);
-                            dis.dispatch(
-                                {
-                                    action: Action.SettingUpdated,
-                                    settingName: setting,
-                                    newValue: !value,
-                                },
-                                true,
-                            );
+                            await act(async () => {
+                                await SettingsStore.setValue(setting, null, SettingLevel.DEVICE, !value);
+                                dis.dispatch(
+                                    {
+                                        action: Action.SettingUpdated,
+                                        settingName: setting,
+                                        newValue: !value,
+                                    },
+                                    true,
+                                );
+                            });
                         });
 
                         it(`should${!value || "not"} display the button`, () => {
@@ -273,7 +308,7 @@ describe("MessageComposer", () => {
                 beforeEach(async () => {
                     wrapAndRender({ room }, true, true);
                     await openStickerPicker();
-                    resizeCallback(UI_EVENTS.Resize, {});
+                    act(() => resizeCallback(UI_EVENTS.Resize, {}));
                 });
 
                 it("should close the menu", () => {
@@ -295,7 +330,7 @@ describe("MessageComposer", () => {
                 beforeEach(async () => {
                     wrapAndRender({ room }, true, false);
                     await openStickerPicker();
-                    resizeCallback(UI_EVENTS.Resize, {});
+                    act(() => resizeCallback(UI_EVENTS.Resize, {}));
                 });
 
                 it("should close the menu", () => {
@@ -443,51 +478,6 @@ describe("MessageComposer", () => {
             expect(screen.queryByLabelText("Sticker")).not.toBeInTheDocument();
         });
     });
-
-    it("wysiwyg correctly persists state to and from localStorage", async () => {
-        const room = mkStubRoom("!roomId:server", "Room 1", cli);
-        const messageText = "Test Text";
-        await SettingsStore.setValue("feature_wysiwyg_composer", null, SettingLevel.DEVICE, true);
-        const { renderResult, rawComponent } = wrapAndRender({ room });
-        const { unmount, rerender } = renderResult;
-
-        await act(async () => {
-            await flushPromises();
-        });
-
-        const key = `mx_wysiwyg_state_${room.roomId}`;
-
-        await act(async () => {
-            await userEvent.click(screen.getByRole("textbox"));
-        });
-        fireEvent.input(screen.getByRole("textbox"), {
-            data: messageText,
-            inputType: "insertText",
-        });
-
-        await waitFor(() => expect(screen.getByRole("textbox")).toHaveTextContent(messageText));
-
-        // Wait for event dispatch to happen
-        await act(async () => {
-            await flushPromises();
-        });
-
-        // assert there is state persisted
-        expect(localStorage.getItem(key)).toBeNull();
-
-        // ensure the right state was persisted to localStorage
-        unmount();
-
-        // assert the persisted state
-        expect(JSON.parse(localStorage.getItem(key)!)).toStrictEqual({
-            content: messageText,
-            isRichText: true,
-        });
-
-        // ensure the correct state is re-loaded
-        rerender(rawComponent);
-        await waitFor(() => expect(screen.getByRole("textbox")).toHaveTextContent(messageText));
-    }, 10000);
 });
 
 function wrapAndRender(

test/unit-tests/components/views/rooms/RoomHeader-test.tsx

@@ -8,9 +8,19 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
-import { EventType, JoinRule, MatrixEvent, PendingEventOrdering, Room, RoomMember } from "matrix-js-sdk/src/matrix";
-import { KnownMembership } from "matrix-js-sdk/src/types";
 import {
+    EventType,
+    JoinRule,
+    MatrixEvent,
+    PendingEventOrdering,
+    Room,
+    RoomStateEvent,
+    RoomMember,
+} from "matrix-js-sdk/src/matrix";
+import { KnownMembership } from "matrix-js-sdk/src/types";
+import { CryptoEvent, UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
+import {
+    act,
     createEvent,
     fireEvent,
     getAllByLabelText,
@@ -632,6 +642,52 @@ describe("RoomHeader", () => {
 
             expect(asFragment()).toMatchSnapshot();
         });
+
+        it("updates the icon when the encryption status changes", async () => {
+            // The room starts verified
+            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Verified);
+            render(<RoomHeader room={room} />, getWrapper());
+            await waitFor(() => expect(getByLabelText(document.body, "Verified")).toBeInTheDocument());
+
+            // A new member joins, and the room becomes unverified
+            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Warning);
+            act(() => {
+                room.emit(
+                    RoomStateEvent.Members,
+                    new MatrixEvent({
+                        event_id: "$event_id",
+                        type: EventType.RoomMember,
+                        state_key: "@alice:example.org",
+                        content: {
+                            membership: "join",
+                        },
+                        room_id: ROOM_ID,
+                        sender: "@alice:example.org",
+                    }),
+                    room.currentState,
+                    new RoomMember(room.roomId, "@alice:example.org"),
+                );
+            });
+            await waitFor(() => expect(getByLabelText(document.body, "Untrusted")).toBeInTheDocument());
+
+            // The user becomes verified
+            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Verified);
+            act(() => {
+                MatrixClientPeg.get()!.emit(
+                    CryptoEvent.UserTrustStatusChanged,
+                    "@alice:example.org",
+                    new UserVerificationStatus(true, true, true, false),
+                );
+            });
+            await waitFor(() => expect(getByLabelText(document.body, "Verified")).toBeInTheDocument());
+
+            // An unverified device is added
+            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Warning);
+            act(() => {
+                MatrixClientPeg.get()!.emit(CryptoEvent.DevicesUpdated, ["@alice:example.org"], false);
+            });
+            await waitFor(() => expect(getByLabelText(document.body, "Untrusted")).toBeInTheDocument());
+        });
     });
 
     it("renders additionalButtons", async () => {

test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx

@@ -27,7 +27,6 @@ import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import DocumentOffset from "../../../../../src/editor/offset";
 import { Layout } from "../../../../../src/settings/enums/Layout";
 import { IRoomState, MainSplitContentType } from "../../../../../src/components/structures/RoomView";
-import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import { mockPlatformPeg } from "../../../../test-utils/platform";
 import { doMaybeLocalRoomAction } from "../../../../../src/utils/local-room";
 import { addTextToComposer } from "../../../../test-utils/composer";
@@ -78,16 +77,15 @@ describe("<SendMessageComposer/>", () => {
         canAskToJoin: false,
         promptAskToJoin: false,
         viewRoomOpts: { buttons: [] },
+        isRoomEncrypted: false,
     };
     describe("createMessageContent", () => {
-        const permalinkCreator = jest.fn() as any;
-
         it("sends plaintext messages correctly", () => {
             const model = new EditorModel([], createPartCreator());
             const documentOffset = new DocumentOffset(11, true);
             model.update("hello world", "insertText", documentOffset);
 
-            const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
+            const content = createMessageContent("@alice:test", model, undefined, undefined);
 
             expect(content).toEqual({
                 "body": "hello world",
@@ -101,7 +99,7 @@ describe("<SendMessageComposer/>", () => {
             const documentOffset = new DocumentOffset(13, true);
             model.update("hello *world*", "insertText", documentOffset);
 
-            const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
+            const content = createMessageContent("@alice:test", model, undefined, undefined);
 
             expect(content).toEqual({
                 "body": "hello *world*",
@@ -117,7 +115,7 @@ describe("<SendMessageComposer/>", () => {
             const documentOffset = new DocumentOffset(22, true);
             model.update("/me blinks __quickly__", "insertText", documentOffset);
 
-            const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
+            const content = createMessageContent("@alice:test", model, undefined, undefined);
 
             expect(content).toEqual({
                 "body": "blinks __quickly__",
@@ -134,7 +132,7 @@ describe("<SendMessageComposer/>", () => {
             model.update("/me ✨sparkles✨", "insertText", documentOffset);
             expect(model.parts.length).toEqual(4); // Emoji count as non-text
 
-            const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
+            const content = createMessageContent("@alice:test", model, undefined, undefined);
 
             expect(content).toEqual({
                 "body": "✨sparkles✨",
@@ -149,7 +147,7 @@ describe("<SendMessageComposer/>", () => {
 
             model.update("//dev/null is my favourite place", "insertText", documentOffset);
 
-            const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
+            const content = createMessageContent("@alice:test", model, undefined, undefined);
 
             expect(content).toEqual({
                 "body": "/dev/null is my favourite place",
@@ -364,7 +362,6 @@ describe("<SendMessageComposer/>", () => {
         const defaultProps = {
             room: mockRoom,
             toggleStickerPickerOpen: jest.fn(),
-            permalinkCreator: new RoomPermalinkCreator(mockRoom),
         };
         const getRawComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => (
             <MatrixClientContext.Provider value={client}>
@@ -389,7 +386,7 @@ describe("<SendMessageComposer/>", () => {
 
         it("correctly persists state to and from localStorage", () => {
             const props = { replyToEvent: mockEvent };
-            const { container, unmount, rerender } = getComponent(props);
+            let { container, unmount } = getComponent(props);
 
             addTextToComposer(container, "Test Text");
 
@@ -406,7 +403,7 @@ describe("<SendMessageComposer/>", () => {
             });
 
             // ensure the correct model is re-loaded
-            rerender(getRawComponent(props));
+            ({ container, unmount } = getComponent(props));
             expect(container.textContent).toBe("Test Text");
             expect(spyDispatcher).toHaveBeenCalledWith({
                 action: "reply_to_event",
@@ -417,7 +414,7 @@ describe("<SendMessageComposer/>", () => {
             // now try with localStorage wiped out
             unmount();
             localStorage.removeItem(key);
-            rerender(getRawComponent(props));
+            ({ container } = getComponent(props));
             expect(container.textContent).toBe("");
         });
 
@@ -482,6 +479,44 @@ describe("<SendMessageComposer/>", () => {
             });
         });
 
+        it("correctly sends a reply using a slash command", async () => {
+            stubClient();
+            mocked(doMaybeLocalRoomAction).mockImplementation(
+                <T,>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
+                    return fn(roomId);
+                },
+            );
+
+            const replyToEvent = mkEvent({
+                type: "m.room.message",
+                user: "@bob:test",
+                room: "!abc:test",
+                content: { "m.mentions": {} },
+                event: true,
+            });
+
+            mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
+            const { container } = getComponent({ replyToEvent });
+
+            addTextToComposer(container, "/tableflip");
+            fireEvent.keyDown(container.querySelector(".mx_SendMessageComposer")!, { key: "Enter" });
+
+            await waitFor(() =>
+                expect(mockClient.sendMessage).toHaveBeenCalledWith("myfakeroom", null, {
+                    "body": "(╯°□°）╯︵ ┻━┻",
+                    "msgtype": MsgType.Text,
+                    "m.mentions": {
+                        user_ids: ["@bob:test"],
+                    },
+                    "m.relates_to": {
+                        "m.in_reply_to": {
+                            event_id: replyToEvent.getId(),
+                        },
+                    },
+                }),
+            );
+        });
+
         it("shows chat effects on message sending", () => {
             mocked(doMaybeLocalRoomAction).mockImplementation(
                 <T,>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {

test/unit-tests/components/views/rooms/UserIdentityWarning-test.tsx

@@ -0,0 +1,534 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { sleep } from "matrix-js-sdk/src/utils";
+import {
+    EventType,
+    MatrixClient,
+    MatrixEvent,
+    Room,
+    RoomState,
+    RoomStateEvent,
+    RoomMember,
+} from "matrix-js-sdk/src/matrix";
+import { CryptoEvent, UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
+import { act, render, screen, waitFor } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+
+import { stubClient } from "../../../../test-utils";
+import { UserIdentityWarning } from "../../../../../src/components/views/rooms/UserIdentityWarning";
+import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
+
+const ROOM_ID = "!room:id";
+
+function mockRoom(): Room {
+    const room = {
+        getEncryptionTargetMembers: jest.fn(async () => []),
+        getMember: jest.fn((userId) => {}),
+        roomId: ROOM_ID,
+        shouldEncryptForInvitedMembers: jest.fn(() => true),
+    } as unknown as Room;
+
+    return room;
+}
+
+function mockRoomMember(userId: string, name?: string): RoomMember {
+    return {
+        userId,
+        name: name ?? userId,
+        rawDisplayName: name ?? userId,
+        roomId: ROOM_ID,
+        getMxcAvatarUrl: jest.fn(),
+    } as unknown as RoomMember;
+}
+
+function dummyRoomState(): RoomState {
+    return new RoomState(ROOM_ID);
+}
+
+/**
+ * Get the warning element, given the warning text (excluding the "Learn more"
+ * link).  This is needed because the warning text contains a `<b>` tag, so the
+ * normal `getByText` doesn't work.
+ */
+function getWarningByText(text: string): Element {
+    return screen.getByText((content?: string, element?: Element | null): boolean => {
+        return (
+            !!element &&
+            element.classList.contains("mx_UserIdentityWarning_main") &&
+            element.textContent === text + " Learn more"
+        );
+    });
+}
+
+function renderComponent(client: MatrixClient, room: Room) {
+    return render(<UserIdentityWarning room={room} key={ROOM_ID} />, {
+        wrapper: ({ ...rest }) => <MatrixClientContext.Provider value={client} {...rest} />,
+    });
+}
+
+describe("UserIdentityWarning", () => {
+    let client: MatrixClient;
+    let room: Room;
+
+    beforeEach(async () => {
+        client = stubClient();
+        room = mockRoom();
+        jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    // This tests the basic functionality of the component.  If we have a room
+    // member whose identity needs accepting, we should display a warning.  When
+    // the "OK" button gets pressed, it should call `pinCurrentUserIdentity`.
+    it("displays a warning when a user's identity needs approval", async () => {
+        jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([
+            mockRoomMember("@alice:example.org", "Alice"),
+        ]);
+        const crypto = client.getCrypto()!;
+        jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+            new UserVerificationStatus(false, false, false, true),
+        );
+        crypto.pinCurrentUserIdentity = jest.fn();
+        renderComponent(client, room);
+
+        await waitFor(() =>
+            expect(
+                getWarningByText("Alice's (@alice:example.org) identity appears to have changed."),
+            ).toBeInTheDocument(),
+        );
+        await userEvent.click(screen.getByRole("button")!);
+        await waitFor(() => expect(crypto.pinCurrentUserIdentity).toHaveBeenCalledWith("@alice:example.org"));
+    });
+
+    // We don't display warnings in non-encrypted rooms, but if encryption is
+    // enabled, then we should display a warning if there are any users whose
+    // identity need accepting.
+    it("displays pending warnings when encryption is enabled", async () => {
+        jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([
+            mockRoomMember("@alice:example.org", "Alice"),
+        ]);
+        // Start the room off unencrypted.  We shouldn't display anything.
+        const crypto = client.getCrypto()!;
+        jest.spyOn(crypto, "isEncryptionEnabledInRoom").mockResolvedValue(false);
+        jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+            new UserVerificationStatus(false, false, false, true),
+        );
+
+        renderComponent(client, room);
+        await sleep(10); // give it some time to finish initialising
+        expect(() => getWarningByText("Alice's (@alice:example.org) identity appears to have changed.")).toThrow();
+
+        // Encryption gets enabled in the room.  We should now warn that Alice's
+        // identity changed.
+        jest.spyOn(crypto, "isEncryptionEnabledInRoom").mockResolvedValue(true);
+        client.emit(
+            RoomStateEvent.Events,
+            new MatrixEvent({
+                event_id: "$event_id",
+                type: EventType.RoomEncryption,
+                state_key: "",
+                content: {
+                    algorithm: "m.megolm.v1.aes-sha2",
+                },
+                room_id: ROOM_ID,
+                sender: "@alice:example.org",
+            }),
+            dummyRoomState(),
+            null,
+        );
+        await waitFor(() =>
+            expect(
+                getWarningByText("Alice's (@alice:example.org) identity appears to have changed."),
+            ).toBeInTheDocument(),
+        );
+    });
+
+    // When a user's identity needs approval, or has been approved, the display
+    // should update appropriately.
+    it("updates the display when identity changes", async () => {
+        jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([
+            mockRoomMember("@alice:example.org", "Alice"),
+        ]);
+        jest.spyOn(room, "getMember").mockReturnValue(mockRoomMember("@alice:example.org", "Alice"));
+        const crypto = client.getCrypto()!;
+        jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+            new UserVerificationStatus(false, false, false, false),
+        );
+        renderComponent(client, room);
+        await sleep(10); // give it some time to finish initialising
+        expect(() => getWarningByText("Alice's (@alice:example.org) identity appears to have changed.")).toThrow();
+
+        // The user changes their identity, so we should show the warning.
+        act(() => {
+            client.emit(
+                CryptoEvent.UserTrustStatusChanged,
+                "@alice:example.org",
+                new UserVerificationStatus(false, false, false, true),
+            );
+        });
+        await waitFor(() =>
+            expect(
+                getWarningByText("Alice's (@alice:example.org) identity appears to have changed."),
+            ).toBeInTheDocument(),
+        );
+
+        // Simulate the user's new identity having been approved, so we no
+        // longer show the warning.
+        act(() => {
+            client.emit(
+                CryptoEvent.UserTrustStatusChanged,
+                "@alice:example.org",
+                new UserVerificationStatus(false, false, false, false),
+            );
+        });
+        await waitFor(() =>
+            expect(() => getWarningByText("Alice's (@alice:example.org) identity appears to have changed.")).toThrow(),
+        );
+    });
+
+    // We only display warnings about users in the room.  When someone
+    // joins/leaves, we should update the warning appropriately.
+    describe("updates the display when a member joins/leaves", () => {
+        it("when invited users can see encrypted messages", async () => {
+            // Nobody in the room yet
+            jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([]);
+            jest.spyOn(room, "getMember").mockImplementation((userId) => mockRoomMember(userId));
+            jest.spyOn(room, "shouldEncryptForInvitedMembers").mockReturnValue(true);
+            const crypto = client.getCrypto()!;
+            jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+                new UserVerificationStatus(false, false, false, true),
+            );
+            renderComponent(client, room);
+            await sleep(10); // give it some time to finish initialising
+
+            // Alice joins.  Her identity needs approval, so we should show a warning.
+            client.emit(
+                RoomStateEvent.Events,
+                new MatrixEvent({
+                    event_id: "$event_id",
+                    type: EventType.RoomMember,
+                    state_key: "@alice:example.org",
+                    content: {
+                        membership: "join",
+                    },
+                    room_id: ROOM_ID,
+                    sender: "@alice:example.org",
+                }),
+                dummyRoomState(),
+                null,
+            );
+            await waitFor(() =>
+                expect(getWarningByText("@alice:example.org's identity appears to have changed.")).toBeInTheDocument(),
+            );
+
+            // Bob is invited.  His identity needs approval, so we should show a
+            // warning for him after Alice's warning is resolved by her leaving.
+            client.emit(
+                RoomStateEvent.Events,
+                new MatrixEvent({
+                    event_id: "$event_id",
+                    type: EventType.RoomMember,
+                    state_key: "@bob:example.org",
+                    content: {
+                        membership: "invite",
+                    },
+                    room_id: ROOM_ID,
+                    sender: "@carol:example.org",
+                }),
+                dummyRoomState(),
+                null,
+            );
+
+            // Alice leaves, so we no longer show her warning, but we will show
+            // a warning for Bob.
+            act(() => {
+                client.emit(
+                    RoomStateEvent.Events,
+                    new MatrixEvent({
+                        event_id: "$event_id",
+                        type: EventType.RoomMember,
+                        state_key: "@alice:example.org",
+                        content: {
+                            membership: "leave",
+                        },
+                        room_id: ROOM_ID,
+                        sender: "@alice:example.org",
+                    }),
+                    dummyRoomState(),
+                    null,
+                );
+            });
+            await waitFor(() =>
+                expect(() => getWarningByText("@alice:example.org's identity appears to have changed.")).toThrow(),
+            );
+            await waitFor(() =>
+                expect(getWarningByText("@bob:example.org's identity appears to have changed.")).toBeInTheDocument(),
+            );
+        });
+
+        it("when invited users cannot see encrypted messages", async () => {
+            // Nobody in the room yet
+            jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([]);
+            jest.spyOn(room, "getMember").mockImplementation((userId) => mockRoomMember(userId));
+            jest.spyOn(room, "shouldEncryptForInvitedMembers").mockReturnValue(false);
+            const crypto = client.getCrypto()!;
+            jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+                new UserVerificationStatus(false, false, false, true),
+            );
+            renderComponent(client, room);
+            await sleep(10); // give it some time to finish initialising
+
+            // Alice joins.  Her identity needs approval, so we should show a warning.
+            client.emit(
+                RoomStateEvent.Events,
+                new MatrixEvent({
+                    event_id: "$event_id",
+                    type: EventType.RoomMember,
+                    state_key: "@alice:example.org",
+                    content: {
+                        membership: "join",
+                    },
+                    room_id: ROOM_ID,
+                    sender: "@alice:example.org",
+                }),
+                dummyRoomState(),
+                null,
+            );
+            await waitFor(() =>
+                expect(getWarningByText("@alice:example.org's identity appears to have changed.")).toBeInTheDocument(),
+            );
+
+            // Bob is invited. His identity needs approval, but we don't encrypt
+            // to him, so we won't show a warning. (When Alice leaves, the
+            // display won't be updated to show a warningfor Bob.)
+            client.emit(
+                RoomStateEvent.Events,
+                new MatrixEvent({
+                    event_id: "$event_id",
+                    type: EventType.RoomMember,
+                    state_key: "@bob:example.org",
+                    content: {
+                        membership: "invite",
+                    },
+                    room_id: ROOM_ID,
+                    sender: "@carol:example.org",
+                }),
+                dummyRoomState(),
+                null,
+            );
+
+            // Alice leaves, so we no longer show her warning, and we don't show
+            // a warning for Bob.
+            act(() => {
+                client.emit(
+                    RoomStateEvent.Events,
+                    new MatrixEvent({
+                        event_id: "$event_id",
+                        type: EventType.RoomMember,
+                        state_key: "@alice:example.org",
+                        content: {
+                            membership: "leave",
+                        },
+                        room_id: ROOM_ID,
+                        sender: "@alice:example.org",
+                    }),
+                    dummyRoomState(),
+                    null,
+                );
+            });
+            await waitFor(() =>
+                expect(() => getWarningByText("@alice:example.org's identity appears to have changed.")).toThrow(),
+            );
+            await waitFor(() =>
+                expect(() => getWarningByText("@bob:example.org's identity appears to have changed.")).toThrow(),
+            );
+        });
+
+        it("when member leaves immediately after component is loaded", async () => {
+            jest.spyOn(room, "getEncryptionTargetMembers").mockImplementation(async () => {
+                setTimeout(() => {
+                    // Alice immediately leaves after we get the room
+                    // membership, so we shouldn't show the warning any more
+                    client.emit(
+                        RoomStateEvent.Events,
+                        new MatrixEvent({
+                            event_id: "$event_id",
+                            type: EventType.RoomMember,
+                            state_key: "@alice:example.org",
+                            content: {
+                                membership: "leave",
+                            },
+                            room_id: ROOM_ID,
+                            sender: "@alice:example.org",
+                        }),
+                        dummyRoomState(),
+                        null,
+                    );
+                });
+                return [mockRoomMember("@alice:example.org")];
+            });
+            jest.spyOn(room, "getMember").mockImplementation((userId) => mockRoomMember(userId));
+            jest.spyOn(room, "shouldEncryptForInvitedMembers").mockReturnValue(false);
+            const crypto = client.getCrypto()!;
+            jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+                new UserVerificationStatus(false, false, false, true),
+            );
+            renderComponent(client, room);
+
+            await sleep(10);
+            expect(() => getWarningByText("@alice:example.org's identity appears to have changed.")).toThrow();
+        });
+
+        it("when member leaves immediately after joining", async () => {
+            // Nobody in the room yet
+            jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([]);
+            jest.spyOn(room, "getMember").mockImplementation((userId) => mockRoomMember(userId));
+            jest.spyOn(room, "shouldEncryptForInvitedMembers").mockReturnValue(false);
+            const crypto = client.getCrypto()!;
+            jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+                new UserVerificationStatus(false, false, false, true),
+            );
+            renderComponent(client, room);
+            await sleep(10); // give it some time to finish initialising
+
+            // Alice joins.  Her identity needs approval, so we should show a warning.
+            client.emit(
+                RoomStateEvent.Events,
+                new MatrixEvent({
+                    event_id: "$event_id",
+                    type: EventType.RoomMember,
+                    state_key: "@alice:example.org",
+                    content: {
+                        membership: "join",
+                    },
+                    room_id: ROOM_ID,
+                    sender: "@alice:example.org",
+                }),
+                dummyRoomState(),
+                null,
+            );
+            // ... but she immediately leaves, so we shouldn't show the warning any more
+            client.emit(
+                RoomStateEvent.Events,
+                new MatrixEvent({
+                    event_id: "$event_id",
+                    type: EventType.RoomMember,
+                    state_key: "@alice:example.org",
+                    content: {
+                        membership: "leave",
+                    },
+                    room_id: ROOM_ID,
+                    sender: "@alice:example.org",
+                }),
+                dummyRoomState(),
+                null,
+            );
+            await sleep(10); // give it some time to finish
+            expect(() => getWarningByText("@alice:example.org's identity appears to have changed.")).toThrow();
+        });
+    });
+
+    // When we have multiple users whose identity needs approval, one user's
+    // identity no longer needs approval (e.g. their identity was approved),
+    // then we show the next one.
+    it("displays the next user when the current user's identity is approved", async () => {
+        jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([
+            mockRoomMember("@alice:example.org", "Alice"),
+            mockRoomMember("@bob:example.org"),
+        ]);
+        const crypto = client.getCrypto()!;
+        jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+            new UserVerificationStatus(false, false, false, true),
+        );
+
+        renderComponent(client, room);
+        // We should warn about Alice's identity first.
+        await waitFor(() =>
+            expect(
+                getWarningByText("Alice's (@alice:example.org) identity appears to have changed."),
+            ).toBeInTheDocument(),
+        );
+
+        // Simulate Alice's new identity having been approved, so now we warn
+        // about Bob's identity.
+        act(() => {
+            client.emit(
+                CryptoEvent.UserTrustStatusChanged,
+                "@alice:example.org",
+                new UserVerificationStatus(false, false, false, false),
+            );
+        });
+        await waitFor(() =>
+            expect(getWarningByText("@bob:example.org's identity appears to have changed.")).toBeInTheDocument(),
+        );
+    });
+
+    // If we get an update for a user's verification status while we're fetching
+    // that user's verification status, we should display based on the updated
+    // value.
+    describe("handles races between fetching verification status and receiving updates", () => {
+        // First case: check that if the update says that the user identity
+        // needs approval, but the fetch says it doesn't, we show the warning.
+        it("update says identity needs approval", async () => {
+            jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([
+                mockRoomMember("@alice:example.org", "Alice"),
+            ]);
+            jest.spyOn(room, "getMember").mockReturnValue(mockRoomMember("@alice:example.org", "Alice"));
+            const crypto = client.getCrypto()!;
+            jest.spyOn(crypto, "getUserVerificationStatus").mockImplementation(async () => {
+                act(() => {
+                    client.emit(
+                        CryptoEvent.UserTrustStatusChanged,
+                        "@alice:example.org",
+                        new UserVerificationStatus(false, false, false, true),
+                    );
+                });
+                return Promise.resolve(new UserVerificationStatus(false, false, false, false));
+            });
+            renderComponent(client, room);
+            await sleep(10); // give it some time to finish initialising
+            await waitFor(() =>
+                expect(
+                    getWarningByText("Alice's (@alice:example.org) identity appears to have changed."),
+                ).toBeInTheDocument(),
+            );
+        });
+
+        // Second case: check that if the update says that the user identity
+        // doesn't needs approval, but the fetch says it does, we don't show the
+        // warning.
+        it("update says identity doesn't need approval", async () => {
+            jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([
+                mockRoomMember("@alice:example.org", "Alice"),
+            ]);
+            jest.spyOn(room, "getMember").mockReturnValue(mockRoomMember("@alice:example.org", "Alice"));
+            const crypto = client.getCrypto()!;
+            jest.spyOn(crypto, "getUserVerificationStatus").mockImplementation(async () => {
+                act(() => {
+                    client.emit(
+                        CryptoEvent.UserTrustStatusChanged,
+                        "@alice:example.org",
+                        new UserVerificationStatus(false, false, false, false),
+                    );
+                });
+                return Promise.resolve(new UserVerificationStatus(false, false, false, true));
+            });
+            renderComponent(client, room);
+            await sleep(10); // give it some time to finish initialising
+            await waitFor(() =>
+                expect(() =>
+                    getWarningByText("Alice's (@alice:example.org) identity appears to have changed."),
+                ).toThrow(),
+            );
+        });
+    });
+});

test/unit-tests/components/views/rooms/VoiceRecordComposerTile-test.tsx

@@ -15,7 +15,6 @@ import VoiceRecordComposerTile from "../../../../../src/components/views/rooms/V
 import { doMaybeLocalRoomAction } from "../../../../../src/utils/local-room";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import { IUpload, VoiceMessageRecording } from "../../../../../src/audio/VoiceMessageRecording";
-import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import { VoiceRecordingStore } from "../../../../../src/stores/VoiceRecordingStore";
 import { PlaybackClock } from "../../../../../src/audio/PlaybackClock";
 import { mkEvent } from "../../../../test-utils";
@@ -57,7 +56,6 @@ describe("<VoiceRecordComposerTile/>", () => {
         const props = {
             room,
             ref: voiceRecordComposerTile,
-            permalinkCreator: new RoomPermalinkCreator(room),
         };
         mockUpload = {
             mxc: "mxc://example.com/voice",
@@ -142,7 +140,6 @@ describe("<VoiceRecordComposerTile/>", () => {
             const props = {
                 room,
                 ref: voiceRecordComposerTile,
-                permalinkCreator: new RoomPermalinkCreator(room),
                 replyToEvent,
             };
             render(<VoiceRecordComposerTile {...props} />);

test/unit-tests/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import "@testing-library/jest-dom";
 import React from "react";
-import { act, fireEvent, render, screen, waitFor } from "jest-matrix-react";
+import { fireEvent, render, screen, waitFor } from "jest-matrix-react";
 
 import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
 import RoomContext from "../../../../../../src/contexts/RoomContext";
@@ -253,9 +253,7 @@ describe("EditWysiwygComposer", () => {
         });
 
         // Wait for event dispatch to happen
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
 
         // Then we don't get it because we are disabled
         expect(screen.getByRole("textbox")).not.toHaveFocus();

test/unit-tests/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts

@@ -8,26 +8,13 @@ Please see LICENSE files in the repository root for full details.
 import { MsgType } from "matrix-js-sdk/src/matrix";
 
 import { filterConsole, mkEvent } from "../../../../../../test-utils";
-import { RoomPermalinkCreator } from "../../../../../../../src/utils/permalinks/Permalinks";
 import {
     createMessageContent,
     EMOTE_PREFIX,
 } from "../../../../../../../src/components/views/rooms/wysiwyg_composer/utils/createMessageContent";
 
 describe("createMessageContent", () => {
-    const permalinkCreator = {
-        forEvent(eventId: string): string {
-            return "$$permalink$$";
-        },
-    } as RoomPermalinkCreator;
     const message = "<em><b>hello</b> world</em>";
-    const mockEvent = mkEvent({
-        type: "m.room.message",
-        room: "myfakeroom",
-        user: "myfakeuser",
-        content: { msgtype: "m.text", body: "Replying to this" },
-        event: true,
-    });
 
     afterEach(() => {
         jest.resetAllMocks();
@@ -42,12 +29,12 @@ describe("createMessageContent", () => {
             // Warm up by creating the component once, with a long timeout.
             // This prevents tests timing out because of the time spent loading
             // the WASM component.
-            await createMessageContent(message, true, { permalinkCreator });
+            await createMessageContent(message, true, {});
         }, 10000);
 
         it("Should create html message", async () => {
             // When
-            const content = await createMessageContent(message, true, { permalinkCreator });
+            const content = await createMessageContent(message, true, {});
 
             // Then
             expect(content).toEqual({
@@ -58,34 +45,13 @@ describe("createMessageContent", () => {
             });
         });
 
-        it("Should add reply to message content", async () => {
-            // When
-            const content = await createMessageContent(message, true, { permalinkCreator, replyToEvent: mockEvent });
-
-            // Then
-            expect(content).toEqual({
-                "body": "> <myfakeuser> Replying to this\n\n*__hello__ world*",
-                "format": "org.matrix.custom.html",
-                "formatted_body":
-                    '<mx-reply><blockquote><a href="$$permalink$$">In reply to</a>' +
-                    ' <a href="https://matrix.to/#/myfakeuser">myfakeuser</a>' +
-                    "<br>Replying to this</blockquote></mx-reply><em><b>hello</b> world</em>",
-                "msgtype": "m.text",
-                "m.relates_to": {
-                    "m.in_reply_to": {
-                        event_id: mockEvent.getId(),
-                    },
-                },
-            });
-        });
-
         it("Should add relation to message", async () => {
             // When
             const relation = {
                 rel_type: "m.thread",
                 event_id: "myFakeThreadId",
             };
-            const content = await createMessageContent(message, true, { permalinkCreator, relation });
+            const content = await createMessageContent(message, true, { relation });
 
             // Then
             expect(content).toEqual({
@@ -118,7 +84,7 @@ describe("createMessageContent", () => {
                 },
                 event: true,
             });
-            const content = await createMessageContent(message, true, { permalinkCreator, editedEvent });
+            const content = await createMessageContent(message, true, { editedEvent });
 
             // Then
             expect(content).toEqual({
@@ -141,20 +107,20 @@ describe("createMessageContent", () => {
 
         it("Should strip the /me prefix from a message", async () => {
             const textBody = "some body text";
-            const content = await createMessageContent(EMOTE_PREFIX + textBody, true, { permalinkCreator });
+            const content = await createMessageContent(EMOTE_PREFIX + textBody, true, {});
 
             expect(content).toMatchObject({ body: textBody, formatted_body: textBody });
         });
 
         it("Should strip single / from message prefixed with //", async () => {
-            const content = await createMessageContent("//twoSlashes", true, { permalinkCreator });
+            const content = await createMessageContent("//twoSlashes", true, {});
 
             expect(content).toMatchObject({ body: "/twoSlashes", formatted_body: "/twoSlashes" });
         });
 
         it("Should set the content type to MsgType.Emote when /me prefix is used", async () => {
             const textBody = "some body text";
-            const content = await createMessageContent(EMOTE_PREFIX + textBody, true, { permalinkCreator });
+            const content = await createMessageContent(EMOTE_PREFIX + textBody, true, {});
 
             expect(content).toMatchObject({ msgtype: MsgType.Emote });
         });
@@ -164,14 +130,14 @@ describe("createMessageContent", () => {
         it("Should replace at-room mentions with `@room` in body", async () => {
             const messageComposerState = `<a href="#" contenteditable="false" data-mention-type="at-room" style="some styling">@room</a> `;
 
-            const content = await createMessageContent(messageComposerState, false, { permalinkCreator });
+            const content = await createMessageContent(messageComposerState, false, {});
             expect(content).toMatchObject({ body: "@room " });
         });
 
         it("Should replace user mentions with user name in body", async () => {
             const messageComposerState = `<a href="https://matrix.to/#/@test_user:element.io" contenteditable="false" data-mention-type="user" style="some styling">a test user</a> `;
 
-            const content = await createMessageContent(messageComposerState, false, { permalinkCreator });
+            const content = await createMessageContent(messageComposerState, false, {});
 
             expect(content).toMatchObject({ body: "a test user " });
         });
@@ -179,7 +145,7 @@ describe("createMessageContent", () => {
         it("Should replace room mentions with room mxid in body", async () => {
             const messageComposerState = `<a href="https://matrix.to/#/#test_room:element.io" contenteditable="false" data-mention-type="room" style="some styling">a test room</a> `;
 
-            const content = await createMessageContent(messageComposerState, false, { permalinkCreator });
+            const content = await createMessageContent(messageComposerState, false, {});
 
             expect(content).toMatchObject({
                 body: "#test_room:element.io ",

test/unit-tests/components/views/rooms/wysiwyg_composer/utils/message-test.ts

@@ -17,7 +17,6 @@ import { createTestClient, getRoomContext, mkEvent, mkStubRoom } from "../../../
 import defaultDispatcher from "../../../../../../../src/dispatcher/dispatcher";
 import SettingsStore from "../../../../../../../src/settings/SettingsStore";
 import { SettingLevel } from "../../../../../../../src/settings/SettingLevel";
-import { RoomPermalinkCreator } from "../../../../../../../src/utils/permalinks/Permalinks";
 import EditorStateTransfer from "../../../../../../../src/utils/EditorStateTransfer";
 import * as ConfirmRedactDialog from "../../../../../../../src/components/views/dialogs/ConfirmRedactDialog";
 import * as SlashCommands from "../../../../../../../src/SlashCommands";
@@ -27,11 +26,6 @@ import { MatrixClientPeg } from "../../../../../../../src/MatrixClientPeg";
 import { Action } from "../../../../../../../src/dispatcher/actions";
 
 describe("message", () => {
-    const permalinkCreator = {
-        forEvent(eventId: string): string {
-            return "$$permalink$$";
-        },
-    } as RoomPermalinkCreator;
     const message = "<i><b>hello</b> world</i>";
     const mockEvent = mkEvent({
         type: "m.room.message",
@@ -71,7 +65,7 @@ describe("message", () => {
     describe("sendMessage", () => {
         it("Should not send empty html message", async () => {
             // When
-            await sendMessage("", true, { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
+            await sendMessage("", true, { roomContext: defaultRoomContext, mxClient: mockClient });
 
             // Then
             expect(mockClient.sendMessage).toHaveBeenCalledTimes(0);
@@ -86,7 +80,6 @@ describe("message", () => {
             await sendMessage(message, true, {
                 roomContext: mockRoomContextWithoutId,
                 mxClient: mockClient,
-                permalinkCreator,
             });
 
             // Then
@@ -100,7 +93,6 @@ describe("message", () => {
                 await sendMessage(message, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
-                    permalinkCreator,
                 });
 
                 // Then
@@ -111,7 +103,6 @@ describe("message", () => {
                 await sendMessage(message, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
-                    permalinkCreator,
                     relation: {},
                 });
 
@@ -123,7 +114,6 @@ describe("message", () => {
                 await sendMessage(message, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
-                    permalinkCreator,
                     relation: {
                         event_id: "valid_id",
                         rel_type: "m.does_not_match",
@@ -139,7 +129,6 @@ describe("message", () => {
                 await sendMessage(message, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
-                    permalinkCreator,
                     relation: {
                         event_id: "valid_id",
                         rel_type: "m.thread",
@@ -156,7 +145,6 @@ describe("message", () => {
             await sendMessage(message, true, {
                 roomContext: defaultRoomContext,
                 mxClient: mockClient,
-                permalinkCreator,
             });
 
             // Then
@@ -183,7 +171,6 @@ describe("message", () => {
             await sendMessage(message, true, {
                 roomContext: defaultRoomContext,
                 mxClient: mockClient,
-                permalinkCreator,
                 replyToEvent: mockReplyEvent,
             });
 
@@ -195,12 +182,9 @@ describe("message", () => {
             });
 
             const expectedContent = {
-                "body": "> <myfakeuser2> My reply\n\n*__hello__ world*",
+                "body": "*__hello__ world*",
                 "format": "org.matrix.custom.html",
-                "formatted_body":
-                    '<mx-reply><blockquote><a href="$$permalink$$">In reply to</a>' +
-                    ' <a href="https://matrix.to/#/myfakeuser2">myfakeuser2</a>' +
-                    "<br>My reply</blockquote></mx-reply><i><b>hello</b> world</i>",
+                "formatted_body": "<i><b>hello</b> world</i>",
                 "msgtype": "m.text",
                 "m.relates_to": {
                     "m.in_reply_to": {
@@ -217,7 +201,6 @@ describe("message", () => {
             await sendMessage(message, true, {
                 roomContext: defaultRoomContext,
                 mxClient: mockClient,
-                permalinkCreator,
             });
 
             // Then
@@ -229,7 +212,7 @@ describe("message", () => {
 
         it("Should handle emojis", async () => {
             // When
-            await sendMessage("🎉", false, { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
+            await sendMessage("🎉", false, { roomContext: defaultRoomContext, mxClient: mockClient });
 
             // Then
             expect(spyDispatcher).toHaveBeenCalledWith({ action: "effects.confetti" });
@@ -244,7 +227,6 @@ describe("message", () => {
                 await sendMessage(validCommand, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
-                    permalinkCreator,
                 });
 
                 // Then
@@ -257,7 +239,6 @@ describe("message", () => {
                 await sendMessage(invalidPrefixCommand, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
-                    permalinkCreator,
                 });
 
                 // Then
@@ -275,7 +256,6 @@ describe("message", () => {
                 const result = await sendMessage(validCommand, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
-                    permalinkCreator,
                 });
 
                 // Then
@@ -290,7 +270,6 @@ describe("message", () => {
                     await sendMessage(inputText, true, {
                         roomContext: defaultRoomContext,
                         mxClient: mockClient,
-                        permalinkCreator,
                     });
                     expect(mockClient.sendMessage).toHaveBeenCalledWith(
                         "myfakeroom",
@@ -309,7 +288,6 @@ describe("message", () => {
                     await sendMessage(inputText, true, {
                         roomContext: defaultRoomContext,
                         mxClient: mockClient,
-                        permalinkCreator,
                         relation: mockRelation,
                     });
 
@@ -326,7 +304,6 @@ describe("message", () => {
                 await sendMessage("input", true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
-                    permalinkCreator,
                     replyToEvent: mockEvent,
                 });
 
@@ -341,7 +318,6 @@ describe("message", () => {
                     const result = await sendMessage(input, true, {
                         roomContext: defaultRoomContext,
                         mxClient: mockClient,
-                        permalinkCreator,
                         replyToEvent: mockEvent,
                     });
 
@@ -357,7 +333,6 @@ describe("message", () => {
                 await sendMessage(invalidCommandInput, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
-                    permalinkCreator,
                 });
 
                 // we expect the message to have been sent
@@ -378,7 +353,6 @@ describe("message", () => {
                 const result = await sendMessage(invalidCommandInput, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
-                    permalinkCreator,
                 });
 
                 expect(result).toBeUndefined();

test/unit-tests/components/views/settings/AddRemoveThreepids-test.tsx

@@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { render, screen, waitFor } from "jest-matrix-react";
-import { MatrixClient, ThreepidMedium } from "matrix-js-sdk/src/matrix";
+import { render, screen, waitFor, cleanup } from "jest-matrix-react";
+import { MatrixClient, MatrixError, ThreepidMedium } from "matrix-js-sdk/src/matrix";
 import React from "react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
@@ -16,6 +16,7 @@ import { AddRemoveThreepids } from "../../../../../src/components/views/settings
 import { clearAllModals, stubClient } from "../../../../test-utils";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import Modal from "../../../../../src/Modal";
+import InteractiveAuthDialog from "../../../../../src/components/views/dialogs/InteractiveAuthDialog.tsx";
 
 const MOCK_IDENTITY_ACCESS_TOKEN = "mock_identity_access_token";
 const mockGetAccessToken = jest.fn().mockResolvedValue(MOCK_IDENTITY_ACCESS_TOKEN);
@@ -47,54 +48,13 @@ describe("AddRemoveThreepids", () => {
     afterEach(() => {
         jest.restoreAllMocks();
         clearAllModals();
+        cleanup();
     });
 
     const clientProviderWrapper: React.FC = ({ children }: React.PropsWithChildren) => (
         <MatrixClientContext.Provider value={client}>{children}</MatrixClientContext.Provider>
     );
 
-    it("should render a loader while loading", async () => {
-        render(
-            <AddRemoveThreepids
-                mode="hs"
-                medium={ThreepidMedium.Email}
-                threepids={[]}
-                isLoading={true}
-                onChange={() => {}}
-            />,
-        );
-
-        expect(screen.getByLabelText("Loading…")).toBeInTheDocument();
-    });
-
-    it("should render email addresses", async () => {
-        const { container } = render(
-            <AddRemoveThreepids
-                mode="hs"
-                medium={ThreepidMedium.Email}
-                threepids={[EMAIL1]}
-                isLoading={false}
-                onChange={() => {}}
-            />,
-        );
-
-        expect(container).toMatchSnapshot();
-    });
-
-    it("should render phone numbers", async () => {
-        const { container } = render(
-            <AddRemoveThreepids
-                mode="hs"
-                medium={ThreepidMedium.Phone}
-                threepids={[PHONE1]}
-                isLoading={false}
-                onChange={() => {}}
-            />,
-        );
-
-        expect(container).toMatchSnapshot();
-    });
-
     it("should handle no email addresses", async () => {
         const { container } = render(
             <AddRemoveThreepids
@@ -106,6 +66,7 @@ describe("AddRemoveThreepids", () => {
             />,
         );
 
+        await expect(screen.findByText("Email Address")).resolves.toBeVisible();
         expect(container).toMatchSnapshot();
     });
 
@@ -126,7 +87,7 @@ describe("AddRemoveThreepids", () => {
             },
         );
 
-        const input = screen.getByRole("textbox", { name: "Email Address" });
+        const input = await screen.findByRole("textbox", { name: "Email Address" });
         await userEvent.type(input, EMAIL1.address);
         const addButton = screen.getByRole("button", { name: "Add" });
         await userEvent.click(addButton);
@@ -165,7 +126,7 @@ describe("AddRemoveThreepids", () => {
             },
         );
 
-        const input = screen.getByRole("textbox", { name: "Email Address" });
+        const input = await screen.findByRole("textbox", { name: "Email Address" });
         await userEvent.type(input, EMAIL1.address);
         const addButton = screen.getByRole("button", { name: "Add" });
         await userEvent.click(addButton);
@@ -209,7 +170,7 @@ describe("AddRemoveThreepids", () => {
             },
         );
 
-        const countryDropdown = screen.getByRole("button", { name: /Country Dropdown/ });
+        const countryDropdown = await screen.findByRole("button", { name: /Country Dropdown/ });
         await userEvent.click(countryDropdown);
         const gbOption = screen.getByRole("option", { name: "🇬🇧 United Kingdom (+44)" });
         await userEvent.click(gbOption);
@@ -222,13 +183,13 @@ describe("AddRemoveThreepids", () => {
 
         const continueButton = await screen.findByRole("button", { name: /Continue/ });
 
-        await expect(continueButton).toHaveAttribute("aria-disabled", "true");
+        expect(continueButton).toHaveAttribute("aria-disabled", "true");
 
         await expect(
-            await screen.findByText(
+            screen.findByText(
                 `A text message has been sent to +${PHONE1.address}. Please enter the verification code it contains.`,
             ),
-        ).toBeInTheDocument();
+        ).resolves.toBeInTheDocument();
 
         expect(client.requestAdd3pidMsisdnToken).toHaveBeenCalledWith(
             "GB",
@@ -269,7 +230,7 @@ describe("AddRemoveThreepids", () => {
             },
         );
 
-        const removeButton = screen.getByRole("button", { name: /Remove/ });
+        const removeButton = await screen.findByRole("button", { name: /Remove/ });
         await userEvent.click(removeButton);
 
         expect(screen.getByText(`Remove ${EMAIL1.address}?`)).toBeVisible();
@@ -296,7 +257,7 @@ describe("AddRemoveThreepids", () => {
             },
         );
 
-        const removeButton = screen.getByRole("button", { name: /Remove/ });
+        const removeButton = await screen.findByRole("button", { name: /Remove/ });
         await userEvent.click(removeButton);
 
         expect(screen.getByText(`Remove ${EMAIL1.address}?`)).toBeVisible();
@@ -325,7 +286,7 @@ describe("AddRemoveThreepids", () => {
             },
         );
 
-        const removeButton = screen.getByRole("button", { name: /Remove/ });
+        const removeButton = await screen.findByRole("button", { name: /Remove/ });
         await userEvent.click(removeButton);
 
         expect(screen.getByText(`Remove ${PHONE1.address}?`)).toBeVisible();
@@ -356,7 +317,7 @@ describe("AddRemoveThreepids", () => {
             },
         );
 
-        expect(screen.getByText(EMAIL1.address)).toBeVisible();
+        await expect(screen.findByText(EMAIL1.address)).resolves.toBeVisible();
         const shareButton = screen.getByRole("button", { name: /Share/ });
         await userEvent.click(shareButton);
 
@@ -407,7 +368,7 @@ describe("AddRemoveThreepids", () => {
             },
         );
 
-        expect(screen.getByText(PHONE1.address)).toBeVisible();
+        await expect(screen.findByText(PHONE1.address)).resolves.toBeVisible();
         const shareButton = screen.getByRole("button", { name: /Share/ });
         await userEvent.click(shareButton);
 
@@ -451,7 +412,7 @@ describe("AddRemoveThreepids", () => {
             },
         );
 
-        expect(screen.getByText(EMAIL1.address)).toBeVisible();
+        await expect(screen.findByText(EMAIL1.address)).resolves.toBeVisible();
         const revokeButton = screen.getByRole("button", { name: /Revoke/ });
         await userEvent.click(revokeButton);
 
@@ -474,11 +435,169 @@ describe("AddRemoveThreepids", () => {
             },
         );
 
-        expect(screen.getByText(PHONE1.address)).toBeVisible();
+        await expect(screen.findByText(PHONE1.address)).resolves.toBeVisible();
         const revokeButton = screen.getByRole("button", { name: /Revoke/ });
         await userEvent.click(revokeButton);
 
         expect(client.unbindThreePid).toHaveBeenCalledWith(ThreepidMedium.Phone, PHONE1.address);
         expect(onChangeFn).toHaveBeenCalled();
     });
+
+    it("should show UIA dialog when necessary for adding email", async () => {
+        const onChangeFn = jest.fn();
+        const createDialogFn = jest.spyOn(Modal, "createDialog");
+        mocked(client.requestAdd3pidEmailToken).mockResolvedValue({ sid: "1" });
+
+        render(
+            <AddRemoveThreepids
+                mode="hs"
+                medium={ThreepidMedium.Email}
+                threepids={[]}
+                isLoading={false}
+                onChange={onChangeFn}
+            />,
+            {
+                wrapper: clientProviderWrapper,
+            },
+        );
+
+        const input = screen.getByRole("textbox", { name: "Email Address" });
+        await userEvent.type(input, EMAIL1.address);
+        const addButton = screen.getByRole("button", { name: "Add" });
+        await userEvent.click(addButton);
+
+        const continueButton = screen.getByRole("button", { name: "Continue" });
+
+        expect(continueButton).toBeEnabled();
+
+        mocked(client).addThreePidOnly.mockRejectedValueOnce(
+            new MatrixError({ errcode: "M_UNAUTHORIZED", flows: [{ stages: [] }] }, 401),
+        );
+
+        await userEvent.click(continueButton);
+
+        expect(createDialogFn).toHaveBeenCalledWith(
+            InteractiveAuthDialog,
+            expect.objectContaining({
+                title: "Add Email Address",
+                makeRequest: expect.any(Function),
+            }),
+        );
+    });
+
+    it("should show UIA dialog when necessary for adding msisdn", async () => {
+        const onChangeFn = jest.fn();
+        const createDialogFn = jest.spyOn(Modal, "createDialog");
+        mocked(client.requestAdd3pidMsisdnToken).mockResolvedValue({
+            sid: "1",
+            msisdn: PHONE1.address,
+            intl_fmt: PHONE1.address,
+            success: true,
+            submit_url: "https://some-url",
+        });
+
+        render(
+            <AddRemoveThreepids
+                mode="hs"
+                medium={ThreepidMedium.Phone}
+                threepids={[]}
+                isLoading={false}
+                onChange={onChangeFn}
+            />,
+            {
+                wrapper: clientProviderWrapper,
+            },
+        );
+
+        const countryDropdown = screen.getByRole("button", { name: /Country Dropdown/ });
+        await userEvent.click(countryDropdown);
+        const gbOption = screen.getByRole("option", { name: "🇬🇧 United Kingdom (+44)" });
+        await userEvent.click(gbOption);
+
+        const input = screen.getByRole("textbox", { name: "Phone Number" });
+        await userEvent.type(input, PHONE1_LOCALNUM);
+
+        const addButton = screen.getByRole("button", { name: "Add" });
+        await userEvent.click(addButton);
+
+        const continueButton = screen.getByRole("button", { name: "Continue" });
+
+        expect(continueButton).toHaveAttribute("aria-disabled", "true");
+
+        await expect(
+            screen.findByText(
+                `A text message has been sent to +${PHONE1.address}. Please enter the verification code it contains.`,
+            ),
+        ).resolves.toBeInTheDocument();
+
+        expect(client.requestAdd3pidMsisdnToken).toHaveBeenCalledWith(
+            "GB",
+            PHONE1_LOCALNUM,
+            client.generateClientSecret(),
+            1,
+        );
+
+        const verificationInput = screen.getByRole("textbox", { name: "Verification code" });
+        await userEvent.type(verificationInput, "123456");
+
+        expect(continueButton).not.toHaveAttribute("aria-disabled", "true");
+
+        mocked(client).addThreePidOnly.mockRejectedValueOnce(
+            new MatrixError({ errcode: "M_UNAUTHORIZED", flows: [{ stages: [] }] }, 401),
+        );
+
+        await userEvent.click(continueButton);
+
+        expect(createDialogFn).toHaveBeenCalledWith(
+            InteractiveAuthDialog,
+            expect.objectContaining({
+                title: "Add Phone Number",
+                makeRequest: expect.any(Function),
+            }),
+        );
+    });
+
+    it("should render a loader while loading", async () => {
+        render(
+            <AddRemoveThreepids
+                mode="hs"
+                medium={ThreepidMedium.Email}
+                threepids={[]}
+                isLoading={true}
+                onChange={() => {}}
+            />,
+        );
+
+        expect(screen.getByLabelText("Loading…")).toBeInTheDocument();
+    });
+
+    it("should render email addresses", async () => {
+        const { container } = render(
+            <AddRemoveThreepids
+                mode="hs"
+                medium={ThreepidMedium.Email}
+                threepids={[EMAIL1]}
+                isLoading={false}
+                onChange={() => {}}
+            />,
+        );
+
+        await expect(screen.findByText(EMAIL1.address)).resolves.toBeVisible();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should render phone numbers", async () => {
+        const { container } = render(
+            <AddRemoveThreepids
+                mode="hs"
+                medium={ThreepidMedium.Phone}
+                threepids={[PHONE1]}
+                isLoading={false}
+                onChange={() => {}}
+            />,
+        );
+
+        await expect(screen.findByText(PHONE1.address)).resolves.toBeVisible();
+        expect(container).toMatchSnapshot();
+    });
 });

test/unit-tests/components/views/settings/AvatarSetting-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 import React from "react";
-import { render, screen } from "jest-matrix-react";
+import { render, screen, fireEvent } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 
 import AvatarSetting from "../../../../../src/components/views/settings/AvatarSetting";
@@ -16,6 +16,9 @@ const BASE64_GIF = "R0lGODlhAQABAAAAACw=";
 const AVATAR_FILE = new File([Uint8Array.from(atob(BASE64_GIF), (c) => c.charCodeAt(0))], "avatar.gif", {
     type: "image/gif",
 });
+const GENERIC_FILE = new File([Uint8Array.from(atob(BASE64_GIF), (c) => c.charCodeAt(0))], "not-avatar.doc", {
+    type: "application/msword",
+});
 
 describe("<AvatarSetting />", () => {
     beforeEach(() => {
@@ -70,4 +73,45 @@ describe("<AvatarSetting />", () => {
 
         expect(onChange).toHaveBeenCalledWith(AVATAR_FILE);
     });
+
+    it("should noop when selecting no file", async () => {
+        const onChange = jest.fn();
+
+        render(
+            <AvatarSetting
+                placeholderId="blee"
+                placeholderName="boo"
+                avatar="mxc://example.org/my-avatar"
+                avatarAltText="Avatar of Peter Fox"
+                onChange={onChange}
+            />,
+        );
+
+        const fileInput = screen.getByAltText("Upload");
+        // Can't use userEvent.upload here as it doesn't support uploading invalid files
+        fireEvent.change(fileInput, { target: { files: [] } });
+
+        expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it("should show error if user tries to use non-image file", async () => {
+        const onChange = jest.fn();
+
+        render(
+            <AvatarSetting
+                placeholderId="blee"
+                placeholderName="boo"
+                avatar="mxc://example.org/my-avatar"
+                avatarAltText="Avatar of Peter Fox"
+                onChange={onChange}
+            />,
+        );
+
+        const fileInput = screen.getByAltText("Upload");
+        // Can't use userEvent.upload here as it doesn't support uploading invalid files
+        fireEvent.change(fileInput, { target: { files: [GENERIC_FILE] } });
+
+        expect(onChange).not.toHaveBeenCalled();
+        await expect(screen.findByRole("heading", { name: "Upload Failed" })).resolves.toBeInTheDocument();
+    });
 });

test/unit-tests/components/views/settings/CryptographyPanel-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, waitFor } from "jest-matrix-react";
+import { render, waitFor, screen, fireEvent } from "jest-matrix-react";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
 
@@ -64,4 +64,34 @@ describe("CryptographyPanel", () => {
         // Then "not supported key
         await waitFor(() => expect(codes[1].innerHTML).toEqual("<strong>&lt;not supported&gt;</strong>"));
     });
+
+    it("should open the export e2e keys dialog on click", async () => {
+        const sessionId = "ABCDEFGHIJ";
+        const sessionKey = "AbCDeFghIJK7L/m4nOPqRSTUVW4xyzaBCDef6gHIJkl";
+
+        TestUtils.stubClient();
+        const client: MatrixClient = MatrixClientPeg.safeGet();
+        client.deviceId = sessionId;
+
+        mocked(client.getCrypto()!.getOwnDeviceKeys).mockResolvedValue({ ed25519: sessionKey, curve25519: "1234" });
+
+        render(<CryptographyPanel />, withClientContextRenderOptions(client));
+        fireEvent.click(await screen.findByRole("button", { name: "Export E2E room keys" }));
+        await expect(screen.findByRole("heading", { name: "Export room keys" })).resolves.toBeInTheDocument();
+    });
+
+    it("should open the import e2e keys dialog on click", async () => {
+        const sessionId = "ABCDEFGHIJ";
+        const sessionKey = "AbCDeFghIJK7L/m4nOPqRSTUVW4xyzaBCDef6gHIJkl";
+
+        TestUtils.stubClient();
+        const client: MatrixClient = MatrixClientPeg.safeGet();
+        client.deviceId = sessionId;
+
+        mocked(client.getCrypto()!.getOwnDeviceKeys).mockResolvedValue({ ed25519: sessionKey, curve25519: "1234" });
+
+        render(<CryptographyPanel />, withClientContextRenderOptions(client));
+        fireEvent.click(await screen.findByRole("button", { name: "Import E2E room keys" }));
+        await expect(screen.findByRole("heading", { name: "Import room keys" })).resolves.toBeInTheDocument();
+    });
 });

test/unit-tests/components/views/settings/JoinRuleSettings-test.tsx

@@ -59,7 +59,7 @@ describe("<JoinRuleSettings />", () => {
         onError: jest.fn(),
     };
     const getComponent = (props: Partial<JoinRuleSettingsProps> = {}) =>
-        render(<JoinRuleSettings {...defaultProps} {...props} />, { legacyRoot: false });
+        render(<JoinRuleSettings {...defaultProps} {...props} />);
 
     const setRoomStateEvents = (
         room: Room,

test/unit-tests/components/views/settings/SecureBackupPanel-test.tsx

@@ -28,14 +28,13 @@ describe("<SecureBackupPanel />", () => {
     const client = getMockClientWithEventEmitter({
         ...mockClientMethodsUser(userId),
         ...mockClientMethodsCrypto(),
-        getKeyBackupVersion: jest.fn().mockReturnValue("1"),
         getClientWellKnown: jest.fn(),
     });
 
     const getComponent = () => render(<SecureBackupPanel />);
 
     beforeEach(() => {
-        client.getKeyBackupVersion.mockResolvedValue({
+        jest.spyOn(client.getCrypto()!, "getKeyBackupInfo").mockResolvedValue({
             version: "1",
             algorithm: "test",
             auth_data: {
@@ -52,7 +51,6 @@ describe("<SecureBackupPanel />", () => {
         });
 
         mocked(client.secretStorage.hasKey).mockClear().mockResolvedValue(false);
-        client.getKeyBackupVersion.mockClear();
 
         mocked(accessSecretStorage).mockClear().mockResolvedValue();
     });
@@ -65,8 +63,8 @@ describe("<SecureBackupPanel />", () => {
     });
 
     it("handles error fetching backup", async () => {
-        // getKeyBackupVersion can fail for various reasons
-        client.getKeyBackupVersion.mockImplementation(async () => {
+        // getKeyBackupInfo can fail for various reasons
+        jest.spyOn(client.getCrypto()!, "getKeyBackupInfo").mockImplementation(async () => {
             throw new Error("beep beep");
         });
         const renderResult = getComponent();
@@ -75,9 +73,9 @@ describe("<SecureBackupPanel />", () => {
     });
 
     it("handles absence of backup", async () => {
-        client.getKeyBackupVersion.mockResolvedValue(null);
+        jest.spyOn(client.getCrypto()!, "getKeyBackupInfo").mockResolvedValue(null);
         getComponent();
-        // flush getKeyBackupVersion promise
+        // flush getKeyBackupInfo promise
         await flushPromises();
         expect(screen.getByText("Back up your keys before signing out to avoid losing them.")).toBeInTheDocument();
     });
@@ -120,7 +118,7 @@ describe("<SecureBackupPanel />", () => {
     });
 
     it("deletes backup after confirmation", async () => {
-        client.getKeyBackupVersion
+        jest.spyOn(client.getCrypto()!, "getKeyBackupInfo")
             .mockResolvedValueOnce({
                 version: "1",
                 algorithm: "test",
@@ -157,7 +155,7 @@ describe("<SecureBackupPanel />", () => {
         // flush checkKeyBackup promise
         await flushPromises();
 
-        client.getKeyBackupVersion.mockClear();
+        jest.spyOn(client.getCrypto()!, "getKeyBackupInfo").mockClear();
         mocked(client.getCrypto()!).isKeyBackupTrusted.mockClear();
 
         fireEvent.click(screen.getByText("Reset"));
@@ -167,7 +165,7 @@ describe("<SecureBackupPanel />", () => {
         await flushPromises();
 
         // backup status refreshed
-        expect(client.getKeyBackupVersion).toHaveBeenCalled();
+        expect(client.getCrypto()!.getKeyBackupInfo).toHaveBeenCalled();
         expect(client.getCrypto()!.isKeyBackupTrusted).toHaveBeenCalled();
     });
 });

test/unit-tests/components/views/settings/__snapshots__/AddRemoveThreepids-test.tsx.snap

@@ -11,14 +11,14 @@ exports[`AddRemoveThreepids should handle no email addresses 1`] = `
     >
       <input
         autocomplete="email"
-        id="mx_Field_3"
+        id="mx_Field_1"
         label="Email Address"
         placeholder="Email Address"
         type="text"
         value=""
       />
       <label
-        for="mx_Field_3"
+        for="mx_Field_1"
       >
         Email Address
       </label>
@@ -61,14 +61,14 @@ exports[`AddRemoveThreepids should render email addresses 1`] = `
     >
       <input
         autocomplete="email"
-        id="mx_Field_1"
+        id="mx_Field_14"
         label="Email Address"
         placeholder="Email Address"
         type="text"
         value=""
       />
       <label
-        for="mx_Field_1"
+        for="mx_Field_14"
       >
         Email Address
       </label>
@@ -148,14 +148,14 @@ exports[`AddRemoveThreepids should render phone numbers 1`] = `
       </span>
       <input
         autocomplete="tel-national"
-        id="mx_Field_2"
+        id="mx_Field_15"
         label="Phone Number"
         placeholder="Phone Number"
         type="text"
         value=""
       />
       <label
-        for="mx_Field_2"
+        for="mx_Field_15"
       >
         Phone Number
       </label>

test/unit-tests/components/views/settings/devices/LoginWithQR-test.tsx

@@ -79,9 +79,7 @@ describe("<LoginWithQR />", () => {
 
     describe("MSC4108", () => {
         const getComponent = (props: { client: MatrixClient; onFinished?: () => void }) => (
-            <React.StrictMode>
-                <LoginWithQR {...defaultProps} {...props} />
-            </React.StrictMode>
+            <LoginWithQR {...defaultProps} {...props} />
         );
 
         test("render QR then back", async () => {

test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap

@@ -263,9 +263,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
             role="button"
             tabindex="0"
           >
-            <div
+            <svg
               class="mx_DeviceExpandDetailsButton_icon"
-            />
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+              />
+            </svg>
           </div>
         </div>
       </div>
@@ -416,9 +425,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
             role="button"
             tabindex="0"
           >
-            <div
+            <svg
               class="mx_DeviceExpandDetailsButton_icon"
-            />
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+              />
+            </svg>
           </div>
         </div>
       </div>

test/unit-tests/components/views/settings/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap

@@ -9,9 +9,18 @@ exports[`<DeviceExpandDetailsButton /> renders when expanded 1`] = `
       role="button"
       tabindex="0"
     >
-      <div
+      <svg
         class="mx_DeviceExpandDetailsButton_icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+        />
+      </svg>
     </div>
   </div>,
 }
@@ -26,9 +35,18 @@ exports[`<DeviceExpandDetailsButton /> renders when not expanded 1`] = `
       role="button"
       tabindex="0"
     >
-      <div
+      <svg
         class="mx_DeviceExpandDetailsButton_icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+        />
+      </svg>
     </div>
   </div>,
 }

test/unit-tests/components/views/settings/discovery/DiscoverySettings-test.tsx

@@ -12,7 +12,7 @@ import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
 import userEvent from "@testing-library/user-event";
 
-import DiscoverySettings from "../../../../../../src/components/views/settings/discovery/DiscoverySettings";
+import { DiscoverySettings } from "../../../../../../src/components/views/settings/discovery/DiscoverySettings";
 import { stubClient } from "../../../../../test-utils";
 import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
 import { UIFeature } from "../../../../../../src/settings/UIFeature";

test/unit-tests/components/views/settings/shared/SettingsSubsection-test.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { render } from "jest-matrix-react";
 
-import SettingsSubsection from "../../../../../../src/components/views/settings/shared/SettingsSubsection";
+import { SettingsSubsection } from "../../../../../../src/components/views/settings/shared/SettingsSubsection";
 
 describe("<SettingsSubsection />", () => {
     const defaultProps = {

test/unit-tests/components/views/settings/tabs/room/RolesRoomSettingsTab-test.tsx

@@ -27,16 +27,19 @@ describe("RolesRoomSettingsTab", () => {
     let cli: MatrixClient;
     let room: Room;
 
-    const renderTab = (propRoom: Room = room): RenderResult => {
-        return render(<RolesRoomSettingsTab room={propRoom} />, withClientContextRenderOptions(cli));
+    const renderTab = async (propRoom: Room = room): Promise<RenderResult> => {
+        const renderResult = render(<RolesRoomSettingsTab room={propRoom} />, withClientContextRenderOptions(cli));
+        // Wait for the tab to be ready
+        await waitFor(() => expect(screen.getByText("Permissions")).toBeInTheDocument());
+        return renderResult;
     };
 
-    const getVoiceBroadcastsSelect = (): HTMLElement => {
-        return renderTab().container.querySelector("select[label='Voice broadcasts']")!;
+    const getVoiceBroadcastsSelect = async (): Promise<Element> => {
+        return (await renderTab()).container.querySelector("select[label='Voice broadcasts']")!;
     };
 
-    const getVoiceBroadcastsSelectedOption = (): HTMLElement => {
-        return renderTab().container.querySelector("select[label='Voice broadcasts'] option:checked")!;
+    const getVoiceBroadcastsSelectedOption = async (): Promise<Element> => {
+        return (await renderTab()).container.querySelector("select[label='Voice broadcasts'] option:checked")!;
     };
 
     beforeEach(() => {
@@ -45,7 +48,7 @@ describe("RolesRoomSettingsTab", () => {
         room = mkStubRoom(roomId, "test room", cli);
     });
 
-    it("should allow an Admin to demote themselves but not others", () => {
+    it("should allow an Admin to demote themselves but not others", async () => {
         mocked(cli.getRoom).mockReturnValue(room);
         // @ts-ignore - mocked doesn't support overloads properly
         mocked(room.currentState.getStateEvents).mockImplementation((type, key) => {
@@ -67,19 +70,19 @@ describe("RolesRoomSettingsTab", () => {
             return null;
         });
         mocked(room.currentState.mayClientSendStateEvent).mockReturnValue(true);
-        const { container } = renderTab();
+        const { container } = await renderTab();
 
         expect(container.querySelector(`[placeholder="${cli.getUserId()}"]`)).not.toBeDisabled();
         expect(container.querySelector(`[placeholder="@admin:server"]`)).toBeDisabled();
     });
 
-    it("should initially show »Moderator« permission for »Voice broadcasts«", () => {
-        expect(getVoiceBroadcastsSelectedOption().textContent).toBe("Moderator");
+    it("should initially show »Moderator« permission for »Voice broadcasts«", async () => {
+        expect((await getVoiceBroadcastsSelectedOption()).textContent).toBe("Moderator");
     });
 
     describe("when setting »Default« permission for »Voice broadcasts«", () => {
-        beforeEach(() => {
-            fireEvent.change(getVoiceBroadcastsSelect(), {
+        beforeEach(async () => {
+            fireEvent.change(await getVoiceBroadcastsSelect(), {
                 target: { value: 0 },
             });
         });
@@ -122,12 +125,12 @@ describe("RolesRoomSettingsTab", () => {
             });
 
             describe("Join Element calls", () => {
-                it("defaults to moderator for joining calls", () => {
-                    expect(getJoinCallSelectedOption(renderTab())?.textContent).toBe("Moderator");
+                it("defaults to moderator for joining calls", async () => {
+                    expect(getJoinCallSelectedOption(await renderTab())?.textContent).toBe("Moderator");
                 });
 
-                it("can change joining calls power level", () => {
-                    const tab = renderTab();
+                it("can change joining calls power level", async () => {
+                    const tab = await renderTab();
 
                     fireEvent.change(getJoinCallSelect(tab), {
                         target: { value: 0 },
@@ -143,12 +146,12 @@ describe("RolesRoomSettingsTab", () => {
             });
 
             describe("Start Element calls", () => {
-                it("defaults to moderator for starting calls", () => {
-                    expect(getStartCallSelectedOption(renderTab())?.textContent).toBe("Moderator");
+                it("defaults to moderator for starting calls", async () => {
+                    expect(getStartCallSelectedOption(await renderTab())?.textContent).toBe("Moderator");
                 });
 
-                it("can change starting calls power level", () => {
-                    const tab = renderTab();
+                it("can change starting calls power level", async () => {
+                    const tab = await renderTab();
 
                     fireEvent.change(getStartCallSelect(tab), {
                         target: { value: 0 },
@@ -164,10 +167,10 @@ describe("RolesRoomSettingsTab", () => {
             });
         });
 
-        it("hides when group calls disabled", () => {
+        it("hides when group calls disabled", async () => {
             setGroupCallsEnabled(false);
 
-            const tab = renderTab();
+            const tab = await renderTab();
 
             expect(getStartCallSelect(tab)).toBeFalsy();
             expect(getStartCallSelectedOption(tab)).toBeFalsy();
@@ -250,7 +253,7 @@ describe("RolesRoomSettingsTab", () => {
             return null;
         });
         mocked(room.currentState.mayClientSendStateEvent).mockReturnValue(true);
-        const { container } = renderTab();
+        const { container } = await renderTab();
 
         const selector = container.querySelector(`[placeholder="${cli.getUserId()}"]`)!;
         fireEvent.change(selector, { target: { value: "50" } });

test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx

@@ -75,7 +75,7 @@ describe("<SecurityRoomSettingsTab />", () => {
 
     beforeEach(async () => {
         client.sendStateEvent.mockReset().mockResolvedValue({ event_id: "test" });
-        client.isRoomEncrypted.mockReturnValue(false);
+        jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
         client.getClientWellKnown.mockReturnValue(undefined);
         jest.spyOn(SettingsStore, "getValue").mockRestore();
 
@@ -313,7 +313,7 @@ describe("<SecurityRoomSettingsTab />", () => {
             setRoomStateEvents(room);
             getComponent(room);
 
-            expect(screen.getByLabelText("Encrypted")).not.toBeChecked();
+            await waitFor(() => expect(screen.getByLabelText("Encrypted")).not.toBeChecked());
 
             fireEvent.click(screen.getByLabelText("Encrypted"));
 
@@ -330,7 +330,7 @@ describe("<SecurityRoomSettingsTab />", () => {
             setRoomStateEvents(room);
             getComponent(room);
 
-            expect(screen.getByLabelText("Encrypted")).not.toBeChecked();
+            await waitFor(() => expect(screen.getByLabelText("Encrypted")).not.toBeChecked());
 
             fireEvent.click(screen.getByLabelText("Encrypted"));
 
@@ -416,12 +416,12 @@ describe("<SecurityRoomSettingsTab />", () => {
                 expect(screen.getByText("Once enabled, encryption cannot be disabled.")).toBeInTheDocument();
             });
 
-            it("displays unencrypted rooms with toggle disabled", () => {
+            it("displays unencrypted rooms with toggle disabled", async () => {
                 const room = new Room(roomId, client, userId);
                 setRoomStateEvents(room);
                 getComponent(room);
 
-                expect(screen.getByLabelText("Encrypted")).not.toBeChecked();
+                await waitFor(() => expect(screen.getByLabelText("Encrypted")).not.toBeChecked());
                 expect(screen.getByLabelText("Encrypted").getAttribute("aria-disabled")).toEqual("true");
                 expect(screen.queryByText("Once enabled, encryption cannot be disabled.")).not.toBeInTheDocument();
                 expect(screen.getByText("Your server requires encryption to be disabled.")).toBeInTheDocument();

test/unit-tests/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx

@@ -34,7 +34,6 @@ describe("<SecurityUserSettingsTab />", () => {
         ...mockClientMethodsCrypto(),
         getRooms: jest.fn().mockReturnValue([]),
         getIgnoredUsers: jest.fn(),
-        getKeyBackupVersion: jest.fn(),
     });
 
     const sdkContext = new SdkContextClass();

test/unit-tests/components/views/settings/tabs/user/SessionManagerTab-test.tsx

@@ -277,9 +277,7 @@ describe("<SessionManagerTab />", () => {
         mockClient.getDevices.mockRejectedValue({ httpStatus: 404 });
         const { container } = render(getComponent());
 
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
         expect(container.getElementsByClassName("mx_Spinner").length).toBeFalsy();
     });
 
@@ -302,9 +300,7 @@ describe("<SessionManagerTab />", () => {
 
         const { getByTestId } = render(getComponent());
 
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
 
         expect(mockCrypto.getDeviceVerificationStatus).toHaveBeenCalledTimes(3);
         expect(
@@ -337,9 +333,7 @@ describe("<SessionManagerTab />", () => {
 
         const { getByTestId } = render(getComponent());
 
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
 
         // twice for each device
         expect(mockClient.getAccountData).toHaveBeenCalledTimes(4);
@@ -356,9 +350,7 @@ describe("<SessionManagerTab />", () => {
 
         const { getByTestId, queryByTestId } = render(getComponent());
 
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
 
         toggleDeviceDetails(getByTestId, alicesDevice.device_id);
         // application metadata section not rendered
@@ -369,9 +361,7 @@ describe("<SessionManagerTab />", () => {
         mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice] });
         const { queryByTestId } = render(getComponent());
 
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
 
         expect(queryByTestId("other-sessions-section")).toBeFalsy();
     });
@@ -382,9 +372,7 @@ describe("<SessionManagerTab />", () => {
         });
         const { getByTestId } = render(getComponent());
 
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
 
         expect(getByTestId("other-sessions-section")).toBeTruthy();
     });
@@ -395,9 +383,7 @@ describe("<SessionManagerTab />", () => {
         });
         const { getByTestId, container } = render(getComponent());
 
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
 
         fireEvent.click(getByTestId("unverified-devices-cta"));
 
@@ -908,7 +894,8 @@ describe("<SessionManagerTab />", () => {
             });
 
             it("deletes a device when interactive auth is not required", async () => {
-                mockClient.deleteMultipleDevices.mockResolvedValue({});
+                const deferredDeleteMultipleDevices = defer<{}>();
+                mockClient.deleteMultipleDevices.mockReturnValue(deferredDeleteMultipleDevices.promise);
                 mockClient.getDevices.mockResolvedValue({
                     devices: [alicesDevice, alicesMobileDevice, alicesOlderMobileDevice],
                 });
@@ -933,6 +920,7 @@ describe("<SessionManagerTab />", () => {
                 fireEvent.click(signOutButton);
                 await confirmSignout(getByTestId);
                 await prom;
+                deferredDeleteMultipleDevices.resolve({});
 
                 // delete called
                 expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith(
@@ -991,7 +979,7 @@ describe("<SessionManagerTab />", () => {
 
                 const { getByTestId, getByLabelText } = render(getComponent());
 
-                await act(flushPromises);
+                await flushPromises();
 
                 // reset mock count after initial load
                 mockClient.getDevices.mockClear();
@@ -1025,7 +1013,7 @@ describe("<SessionManagerTab />", () => {
                     fireEvent.submit(getByLabelText("Password"));
                 });
 
-                await act(flushPromises);
+                await flushPromises();
 
                 // called again with auth
                 expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith([alicesMobileDevice.device_id], {
@@ -1551,7 +1539,7 @@ describe("<SessionManagerTab />", () => {
                 });
                 const { getByTestId, container } = render(getComponent());
 
-                await act(flushPromises);
+                await flushPromises();
 
                 // filter for inactive sessions
                 await setFilter(container, DeviceSecurityVariation.Inactive);
@@ -1577,9 +1565,7 @@ describe("<SessionManagerTab />", () => {
     it("lets you change the pusher state", async () => {
         const { getByTestId } = render(getComponent());
 
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
 
         toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
 
@@ -1598,9 +1584,7 @@ describe("<SessionManagerTab />", () => {
     it("lets you change the local notification settings state", async () => {
         const { getByTestId } = render(getComponent());
 
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
 
         toggleDeviceDetails(getByTestId, alicesDevice.device_id);
 
@@ -1621,9 +1605,7 @@ describe("<SessionManagerTab />", () => {
     it("updates the UI when another session changes the local notifications", async () => {
         const { getByTestId } = render(getComponent());
 
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
 
         toggleDeviceDetails(getByTestId, alicesDevice.device_id);
 

test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap

@@ -42,14 +42,14 @@ exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses an
       >
         <input
           autocomplete="email"
-          id="mx_Field_9"
+          id="mx_Field_3"
           label="Email Address"
           placeholder="Email Address"
           type="text"
           value=""
         />
         <label
-          for="mx_Field_9"
+          for="mx_Field_3"
         >
           Email Address
         </label>
@@ -145,14 +145,14 @@ exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses an
         </span>
         <input
           autocomplete="tel-national"
-          id="mx_Field_10"
+          id="mx_Field_4"
           label="Phone Number"
           placeholder="Phone Number"
           type="text"
           value=""
         />
         <label
-          for="mx_Field_10"
+          for="mx_Field_4"
         >
           Phone Number
         </label>

test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap

@@ -163,9 +163,18 @@ exports[`<SessionManagerTab /> current session section renders current session s
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_DeviceExpandDetailsButton_icon"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+            />
+          </svg>
         </div>
       </div>
     </div>
@@ -302,9 +311,18 @@ exports[`<SessionManagerTab /> current session section renders current session s
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_DeviceExpandDetailsButton_icon"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+            />
+          </svg>
         </div>
       </div>
     </div>
@@ -370,7 +388,7 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
     >
       <input
         aria-label="Select all"
-        aria-labelledby=":r4e:"
+        aria-labelledby=":r3s:"
         data-testid="device-select-all-checkbox"
         id="device-select-all-checkbox"
         type="checkbox"

test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap

@@ -61,7 +61,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     <div
                       class="mx_SettingsSubsection_text"
                     >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="m12.971 3.54 7 3.889A2 2 0 0 1 21 9.177V19a2 2 0 0 1-2 2h-4v-9H9v9H5a2 2 0 0 1-2-2V9.177a2 2 0 0 1 1.029-1.748l7-3.89a2 2 0 0 1 1.942 0Z"
+                        />
+                      </svg>
                       Home
                     </div>
                     <div
@@ -125,7 +135,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     <div
                       class="mx_SettingsSubsection_text"
                     >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="m12.897 2.817 2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759 2.336-4.733a1 1 0 0 1 1.794 0Z"
+                        />
+                      </svg>
                       Favourites
                     </div>
                     <div
@@ -157,7 +177,20 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     <div
                       class="mx_SettingsSubsection_text"
                     >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12 15c-1.1 0-2.042-.392-2.825-1.175C8.392 13.042 8 12.1 8 11s.392-2.042 1.175-2.825C9.958 7.392 10.9 7 12 7s2.042.392 2.825 1.175C15.608 8.958 16 9.9 16 11s-.392 2.042-1.175 2.825C14.042 14.608 13.1 15 12 15Z"
+                        />
+                        <path
+                          d="M19.528 18.583A9.962 9.962 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 2.52.933 4.824 2.472 6.583A9.976 9.976 0 0 0 12 22a9.976 9.976 0 0 0 7.528-3.417ZM8.75 16.388c-.915.221-1.818.538-2.709.95a8 8 0 1 1 11.918 0 14.679 14.679 0 0 0-2.709-.95A13.76 13.76 0 0 0 12 16c-1.1 0-2.183.13-3.25.387Z"
+                        />
+                      </svg>
                       People
                     </div>
                     <div
@@ -312,7 +345,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     <div
                       class="mx_SettingsSubsection_text"
                     >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="m12.971 3.54 7 3.889A2 2 0 0 1 21 9.177V19a2 2 0 0 1-2 2h-4v-9H9v9H5a2 2 0 0 1-2-2V9.177a2 2 0 0 1 1.029-1.748l7-3.89a2 2 0 0 1 1.942 0Z"
+                        />
+                      </svg>
                       Home
                     </div>
                     <div
@@ -376,7 +419,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     <div
                       class="mx_SettingsSubsection_text"
                     >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="m12.897 2.817 2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759 2.336-4.733a1 1 0 0 1 1.794 0Z"
+                        />
+                      </svg>
                       Favourites
                     </div>
                     <div
@@ -408,7 +461,20 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     <div
                       class="mx_SettingsSubsection_text"
                     >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12 15c-1.1 0-2.042-.392-2.825-1.175C8.392 13.042 8 12.1 8 11s.392-2.042 1.175-2.825C9.958 7.392 10.9 7 12 7s2.042.392 2.825 1.175C15.608 8.958 16 9.9 16 11s-.392 2.042-1.175 2.825C14.042 14.608 13.1 15 12 15Z"
+                        />
+                        <path
+                          d="M19.528 18.583A9.962 9.962 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 2.52.933 4.824 2.472 6.583A9.976 9.976 0 0 0 12 22a9.976 9.976 0 0 0 7.528-3.417ZM8.75 16.388c-.915.221-1.818.538-2.709.95a8 8 0 1 1 11.918 0 14.679 14.679 0 0 0-2.709-.95A13.76 13.76 0 0 0 12 16c-1.1 0-2.183.13-3.25.387Z"
+                        />
+                      </svg>
                       People
                     </div>
                     <div

test/unit-tests/components/views/toasts/VerificationRequestToast-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { ComponentProps } from "react";
 import { mocked, Mocked } from "jest-mock";
-import { act, render, RenderResult } from "jest-matrix-react";
+import { render, RenderResult } from "jest-matrix-react";
 import { TypedEventEmitter, IMyDevice, MatrixClient, Device } from "matrix-js-sdk/src/matrix";
 import { VerificationRequest, VerificationRequestEvent } from "matrix-js-sdk/src/crypto-api";
 
@@ -63,9 +63,7 @@ describe("VerificationRequestToast", () => {
             otherDeviceId,
         });
         const result = renderComponent({ request });
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
         expect(result.container).toMatchSnapshot();
     });
 
@@ -76,9 +74,7 @@ describe("VerificationRequestToast", () => {
             otherUserId,
         });
         const result = renderComponent({ request });
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
         expect(result.container).toMatchSnapshot();
     });
 
@@ -89,9 +85,7 @@ describe("VerificationRequestToast", () => {
             otherUserId,
         });
         renderComponent({ request, toastKey: "testKey" });
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();
 
         const dismiss = jest.spyOn(ToastStore.sharedInstance(), "dismissToast");
         Object.defineProperty(request, "accepting", { value: true });