Cypress test for incoming user verification (#11688)

* Cypress test for incoming user verification

* Fix complaint from cypress about immediate values

Author: richvdh

cypress/e2e/crypto/crypto.spec.ts

@@ -20,6 +20,7 @@ import type { CypressBot } from "../../support/bot";
 import { HomeserverInstance } from "../../plugins/utils/homeserver";
 import { UserCredentials } from "../../support/login";
 import {
+    createSharedRoomWithUser,
     doTwoWaySasVerification,
     downloadKey,
     enableKeyBackup,
@@ -284,16 +285,7 @@ describe("Cryptography", function () {
         autoJoin(this.bob);
 
         // we need to have a room with the other user present, so we can open the verification panel
-        let roomId: string;
-        cy.createRoom({ name: "TestRoom", invite: [this.bob.getUserId()] }).then((_room1Id) => {
-            roomId = _room1Id;
-            cy.log(`Created test room ${roomId}`);
-            cy.visit(`/#/room/${roomId}`);
-            // wait for Bob to join the room, otherwise our attempt to open his user details may race
-            // with his join.
-            cy.findByText("Bob joined the room").should("exist");
-        });
-
+        createSharedRoomWithUser(this.bob.getUserId());
         verify.call(this);
     });
 
@@ -305,21 +297,15 @@ describe("Cryptography", function () {
             autoJoin(bob);
 
             // create an encrypted room
-            cy.createRoom({ name: "TestRoom", invite: [bob.getUserId()] })
+            createSharedRoomWithUser(bob.getUserId())
                 .as("testRoomId")
                 .then((roomId) => {
                     testRoomId = roomId;
-                    cy.log(`Created test room ${roomId}`);
-                    cy.visit(`/#/room/${roomId}`);
 
                     // enable encryption
                     cy.getClient().then((cli) => {
                         cli.sendStateEvent(roomId, "m.room.encryption", { algorithm: "m.megolm.v1.aes-sha2" });
                     });
-
-                    // wait for Bob to join the room, otherwise our attempt to open his user details may race
-                    // with his join.
-                    cy.findByText("Bob joined the room").should("exist");
                 });
         });
 

cypress/e2e/crypto/utils.ts

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import type { ICreateRoomOpts, MatrixClient } from "matrix-js-sdk/src/matrix";
 import type { ISasEvent } from "matrix-js-sdk/src/crypto/verification/SAS";
-import type { MatrixClient } from "matrix-js-sdk/src/matrix";
 import type { VerificationRequest, Verifier } from "matrix-js-sdk/src/crypto-api";
 
 export type EmojiMapping = [emoji: string, name: string];
@@ -200,3 +200,28 @@ export function downloadKey() {
     cy.findByRole("button", { name: "Download" }).click();
     cy.contains(".mx_Dialog_primary:not([disabled])", "Continue").click();
 }
+
+/**
+ * Create a shared, unencrypted room with the given user, and wait for them to join
+ *
+ * @param other - UserID of the other user
+ * @param opts - other options for the createRoom call
+ *
+ * @returns a cypress chainable which will yield the room ID
+ */
+export function createSharedRoomWithUser(
+    other: string,
+    opts: Omit<ICreateRoomOpts, "invite"> = { name: "TestRoom" },
+): Cypress.Chainable<string> {
+    return cy.createRoom({ ...opts, invite: [other] }).then((roomId) => {
+        cy.log(`Created test room ${roomId}`);
+        cy.viewRoomById(roomId);
+
+        // wait for the other user to join the room, otherwise our attempt to open his user details may race
+        // with his join.
+        cy.findByText(" joined the room", { exact: false }).should("exist");
+
+        // Cypress complains if we return an immediate here rather than a promise.
+        return Promise.resolve(roomId);
+    });
+}

cypress/e2e/crypto/verification.spec.ts

@@ -16,12 +16,14 @@ limitations under the License.
 
 import jsQR from "jsqr";
 
-import type { VerificationRequest, Verifier } from "matrix-js-sdk/src/crypto-api/verification";
+import type { MatrixClient } from "matrix-js-sdk/src/matrix";
+import type { VerificationRequest, Verifier } from "matrix-js-sdk/src/crypto-api";
 import { CypressBot } from "../../support/bot";
 import { HomeserverInstance } from "../../plugins/utils/homeserver";
 import { emitPromise } from "../../support/util";
 import { checkDeviceIsCrossSigned, doTwoWaySasVerification, logIntoElement, waitForVerificationRequest } from "./utils";
 import { getToast } from "../../support/toasts";
+import { UserCredentials } from "../../support/login";
 
 /** Render a data URL and return the rendered image data */
 async function renderQRCode(dataUrl: string): Promise<ImageData> {
@@ -122,15 +124,9 @@ describe("Device verification", () => {
                 /* the bot scans the QR code */
                 cy.get<VerificationRequest>("@verificationRequest")
                     .then(async (request: VerificationRequest) => {
-                        // because I don't know how to scrape the imagedata from the cypress browser window,
-                        // we extract the data url and render it to a new canvas.
-                        const imageData = await renderQRCode(qrCode.attr("src"));
-
-                        // now we can decode the QR code...
-                        const result = jsQR(imageData.data, imageData.width, imageData.height);
-
-                        // ... and feed it into the verification request.
-                        return await request.scanQRCode(new Uint8Array(result.binaryData));
+                        // feed the QR code into the verification request.
+                        const qrData = await readQrCode(qrCode);
+                        return await request.scanQRCode(qrData);
                     })
                     .as("verifier");
             });
@@ -244,15 +240,7 @@ describe("Device verification", () => {
         cy.findByRole("button", { name: "Start" }).click();
 
         /* on the bot side, wait for the verifier to exist ... */
-        async function awaitVerifier() {
-            // wait for the verifier to exist
-            while (!botVerificationRequest.verifier) {
-                await emitPromise(botVerificationRequest, "change");
-            }
-            return botVerificationRequest.verifier;
-        }
-
-        cy.then(() => cy.wrap(awaitVerifier())).then((verifier: Verifier) => {
+        cy.then(() => cy.wrap(awaitVerifier(botVerificationRequest))).then((verifier: Verifier) => {
             // ... confirm ...
             botVerificationRequest.verifier.verify();
 
@@ -268,3 +256,145 @@ describe("Device verification", () => {
         });
     });
 });
+
+describe("User verification", () => {
+    // note that there are other tests that check user verification works in `crypto.spec.ts`.
+
+    let aliceCredentials: UserCredentials;
+    let homeserver: HomeserverInstance;
+    let bob: CypressBot;
+
+    beforeEach(() => {
+        cy.startHomeserver("default")
+            .as("homeserver")
+            .then((data) => {
+                homeserver = data;
+                cy.initTestUser(homeserver, "Alice", undefined, "alice_").then((credentials) => {
+                    aliceCredentials = credentials;
+                });
+                return cy.getBot(homeserver, {
+                    displayName: "Bob",
+                    autoAcceptInvites: true,
+                    userIdPrefix: "bob_",
+                });
+            })
+            .then((data) => {
+                bob = data;
+            });
+    });
+
+    afterEach(() => {
+        cy.stopHomeserver(homeserver);
+    });
+
+    it("can receive a verification request when there is no existing DM", () => {
+        cy.bootstrapCrossSigning(aliceCredentials);
+
+        // the other user creates a DM
+        let dmRoomId: string;
+        let bobVerificationRequest: VerificationRequest;
+        cy.wrap(0).then(async () => {
+            dmRoomId = await createDMRoom(bob, aliceCredentials.userId);
+        });
+
+        // accept the DM
+        cy.viewRoomByName("Bob");
+        cy.findByRole("button", { name: "Start chatting" }).click();
+
+        // once Alice has joined, Bob starts the verification
+        cy.wrap(0).then(async () => {
+            const room = bob.getRoom(dmRoomId)!;
+            while (room.getMember(aliceCredentials.userId)?.membership !== "join") {
+                await new Promise((resolve) => {
+                    // @ts-ignore can't access the enum here
+                    room.once("RoomState.members", resolve);
+                });
+            }
+            bobVerificationRequest = await bob.getCrypto()!.requestVerificationDM(aliceCredentials.userId, dmRoomId);
+        });
+
+        // there should also be a toast
+        getToast("Verification requested").within(() => {
+            // it should contain the details of the requesting user
+            cy.contains(`Bob (${bob.credentials.userId})`);
+
+            // Accept
+            cy.findByRole("button", { name: "Verify Session" }).click();
+        });
+
+        // request verification by emoji
+        cy.get("#mx_RightPanel").findByRole("button", { name: "Verify by emoji" }).click();
+
+        cy.wrap(0)
+            .then(async () => {
+                /* on the bot side, wait for the verifier to exist ... */
+                const verifier = await awaitVerifier(bobVerificationRequest);
+                // ... confirm ...
+                verifier.verify();
+                return verifier;
+            })
+            .then((botVerifier) => {
+                // ... and then check the emoji match
+                doTwoWaySasVerification(botVerifier);
+            });
+
+        cy.findByRole("button", { name: "They match" }).click();
+        cy.findByText("You've successfully verified Bob!").should("exist");
+        cy.findByRole("button", { name: "Got it" }).click();
+    });
+});
+
+/** Extract the qrcode out of an on-screen html element */
+async function readQrCode(qrCode: JQuery<HTMLElement>) {
+    // because I don't know how to scrape the imagedata from the cypress browser window,
+    // we extract the data url and render it to a new canvas.
+    const imageData = await renderQRCode(qrCode.attr("src"));
+
+    // now we can decode the QR code.
+    const result = jsQR(imageData.data, imageData.width, imageData.height);
+    return new Uint8Array(result.binaryData);
+}
+
+async function createDMRoom(client: MatrixClient, userId: string): Promise<string> {
+    const r = await client.createRoom({
+        // @ts-ignore can't access the enum here
+        preset: "trusted_private_chat",
+        // @ts-ignore can't access the enum here
+        visibility: "private",
+        invite: [userId],
+        is_direct: true,
+        initial_state: [
+            {
+                type: "m.room.encryption",
+                state_key: "",
+                content: {
+                    algorithm: "m.megolm.v1.aes-sha2",
+                },
+            },
+        ],
+    });
+
+    const roomId = r.room_id;
+
+    // wait for the room to come down /sync
+    while (!client.getRoom(roomId)) {
+        await new Promise((resolve) => {
+            //@ts-ignore can't access the enum here
+            client.once("Room", resolve);
+        });
+    }
+
+    return roomId;
+}
+
+/**
+ * Wait for a verifier to exist for a VerificationRequest
+ *
+ * @param botVerificationRequest
+ */
+async function awaitVerifier(botVerificationRequest: VerificationRequest): Promise<Verifier> {
+    while (!botVerificationRequest.verifier) {
+        await emitPromise(botVerificationRequest, "change");
+    }
+    return botVerificationRequest.verifier;
+}