Migrate location.spec.ts from Cypress to Playwright (#11945)

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

cypress/e2e/location/location.spec.ts

@@ -1,74 +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 Chainable = Cypress.Chainable;
-
-describe("Location sharing", () => {
-    let homeserver: HomeserverInstance;
-
-    const selectLocationShareTypeOption = (shareType: string): Chainable<JQuery> => {
-        return cy.findByTestId(`share-location-option-${shareType}`);
-    };
-
-    const submitShareLocation = (): void => {
-        cy.findByRole("button", { name: "Share location" }).click();
-    };
-
-    beforeEach(() => {
-        cy.window().then((win) => {
-            win.localStorage.setItem("mx_lhs_size", "0"); // Collapse left panel for these tests
-        });
-        cy.startHomeserver("default").then((data) => {
-            homeserver = data;
-
-            cy.initTestUser(homeserver, "Tom");
-        });
-    });
-
-    afterEach(() => {
-        cy.stopHomeserver(homeserver);
-    });
-
-    it("sends and displays pin drop location message successfully", () => {
-        let roomId: string;
-        cy.createRoom({}).then((_roomId) => {
-            roomId = _roomId;
-            cy.visit("/#/room/" + roomId);
-        });
-
-        cy.openMessageComposerOptions().within(() => {
-            cy.findByRole("menuitem", { name: "Location" }).click();
-        });
-
-        selectLocationShareTypeOption("Pin").click();
-
-        cy.get("#mx_LocationPicker_map").click("center");
-
-        submitShareLocation();
-
-        cy.get(".mx_RoomView_body .mx_EventTile .mx_MLocationBody", { timeout: 10000 }).should("exist").click();
-
-        // clicking location tile opens maximised map
-        cy.get(".mx_LocationViewDialog_wrapper").should("exist");
-
-        cy.closeDialog();
-
-        cy.get(".mx_Marker").should("exist");
-    });
-});

playwright/e2e/location/location.spec.ts

@@ -0,0 +1,67 @@
+/*
+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 { Locator, Page } from "@playwright/test";
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Location sharing", () => {
+    const selectLocationShareTypeOption = (page: Page, shareType: string): Locator => {
+        return page.getByTestId(`share-location-option-${shareType}`);
+    };
+
+    const submitShareLocation = (page: Page): Promise<void> => {
+        return page.getByRole("button", { name: "Share location" }).click();
+    };
+
+    test.use({
+        displayName: "Tom",
+    });
+
+    test.beforeEach(async ({ page }) => {
+        await page.addInitScript(() => {
+            window.localStorage.setItem("mx_lhs_size", "0");
+        });
+    });
+
+    test("sends and displays pin drop location message successfully", async ({ page, user, app }) => {
+        const roomId = await app.createRoom({});
+        await page.goto(`/#/room/${roomId}`);
+
+        const composerOptions = await app.openMessageComposerOptions();
+        await composerOptions.getByRole("menuitem", { name: "Location", exact: true }).click();
+
+        await selectLocationShareTypeOption(page, "Pin").click();
+
+        await page.locator("#mx_LocationPicker_map").click();
+
+        await submitShareLocation(page);
+
+        await page.locator(".mx_RoomView_body .mx_EventTile .mx_MLocationBody").click({
+            position: {
+                x: 225,
+                y: 150,
+            },
+        });
+
+        // clicking location tile opens maximised map
+        await expect(page.getByRole("dialog")).toBeVisible();
+
+        await app.closeDialog();
+
+        await expect(page.locator(".mx_Marker")).toBeVisible();
+    });
+});

playwright/pages/ElementAppPage.ts

@@ -61,6 +61,13 @@ export class ElementAppPage {
         return this.page.locator(".mx_CreateRoomDialog");
     }
 
+    /**
+     * Close dialog currently open dialog
+     */
+    public async closeDialog(): Promise<void> {
+        return this.page.getByRole("button", { name: "Close dialog", exact: true }).click();
+    }
+
     /**
      * Create a room with given options.
      * @param options the options to apply when creating the room
@@ -74,4 +81,23 @@ export class ElementAppPage {
                 .then((res) => res.room_id);
         }, options);
     }
+
+    /**
+     * Get the composer element
+     * @param isRightPanel whether to select the right panel composer, otherwise the main timeline composer
+     */
+    public async getComposer(isRightPanel?: boolean): Promise<Locator> {
+        const panelClass = isRightPanel ? ".mx_RightPanel" : ".mx_RoomView_body";
+        return this.page.locator(`${panelClass} .mx_MessageComposer`);
+    }
+
+    /**
+     * Open the message composer kebab menu
+     * @param isRightPanel whether to select the right panel composer, otherwise the main timeline composer
+     */
+    public async openMessageComposerOptions(isRightPanel?: boolean): Promise<Locator> {
+        const composer = await this.getComposer(isRightPanel);
+        await composer.getByRole("button", { name: "More options", exact: true }).click();
+        return this.page.getByRole("menu");
+    }
 }