Migrate right-panel/* from Cypress to Playwright (#11954)

* Migrate file-panel.spec.ts from Cypress to Playwright

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

* Migrate right-panel.spec.ts from Cypress to Playwright

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

* Migrate notification-panel.spec.ts from Cypress to Playwright

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

* Update screenshots

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

* Update screenshots

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

* Fix test flakes

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

* delint

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

* Update screenshot

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

* Fix tests

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

* Update screenshots

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

* Try stabilise test

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

* sleep

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

* Handle both cases

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

* Fix assertion

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

* Flip

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

* Test

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

* Iterate

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

* Test

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2023-12-01 12:24:49 +00:00 committed by GitHub
parent 1f06d97ffe
commit 446400b6b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 530 additions and 508 deletions

View file

@ -1,265 +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.
*/
/// <reference types="cypress" />
import { HomeserverInstance } from "../../plugins/utils/homeserver";
import Chainable = Cypress.Chainable;
const ROOM_NAME = "Test room";
const NAME = "Alice";
const viewRoomSummaryByName = (name: string): Chainable<JQuery<HTMLElement>> => {
cy.viewRoomByName(name);
cy.findByRole("button", { name: "Room info" }).click();
return checkRoomSummaryCard(name);
};
const checkRoomSummaryCard = (name: string): Chainable<JQuery<HTMLElement>> => {
cy.get(".mx_RoomSummaryCard").should("have.length", 1);
return cy.get(".mx_RoomSummaryCard").should("contain", name);
};
const uploadFile = (file: string) => {
// Upload a file from the message composer
cy.get(".mx_MessageComposer_actions input[type='file']").selectFile(file, { force: true });
cy.get(".mx_Dialog").within(() => {
cy.findByRole("button", { name: "Upload" }).click();
});
// Wait until the file is sent
cy.get(".mx_RoomView_statusArea_expanded").should("not.exist");
cy.get(".mx_EventTile.mx_EventTile_last .mx_EventTile_receiptSent").should("exist");
};
describe("FilePanel", () => {
let homeserver: HomeserverInstance;
beforeEach(() => {
cy.startHomeserver("default").then((data) => {
homeserver = data;
cy.initTestUser(homeserver, NAME).then(() =>
cy.window({ log: false }).then(() => {
cy.createRoom({ name: ROOM_NAME });
}),
);
});
// Open the file panel
viewRoomSummaryByName(ROOM_NAME);
cy.findByRole("menuitem", { name: "Files" }).click();
cy.get(".mx_FilePanel").should("have.length", 1);
});
afterEach(() => {
cy.stopHomeserver(homeserver);
});
describe("render", () => {
it("should render empty state", () => {
// Wait until the information about the empty state is rendered
cy.get(".mx_FilePanel_empty").should("exist");
// Take a snapshot of RightPanel - fix https://github.com/vector-im/element-web/issues/25332
cy.get(".mx_RightPanel").percySnapshotElement("File Panel - empty", {
widths: [264], // Emulate the UI. The value is based on minWidth specified on MainSplit.tsx
});
});
it("should list tiles on the panel", () => {
// Upload multiple files
uploadFile("cypress/fixtures/riot.png"); // Image
uploadFile("cypress/fixtures/1sec.ogg"); // Audio
uploadFile("cypress/fixtures/matrix-org-client-versions.json"); // JSON
cy.get(".mx_RoomView_body").within(() => {
// Assert that all of the file were uploaded and rendered
cy.get(".mx_EventTile[data-layout='group']").should("have.length", 3);
// Assert that the image exists and has the alt string
cy.get(".mx_EventTile[data-layout='group'] img[alt='riot.png']").should("exist");
// Assert that the audio player is rendered
cy.get(".mx_EventTile[data-layout='group'] .mx_AudioPlayer_container").should("exist");
// Assert that the file button exists
cy.contains(".mx_EventTile_last[data-layout='group'] .mx_MFileBody", ".json").should("exist");
});
// Assert that the file panel is opened inside mx_RightPanel and visible
cy.get(".mx_RightPanel .mx_FilePanel").should("be.visible");
cy.get(".mx_FilePanel").within(() => {
cy.get(".mx_RoomView_MessageList").within(() => {
// Assert that data-layout attribute is not applied to file tiles on the panel
cy.get(".mx_EventTile[data-layout]").should("not.exist");
// Assert that all of the file tiles are rendered
cy.get(".mx_EventTile").should("have.length", 3);
// Assert that the download links are rendered
cy.get(".mx_MFileBody_download").should("have.length", 3);
// Assert that the sender of the files is rendered on all of the tiles
cy.findAllByText(NAME).should("have.length", 3);
// Detect the image file
cy.get(".mx_EventTile_mediaLine.mx_EventTile_image").within(() => {
// Assert that the image is specified as thumbnail and has the alt string
cy.get(".mx_MImageBody").within(() => {
cy.get("img[class='mx_MImageBody_thumbnail']").should("exist");
cy.get("img[alt='riot.png']").should("exist");
});
});
// Detect the audio file
cy.get(".mx_EventTile_mediaLine .mx_MAudioBody").within(() => {
// Assert that the audio player is rendered
cy.get(".mx_AudioPlayer_container").within(() => {
// Assert that the play button is rendered
cy.findByRole("button", { name: "Play" }).should("exist");
});
});
// Detect the JSON file
// Assert that the tile is rendered as a button
cy.get(".mx_EventTile_mediaLine .mx_MFileBody .mx_MFileBody_info[role='button']").within(() => {
// Assert that the file name is rendered inside the button with ellipsis
cy.get(".mx_MFileBody_info_filename").within(() => {
cy.findByText(/matrix.*?\.json/);
});
});
});
});
// Make the viewport tall enough to display all of the file tiles on FilePanel
cy.viewport(660, 1000);
cy.get(".mx_FilePanel").within(() => {
// In case the panel is scrollable on the resized viewport
cy.get(".mx_ScrollPanel").scrollTo("bottom", { ensureScrollable: false });
// Assert that the value for flexbox is applied
cy.get(".mx_ScrollPanel .mx_RoomView_MessageList").should("have.css", "justify-content", "flex-end");
// Assert that all of the file tiles are visible before taking a snapshot
cy.get(".mx_RoomView_MessageList").within(() => {
cy.get(".mx_MImageBody").should("be.visible"); // top
cy.get(".mx_MAudioBody").should("be.visible"); // middle
cy.get(".mx_EventTile_last").within(() => {
// bottom
cy.get(".mx_EventTile_senderDetails").within(() => {
cy.get(".mx_DisambiguatedProfile").should("be.visible");
cy.get(".mx_MessageTimestamp").should("be.visible");
});
});
});
});
// Exclude timestamps and read markers from snapshot
// FIXME: hide mx_SeekBar because flaky - see https://github.com/vector-im/element-web/issues/24897
// Remove this once https://github.com/vector-im/element-web/issues/24898 is fixed.
const percyCSS =
".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .mx_SeekBar { visibility: hidden !important; }";
// Take a snapshot of file tiles list on FilePanel
cy.get(".mx_FilePanel .mx_RoomView_MessageList").percySnapshotElement("File tiles list on FilePanel", {
percyCSS,
widths: [250], // magic number, should be around the default width
});
});
// https://github.com/vector-im/element-web/issues/26045
it.skip("should render the audio player and play the audio file on the panel", () => {
// Upload an image file
uploadFile("cypress/fixtures/1sec.ogg");
cy.get(".mx_FilePanel").within(() => {
cy.get(".mx_RoomView_MessageList").within(() => {
// Detect the audio file
cy.get(".mx_EventTile_mediaLine .mx_MAudioBody").within(() => {
// Assert that the audio player is rendered
cy.get(".mx_AudioPlayer_container").within(() => {
// Assert that the audio file information is rendered
cy.get(".mx_AudioPlayer_mediaInfo").within(() => {
cy.get(".mx_AudioPlayer_mediaName").within(() => {
cy.findByText("1sec.ogg");
});
cy.contains(".mx_AudioPlayer_byline", "00:01").should("exist");
cy.contains(".mx_AudioPlayer_byline", "(3.56 KB)").should("exist"); // actual size
});
// Assert that the duration counter is 00:01 before clicking the play button
cy.contains(".mx_AudioPlayer_mediaInfo time", "00:01").should("exist");
// Assert that the counter is zero before clicking the play button
cy.contains(".mx_AudioPlayer_seek [role='timer']", "00:00").should("exist");
// Click the play button
cy.wait(500);
cy.findByRole("button", { name: "Play" }).click();
// Assert that the pause button is rendered
cy.findByRole("button", { name: "Pause" }).should("exist");
// Assert that the timer is reset when the audio file finished playing
cy.contains(".mx_AudioPlayer_seek [role='timer']", "00:00").should("exist");
// Assert that the play button is rendered
cy.findByRole("button", { name: "Play" }).should("exist");
});
});
});
});
});
it("should render file size in kibibytes on a file tile", () => {
const size = "1.12 KB"; // actual file size in kibibytes (1024 bytes)
// Upload a file
uploadFile("cypress/fixtures/matrix-org-client-versions.json");
cy.get(".mx_FilePanel .mx_EventTile").within(() => {
// Assert that the file size is displayed in kibibytes, not kilobytes (1000 bytes)
// See: https://github.com/vector-im/element-web/issues/24866
cy.contains(".mx_MFileBody_info_filename", size).should("exist");
cy.get(".mx_MFileBody_download").within(() => {
cy.contains("a", size).should("exist");
cy.contains(".mx_MImageBody_size", size).should("exist");
});
});
});
});
describe("download", () => {
it("should download an image via the link on the panel", () => {
// Upload an image file
uploadFile("cypress/fixtures/riot.png");
cy.get(".mx_FilePanel").within(() => {
cy.get(".mx_RoomView_MessageList").within(() => {
// Detect the image file on the panel
cy.get(".mx_EventTile_mediaLine.mx_EventTile_image .mx_MImageBody").within(() => {
// Click the anchor link (not the image itself)
cy.get(".mx_MFileBody_download a").click();
cy.readFile("cypress/downloads/riot.png").should("exist");
});
});
});
});
});
});

