Element-R: Populate device list for right-panel (#10671)

* Use `getUserDeviceInfo` instead of `downloadKeys` and `getStoredDevicesForUser`

* Use new `getUserDeviceInfo` api in `UserInfo.tsx` and `UserInfo-test.tsx`

* Fix missing fields

* Use `getUserDeviceInfo` instead of `downloadKeys`

* Move `ManualDeviceKeyVerificationDialog.tsx` from class to functional component and add tests

* Fix strict errors

* Update snapshot

* Add snapshot test to `UserInfo-test.tsx`

* Add test for <BasicUserInfo />

* Remove useless TODO comment

* Add test for ambiguous device

* Rework `<BasicUserInfo />` test

test/components/views/dialogs/ManualDeviceKeyVerificationDialog-test.tsx

@@ -0,0 +1,113 @@
+/*
+ * Copyright 2023 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Device } from "matrix-js-sdk/src/models/device";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
+import { stubClient } from "../../../test-utils";
+import { ManualDeviceKeyVerificationDialog } from "../../../../src/components/views/dialogs/ManualDeviceKeyVerificationDialog";
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
+
+describe("ManualDeviceKeyVerificationDialog", () => {
+    let mockClient: MatrixClient;
+
+    function renderDialog(userId: string, device: Device, onLegacyFinished: (confirm: boolean) => void) {
+        return render(
+            <MatrixClientContext.Provider value={mockClient}>
+                <ManualDeviceKeyVerificationDialog userId={userId} device={device} onFinished={onLegacyFinished} />
+            </MatrixClientContext.Provider>,
+        );
+    }
+
+    beforeEach(() => {
+        mockClient = stubClient();
+    });
+
+    it("should display the device", () => {
+        // When
+        const deviceId = "XYZ";
+        const device = new Device({
+            userId: mockClient.getUserId()!,
+            deviceId,
+            displayName: "my device",
+            algorithms: [],
+            keys: new Map([[`ed25519:${deviceId}`, "ABCDEFGH"]]),
+        });
+        const { container } = renderDialog(mockClient.getUserId()!, device, jest.fn());
+
+        // Then
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should display the device of another user", () => {
+        // When
+        const userId = "@alice:example.com";
+        const deviceId = "XYZ";
+        const device = new Device({
+            userId,
+            deviceId,
+            displayName: "my device",
+            algorithms: [],
+            keys: new Map([[`ed25519:${deviceId}`, "ABCDEFGH"]]),
+        });
+        const { container } = renderDialog(userId, device, jest.fn());
+
+        // Then
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should call onFinished and matrixClient.setDeviceVerified", () => {
+        // When
+        const deviceId = "XYZ";
+        const device = new Device({
+            userId: mockClient.getUserId()!,
+            deviceId,
+            displayName: "my device",
+            algorithms: [],
+            keys: new Map([[`ed25519:${deviceId}`, "ABCDEFGH"]]),
+        });
+        const onFinished = jest.fn();
+        renderDialog(mockClient.getUserId()!, device, onFinished);
+
+        screen.getByRole("button", { name: "Verify session" }).click();
+
+        // Then
+        expect(onFinished).toHaveBeenCalledWith(true);
+        expect(mockClient.setDeviceVerified).toHaveBeenCalledWith(mockClient.getUserId(), deviceId, true);
+    });
+
+    it("should call onFinished and not matrixClient.setDeviceVerified", () => {
+        // When
+        const deviceId = "XYZ";
+        const device = new Device({
+            userId: mockClient.getUserId()!,
+            deviceId,
+            displayName: "my device",
+            algorithms: [],
+            keys: new Map([[`ed25519:${deviceId}`, "ABCDEFGH"]]),
+        });
+        const onFinished = jest.fn();
+        renderDialog(mockClient.getUserId()!, device, onFinished);
+
+        screen.getByRole("button", { name: "Cancel" }).click();
+
+        // Then
+        expect(onFinished).toHaveBeenCalledWith(false);
+        expect(mockClient.setDeviceVerified).not.toHaveBeenCalled();
+    });
+});

test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap

@@ -0,0 +1,231 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
+<div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_Dialog_content"
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_QuestionDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+    >
+      <h2
+        class="mx_Heading_h2 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Verify session
+      </h2>
+      <div
+        aria-label="Close dialog"
+        class="mx_AccessibleButton mx_Dialog_cancelButton"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <div
+      class="mx_Dialog_content"
+      id="mx_Dialog_content"
+    >
+      <div>
+        <p>
+          Confirm by comparing the following with the User Settings in your other session:
+        </p>
+        <div
+          class="mx_DeviceVerifyDialog_cryptoSection"
+        >
+          <ul>
+            <li>
+              <label>
+                Session name
+                :
+              </label>
+               
+              <span>
+                my device
+              </span>
+            </li>
+            <li>
+              <label>
+                Session ID
+                :
+              </label>
+               
+              <span>
+                <code>
+                  XYZ
+                </code>
+              </span>
+            </li>
+            <li>
+              <label>
+                Session key
+                :
+              </label>
+               
+              <span>
+                <code>
+                  <b>
+                    ABCD EFGH
+                  </b>
+                </code>
+              </span>
+            </li>
+          </ul>
+        </div>
+        <p>
+          If they don't match, the security of your communication may be compromised.
+        </p>
+      </div>
+    </div>
+    <div
+      class="mx_Dialog_buttons"
+    >
+      <span
+        class="mx_Dialog_buttons_row"
+      >
+        <button
+          data-testid="dialog-cancel-button"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="mx_Dialog_primary"
+          data-testid="dialog-primary-button"
+          type="button"
+        >
+          Verify session
+        </button>
+      </span>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</div>
+`;
+
+exports[`ManualDeviceKeyVerificationDialog should display the device of another user 1`] = `
+<div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_Dialog_content"
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_QuestionDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+    >
+      <h2
+        class="mx_Heading_h2 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Verify session
+      </h2>
+      <div
+        aria-label="Close dialog"
+        class="mx_AccessibleButton mx_Dialog_cancelButton"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <div
+      class="mx_Dialog_content"
+      id="mx_Dialog_content"
+    >
+      <div>
+        <p>
+          Confirm this user's session by comparing the following with their User Settings:
+        </p>
+        <div
+          class="mx_DeviceVerifyDialog_cryptoSection"
+        >
+          <ul>
+            <li>
+              <label>
+                Session name
+                :
+              </label>
+               
+              <span>
+                my device
+              </span>
+            </li>
+            <li>
+              <label>
+                Session ID
+                :
+              </label>
+               
+              <span>
+                <code>
+                  XYZ
+                </code>
+              </span>
+            </li>
+            <li>
+              <label>
+                Session key
+                :
+              </label>
+               
+              <span>
+                <code>
+                  <b>
+                    ABCD EFGH
+                  </b>
+                </code>
+              </span>
+            </li>
+          </ul>
+        </div>
+        <p>
+          If they don't match, the security of your communication may be compromised.
+        </p>
+      </div>
+    </div>
+    <div
+      class="mx_Dialog_buttons"
+    >
+      <span
+        class="mx_Dialog_buttons_row"
+      >
+        <button
+          data-testid="dialog-cancel-button"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="mx_Dialog_primary"
+          data-testid="dialog-primary-button"
+          type="button"
+        >
+          Verify session
+        </button>
+      </span>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</div>
+`;

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

@@ -30,7 +30,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { Phase, VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import { UserTrustLevel } from "matrix-js-sdk/src/crypto/CrossSigning";
-import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
+import { Device } from "matrix-js-sdk/src/models/device";
 import { defer } from "matrix-js-sdk/src/utils";
 
 import UserInfo, {
@@ -127,6 +127,7 @@ beforeEach(() => {
 
     mockCrypto = mocked({
         getDeviceVerificationStatus: jest.fn(),
+        getUserDeviceInfo: jest.fn(),
     } as unknown as CryptoApi);
 
     mockClient = mocked({
@@ -155,6 +156,7 @@ beforeEach(() => {
         downloadKeys: jest.fn(),
         getStoredDevicesForUser: jest.fn(),
         getCrypto: jest.fn().mockReturnValue(mockCrypto),
+        getStoredCrossSigningForUser: jest.fn(),
     } as unknown as MatrixClient);
 
     jest.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
@@ -265,14 +267,18 @@ describe("<UserInfo />", () => {
         beforeEach(() => {
             mockClient.isCryptoEnabled.mockReturnValue(true);
             mockClient.checkUserTrust.mockReturnValue(new UserTrustLevel(false, false, false));
+            mockClient.doesServerSupportUnstableFeature.mockResolvedValue(true);
 
-            const device1 = DeviceInfo.fromStorage(
-                {
-                    unsigned: { device_display_name: "my device" },
-                },
-                "d1",
-            );
-            mockClient.getStoredDevicesForUser.mockReturnValue([device1]);
+            const device = new Device({
+                deviceId: "d1",
+                userId: defaultUserId,
+                displayName: "my device",
+                algorithms: [],
+                keys: new Map(),
+            });
+            const devicesMap = new Map<string, Device>([[device.deviceId, device]]);
+            const userDeviceMap = new Map<string, Map<string, Device>>([[defaultUserId, devicesMap]]);
+            mockCrypto.getUserDeviceInfo.mockResolvedValue(userDeviceMap);
         });
 
         it("renders a device list which can be expanded", async () => {
@@ -291,6 +297,18 @@ describe("<UserInfo />", () => {
             // ... which should contain the device name
             expect(within(deviceButton).getByText("my device")).toBeInTheDocument();
         });
+
+        it("renders <BasicUserInfo />", async () => {
+            const { container } = renderComponent({
+                phase: RightPanelPhases.SpaceMemberInfo,
+                verificationRequest,
+                room: mockRoom,
+            });
+            await act(flushPromises);
+
+            await waitFor(() => expect(screen.getByRole("button", { name: "Verify" })).toBeInTheDocument());
+            expect(container).toMatchSnapshot();
+        });
     });
 
     describe("with an encrypted room", () => {
@@ -363,7 +381,7 @@ describe("<UserInfoHeader />", () => {
 });
 
 describe("<DeviceItem />", () => {
-    const device = { deviceId: "deviceId", getDisplayName: () => "deviceName" } as DeviceInfo;
+    const device = { deviceId: "deviceId", displayName: "deviceName" } as Device;
     const defaultProps = {
         userId: defaultUserId,
         device,
@@ -410,7 +428,7 @@ describe("<DeviceItem />", () => {
         renderComponent();
         await act(flushPromises);
 
-        expect(screen.getByRole("button", { name: device.getDisplayName()! })).toBeInTheDocument;
+        expect(screen.getByRole("button", { name: device.displayName! })).toBeInTheDocument();
         expect(screen.queryByText(/trusted/i)).not.toBeInTheDocument();
     });
 
@@ -419,7 +437,7 @@ describe("<DeviceItem />", () => {
         renderComponent();
         await act(flushPromises);
 
-        expect(screen.getByRole("button", { name: `${device.getDisplayName()} Not trusted` })).toBeInTheDocument;
+        expect(screen.getByRole("button", { name: `${device.displayName} Not trusted` })).toBeInTheDocument();
     });
 
     it("with verified device only, displays no button without a label", async () => {
@@ -427,7 +445,7 @@ describe("<DeviceItem />", () => {
         renderComponent();
         await act(flushPromises);
 
-        expect(screen.getByText(device.getDisplayName()!)).toBeInTheDocument();
+        expect(screen.getByText(device.displayName!)).toBeInTheDocument();
         expect(screen.queryByText(/trusted/)).not.toBeInTheDocument();
     });
 
@@ -441,8 +459,9 @@ describe("<DeviceItem />", () => {
         setMockDeviceTrust(false, true);
 
         // expect to see no button in this case
+        // TODO `toBeInTheDocument` is not called, if called the test is failing
         expect(screen.queryByRole("button")).not.toBeInTheDocument;
-        expect(screen.getByText(device.getDisplayName()!)).toBeInTheDocument();
+        expect(screen.getByText(device.displayName!)).toBeInTheDocument();
     });
 
     it("with verified user and device, displays no button and a 'Trusted' label", async () => {
@@ -451,8 +470,8 @@ describe("<DeviceItem />", () => {
         renderComponent();
         await act(flushPromises);
 
-        expect(screen.queryByRole("button")).not.toBeInTheDocument;
-        expect(screen.getByText(device.getDisplayName()!)).toBeInTheDocument();
+        expect(screen.queryByRole("button")).not.toBeInTheDocument();
+        expect(screen.getByText(device.displayName!)).toBeInTheDocument();
         expect(screen.getByText("Trusted")).toBeInTheDocument();
     });
 
@@ -461,8 +480,8 @@ describe("<DeviceItem />", () => {
         renderComponent();
         await act(flushPromises);
 
-        const button = screen.getByRole("button", { name: device.getDisplayName()! });
-        expect(button).toBeInTheDocument;
+        const button = screen.getByRole("button", { name: device.displayName! });
+        expect(button).toBeInTheDocument();
         await userEvent.click(button);
 
         expect(mockVerifyDevice).not.toHaveBeenCalled();
@@ -476,13 +495,36 @@ describe("<DeviceItem />", () => {
         renderComponent();
         await act(flushPromises);
 
-        const button = screen.getByRole("button", { name: device.getDisplayName()! });
-        expect(button).toBeInTheDocument;
+        const button = screen.getByRole("button", { name: device.displayName! });
+        expect(button).toBeInTheDocument();
         await userEvent.click(button);
 
         expect(mockVerifyDevice).toHaveBeenCalledTimes(1);
         expect(mockVerifyDevice).toHaveBeenCalledWith(defaultUser, device);
     });
+
+    it("with display name", async () => {
+        const { container } = renderComponent();
+        await act(flushPromises);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("without display name", async () => {
+        const device = { deviceId: "deviceId" } as Device;
+        const { container } = renderComponent({ device, userId: defaultUserId });
+        await act(flushPromises);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("ambiguous display name", async () => {
+        const device = { deviceId: "deviceId", ambiguous: true, displayName: "my display name" };
+        const { container } = renderComponent({ device, userId: defaultUserId });
+        await act(flushPromises);
+
+        expect(container).toMatchSnapshot();
+    });
 });
 
 describe("<UserOptionsSection />", () => {
@@ -1099,9 +1141,9 @@ describe("<RoomAdminToolsContainer />", () => {
 describe("disambiguateDevices", () => {
     it("does not add ambiguous key to unique names", () => {
         const initialDevices = [
-            { deviceId: "id1", getDisplayName: () => "name1" } as DeviceInfo,
-            { deviceId: "id2", getDisplayName: () => "name2" } as DeviceInfo,
-            { deviceId: "id3", getDisplayName: () => "name3" } as DeviceInfo,
+            { deviceId: "id1", displayName: "name1" } as Device,
+            { deviceId: "id2", displayName: "name2" } as Device,
+            { deviceId: "id3", displayName: "name3" } as Device,
         ];
         disambiguateDevices(initialDevices);
 
@@ -1113,14 +1155,14 @@ describe("disambiguateDevices", () => {
 
     it("adds ambiguous key to all ids with non-unique names", () => {
         const uniqueNameDevices = [
-            { deviceId: "id3", getDisplayName: () => "name3" } as DeviceInfo,
-            { deviceId: "id4", getDisplayName: () => "name4" } as DeviceInfo,
-            { deviceId: "id6", getDisplayName: () => "name6" } as DeviceInfo,
+            { deviceId: "id3", displayName: "name3" } as Device,
+            { deviceId: "id4", displayName: "name4" } as Device,
+            { deviceId: "id6", displayName: "name6" } as Device,
         ];
         const nonUniqueNameDevices = [
-            { deviceId: "id1", getDisplayName: () => "nonUnique" } as DeviceInfo,
-            { deviceId: "id2", getDisplayName: () => "nonUnique" } as DeviceInfo,
-            { deviceId: "id5", getDisplayName: () => "nonUnique" } as DeviceInfo,
+            { deviceId: "id1", displayName: "nonUnique" } as Device,
+            { deviceId: "id2", displayName: "nonUnique" } as Device,
+            { deviceId: "id5", displayName: "nonUnique" } as Device,
         ];
         const initialDevices = [...uniqueNameDevices, ...nonUniqueNameDevices];
         disambiguateDevices(initialDevices);

test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -0,0 +1,233 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DeviceItem /> ambiguous display name 1`] = `
+<div>
+  <div
+    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
+    role="button"
+    tabindex="0"
+    title="deviceId"
+  >
+    <div
+      class="mx_E2EIcon mx_E2EIcon_normal"
+    />
+    <div
+      class="mx_UserInfo_device_name"
+    >
+      my display name (deviceId)
+    </div>
+    <div
+      class="mx_UserInfo_device_trusted"
+    />
+  </div>
+</div>
+`;
+
+exports[`<DeviceItem /> with display name 1`] = `
+<div>
+  <div
+    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
+    role="button"
+    tabindex="0"
+    title="deviceId"
+  >
+    <div
+      class="mx_E2EIcon mx_E2EIcon_normal"
+    />
+    <div
+      class="mx_UserInfo_device_name"
+    >
+      deviceName
+    </div>
+    <div
+      class="mx_UserInfo_device_trusted"
+    />
+  </div>
+</div>
+`;
+
+exports[`<DeviceItem /> without display name 1`] = `
+<div>
+  <div
+    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
+    role="button"
+    tabindex="0"
+    title="deviceId"
+  >
+    <div
+      class="mx_E2EIcon mx_E2EIcon_normal"
+    />
+    <div
+      class="mx_UserInfo_device_name"
+    >
+      deviceId
+    </div>
+    <div
+      class="mx_UserInfo_device_trusted"
+    />
+  </div>
+</div>
+`;
+
+exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
+<div>
+  <div
+    class="mx_BaseCard mx_UserInfo"
+  >
+    <div
+      class="mx_BaseCard_header"
+    >
+      <div
+        class="mx_AccessibleButton mx_BaseCard_close"
+        data-testid="base-card-close-button"
+        role="button"
+        tabindex="0"
+        title="Close"
+      />
+      <div
+        class="mx_UserInfo_avatar"
+      >
+        <div
+          class="mx_UserInfo_avatar_transition"
+        >
+          <div
+            class="mx_UserInfo_avatar_transition_child"
+          >
+            <span
+              aria-label="Avatar"
+              aria-live="off"
+              class="mx_AccessibleButton mx_BaseAvatar"
+              role="button"
+              tabindex="0"
+            >
+              <span
+                aria-hidden="true"
+                class="mx_BaseAvatar_initial"
+                style="font-size: 299.52px; width: 460.79999999999995px; line-height: 460.79999999999995px;"
+              >
+                U
+              </span>
+              <img
+                alt=""
+                aria-hidden="true"
+                class="mx_BaseAvatar_image"
+                data-testid="avatar-img"
+                src="data:image/png;base64,00"
+                style="width: 460.79999999999995px; height: 460.79999999999995px;"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_UserInfo_container mx_UserInfo_separator"
+      >
+        <div
+          class="mx_UserInfo_profile"
+        >
+          <div>
+            <h2>
+              <span
+                aria-label="@user:example.com"
+                dir="auto"
+                title="@user:example.com"
+              >
+                @user:example.com
+              </span>
+            </h2>
+          </div>
+          <div
+            class="mx_UserInfo_profile_mxid"
+          >
+            customUserIdentifier
+          </div>
+          <div
+            class="mx_UserInfo_profileStatus"
+          >
+            <div
+              class="mx_PresenceLabel"
+            >
+              Unknown
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_AutoHideScrollbar"
+      tabindex="-1"
+    >
+      <div
+        class="mx_UserInfo_container"
+      >
+        <h3>
+          Security
+        </h3>
+        <p>
+          Messages in this room are not end-to-end encrypted.
+        </p>
+        <div
+          class="mx_UserInfo_container_verifyButton"
+        >
+          <div
+            class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_verifyButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+            role="button"
+            tabindex="0"
+          >
+            Verify
+          </div>
+        </div>
+        <div
+          class="mx_UserInfo_devices"
+        >
+          <div />
+          <div>
+            <div
+              class="mx_AccessibleButton mx_UserInfo_expand mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="mx_E2EIcon mx_E2EIcon_normal"
+              />
+              <div>
+                1 session
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_UserInfo_container"
+      >
+        <h3>
+          Options
+        </h3>
+        <div>
+          <div
+            class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+            role="button"
+            tabindex="0"
+          >
+            Message
+          </div>
+          <div
+            class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+            role="button"
+            tabindex="0"
+          >
+            Share Link to User
+          </div>
+          <div
+            class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_destructive mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+            role="button"
+            tabindex="0"
+          >
+            Ignore
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

test/test-utils/test-utils.ts

@@ -234,6 +234,7 @@ export function createTestClient(): MatrixClient {
         }),
 
         searchUserDirectory: jest.fn().mockResolvedValue({ limited: false, results: [] }),
+        setDeviceVerified: jest.fn(),
     } as unknown as MatrixClient;
 
     client.reEmitter = new ReEmitter(client);