mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-23 03:10:17 +03:00
9c7d935aae
* Integrate compound design tokens The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here * Delete unused or incorrect - sass variables * Typography pass * Deprecate _font-weights.pcss and use Compound instead * lint fix * Fix snapshot * Fix typography pass feedback * Remove unwanted e2e test cypress tests should test functionality not visual output. And we should not test visual output by inspecting CSS properties * lintfix * Migration script for baseFontSize * Updates after design review * Update font scaling panel to use min/max size * Fix custom font * Fix font slider e2e test * Update custom font * Update new baseFontSizeV2 * Disambiguate heading props * Fix appearance test * change max font size * fix e2ee test * fix tests * test baseFontSize migration code * typescript strict * Migrate baseFontSize account setting * Change assertion for font size * Fix font size controller test
260 lines
12 KiB
TypeScript
260 lines
12 KiB
TypeScript
/*
|
|
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_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(() => {
|
|
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.get(".mx_RoomSummaryCard_icon_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
|
|
});
|
|
});
|
|
|
|
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").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 counter is zero before clicking the play button
|
|
cy.contains(".mx_AudioPlayer_seek [role='timer']", "00:00").should("exist");
|
|
|
|
// Click the play button
|
|
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");
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|