From a5fcdd7bfd07f77c166b7015b04eb0e274c72a53 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Mar 2023 09:38:57 +0000 Subject: [PATCH] Add E2E test for `FilePanel` (#10400) --- cypress/e2e/right-panel/file-panel.spec.ts | 197 +++++++++++++++++++++ cypress/fixtures/1sec.ogg | Bin 0 -> 3650 bytes 2 files changed, 197 insertions(+) create mode 100644 cypress/e2e/right-panel/file-panel.spec.ts create mode 100755 cypress/fixtures/1sec.ogg diff --git a/cypress/e2e/right-panel/file-panel.spec.ts b/cypress/e2e/right-panel/file-panel.spec.ts new file mode 100644 index 0000000000..cb2bad4ee8 --- /dev/null +++ b/cypress/e2e/right-panel/file-panel.spec.ts @@ -0,0 +1,197 @@ +/* +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 { HomeserverInstance } from "../../plugins/utils/homeserver"; +import Chainable = Cypress.Chainable; + +const ROOM_NAME = "Test room"; +const NAME = "Alice"; + +const viewRoomSummaryByName = (name: string): Chainable> => { + cy.viewRoomByName(name); + cy.get(".mx_RightPanel_roomSummaryButton").click(); + return checkRoomSummaryCard(name); +}; + +const checkRoomSummaryCard = (name: string): Chainable> => { + cy.get(".mx_RoomSummaryCard").should("have.length", 1); + return cy.get(".mx_BaseCard_header").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(() => { + // Click "Upload" button + cy.get("[data-testid='dialog-primary-button']").should("have.text", "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.get(".mx_RoomSummaryCard_icon_files").click(); + cy.get(".mx_FilePanel").should("have.length", 1); + }); + + afterEach(() => { + cy.stopHomeserver(homeserver); + }); + + describe("render", () => { + 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"); + }); + + 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='group']").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.get(".mx_EventTile_senderDetails .mx_DisambiguatedProfile_displayName").should("have.length", 3); + cy.contains(".mx_EventTile_senderDetails .mx_DisambiguatedProfile_displayName", NAME); + + // 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.get("[data-testid='play-pause-button']").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 + // File name: matrix-org-client-versions.json + cy.contains(".mx_MFileBody_info_filename", "matrix-org"); + }); + }); + + // Exclude timestamps and read markers from snapshot + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + cy.get(".mx_RoomView_MessageList").percySnapshotElement("File tiles on FilePanel", { percyCSS }); + }); + }); + + it("should render the audio pleyer 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").should("have.text", "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 counter is zero before clicking the play button + cy.contains(".mx_AudioPlayer_seek [role='timer']", "00:00").should("exist"); + + // Click the play button + cy.get("[data-testid='play-pause-button'][aria-label='Play']").click(); + + // Assert that the pause button is rendered + cy.get("[data-testid='play-pause-button'][aria-label='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.get("[data-testid='play-pause-button'][aria-label='Play']").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"); + }); + }); + }); + }); + }); +}); diff --git a/cypress/fixtures/1sec.ogg b/cypress/fixtures/1sec.ogg new file mode 100755 index 0000000000000000000000000000000000000000..a8b078e16947f675370e615bdb892d0a90d8719b GIT binary patch literal 3650 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 F?Vq|{{Ja1F literal 0 HcmV?d00001