Element-R: Use MatrixClient.CryptoApi.getUserVerificationStatus instead of MatrixClient.checkUserTrust in MemberTile.tsx (#11701)

* Use `MatrixClient.CryptoApi.getUserVerificationStatus` instead of `MatrixClient.checkUserTrust` in `MemberTile.tsx`

* Add tests to `MemberTile.tsx`

* Use `mocked` instead of `spyOn`

src/components/views/rooms/MemberTile.tsx

@@ -117,10 +117,10 @@ export default class MemberTile extends React.Component<IProps, IState> {
         const cli = MatrixClientPeg.safeGet();
         const { userId } = this.props.member;
         const isMe = userId === cli.getUserId();
-        const userTrust = cli.checkUserTrust(userId);
+        const userTrust = await cli.getCrypto()?.getUserVerificationStatus(userId);
-        if (!userTrust.isCrossSigningVerified()) {
+        if (!userTrust?.isCrossSigningVerified()) {
             this.setState({
-                e2eStatus: userTrust.wasCrossSigningVerified() ? E2EState.Warning : E2EState.Normal,
+                e2eStatus: userTrust?.wasCrossSigningVerified() ? E2EState.Warning : E2EState.Normal,
             });
             return;
         }

test/components/views/rooms/MemberTile-test.tsx

@@ -0,0 +1,79 @@
+/*
+ * 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, waitFor } from "@testing-library/react";
+import { MatrixClient, RoomMember, Device } from "matrix-js-sdk/src/matrix";
+import { UserVerificationStatus, DeviceVerificationStatus } from "matrix-js-sdk/src/crypto-api";
+import { mocked } from "jest-mock";
+
+import * as TestUtils from "../../../test-utils";
+import MemberTile from "../../../../src/components/views/rooms/MemberTile";
+
+describe("MemberTile", () => {
+    let matrixClient: MatrixClient;
+    let member: RoomMember;
+
+    beforeEach(() => {
+        matrixClient = TestUtils.stubClient();
+        mocked(matrixClient.isRoomEncrypted).mockReturnValue(true);
+        member = new RoomMember("roomId", matrixClient.getUserId()!);
+    });
+
+    it("should not display an E2EIcon when the e2E status = normal", () => {
+        const { container } = render(<MemberTile member={member} />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should display an warning E2EIcon when the e2E status = Warning", async () => {
+        mocked(matrixClient.getCrypto()!.getUserVerificationStatus).mockResolvedValue({
+            isCrossSigningVerified: jest.fn().mockReturnValue(false),
+            wasCrossSigningVerified: jest.fn().mockReturnValue(true),
+        } as unknown as UserVerificationStatus);
+
+        const { container } = render(<MemberTile member={member} />);
+
+        await waitFor(() =>
+            expect(screen.getByLabelText("This user has not verified all of their sessions.")).toBeInTheDocument(),
+        );
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should display an verified E2EIcon when the e2E status = Verified", async () => {
+        // Mock all the required crypto methods
+        const deviceMap = new Map<string, Map<string, Device>>();
+        deviceMap.set(member.userId, new Map([["deviceId", {} as Device]]));
+        // Return a DeviceMap = Map<string, Map<string, Device>>
+        mocked(matrixClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(deviceMap);
+        mocked(matrixClient.getCrypto()!.getUserVerificationStatus).mockResolvedValue({
+            isCrossSigningVerified: jest.fn().mockReturnValue(true),
+        } as unknown as UserVerificationStatus);
+        mocked(matrixClient.getCrypto()!.getDeviceVerificationStatus).mockResolvedValue({
+            crossSigningVerified: true,
+        } as DeviceVerificationStatus);
+
+        const { container } = render(<MemberTile member={member} />);
+
+        await waitFor(() =>
+            expect(
+                screen.getByLabelText("You have verified this user. This user has verified all of their sessions."),
+            ).toBeInTheDocument(),
+        );
+        expect(container).toMatchSnapshot();
+    });
+});

test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap

@@ -0,0 +1,168 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MemberTile should display an verified E2EIcon when the e2E status = Verified 1`] = `
+<div>
+  <div>
+    <div
+      class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
+      role="button"
+      tabindex="0"
+      title="@userId:matrix.org (power 0)"
+    >
+      <div
+        class="mx_EntityTile_avatar"
+      >
+        <span
+          aria-hidden="true"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
+          data-color="2"
+          data-testid="avatar-img"
+          data-type="round"
+          role="presentation"
+          style="--cpd-avatar-size: 36px;"
+          title="@userId:matrix.org"
+        >
+          u
+        </span>
+        <div
+          aria-label="You have verified this user. This user has verified all of their sessions."
+          class="mx_E2EIcon mx_E2EIcon_bordered mx_E2EIcon_verified"
+        />
+      </div>
+      <div
+        class="mx_EntityTile_details"
+      >
+        <div
+          class="mx_EntityTile_name"
+        >
+          <div
+            class="mx_DisambiguatedProfile"
+          >
+            <span
+              class=""
+              dir="auto"
+            >
+              @userId:matrix.org
+            </span>
+          </div>
+        </div>
+        <div
+          class="mx_PresenceLabel"
+        >
+          Offline
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`MemberTile should display an warning E2EIcon when the e2E status = Warning 1`] = `
+<div>
+  <div>
+    <div
+      class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
+      role="button"
+      tabindex="0"
+      title="@userId:matrix.org (power 0)"
+    >
+      <div
+        class="mx_EntityTile_avatar"
+      >
+        <span
+          aria-hidden="true"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
+          data-color="2"
+          data-testid="avatar-img"
+          data-type="round"
+          role="presentation"
+          style="--cpd-avatar-size: 36px;"
+          title="@userId:matrix.org"
+        >
+          u
+        </span>
+        <div
+          aria-label="This user has not verified all of their sessions."
+          class="mx_E2EIcon mx_E2EIcon_bordered mx_E2EIcon_warning"
+        />
+      </div>
+      <div
+        class="mx_EntityTile_details"
+      >
+        <div
+          class="mx_EntityTile_name"
+        >
+          <div
+            class="mx_DisambiguatedProfile"
+          >
+            <span
+              class=""
+              dir="auto"
+            >
+              @userId:matrix.org
+            </span>
+          </div>
+        </div>
+        <div
+          class="mx_PresenceLabel"
+        >
+          Offline
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`MemberTile should not display an E2EIcon when the e2E status = normal 1`] = `
+<div>
+  <div>
+    <div
+      class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
+      role="button"
+      tabindex="0"
+      title="@userId:matrix.org (power 0)"
+    >
+      <div
+        class="mx_EntityTile_avatar"
+      >
+        <span
+          aria-hidden="true"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
+          data-color="2"
+          data-testid="avatar-img"
+          data-type="round"
+          role="presentation"
+          style="--cpd-avatar-size: 36px;"
+          title="@userId:matrix.org"
+        >
+          u
+        </span>
+      </div>
+      <div
+        class="mx_EntityTile_details"
+      >
+        <div
+          class="mx_EntityTile_name"
+        >
+          <div
+            class="mx_DisambiguatedProfile"
+          >
+            <span
+              class=""
+              dir="auto"
+            >
+              @userId:matrix.org
+            </span>
+          </div>
+        </div>
+        <div
+          class="mx_PresenceLabel"
+        >
+          Offline
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

test/test-utils/test-utils.ts

@@ -122,7 +122,11 @@ export function createTestClient(): MatrixClient {
                 downloadKeys: jest.fn(),
             },
         },
-        getCrypto: jest.fn().mockReturnValue({ getUserDeviceInfo: jest.fn() }),
+        getCrypto: jest.fn().mockReturnValue({
+            getUserDeviceInfo: jest.fn(),
+            getUserVerificationStatus: jest.fn(),
+            getDeviceVerificationStatus: jest.fn(),
+        }),
 
         getPushActionsForEvent: jest.fn(),
         getRoom: jest.fn().mockImplementation((roomId) => mkStubRoom(roomId, "My room", client)),