Show 'Verify this device' toast even if there are no encrypted rooms yet

apps/web/playwright/e2e/accessibility/keyboard-navigation.spec.ts

@@ -15,6 +15,8 @@ test.describe("Landmark navigation tests", () => {
     });
 
     test("without any rooms", async ({ page, homeserver, app, user }) => {
+        await app.closeVerifyToast();
+
         // sometimes the space button doesn't appear right away
         await expect(page.locator(".mx_SpaceButton_active")).toBeVisible();
 
@@ -118,6 +120,7 @@ test.describe("Landmark navigation tests", () => {
             },
         );
 
+        await app.closeVerifyToast();
         await app.viewRoomByName("Bob");
         // confirm the room was loaded
         await expect(page.getByText("Bob joined the room")).toBeVisible();

apps/web/playwright/e2e/audio-player/audio-player.spec.ts

@@ -144,6 +144,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
     };
 
     test.beforeEach(async ({ page, app, user }) => {
+        await app.closeVerifyToast();
         await app.client.createRoom({ name: "Test Room" });
         await app.viewRoomByName("Test Room");
 

apps/web/playwright/e2e/crypto/crypto.spec.ts

@@ -172,6 +172,7 @@ test.describe("Cryptography", function () {
         "creating a DM should work, being e2e-encrypted / user verification",
         { tag: "@screenshot" },
         async ({ page, app, bot: bob, user: aliceCredentials }) => {
+            await app.closeVerifyToast();
             await app.client.bootstrapCrossSigning(aliceCredentials);
             await startDMWithBob(page, bob);
             // send first message

apps/web/playwright/e2e/crypto/device-verification.spec.ts

@@ -124,6 +124,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await infoDialog.getByRole("button", { name: "Got it" }).click();
 
         // There should be no toast (other than the notifications one)
+        await toasts.rejectToast("Verify this device");
         await toasts.rejectToast("Notifications");
         await toasts.assertNoToasts();
 

apps/web/playwright/e2e/crypto/history-sharing.spec.ts

@@ -28,12 +28,16 @@ test.describe("History sharing", function () {
             // we then invite Bob, and ensure Bob can see the content.
 
             await aliceElementApp.client.bootstrapCrossSigning(aliceCredentials);
+            await aliceElementApp.closeKeyStorageToast();
 
             // Register a second user, and open it in a second instance of the app
             const bobCredentials = await homeserver.registerUser(`user_${testInfo.testId}_bob`, "password", "Bob");
             const bobPage = await createNewInstance(browser, bobCredentials, {}, labsFlags);
             const bobElementApp = new ElementAppPage(bobPage);
             await bobElementApp.client.bootstrapCrossSigning(bobCredentials);
+            await bobElementApp.closeKeyStorageToast();
+
+            await aliceElementApp.closeNotificationToast();
 
             // Create the room and send a message
             await createRoom(alicePage, "TestRoom", true);
@@ -84,13 +88,15 @@ test.describe("History sharing", function () {
         //   5. Charlie can't see the message.
 
         await aliceElementApp.client.bootstrapCrossSigning(aliceCredentials);
+        await aliceElementApp.closeKeyStorageToast();
         await createRoom(alicePage, "TestRoom", true);
 
         // Register a second user, and open it in a second instance of the app
         const bobCredentials = await homeserver.registerUser(`user_${testInfo.testId}_bob`, "password", "Bob");
         const bobPage = await createNewInstance(browser, bobCredentials, {}, labsFlags);
         const bobElementApp = new ElementAppPage(bobPage);
         await bobElementApp.client.bootstrapCrossSigning(bobCredentials);
+        await bobElementApp.closeKeyStorageToast();
 
         // ... and a third
         const charlieCredentials = await homeserver.registerUser(
@@ -101,6 +107,7 @@ test.describe("History sharing", function () {
         const charliePage = await createNewInstance(browser, charlieCredentials, {}, labsFlags);
         const charlieElementApp = new ElementAppPage(charliePage);
         await charlieElementApp.client.bootstrapCrossSigning(charlieCredentials);
+        await charlieElementApp.closeKeyStorageToast();
 
         // Alice invites Bob, and Bob accepts
         const roomId = await aliceElementApp.getCurrentRoomIdFromUrl();

apps/web/playwright/e2e/crypto/toasts.spec.ts

@@ -31,15 +31,6 @@ test.describe("Key storage out of sync toast", () => {
         await logIntoElementAndVerify(page, credentials, recoveryKey.encodedPrivateKey);
 
         await deleteCachedSecrets(page);
-
-        // We won't be prompted for crypto setup unless we have an e2e room, so make one
-        await page
-            .getByRole("navigation", { name: "Room list" })
-            .getByRole("button", { name: "New conversation" })
-            .click();
-        await page.getByRole("menuitem", { name: "New room" }).click();
-        await page.getByRole("textbox", { name: "Name" }).fill("Test room");
-        await page.getByRole("button", { name: "Create room" }).click();
     });
 
     test("should prompt for recovery key if 'enter recovery key' pressed", { tag: "@screenshot" }, async ({ page }) => {

apps/web/playwright/e2e/devtools/lowbandwidth.spec.ts

@@ -19,6 +19,7 @@ test.describe("Devtools", () => {
         const profileSettings = userSettings.locator(".mx_UserProfileSettings");
         await profileSettings.getByAltText("Upload").setInputFiles(getSampleFilePath("riot.png"));
         await app.closeDialog();
+        await app.closeVerifyToast();
 
         // Create an initial room.
         const createRoomDialog = await app.openCreateRoomDialog();

apps/web/playwright/e2e/invite/invite-dialog.spec.ts

@@ -91,6 +91,7 @@ test.describe("Invite dialog", function () {
         "should support inviting a user to Direct Messages",
         { tag: "@screenshot" },
         async ({ page, app, user, bot }) => {
+            await app.closeVerifyToast();
             await page
                 .getByRole("navigation", { name: "Room list" })
                 .getByRole("button", { name: "New conversation" })

apps/web/playwright/e2e/knock/create-knock-room.spec.ts

@@ -19,6 +19,8 @@ test.describe("Create Knock Room", () => {
     });
 
     test("should create a knock room", async ({ page, app, user }) => {
+        await app.closeVerifyToast();
+
         const dialog = await app.openCreateRoomDialog();
         await dialog.getByRole("textbox", { name: "Name" }).fill("Cybersecurity");
         await dialog.getByRole("button", { name: "Room visibility" }).click();
@@ -37,6 +39,8 @@ test.describe("Create Knock Room", () => {
     });
 
     test("should create a room and change a join rule to knock", async ({ page, app, user }) => {
+        await app.closeVerifyToast();
+
         const dialog = await app.openCreateRoomDialog();
         await dialog.getByRole("textbox", { name: "Name" }).fill("Cybersecurity");
         await dialog.getByRole("button", { name: "Create room" }).click();
@@ -59,6 +63,8 @@ test.describe("Create Knock Room", () => {
     });
 
     test("should create a public knock room", async ({ page, app, user }) => {
+        await app.closeVerifyToast();
+
         const dialog = await app.openCreateRoomDialog();
         await dialog.getByRole("textbox", { name: "Name" }).fill("Cybersecurity");
         await dialog.getByRole("button", { name: "Room visibility" }).click();

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-collapse.spec.ts

@@ -14,6 +14,7 @@ test.describe("Collapsible Room list", () => {
     });
 
     test.beforeEach(async ({ page, app, user }) => {
+        await app.closeVerifyToast();
         await app.closeNotificationToast();
         for (let i = 0; i < 10; i++) {
             await app.client.createRoom({ name: `room${i}` });

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-custom-sections.spec.ts

@@ -59,6 +59,7 @@ test.describe("Room list custom sections", () => {
     test.beforeEach(async ({ page, app, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
+        await app.closeVerifyToast();
 
         // Focus the user menu to avoid hover decoration
         await page.getByRole("button", { name: "User menu" }).focus();

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts

@@ -31,7 +31,8 @@ test.describe("Room list filters and sort", () => {
     }
 
     test.beforeEach(async ({ page, app, bot, user }) => {
-        // The notification toast is displayed above the search section
+        // The toasts are displayed above the search section
+        await app.closeVerifyToast();
         await app.closeNotificationToast();
     });
 

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-header.spec.ts

@@ -14,7 +14,8 @@ test.describe("Header section of the room list", () => {
     });
 
     test.beforeEach(async ({ page, app, user }) => {
-        // The notification toast is displayed above the search section
+        // The toasts are displayed above the search section
+        await app.closeVerifyToast();
         await app.closeNotificationToast();
     });
 

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts

@@ -14,7 +14,8 @@ test.describe("Room list panel", () => {
     });
 
     test.beforeEach(async ({ page, app, user }) => {
-        // The notification toast is displayed above the search section
+        // The toasts are displayed above the search section
+        await app.closeVerifyToast();
         await app.closeNotificationToast();
 
         // Populate the room list

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-search.spec.ts

@@ -14,7 +14,8 @@ test.describe("Search section of the room list", () => {
     });
 
     test.beforeEach(async ({ page, app, user }) => {
-        // The notification toast is displayed above the search section
+        // The toasts are displayed above the search section
+        await app.closeVerifyToast();
         await app.closeNotificationToast();
     });
 

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-sections.spec.ts

@@ -19,7 +19,8 @@ test.describe("Room list sections", () => {
     });
 
     test.beforeEach(async ({ page, app, user }) => {
-        // The notification toast is displayed above the search section
+        // The toasts are displayed above the search section
+        await app.closeVerifyToast();
         await app.closeNotificationToast();
 
         // focus the user menu to avoid to have hover decoration

apps/web/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts

@@ -22,7 +22,8 @@ test.describe("Room list", () => {
     });
 
     test.beforeEach(async ({ page, app, user }) => {
-        // The notification toast is displayed above the search section
+        // The toasts are displayed above the search section
+        await app.closeVerifyToast();
         await app.closeNotificationToast();
 
         // focus the user menu to avoid to have hover decoration

apps/web/playwright/e2e/messages/messages.spec.ts

@@ -88,6 +88,7 @@ test.describe("Message rendering", () => {
                 room: async ({ user, app }, use) => {
                     const roomId = await app.client.createRoom({ name: "Test room" });
                     await use({ roomId });
+                    await app.closeVerifyToast();
                 },
             });
 
@@ -218,6 +219,7 @@ test.describe("Message url previews", () => {
         room: async ({ user, app }, use) => {
             const roomId = await app.client.createRoom({ name: "Test room" });
             await use({ roomId });
+            await app.closeVerifyToast();
         },
     });
     test("should render a basic preview", { tag: "@screenshot" }, async ({ page, user, app, room, axe }) => {

apps/web/playwright/e2e/room-directory/room-directory.spec.ts

@@ -65,6 +65,7 @@ test.describe("Room Directory", () => {
                 room_alias_name: "test1234",
             });
 
+            await app.closeVerifyToast();
             await page.getByRole("button", { name: "Explore rooms" }).click();
 
             const dialog = page.locator(".mx_SpotlightDialog");

apps/web/playwright/e2e/room/create-room.spec.ts

@@ -22,6 +22,7 @@ test.describe("Create Room", () => {
         "should create a public room with name, topic & address set",
         { tag: "@screenshot" },
         async ({ page, user, app, axe }) => {
+            await app.closeVerifyToast();
             const dialog = await app.openCreateRoomDialog();
             // Fill name & topic
             await dialog.getByRole("textbox", { name: "Name" }).fill(name);
@@ -50,6 +51,8 @@ test.describe("Create Room", () => {
     );
 
     test("should allow us to start a chat and show encryption state", async ({ page, user, app }) => {
+        await app.closeVerifyToast();
+
         await page.getByRole("button", { name: "New conversation", exact: true }).click();
         await page.getByRole("menuitem", { name: "Start chat" }).click();
 
@@ -69,6 +72,7 @@ test.describe("Create Room", () => {
 
     test("should create a video room", { tag: "@screenshot" }, async ({ page, user, app }) => {
         await app.settings.setValue("feature_video_rooms", null, SettingLevel.DEVICE, true);
+        await app.closeVerifyToast();
 
         const dialog = await app.openCreateRoomDialog("New video room");
         // Fill name & topic
@@ -103,6 +107,7 @@ test.describe("Create Room", () => {
         });
 
         test("should disallow creating public rooms", { tag: "@screenshot" }, async ({ page, user, app, axe }) => {
+            await app.closeVerifyToast();
             const dialog = await app.openCreateRoomDialog();
             // Fill name & topic
             await dialog.getByRole("textbox", { name: "Name" }).fill(name);
@@ -128,7 +133,9 @@ test.describe("Create Room", () => {
     test.describe("when the encrypted state labs flag is turned off", () => {
         test.use({ labsFlags: [] });
 
-        test("creates a room without encrypted state", { tag: "@screenshot" }, async ({ page, user: _user }) => {
+        test("creates a room without encrypted state", { tag: "@screenshot" }, async ({ page, user: _user, app }) => {
+            await app.closeVerifyToast();
+
             // When we start to create a room
             await page.getByRole("button", { name: "New conversation", exact: true }).click();
             await page.getByRole("menuitem", { name: "New room" }).click();
@@ -157,7 +164,9 @@ test.describe("Create Room", () => {
         test(
             "creates a room with encrypted state if we check the box",
             { tag: "@screenshot" },
-            async ({ page, user: _user }) => {
+            async ({ page, user: _user, app }) => {
+                await app.closeVerifyToast();
+
                 // Given we check the Encrypted State checkbox
                 await page.getByRole("button", { name: "New conversation", exact: true }).click();
                 await page.getByRole("menuitem", { name: "New room" }).click();
@@ -184,7 +193,9 @@ test.describe("Create Room", () => {
         test(
             "creates a room without encrypted state if we don't check the box",
             { tag: "@screenshot" },
-            async ({ page, user: _user }) => {
+            async ({ page, user: _user, app }) => {
+                await app.closeVerifyToast();
+
                 // Given we did not check the Encrypted State checkbox
                 await page.getByRole("button", { name: "New conversation", exact: true }).click();
                 await page.getByRole("menuitem", { name: "New room" }).click();

apps/web/playwright/e2e/room/room-status-bar.spec.ts

@@ -19,6 +19,7 @@ test.describe("Room Status Bar", () => {
             const roomId = await app.client.createRoom({
                 name: "A room",
             });
+            await app.closeVerifyToast();
             await app.closeNotificationToast();
             await app.viewRoomById(roomId);
             await use({ roomId });
@@ -139,6 +140,7 @@ test.describe("Room Status Bar", () => {
             "should show an error when creating a local room fails",
             { tag: "@screenshot" },
             async ({ page, app, user, bot }) => {
+                await app.closeVerifyToast();
                 await page
                     .getByRole("navigation", { name: "Room list" })
                     .getByRole("button", { name: "New conversation" })

apps/web/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts

@@ -14,6 +14,7 @@ test.describe("Appearance user settings tab", () => {
     });
 
     test("should be rendered properly", { tag: "@screenshot" }, async ({ page, user, app, axe }) => {
+        await app.closeVerifyToast();
         const tab = await app.settings.openUserSettings("Appearance");
 
         // Click "Show advanced" link button
@@ -31,6 +32,7 @@ test.describe("Appearance user settings tab", () => {
         "should support changing font size by using the font size dropdown",
         { tag: "@screenshot" },
         async ({ page, app, user }) => {
+            await app.closeVerifyToast();
             await app.settings.openUserSettings("Appearance");
 
             const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
@@ -46,6 +48,7 @@ test.describe("Appearance user settings tab", () => {
     );
 
     test("should support enabling system font", async ({ page, app, user }) => {
+        await app.closeVerifyToast();
         await app.settings.openUserSettings("Appearance");
         const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
 
@@ -63,7 +66,10 @@ test.describe("Appearance user settings tab", () => {
         "should keep same font and emoji when switching theme",
         { tag: "@screenshot" },
         async ({ page, app, user, util }) => {
+            await app.closeVerifyToast();
+
             const roomId = await util.createAndDisplayRoom();
+
             await app.client.sendMessage(roomId, { body: "Message with 🦡", msgtype: "m.text" });
 
             await app.settings.openUserSettings("Appearance");

apps/web/playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts

@@ -17,6 +17,8 @@ test.describe("Appearance user settings tab", () => {
         test.beforeEach(async ({ app, user, util }) => {
             // Disable the default theme for consistency in case ThemeWatcher automatically chooses it
             await util.disableSystemTheme();
+            await app.closeVerifyToast();
+
             await util.openAppearanceTab();
         });
 
@@ -102,6 +104,7 @@ test.describe("Appearance user settings tab", () => {
                     await expect(page).toMatchScreenshot("window-custom-theme.png");
 
                     await page.reload();
+                    await app.closeVerifyToast();
 
                     await util.openAppearanceTab();
                     // Assert that the custom theme is still selected after reloading the page

apps/web/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts

@@ -85,6 +85,7 @@ test.describe("Encryption tab", () => {
 
                 // Fill the recovery key
                 await util.enterRecoveryKey(recoveryKey);
+                await dialog.getByRole("heading", { name: "Key storage" }).scrollIntoViewIfNeeded();
                 await expect(dialog).toMatchScreenshot("default-tab.png", {
                     mask: [dialog.getByTestId("deviceId"), dialog.getByTestId("sessionKey")],
                 });