From 4dcc8e7b05e53ce1b39ad636bf988cc78abefd2c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Mar 2023 15:03:48 +0900 Subject: [PATCH 01/67] Add audio-player.spec.ts - Add a long name audio file to check file name overflow - Check player layout on monospace font - Check player layout on high contrast theme - Check player layout on IRC layout (should be same as modern layout) - Percy snapshots of mx_MAudioBody (hide seekbar temporarily) - Output snapshot logs Signed-off-by: Suguru Hirahara --- cypress/e2e/audio-player/audio-player.spec.ts | 235 ++++++++++++++++++ .../fixtures/1sec-long-name-audio-file.ogg | Bin 0 -> 3650 bytes .../views/settings/ThemeChoicePanel.tsx | 4 +- .../ThemeChoicePanel-test.tsx.snap | 1 + 4 files changed, 238 insertions(+), 2 deletions(-) create mode 100644 cypress/e2e/audio-player/audio-player.spec.ts create mode 100755 cypress/fixtures/1sec-long-name-audio-file.ogg diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts new file mode 100644 index 00000000000..f820d213e71 --- /dev/null +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -0,0 +1,235 @@ +/* +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 { SettingLevel } from "../../../src/settings/SettingLevel"; +import { Layout } from "../../../src/settings/enums/Layout"; + +describe("Audio player", () => { + let homeserver: HomeserverInstance; + let roomId: string; + + // FIXME: hide mx_SeekBar because flaky - see https://github.com/vector-im/element-web/issues/24898 + const percyCSS = ".mx_SeekBar { visibility: hidden !important; }"; + + const visitRoom = () => { + cy.visit("/#/room/" + roomId); + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); + + // Wait until configuration is finished + cy.contains( + ".mx_RoomView_body .mx_GenericEventListSummary[data-layout='group'] .mx_GenericEventListSummary_summary", + "created and configured the room.", + ).should("exist"); + }; + + 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"); + }; + + const checkPlayerFilenameLong = () => { + // 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 media information is rendered + cy.get(".mx_AudioPlayer_mediaInfo").within(() => { + cy.get(".mx_AudioPlayer_mediaName").should("have.text", "1sec-long-name-audio-file.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 play button is rendered + cy.get("[data-testid='play-pause-button'][aria-label='Play']").should("exist"); + }); + }); + }; + + // Take snapshots in modern and bubble layout, outputting log for reference/debugging + // Player on IRC layout should have the same layout as group layout + const takeSnapshots = (detail: string) => { + // Check the status of the seek bar + // TODO: check if visible - currently visibility check on a narrow timeline causes an error + cy.get(".mx_AudioPlayer_seek input[type='range']").should("exist"); + + // Assert that the pause button is not rendered + cy.get("[data-testid='play-pause-button'][aria-label='Pause']").should("not.exist"); + + // Assert that the play button is rendered + cy.get("[data-testid='play-pause-button'][aria-label='Play']").should("exist"); + + // Enable group layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); + + // 243 + 12px + 12px = 267px + // See _MediaBody.pcss and _AudioPlayer.pcss for spacing + cy.get(".mx_MAudioBody").percySnapshotElement(detail + " on group layout", { + percyCSS, + widths: [267], + }); + + cy.log("Took a snapshot of " + detail + " on group layout"); + + // Enable bubble layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); + + // 243px + 12px + 48px = 303px + // See _EventBubbleTile.pcss and _AudioPlayer.pcss for spacing + cy.get(".mx_MAudioBody").percySnapshotElement(detail + " on bubble layout", { + percyCSS, + widths: [303], + }); + + cy.log("Took a snapshot of " + detail + " on bubble layout"); + + // Reset the layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); + }; + + beforeEach(() => { + cy.startHomeserver("default").then((data) => { + homeserver = data; + cy.initTestUser(homeserver, "Hanako").then(() => + cy.createRoom({}).then((_roomId) => { + roomId = _roomId; + }), + ); + }); + + cy.injectAxe(); + }); + + afterEach(() => { + cy.stopHomeserver(homeserver); + }); + + it("should render player on every layout", () => { + visitRoom(); + + // Upload one second audio file with a long file name + uploadFile("cypress/fixtures/1sec-long-name-audio-file.ogg"); + + cy.get(".mx_RoomView_MessageList").within(() => { + checkPlayerFilenameLong(); + + // Check audio player on IRC layout here, which currently should be same as on modern layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); + // 243 + 12px + 12px = 267px + // See _MediaBody.pcss and _AudioPlayer.pcss for spacing + cy.get(".mx_MAudioBody").percySnapshotElement("Audio player (light theme) on IRC layout", { + percyCSS, + widths: [267], + }); + cy.log("Took a snapshot of Audio player (light theme) on IRC layout"); + + // Reset to the default layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); + + // Take snapshots (light theme) + takeSnapshots("Audio player (light theme)"); + + // Take snapshots (light theme, monospace font) + cy.setSettingValue("useSystemFont", null, SettingLevel.DEVICE, true); + cy.setSettingValue("systemFont", null, SettingLevel.DEVICE, "monospace"); + // Assert that the monospace timer is visible + cy.get("[role='timer']").should("have.css", "font-family", '"monospace"').should("be.visible"); + takeSnapshots("Audio player (light theme, monospace)"); + + // Reset font setting + cy.setSettingValue("useSystemFont", null, SettingLevel.DEVICE, false); + + // Take snapshots (dark theme) + cy.setSettingValue("theme", null, SettingLevel.ACCOUNT, "dark"); + takeSnapshots("Audio player (dark theme)"); + }); + }); + + it("should render player on high contrast theme", () => { + visitRoom(); + + // Upload one second audio file with a long file name + uploadFile("cypress/fixtures/1sec-long-name-audio-file.ogg"); + + cy.get(".mx_RoomView_MessageList").within(() => { + checkPlayerFilenameLong(); + }); + + // Enable high contrast manually + cy.openUserSettings("Appearance"); + cy.get(".mx_UserSettingsDialog").within(() => { + cy.get(".mx_ThemeChoicePanel").within(() => { + cy.get("[data-testid='theme-choice-panel-selectors']").within(() => { + // Enable light theme + cy.get(".mx_ThemeSelector_light").click(); + }); + + cy.get("[data-testid='theme-choice-panel-highcontrast']").within(() => { + // Click the checkbox + cy.get("label .mx_Checkbox_background").click(); + }); + }); + + // Close the user settings dialog + cy.get("[aria-label='Close dialog']").click(); + }); + + // Take snapshots (high contrast, light theme only) + cy.get(".mx_RoomView_MessageList").within(() => { + takeSnapshots("Audio player (high contrast)"); + }); + }); + + it("should play an audio file", () => { + visitRoom(); + + // Upload an audio file + uploadFile("cypress/fixtures/1sec.ogg"); + + cy.get(".mx_RoomView_MessageList").within(() => { + cy.get(".mx_EventTile_mediaLine .mx_MAudioBody").within(() => { + // Assert that the audio player is rendered + cy.get(".mx_AudioPlayer_container").within(() => { + // 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"); + }); + }); + }); + }); +}); diff --git a/cypress/fixtures/1sec-long-name-audio-file.ogg b/cypress/fixtures/1sec-long-name-audio-file.ogg new file mode 100755 index 0000000000000000000000000000000000000000..a8b078e16947f675370e615bdb892d0a90d8719b GIT binary patch literal 3650 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 F?Vq|{{Ja1F literal 0 HcmV?d00001 diff --git a/src/components/views/settings/ThemeChoicePanel.tsx b/src/components/views/settings/ThemeChoicePanel.tsx index df769a9456f..32c411cd77e 100644 --- a/src/components/views/settings/ThemeChoicePanel.tsx +++ b/src/components/views/settings/ThemeChoicePanel.tsx @@ -168,7 +168,7 @@ export default class ThemeChoicePanel extends React.Component { (findHighContrastTheme(this.state.theme) || isHighContrastTheme(this.state.theme)) ) { return ( -
+
this.highContrastThemeChanged(e.target.checked)} @@ -248,7 +248,7 @@ export default class ThemeChoicePanel extends React.Component {
{_t("Theme")} {systemThemeSection} -
+
({ diff --git a/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap index b1bd41e8f5d..2ee7d3d4dfa 100644 --- a/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap +++ b/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap @@ -12,6 +12,7 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `