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

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2023-11-28 00:37:20 +00:00 committed by GitHub
parent 0bbb9e8c89
commit 33d527ee5e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 93 additions and 74 deletions

View file

@ -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");
});
});

View file

@ -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();
});
});

View file

@ -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");
}
}