Migrate invite-dialog.spec.ts from Cypress to Playwright (#11990)
* Remove old percy media query CSS Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Stabilise soft_logout.spec.ts Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots using `toMatchScreenshot` assertion with CSS overrides Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix accidentally commented test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Migrate invite-dialog.spec.ts from Cypress to Playwright Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove spurious await Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>pull/28217/head
Michael Telatynski
GitHub
parent
d06fc7d623
commit
ab9604056d
|
|
@ -1,176 +0,0 @@
|
|||
/*
|
||||
Copyright 2023 Suguru Hirahara
|
||||
|
||||
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 { MatrixClient } from "matrix-js-sdk/src/matrix";
|
||||
import { HomeserverInstance } from "../../plugins/utils/homeserver";
|
||||
|
||||
describe("Invite dialog", function () {
|
||||
let homeserver: HomeserverInstance;
|
||||
let bot: MatrixClient;
|
||||
const botName = "BotAlice";
|
||||
|
||||
beforeEach(() => {
|
||||
cy.startHomeserver("default").then((data) => {
|
||||
homeserver = data;
|
||||
cy.initTestUser(homeserver, "Hanako");
|
||||
|
||||
cy.getBot(homeserver, { displayName: botName, autoAcceptInvites: true }).then((_bot) => {
|
||||
bot = _bot;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cy.stopHomeserver(homeserver);
|
||||
});
|
||||
|
||||
it("should support inviting a user to a room", () => {
|
||||
// Create and view a room
|
||||
cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
|
||||
|
||||
// Assert that the room was configured
|
||||
cy.findByText("Hanako created and configured the room.").should("exist");
|
||||
|
||||
// Open the room info panel
|
||||
cy.findByRole("button", { name: "Room info" }).click();
|
||||
|
||||
cy.get(".mx_BaseCard").within(() => {
|
||||
cy.findByRole("menuitem", { name: "Invite" }).click();
|
||||
});
|
||||
|
||||
cy.get(".mx_InviteDialog_other").within(() => {
|
||||
cy.get(".mx_Dialog_header .mx_Dialog_title").within(() => {
|
||||
// Assert that the header is rendered
|
||||
cy.findByText("Invite to Test Room").should("exist");
|
||||
});
|
||||
|
||||
// Assert that the bar is rendered
|
||||
cy.get(".mx_InviteDialog_addressBar").should("exist");
|
||||
});
|
||||
|
||||
// TODO: unhide userId
|
||||
const percyCSS = ".mx_InviteDialog_helpText_userId { visibility: hidden !important; }";
|
||||
|
||||
// Take a snapshot of the invite dialog including its wrapper
|
||||
cy.get(".mx_Dialog_wrapper").percySnapshotElement("Invite Dialog - Room (without a user)", { percyCSS });
|
||||
|
||||
cy.get(".mx_InviteDialog_other").within(() => {
|
||||
cy.get(".mx_InviteDialog_identityServer").should("not.exist");
|
||||
|
||||
cy.findByTestId("invite-dialog-input").type(bot.getUserId());
|
||||
|
||||
// Assert that notification about identity servers appears after typing userId
|
||||
cy.get(".mx_InviteDialog_identityServer").should("exist");
|
||||
|
||||
cy.get(".mx_InviteDialog_tile_nameStack").within(() => {
|
||||
cy.get(".mx_InviteDialog_tile_nameStack_userId").within(() => {
|
||||
// Assert that the bot id is rendered properly
|
||||
cy.findByText(bot.getUserId()).should("exist");
|
||||
});
|
||||
|
||||
cy.get(".mx_InviteDialog_tile_nameStack_name").within(() => {
|
||||
cy.findByText(botName).click();
|
||||
});
|
||||
});
|
||||
|
||||
cy.get(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").within(() => {
|
||||
cy.findByText(botName).should("exist");
|
||||
});
|
||||
});
|
||||
|
||||
// Take a snapshot of the invite dialog with a user pill
|
||||
cy.get(".mx_Dialog_wrapper").percySnapshotElement("Invite Dialog - Room (with a user pill)", { percyCSS });
|
||||
|
||||
cy.get(".mx_InviteDialog_other").within(() => {
|
||||
// Invite the bot
|
||||
cy.findByRole("button", { name: "Invite" }).click();
|
||||
});
|
||||
|
||||
// Assert that the invite dialog disappears
|
||||
cy.get(".mx_InviteDialog_other").should("not.exist");
|
||||
|
||||
// Assert that they were invited and joined
|
||||
cy.findByText(`${botName} joined the room`).should("exist");
|
||||
});
|
||||
|
||||
it("should support inviting a user to Direct Messages", () => {
|
||||
cy.get(".mx_RoomList").within(() => {
|
||||
cy.findByRole("button", { name: "Start chat" }).click();
|
||||
});
|
||||
|
||||
cy.get(".mx_InviteDialog_other").within(() => {
|
||||
cy.get(".mx_Dialog_header .mx_Dialog_title").within(() => {
|
||||
// Assert that the header is rendered
|
||||
cy.findByText("Direct Messages").should("exist");
|
||||
});
|
||||
|
||||
// Assert that the bar is rendered
|
||||
cy.get(".mx_InviteDialog_addressBar").should("exist");
|
||||
});
|
||||
|
||||
// TODO: unhide userId and invite link
|
||||
const percyCSS =
|
||||
".mx_InviteDialog_footer_link, .mx_InviteDialog_helpText_userId { visibility: hidden !important; }";
|
||||
|
||||
// Take a snapshot of the invite dialog including its wrapper
|
||||
cy.get(".mx_Dialog_wrapper").percySnapshotElement("Invite Dialog - Direct Messages (without a user)", {
|
||||
percyCSS,
|
||||
});
|
||||
|
||||
cy.get(".mx_InviteDialog_other").within(() => {
|
||||
cy.findByTestId("invite-dialog-input").type(bot.getUserId());
|
||||
|
||||
cy.get(".mx_InviteDialog_tile_nameStack").within(() => {
|
||||
cy.findByText(bot.getUserId()).should("exist");
|
||||
cy.findByText(botName).click();
|
||||
});
|
||||
|
||||
cy.get(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").within(() => {
|
||||
cy.findByText(botName).should("exist");
|
||||
});
|
||||
});
|
||||
|
||||
// Take a snapshot of the invite dialog with a user pill
|
||||
cy.get(".mx_Dialog_wrapper").percySnapshotElement("Invite Dialog - Direct Messages (with a user pill)", {
|
||||
percyCSS,
|
||||
});
|
||||
|
||||
cy.get(".mx_InviteDialog_other").within(() => {
|
||||
// Open a direct message UI
|
||||
cy.findByRole("button", { name: "Go" }).click();
|
||||
});
|
||||
|
||||
// Assert that the invite dialog disappears
|
||||
cy.get(".mx_InviteDialog_other").should("not.exist");
|
||||
|
||||
// Assert that the hovered user name on invitation UI does not have background color
|
||||
// TODO: implement the test on room-header.spec.ts
|
||||
cy.get(".mx_LegacyRoomHeader").within(() => {
|
||||
cy.get(".mx_LegacyRoomHeader_name--textonly")
|
||||
.realHover()
|
||||
.should("have.css", "background-color", "rgba(0, 0, 0, 0)");
|
||||
});
|
||||
|
||||
// Send a message to invite the bots
|
||||
cy.getComposer().type("Hello{enter}");
|
||||
|
||||
// Assert that they were invited and joined
|
||||
cy.findByText(`${botName} joined the room`).should("exist");
|
||||
|
||||
// Assert that the message is displayed at the bottom
|
||||
cy.get(".mx_EventTile_last").findByText("Hello").should("exist");
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
/*
|
||||
Copyright 2023 Suguru Hirahara
|
||||
Copyright 2023 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 { test, expect } from "../../element-web-test";
|
||||
|
||||
test.describe("Invite dialog", function () {
|
||||
test.use({
|
||||
displayName: "Hanako",
|
||||
botCreateOpts: {
|
||||
displayName: "BotAlice",
|
||||
},
|
||||
});
|
||||
|
||||
const botName = "BotAlice";
|
||||
|
||||
test("should support inviting a user to a room", async ({ page, app, user, bot }) => {
|
||||
// Create and view a room
|
||||
await app.client.createRoom({ name: "Test Room" });
|
||||
await app.viewRoomByName("Test Room");
|
||||
|
||||
// Assert that the room was configured
|
||||
await expect(page.getByText("Hanako created and configured the room.")).toBeVisible();
|
||||
|
||||
// Open the room info panel
|
||||
await page.getByRole("button", { name: "Room info" }).click();
|
||||
|
||||
await page.locator(".mx_BaseCard").getByRole("menuitem", { name: "Invite" }).click();
|
||||
|
||||
const other = page.locator(".mx_InviteDialog_other");
|
||||
// Assert that the header is rendered
|
||||
await expect(
|
||||
other.locator(".mx_Dialog_header .mx_Dialog_title").getByText("Invite to Test Room"),
|
||||
).toBeVisible();
|
||||
// Assert that the bar is rendered
|
||||
await expect(other.locator(".mx_InviteDialog_addressBar")).toBeVisible();
|
||||
|
||||
await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-room-without-user.png", {
|
||||
mask: [page.locator(".mx_InviteDialog_helpText_userId")],
|
||||
});
|
||||
|
||||
await expect(other.locator(".mx_InviteDialog_identityServer")).not.toBeVisible();
|
||||
|
||||
await other.getByTestId("invite-dialog-input").fill(bot.credentials.userId);
|
||||
|
||||
// Assert that notification about identity servers appears after typing userId
|
||||
await expect(other.locator(".mx_InviteDialog_identityServer")).toBeVisible();
|
||||
|
||||
// Assert that the bot id is rendered properly
|
||||
await expect(
|
||||
other.locator(".mx_InviteDialog_tile_nameStack_userId").getByText(bot.credentials.userId),
|
||||
).toBeVisible();
|
||||
|
||||
await other.locator(".mx_InviteDialog_tile_nameStack_name").getByText(botName).click();
|
||||
|
||||
await expect(
|
||||
other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),
|
||||
).toBeVisible();
|
||||
|
||||
// Take a snapshot of the invite dialog with a user pill
|
||||
await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-room-with-user-pill.png", {
|
||||
mask: [page.locator(".mx_InviteDialog_helpText_userId")],
|
||||
});
|
||||
|
||||
// Invite the bot
|
||||
await other.getByRole("button", { name: "Invite" }).click();
|
||||
|
||||
// Assert that the invite dialog disappears
|
||||
await expect(page.locator(".mx_InviteDialog_other")).not.toBeVisible();
|
||||
|
||||
// Assert that they were invited and joined
|
||||
await expect(page.getByText(`${botName} joined the room`)).toBeVisible();
|
||||
});
|
||||
|
||||
test("should support inviting a user to Direct Messages", async ({ page, app, user, bot }) => {
|
||||
await page.locator(".mx_RoomList").getByRole("button", { name: "Start chat" }).click();
|
||||
|
||||
const other = page.locator(".mx_InviteDialog_other");
|
||||
// Assert that the header is rendered
|
||||
await expect(other.locator(".mx_Dialog_header .mx_Dialog_title").getByText("Direct Messages")).toBeVisible();
|
||||
|
||||
// Assert that the bar is rendered
|
||||
await expect(other.locator(".mx_InviteDialog_addressBar")).toBeVisible();
|
||||
|
||||
// Take a snapshot of the invite dialog
|
||||
await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-without-user.png", {
|
||||
mask: [page.locator(".mx_InviteDialog_footer_link, .mx_InviteDialog_helpText a")],
|
||||
});
|
||||
|
||||
await other.getByTestId("invite-dialog-input").fill(bot.credentials.userId);
|
||||
|
||||
await expect(other.locator(".mx_InviteDialog_tile_nameStack").getByText(bot.credentials.userId)).toBeVisible();
|
||||
await other.locator(".mx_InviteDialog_tile_nameStack").getByText(botName).click();
|
||||
|
||||
await expect(
|
||||
other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),
|
||||
).toBeVisible();
|
||||
|
||||
// Take a snapshot of the invite dialog with a user pill
|
||||
await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-with-user-pill.png", {
|
||||
mask: [page.locator(".mx_InviteDialog_footer_link, .mx_InviteDialog_helpText a")],
|
||||
});
|
||||
|
||||
// Open a direct message UI
|
||||
await other.getByRole("button", { name: "Go" }).click();
|
||||
|
||||
// Assert that the invite dialog disappears
|
||||
await expect(page.locator(".mx_InviteDialog_other")).not.toBeVisible();
|
||||
|
||||
// Assert that the hovered user name on invitation UI does not have background color
|
||||
// TODO: implement the test on room-header.spec.ts
|
||||
const roomHeader = page.locator(".mx_LegacyRoomHeader");
|
||||
await roomHeader.locator(".mx_LegacyRoomHeader_name--textonly").hover();
|
||||
await expect(roomHeader.locator(".mx_LegacyRoomHeader_name--textonly")).toHaveCSS(
|
||||
"background-color",
|
||||
"rgba(0, 0, 0, 0)",
|
||||
);
|
||||
|
||||
// Send a message to invite the bots
|
||||
const composer = app.getComposer().locator("[contenteditable]");
|
||||
await composer.fill("Hello}");
|
||||
await composer.press("Enter");
|
||||
|
||||
// Assert that they were invited and joined
|
||||
await expect(page.getByText(`${botName} joined the room`)).toBeVisible();
|
||||
|
||||
// Assert that the message is displayed at the bottom
|
||||
await expect(page.locator(".mx_EventTile_last").getByText("Hello")).toBeVisible();
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Loading…
Reference in New Issue