OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Add E2E test for `FilePanel` (#10400)

pull/28217/head
Suguru Hirahara 2023-03-22 09:38:57 +00:00 committed by GitHub
parent 5116d823c7
commit a5fcdd7bfd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 197 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
cypress/e2e/right-panel/file-panel.spec.ts Normal file
View File

@ -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.
*/
/// <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.get(".mx_RightPanel_roomSummaryButton").click();
return checkRoomSummaryCard(name);
};
const checkRoomSummaryCard = (name: string): Chainable<JQuery<HTMLElement>> => {
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");
});
});
});
});
});
});

BIN
cypress/fixtures/1sec.ogg Executable file
View File

Binary file not shown.