Improve UX around decryption errors

cypress/integration/10-user-view/user-view.spec.ts

@@ -26,8 +26,8 @@ describe("UserView", () => {
         cy.startSynapse("default").then(data => {
             synapse = data;
 
-            cy.initTestUser(synapse, "Violet");
-            cy.getBot(synapse, "Usman").as("bot");
+            cy.initElementWithNewUser(synapse, "Violet");
+            cy.registerBot(synapse, "Usman").as("bot");
         });
     });
 

cypress/integration/11-room-directory/room-directory.spec.ts

@@ -26,8 +26,8 @@ describe("Room Directory", () => {
         cy.startSynapse("default").then(data => {
             synapse = data;
 
-            cy.initTestUser(synapse, "Ray");
-            cy.getBot(synapse, "Paul").as("bot");
+            cy.initElementWithNewUser(synapse, "Ray");
+            cy.registerBot(synapse, "Paul").as("bot");
         });
     });
 

cypress/integration/12-spotlight/spotlight.spec.ts

@@ -127,12 +127,12 @@ describe("Spotlight", () => {
     beforeEach(() => {
         cy.startSynapse("default").then(data => {
             synapse = data;
-            cy.initTestUser(synapse, "Jim").then(() =>
-                cy.getBot(synapse, bot1Name).then(_bot1 => {
+            cy.initElementWithNewUser(synapse, "Jim").then(() =>
+                cy.registerBot(synapse, bot1Name).then(_bot1 => {
                     bot1 = _bot1;
                 }),
             ).then(() =>
-                cy.getBot(synapse, bot2Name).then(_bot2 => {
+                cy.registerBot(synapse, bot2Name).then(_bot2 => {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     bot2 = _bot2;
                 }),

cypress/integration/13-regression-tests/pills-click-in-app.spec.ts

@@ -25,7 +25,7 @@ describe("Pills", () => {
         cy.startSynapse("default").then(data => {
             synapse = data;
 
-            cy.initTestUser(synapse, "Sally");
+            cy.initElementWithNewUser(synapse, "Sally");
         });
     });
 

cypress/integration/2-login/consent.spec.ts

@@ -27,7 +27,7 @@ describe("Consent", () => {
         cy.startSynapse("consent").then(data => {
             synapse = data;
 
-            cy.initTestUser(synapse, "Bob");
+            cy.initElementWithNewUser(synapse, "Bob");
         });
     });
 

cypress/integration/2-login/login.spec.ts

@@ -62,7 +62,7 @@ describe("Login", () => {
 
     describe("logout", () => {
         beforeEach(() => {
-            cy.initTestUser(synapse, "Erin");
+            cy.initElementWithNewUser(synapse, "Erin");
         });
 
         it("should go to login page on logout", () => {

cypress/integration/3-user-menu/user-menu.spec.ts

@@ -27,7 +27,7 @@ describe("User Menu", () => {
         cy.startSynapse("default").then(data => {
             synapse = data;
 
-            cy.initTestUser(synapse, "Jeff").then(credentials => {
+            cy.initElementWithNewUser(synapse, "Jeff").then(credentials => {
                 user = credentials;
             });
         });

cypress/integration/4-create-room/create-room.spec.ts

@@ -32,7 +32,7 @@ describe("Create Room", () => {
         cy.startSynapse("default").then(data => {
             synapse = data;
 
-            cy.initTestUser(synapse, "Jim");
+            cy.initElementWithNewUser(synapse, "Jim");
         });
     });
 

cypress/integration/5-threads/threads.spec.ts

@@ -36,7 +36,7 @@ describe("Threads", () => {
         cy.startSynapse("default").then(data => {
             synapse = data;
 
-            cy.initTestUser(synapse, "Tom");
+            cy.initElementWithNewUser(synapse, "Tom");
         });
     });
 
@@ -73,7 +73,7 @@ describe("Threads", () => {
 
     it("should be usable for a conversation", () => {
         let bot: MatrixClient;
-        cy.getBot(synapse, "BotBob").then(_bot => {
+        cy.registerBot(synapse, "BotBob").then(_bot => {
             bot = _bot;
         });
 

cypress/integration/6-spaces/spaces.spec.ts

@@ -68,7 +68,7 @@ describe("Spaces", () => {
         cy.startSynapse("default").then(data => {
             synapse = data;
 
-            cy.initTestUser(synapse, "Sue").then(_user => {
+            cy.initElementWithNewUser(synapse, "Sue").then(_user => {
                 user = _user;
                 cy.mockClipboard();
             });
@@ -167,7 +167,7 @@ describe("Spaces", () => {
 
     it("should allow user to invite another to a space", () => {
         let bot: MatrixClient;
-        cy.getBot(synapse, "BotBob").then(_bot => {
+        cy.registerBot(synapse, "BotBob").then(_bot => {
             bot = _bot;
         });
 
@@ -202,7 +202,7 @@ describe("Spaces", () => {
         });
         getSpacePanelButton("My Space").should("exist");
 
-        cy.getBot(synapse, "BotBob").then({ timeout: 10000 }, async bot => {
+        cy.registerBot(synapse, "BotBob").then({ timeout: 10000 }, async bot => {
             const { room_id: roomId } = await bot.createRoom(spaceCreateOptions("Space Space"));
             await bot.invite(roomId, user.userId);
         });

cypress/integration/7-crypto/crypto.spec.ts

@@ -18,25 +18,30 @@ limitations under the License.
 
 import type { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { SynapseInstance } from "../../plugins/synapsedocker";
+import { UserCredentials } from "../../support/login";
 
 function waitForEncryption(cli: MatrixClient, roomId: string, win: Cypress.AUTWindow): Promise<void> {
     return new Promise<void>(resolve => {
         const onEvent = () => {
-            cli.crypto.cryptoStore.getEndToEndRooms(null, (result) => {
-                if (result[roomId]) {
-                    cli.off(win.matrixcs.ClientEvent.Event, onEvent);
-                    resolve();
-                }
-            });
+            try {
+                cli.crypto.cryptoStore.getEndToEndRooms(null, (result) => {
+                    if (result[roomId]) {
+                        cli.off(win.matrixcs.ClientEvent.Event, onEvent);
+                        resolve();
+                    }
+                });
+            } catch {
+            }
         };
         cli.on(win.matrixcs.ClientEvent.Event, onEvent);
+        onEvent();
     });
 }
 
 describe("Cryptography", () => {
     beforeEach(() => {
         cy.startSynapse("default").as('synapse').then(
-            synapse => cy.initTestUser(synapse, "Alice"),
+            synapse => cy.initElementWithNewUser(synapse, "Alice").as("aliceCredentials"),
         );
     });
 
@@ -45,7 +50,7 @@ describe("Cryptography", () => {
     });
 
     it("should receive and decrypt encrypted messages", () => {
-        cy.get<SynapseInstance>('@synapse').then(synapse => cy.getBot(synapse, "Beatrice").as('bot'));
+        cy.get<SynapseInstance>('@synapse').then(synapse => cy.registerBot(synapse, "Beatrice").as('bot'));
 
         cy.createRoom({
             initial_state: [
@@ -83,4 +88,65 @@ describe("Cryptography", () => {
             .closest(".mx_EventTile_line")
             .should("not.have.descendants", ".mx_EventTile_e2eIcon_warning");
     });
+
+    it("should display a banner when messages fail to decrypt", () => {
+        cy.createRoom({
+            initial_state: [
+                {
+                    type: "m.room.encryption",
+                    state_key: '',
+                    content: {
+                        algorithm: "m.megolm.v1.aes-sha2",
+                    },
+                },
+            ],
+        }).as('roomId');
+
+        cy.all([
+            cy.getClient(),
+            cy.get<string>('@roomId'),
+        ]).then(([cli, roomId]) => {
+            cy.visit("/#/room/" + roomId);
+            cy.get(".mx_cryptoEvent").should("contain", "Encryption enabled").then(() =>
+                cy.wrap(
+                    cli.sendMessage(roomId, {
+                        body: "Top secret message",
+                        msgtype: "m.text",
+                    }),
+                ),
+            );
+        });
+
+        cy.all([
+            cy.get<SynapseInstance>('@synapse'),
+            cy.get<UserCredentials>('@aliceCredentials'),
+        ]).then(([synapse, credentials]) => {
+            cy.window().then(win => { win.location.href = 'about:blank'; });
+            cy.initElementWithExistingUser(synapse, credentials.userId, credentials.password, true);
+        });
+
+        cy.get<string>('@roomId').then(roomId => cy.visit("/#/room/" + roomId));
+
+        cy.get(".mx_DecryptionFailureBar_message_headline").should("contain", "Decrypting messages...");
+        cy.get(".mx_DecryptionFailureBar .mx_Spinner");
+
+        // Spinner times out after 5 seconds
+        cy.get(".mx_DecryptionFailureBar_message_headline", { timeout: 6000 })
+            .should("contain", "Requesting keys to decrypt messages...");
+        cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_icon");
+
+        // Decryption failure bar is shown/hidden as messages are scrolled in/out of the DOM
+        cy.all([
+            cy.getClient(),
+            cy.get<string>('@roomId'),
+        ]).then(([cli, roomId]) =>
+            cy.wrap(cli.sendMessage(roomId, {
+                body: "test\n".repeat(500),
+                msgtype: "m.text",
+            })),
+        );
+        cy.get(".mx_DecryptionFailureBar").should("not.exist");
+        cy.get(".mx_ScrollPanel").scrollTo("top");
+        cy.get(".mx_DecryptionFailureBar");
+    });
 });

cypress/integration/8-update/update.spec.ts

@@ -42,7 +42,7 @@ describe("Update", () => {
             },
         }).as("version");
 
-        cy.initTestUser(synapse, "Ursa");
+        cy.initElementWithNewUser(synapse, "Ursa");
 
         cy.wait("@version");
         cy.url().should("contain", "updated=" + NEW_VERSION).then(href => {

cypress/integration/9-widgets/stickers.spec.ts

@@ -110,7 +110,7 @@ describe("Stickers", () => {
         cy.startSynapse("default").then(data => {
             synapse = data;
 
-            cy.initTestUser(synapse, "Sally");
+            cy.initElementWithNewUser(synapse, "Sally");
         });
         cy.serveHtmlFile(WIDGET_HTML).then(url => {
             stickerPickerUrl = url;

cypress/support/bot.ts

@@ -20,50 +20,71 @@ import request from "browser-request";
 
 import type { MatrixClient } from "matrix-js-sdk/src/client";
 import { SynapseInstance } from "../plugins/synapsedocker";
+import { UserCredentials } from "./login";
 import Chainable = Cypress.Chainable;
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace Cypress {
         interface Chainable {
             /**
-             * Returns a new Bot instance
+             * Returns a Bot instance for a newly-registered account
              * @param synapse the instance on which to register the bot user
              * @param displayName the display name to give to the bot user
              */
-            getBot(synapse: SynapseInstance, displayName?: string): Chainable<MatrixClient>;
+            registerBot(synapse: SynapseInstance, displayName?: string): Chainable<MatrixClient>;
+
+            /**
+             * Returns a Bot instance for an existing user account
+             * @param synapse the instance on which to register the bot user
+             * @param username the account's username
+             * @param password the account's password
+             */
+            loginBot(synapse: SynapseInstance, username: string, password: string): Chainable<MatrixClient>;
         }
     }
 }
 
-Cypress.Commands.add("getBot", (synapse: SynapseInstance, displayName?: string): Chainable<MatrixClient> => {
-    const username = Cypress._.uniqueId("userId_");
-    const password = Cypress._.uniqueId("password_");
-    return cy.registerUser(synapse, username, password, displayName).then(credentials => {
-        return cy.window({ log: false }).then(win => {
-            const cli = new win.matrixcs.MatrixClient({
-                baseUrl: synapse.baseUrl,
-                userId: credentials.userId,
-                deviceId: credentials.deviceId,
-                accessToken: credentials.accessToken,
-                request,
-                store: new win.matrixcs.MemoryStore(),
-                scheduler: new win.matrixcs.MatrixScheduler(),
-                cryptoStore: new win.matrixcs.MemoryCryptoStore(),
-            });
-
-            cli.on(win.matrixcs.RoomMemberEvent.Membership, (event, member) => {
-                if (member.membership === "invite" && member.userId === cli.getUserId()) {
-                    cli.joinRoom(member.roomId);
-                }
-            });
+function getBot(synapse: SynapseInstance, credentials: UserCredentials): Chainable<MatrixClient> {
+    return cy.window({ log: false }).then(win => {
+        const cli = new win.matrixcs.MatrixClient({
+            baseUrl: synapse.baseUrl,
+            userId: credentials.userId,
+            deviceId: credentials.deviceId,
+            accessToken: credentials.accessToken,
+            request,
+            store: new win.matrixcs.MemoryStore(),
+            scheduler: new win.matrixcs.MatrixScheduler(),
+            cryptoStore: new win.matrixcs.MemoryCryptoStore(),
+        });
 
-            return cy.wrap(
-                cli.initCrypto()
-                    .then(() => cli.setGlobalErrorOnUnknownDevices(false))
-                    .then(() => cli.startClient())
-                    .then(() => cli),
-            );
+        cli.on(win.matrixcs.RoomMemberEvent.Membership, (event, member) => {
+            if (member.membership === "invite" && member.userId === cli.getUserId()) {
+                cli.joinRoom(member.roomId);
+            }
         });
+
+        return cy.wrap(
+            cli.initCrypto()
+                .then(() => cli.setGlobalErrorOnUnknownDevices(false))
+                .then(() => cli.startClient())
+                .then(() => cli),
+        );
     });
+}
+
+Cypress.Commands.add("registerBot", (synapse: SynapseInstance, displayName?: string): Chainable<MatrixClient> => {
+    const username = Cypress._.uniqueId("userId_");
+    const password = Cypress._.uniqueId("password_");
+    return cy.registerUser(synapse, username, password, displayName)
+        .then(credentials => getBot(synapse, { ...credentials, password }));
+});
+
+Cypress.Commands.add("loginBot", (
+    synapse: SynapseInstance,
+    username: string,
+    password: string,
+): Chainable<MatrixClient> => {
+    return cy.loginUser(synapse, username, password)
+        .then(credentials => getBot(synapse, { ...credentials, password }));
 });