Migrate room-directory.spec.ts from Cypress to Playwright (#11997)

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

cypress/e2e/room-directory/room-directory.spec.ts

@@ -1,106 +0,0 @@
-/*
-Copyright 2022 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.
-*/
-
-/// <reference types="cypress" />
-
-import { HomeserverInstance } from "../../plugins/utils/homeserver";
-import { MatrixClient } from "../../global";
-
-describe("Room Directory", () => {
-    let homeserver: HomeserverInstance;
-
-    beforeEach(() => {
-        cy.startHomeserver("default").then((data) => {
-            homeserver = data;
-
-            cy.initTestUser(homeserver, "Ray");
-            cy.getBot(homeserver, { displayName: "Paul" }).as("bot");
-        });
-    });
-
-    afterEach(() => {
-        cy.stopHomeserver(homeserver);
-    });
-
-    it("should allow admin to add alias & publish room to directory", () => {
-        cy.window({ log: false }).then((win) => {
-            cy.createRoom({
-                name: "Gaming",
-                preset: win.matrixcs.Preset.PublicChat,
-            }).as("roomId");
-        });
-
-        cy.viewRoomByName("Gaming");
-        cy.openRoomSettings();
-
-        // First add a local address `gaming`
-        cy.contains(".mx_SettingsFieldset", "Local Addresses").within(() => {
-            cy.findByRole("textbox").type("gaming");
-            cy.findByRole("button", { name: "Add" }).click();
-            cy.findByText("#gaming:localhost").should("have.class", "mx_EditableItem_item").should("exist");
-        });
-
-        // Publish into the public rooms directory
-        cy.contains(".mx_SettingsFieldset", "Published Addresses").within(() => {
-            cy.get("#canonicalAlias").find(":selected").findByText("#gaming:localhost");
-            cy.findByLabelText("Publish this room to the public in localhost's room directory?")
-                .click()
-                .should("have.attr", "aria-checked", "true");
-        });
-
-        cy.closeDialog();
-
-        cy.all([cy.get<MatrixClient>("@bot"), cy.get<string>("@roomId")]).then(async ([bot, roomId]) => {
-            const resp = await bot.publicRooms({});
-            expect(resp.total_room_count_estimate).to.equal(1);
-            expect(resp.chunk).to.have.length(1);
-            expect(resp.chunk[0].room_id).to.equal(roomId);
-        });
-    });
-
-    it("should allow finding published rooms in directory", () => {
-        const name = "This is a public room";
-        cy.all([cy.window({ log: false }), cy.get<MatrixClient>("@bot")]).then(([win, bot]) => {
-            bot.createRoom({
-                visibility: win.matrixcs.Visibility.Public,
-                name,
-                room_alias_name: "test1234",
-            });
-        });
-
-        cy.findByRole("button", { name: "Explore rooms" }).click();
-
-        cy.get(".mx_SpotlightDialog").within(() => {
-            cy.findByRole("textbox", { name: "Search" }).type("Unknown Room");
-            cy.findByText("If you can't find the room you're looking for, ask for an invite or create a new room.")
-                .should("have.class", "mx_SpotlightDialog_otherSearches_messageSearchText")
-                .should("exist");
-        });
-        cy.get(".mx_SpotlightDialog_wrapper").percySnapshotElement("Room Directory - filtered no results");
-
-        cy.get(".mx_SpotlightDialog").within(() => {
-            cy.findByRole("textbox", { name: "Search" }).type("{selectAll}{backspace}test1234");
-            cy.findByText(name).should("have.class", "mx_SpotlightDialog_result_publicRoomName").should("exist");
-        });
-
-        // Disabled because flaky - see https://github.com/vector-im/element-web/issues/24881
-        //cy.get(".mx_SpotlightDialog_wrapper").percySnapshotElement("Room Directory - filtered one result");
-
-        cy.get(".mx_SpotlightDialog .mx_SpotlightDialog_option").findByRole("button", { name: "Join" }).click();
-
-        cy.url().should("contain", `/#/room/#test1234:localhost`);
-    });
-});

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

@@ -0,0 +1,88 @@
+/*
+Copyright 2022 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 type { Preset, Visibility } from "matrix-js-sdk/src/matrix";
+import { test, expect } from "../../element-web-test";
+
+test.describe("Room Directory", () => {
+    test.use({
+        displayName: "Ray",
+        botCreateOpts: { displayName: "Paul" },
+    });
+
+    test("should allow admin to add alias & publish room to directory", async ({ page, app, user, bot }) => {
+        const roomId = await app.client.createRoom({
+            name: "Gaming",
+            preset: "public_chat" as Preset,
+        });
+
+        await app.viewRoomByName("Gaming");
+        await app.settings.openRoomSettings();
+
+        // First add a local address `gaming`
+        const localAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Local Addresses" });
+        await localAddresses.getByRole("textbox").fill("gaming");
+        await localAddresses.getByRole("button", { name: "Add" }).click();
+        await expect(localAddresses.getByText("#gaming:localhost")).toHaveClass("mx_EditableItem_item");
+
+        // Publish into the public rooms directory
+        const publishedAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Published Addresses" });
+        await expect(publishedAddresses.locator("#canonicalAlias")).toHaveValue("#gaming:localhost");
+        const checkbox = publishedAddresses.getByLabel(
+            "Publish this room to the public in localhost's room directory?",
+        );
+        await checkbox.check();
+        await expect(checkbox).toBeChecked();
+
+        await app.closeDialog();
+
+        const resp = await bot.publicRooms({});
+        expect(resp.total_room_count_estimate).toEqual(1);
+        expect(resp.chunk).toHaveLength(1);
+        expect(resp.chunk[0].room_id).toEqual(roomId);
+    });
+
+    test("should allow finding published rooms in directory", async ({ page, app, user, bot }) => {
+        const name = "This is a public room";
+        await bot.createRoom({
+            visibility: "public" as Visibility,
+            name,
+            room_alias_name: "test1234",
+        });
+
+        await page.getByRole("button", { name: "Explore rooms" }).click();
+
+        const dialog = page.locator(".mx_SpotlightDialog");
+        await dialog.getByRole("textbox", { name: "Search" }).fill("Unknown Room");
+        await expect(
+            dialog.getByText("If you can't find the room you're looking for, ask for an invite or create a new room."),
+        ).toHaveClass("mx_SpotlightDialog_otherSearches_messageSearchText");
+
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("filtered-no-results.png");
+
+        await dialog.getByRole("textbox", { name: "Search" }).fill("test1234");
+        await expect(dialog.getByText(name)).toHaveClass("mx_SpotlightDialog_result_publicRoomName");
+
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("filtered-one-result.png");
+
+        await page
+            .locator(".mx_SpotlightDialog .mx_SpotlightDialog_option")
+            .getByRole("button", { name: "Join" })
+            .click();
+
+        await expect(page).toHaveURL("/#/room/#test1234:localhost");
+    });
+});

playwright/pages/client.ts

@@ -25,6 +25,7 @@ import type {
     Room,
     MatrixEvent,
     ReceiptType,
+    IRoomDirectoryOptions,
 } from "matrix-js-sdk/src/matrix";
 
 export class Client {
@@ -223,4 +224,11 @@ export class Client {
             { event, receiptType, unthreaded },
         );
     }
+
+    public async publicRooms(options?: IRoomDirectoryOptions): ReturnType<MatrixClient["publicRooms"]> {
+        const client = await this.prepareClient();
+        return await client.evaluate((client, options) => {
+            return client.publicRooms(options);
+        }, options);
+    }
 }