Add new playwright test for shield migration (#12237)

* Add new playwright test for shield migration

* missing import

* fix merge error duplicated tests

playwright/e2e/crypto/logout.spec.ts

@@ -14,56 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Page } from "@playwright/test";
-
 import { test, expect } from "../../element-web-test";
-import { logIntoElement } from "./utils";
+import { createRoom, enableKeyBackup, logIntoElement, sendMessageInCurrentRoom } from "./utils";
-import { ElementAppPage } from "../../pages/ElementAppPage";
 
 test.describe("Logout tests", () => {
     test.beforeEach(async ({ page, homeserver, credentials }) => {
         await logIntoElement(page, homeserver, credentials);
     });
 
-    async function createRoom(page: Page, roomName: string, isEncrypted: boolean): Promise<void> {
-        await page.getByRole("button", { name: "Add room" }).click();
-        await page.locator(".mx_IconizedContextMenu").getByRole("menuitem", { name: "New room" }).click();
-
-        const dialog = page.locator(".mx_Dialog");
-
-        await dialog.getByLabel("Name").fill(roomName);
-
-        if (!isEncrypted) {
-            // it's enabled by default
-            await page.getByLabel("Enable end-to-end encryption").click();
-        }
-
-        await dialog.getByRole("button", { name: "Create room" }).click();
-    }
-
-    async function sendMessageInCurrentRoom(page: Page, message: string): Promise<void> {
-        await page.locator(".mx_MessageComposer").getByRole("textbox").fill(message);
-        await page.getByTestId("sendmessagebtn").click();
-    }
-    async function setupRecovery(app: ElementAppPage, page: Page): Promise<void> {
-        const securityTab = await app.settings.openUserSettings("Security & Privacy");
-
-        await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
-        await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
-
-        const currentDialogLocator = page.locator(".mx_Dialog");
-
-        // It's the first time and secure storage is not set up, so it will create one
-        await expect(currentDialogLocator.getByRole("heading", { name: "Set up Secure Backup" })).toBeVisible();
-        await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
-        await expect(currentDialogLocator.getByRole("heading", { name: "Save your Security Key" })).toBeVisible();
-        await currentDialogLocator.getByRole("button", { name: "Copy", exact: true }).click();
-        await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
-
-        await expect(currentDialogLocator.getByRole("heading", { name: "Secure Backup successful" })).toBeVisible();
-        await currentDialogLocator.getByRole("button", { name: "Done", exact: true }).click();
-    }
-
     test("Ask to set up recovery on logout if not setup", async ({ page, app }) => {
         await createRoom(page, "E2e room", true);
 
@@ -81,7 +39,7 @@ test.describe("Logout tests", () => {
     });
 
     test("If backup is set up show standard confirm", async ({ page, app }) => {
-        await setupRecovery(app, page);
+        await enableKeyBackup(app);
 
         await createRoom(page, "E2e room", true);
 

playwright/e2e/crypto/staged-rollout.spec.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { test, expect } from "../../element-web-test";
-import { logIntoElement } from "./utils";
+import { createRoom, enableKeyBackup, logIntoElement, logOutOfElement, sendMessageInCurrentRoom } from "./utils";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
 
 test.describe("Adoption of rust stack", () => {
@@ -197,4 +197,94 @@ test.describe("Adoption of rust stack", () => {
         await app.settings.openUserSettings("Help & About");
         await expect(page.getByText("Crypto version: Rust SDK")).toBeVisible();
     });
+
+    test("Test migration of room shields", async ({ page, context, app, credentials, homeserver }, workerInfo) => {
+        test.skip(
+            workerInfo.project.name === "Rust Crypto",
+            "No need to test this on Rust Crypto as we override the config manually",
+        );
+        test.slow();
+
+        await page.goto("/#/login");
+
+        // In the project.name = "Legacy crypto" it will be olm crypto
+        await logIntoElement(page, homeserver, credentials);
+
+        // create a room and send a message
+        await createRoom(page, "Room1", true);
+        await sendMessageInCurrentRoom(page, "Hello");
+
+        // enable backup to save this room key
+        const securityKey = await enableKeyBackup(app);
+
+        // wait a bit for upload to complete, there is a random timout on key upload
+        await page.waitForTimeout(6000);
+
+        // logout
+        await logOutOfElement(page);
+
+        // We logout and log back in in order to get the historical key from backup and have a gray shield
+        await page.reload();
+        await page.goto("/#/login");
+        // login again and verify
+        await logIntoElement(page, homeserver, credentials, securityKey);
+
+        await app.viewRoomByName("Room1");
+
+        {
+            const messageDiv = page.locator(".mx_EventTile_line").filter({ hasText: "Hello" });
+            // there should be a shield
+            await expect(messageDiv.locator(".mx_EventTile_e2eIcon")).toBeVisible();
+        }
+
+        // Now type a new  message
+        await sendMessageInCurrentRoom(page, "World");
+
+        // wait a bit for the message to be sent
+        await expect(
+            page
+                .locator(".mx_EventTile_line")
+                .filter({ hasText: "World" })
+                .locator("..")
+                .locator(".mx_EventTile_receiptSent"),
+        ).toBeVisible();
+        {
+            const messageDiv = page.locator(".mx_EventTile_line").filter({ hasText: "World" });
+            // there should not be a shield
+            expect(await messageDiv.locator(".mx_EventTile_e2eIcon").count()).toEqual(0);
+        }
+
+        // trigger a migration
+        await context.route(`http://localhost:8080/config.json*`, async (route) => {
+            const json = {};
+            json["features"] = {
+                feature_rust_crypto: true,
+            };
+            json["setting_defaults"] = {
+                "RustCrypto.staged_rollout_percent": 100,
+            };
+            await route.fulfill({ json });
+        });
+
+        await page.reload();
+
+        await app.viewRoomByName("Room1");
+
+        // The shields should be migrated properly
+        {
+            const messageDiv = page.locator(".mx_EventTile_line").filter({ hasText: "Hello" });
+            await expect(messageDiv).toBeVisible();
+            // there should be a shield
+            await expect(messageDiv.locator(".mx_EventTile_e2eIcon")).toBeVisible();
+        }
+        {
+            const messageDiv = page.locator(".mx_EventTile_line").filter({ hasText: "World" });
+            await expect(messageDiv).toBeVisible();
+            // there should not be a shield
+            expect(await messageDiv.locator(".mx_EventTile_e2eIcon").count()).toEqual(0);
+        }
+
+        await app.settings.openUserSettings("Help & About");
+        await expect(page.getByText("Crypto version: Rust SDK")).toBeVisible();
+    });
 });

playwright/e2e/crypto/utils.ts

@@ -260,3 +260,35 @@ export async function createSharedRoomWithUser(
 
     return roomId;
 }
+
+/**
+ * Send a message in the current room
+ * @param page
+ * @param message - The message text to send
+ */
+export async function sendMessageInCurrentRoom(page: Page, message: string): Promise<void> {
+    await page.locator(".mx_MessageComposer").getByRole("textbox").fill(message);
+    await page.getByTestId("sendmessagebtn").click();
+}
+
+/**
+ * Create a room with the given name and encryption status using the room creation dialog.
+ *
+ * @param roomName - The name of the room to create
+ * @param isEncrypted - Whether the room should be encrypted
+ */
+export async function createRoom(page: Page, roomName: string, isEncrypted: boolean): Promise<void> {
+    await page.getByRole("button", { name: "Add room" }).click();
+    await page.locator(".mx_IconizedContextMenu").getByRole("menuitem", { name: "New room" }).click();
+
+    const dialog = page.locator(".mx_Dialog");
+
+    await dialog.getByLabel("Name").fill(roomName);
+
+    if (!isEncrypted) {
+        // it's enabled by default
+        await page.getByLabel("Enable end-to-end encryption").click();
+    }
+
+    await dialog.getByRole("button", { name: "Create room" }).click();
+}