View file

@ -1,53 +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.
*/
/// <reference types="cypress" />
import { HomeserverInstance } from "../../plugins/utils/homeserver";
const ROOM_NAME = "Test room";
const NAME = "Alice";
describe("NotificationPanel", () => {
let homeserver: HomeserverInstance;
beforeEach(() => {
cy.startHomeserver("default").then((data) => {
homeserver = data;
cy.initTestUser(homeserver, NAME).then(() => {
cy.createRoom({ name: ROOM_NAME });
});
});
});
afterEach(() => {
cy.stopHomeserver(homeserver);
});
it("should render empty state", () => {
cy.enableLabsFeature("feature_notifications");
cy.viewRoomByName(ROOM_NAME);
cy.findByRole("button", { name: "Notifications" }).click();
// Wait until the information about the empty state is rendered
cy.get(".mx_NotificationPanel_empty").should("exist");
// Take a snapshot of RightPanel
cy.get(".mx_RightPanel").percySnapshotElement("Notification Panel - empty", {
widths: [264], // Emulate the UI. The value is based on minWidth specified on MainSplit.tsx
});
});
});

View file

@ -1,184 +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;
const ROOM_NAME = "Test room";
const ROOM_NAME_LONG =
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " +
"et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " +
"aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " +
"dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " +
"officia deserunt mollit anim id est laborum.";
const SPACE_NAME = "Test space";
const NAME = "Alice";
const ROOM_ADDRESS_LONG =
"loremIpsumDolorSitAmetConsecteturAdipisicingElitSedDoEiusmodTemporIncididuntUtLaboreEtDoloreMagnaAliqua";
const getMemberTileByName = (name: string): Chainable<JQuery<HTMLElement>> => {
return cy.get(`.mx_EntityTile, [title="${name}"]`);
};
const viewRoomSummaryByName = (name: string): Chainable<JQuery<HTMLElement>> => {
cy.viewRoomByName(name);
cy.findByRole("button", { name: "Room info" }).click();
return checkRoomSummaryCard(name);
};
const checkRoomSummaryCard = (name: string): Chainable<JQuery<HTMLElement>> => {
cy.get(".mx_RoomSummaryCard").should("have.length", 1);
return cy.get(".mx_RoomSummaryCard").should("contain", name);
};
describe("RightPanel", () => {
let homeserver: HomeserverInstance;
beforeEach(() => {
cy.startHomeserver("default").then((data) => {
homeserver = data;
cy.initTestUser(homeserver, NAME).then(() =>
cy.window({ log: false }).then(() => {
cy.createRoom({ name: ROOM_NAME });
cy.createSpace({ name: SPACE_NAME });
}),
);
});
});
afterEach(() => {
cy.stopHomeserver(homeserver);
});
describe("in rooms", () => {
it("should handle long room address and long room name", () => {
cy.createRoom({ name: ROOM_NAME_LONG });
viewRoomSummaryByName(ROOM_NAME_LONG);
cy.openRoomSettings();
// Set a local room address
cy.contains(".mx_SettingsFieldset", "Local Addresses").within(() => {
cy.findByRole("textbox").type(ROOM_ADDRESS_LONG);
cy.findByRole("button", { name: "Add" }).click();
cy.findByText(`#${ROOM_ADDRESS_LONG}:localhost`)
.should("have.class", "mx_EditableItem_item")
.should("exist");
});
cy.closeDialog();
// Close and reopen the right panel to render the room address
cy.findByRole("button", { name: "Room info" }).click();
cy.get(".mx_RightPanel").should("not.exist");
cy.findByRole("button", { name: "Room info" }).click();
cy.get(".mx_RightPanel").percySnapshotElement("RoomSummaryCard - with a room name and a local address", {
widths: [264], // Emulate the UI. The value is based on minWidth specified on MainSplit.tsx
});
});
it("should handle clicking add widgets", () => {
viewRoomSummaryByName(ROOM_NAME);
cy.findByRole("button", { name: "Add widgets, bridges & bots" }).click();
cy.get(".mx_IntegrationManager").should("have.length", 1);
});
it("should handle viewing export chat", () => {
viewRoomSummaryByName(ROOM_NAME);
cy.findByRole("menuitem", { name: "Export Chat" }).click();
cy.get(".mx_ExportDialog").should("have.length", 1);
});
it("should handle viewing share room", () => {
viewRoomSummaryByName(ROOM_NAME);
cy.findByRole("menuitem", { name: "Copy link" }).click();
cy.get(".mx_ShareDialog").should("have.length", 1);
});
it("should handle viewing room settings", () => {
viewRoomSummaryByName(ROOM_NAME);
cy.findByRole("menuitem", { name: "Settings" }).click();
cy.get(".mx_RoomSettingsDialog").should("have.length", 1);
cy.get(".mx_Dialog_title").within(() => {
cy.findByText("Room Settings - " + ROOM_NAME).should("exist");
});
});
it("should handle viewing files", () => {
viewRoomSummaryByName(ROOM_NAME);
cy.findByRole("menuitem", { name: "Files" }).click();
cy.get(".mx_FilePanel").should("have.length", 1);
cy.get(".mx_FilePanel_empty").should("have.length", 1);
cy.findByRole("button", { name: "Room information" }).click();
checkRoomSummaryCard(ROOM_NAME);
});
it("should handle viewing room member", () => {
viewRoomSummaryByName(ROOM_NAME);
cy.findByRole("menuitem", { name: "People" }).click();
cy.get(".mx_MemberList").should("have.length", 1);
getMemberTileByName(NAME).click();
cy.get(".mx_UserInfo").should("have.length", 1);
cy.get(".mx_UserInfo_profile").within(() => {
cy.findByText(NAME);
});
cy.findByRole("button", { name: "Room members" }).click();
cy.get(".mx_MemberList").should("have.length", 1);
cy.findByRole("button", { name: "Room information" }).click();
checkRoomSummaryCard(ROOM_NAME);
});
});
describe("in spaces", () => {
it("should handle viewing space member", () => {
cy.viewSpaceHomeByName(SPACE_NAME);
cy.get(".mx_RoomInfoLine_private").within(() => {
// \d represents the number of the space members
cy.findByRole("button", { name: /\d member/ }).click();
});
cy.get(".mx_MemberList").should("have.length", 1);
cy.get(".mx_SpaceScopeHeader").within(() => {
cy.findByText(SPACE_NAME);
});
getMemberTileByName(NAME).click();
cy.get(".mx_UserInfo").should("have.length", 1);
cy.get(".mx_UserInfo_profile").within(() => {
cy.findByText(NAME);
});
cy.get(".mx_SpaceScopeHeader").within(() => {
cy.findByText(SPACE_NAME);
});
cy.findByRole("button", { name: "Back" }).click();
cy.get(".mx_MemberList").should("have.length", 1);
});
});
});