diff --git a/cypress/e2e/location/location.spec.ts b/cypress/e2e/location/location.spec.ts deleted file mode 100644 index 6588cde1a4..0000000000 --- a/cypress/e2e/location/location.spec.ts +++ /dev/null @@ -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. -*/ - -/// - -import { HomeserverInstance } from "../../plugins/utils/homeserver"; -import Chainable = Cypress.Chainable; - -describe("Location sharing", () => { - let homeserver: HomeserverInstance; - - const selectLocationShareTypeOption = (shareType: string): Chainable => { - 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"); - }); -}); diff --git a/playwright/e2e/location/location.spec.ts b/playwright/e2e/location/location.spec.ts new file mode 100644 index 0000000000..4b2d0f796d --- /dev/null +++ b/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 => { + 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(); + }); +}); diff --git a/playwright/pages/ElementAppPage.ts b/playwright/pages/ElementAppPage.ts index 1735877f5b..a984ba0d00 100644 --- a/playwright/pages/ElementAppPage.ts +++ b/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 { + 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 { + 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 { + const composer = await this.getComposer(isRightPanel); + await composer.getByRole("button", { name: "More options", exact: true }).click(); + return this.page.getByRole("menu"); + } }