From 2e0c8951b0e8315930506c052a3322ddfbbd5e38 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Mar 2023 15:03:48 +0900 Subject: [PATCH 01/11] Create audio-player.spec.ts - Add 1sec.ogg - Add a long name audio file to check file name overflow - Check player layout on monospace font Signed-off-by: Suguru Hirahara --- cypress/e2e/audio-player/audio-player.spec.ts | 163 ++++++++++++++++++ .../fixtures/1sec-long-name-audio-file.ogg | Bin 0 -> 3650 bytes cypress/fixtures/1sec.ogg | Bin 0 -> 3650 bytes 3 files changed, 163 insertions(+) create mode 100644 cypress/e2e/audio-player/audio-player.spec.ts create mode 100755 cypress/fixtures/1sec-long-name-audio-file.ogg create mode 100755 cypress/fixtures/1sec.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..51c834721cb --- /dev/null +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -0,0 +1,163 @@ +/* +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; + + 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 takeSnapshots = (detail: string) => { + // Check the status of the seek bar + cy.get(".mx_AudioPlayer_seek input[type='range']").should("exist"); + + // Assert that the play button is rendered + cy.get("[data-testid='play-pause-button'][aria-label='Play']").should("exist"); + + // Assert that the pause button is not rendered + cy.get("[data-testid='play-pause-button'][aria-label='Pause']").should("not.exist"); + + // Take snapshots in IRC, bubble, modern, and compact modern layout, outputting log for reference + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); + cy.get(".mx_MAudioBody").percySnapshotElement(detail + " on IRC layout"); + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); + cy.get(".mx_MAudioBody").percySnapshotElement(detail + " on bubble layout"); + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); + cy.get(".mx_MAudioBody").percySnapshotElement(detail + " on group layout"); + cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, true); + cy.get(".mx_MAudioBody").percySnapshotElement(detail + " on compact group layout"); + + // Reset compact layout setting + cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, false); + }; + + 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 with one second audio file with a long file name", () => { + 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"); + + // 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(() => { + // 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-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 (light theme) + takeSnapshots("Audio player (light theme)"); + + // Take snapshots (light theme, monospace font): assert that timer is not wrapped + cy.setSettingValue("useSystemFont", null, SettingLevel.DEVICE, true); + cy.setSettingValue("systemFont", null, SettingLevel.DEVICE, "monospace"); + 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 play audio file", () => { + 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"); + + // 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/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 From b93adbd4bb659348b171f06ef5d49a11ad984422 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Mar 2023 16:42:51 +0900 Subject: [PATCH 02/11] Download audio file Signed-off-by: Suguru Hirahara --- cypress/e2e/audio-player/audio-player.spec.ts | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts index 51c834721cb..33d826c5e8a 100644 --- a/cypress/e2e/audio-player/audio-player.spec.ts +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -160,4 +160,33 @@ describe("Audio player", () => { }); }); }); + + it("should download audio file", () => { + 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"); + + // Upload an audio file + uploadFile("cypress/fixtures/1sec.ogg"); + + cy.get(".mx_RoomView_MessageList").within(() => { + // Assert the audio player is rendered + cy.get(".mx_EventTile_last .mx_AudioPlayer_container").should("exist"); + + cy.get(".mx_EventTile_last") + .realHover() + .within(() => { + // Click "Download" button on MessageActionBar + cy.get('[aria-label="Download"]').click({ force: false }); + + // Assert that the file was downloaded + cy.readFile("cypress/downloads/1sec.ogg").should("exist"); + }); + }); + }); }); From 5624f6186da582816128aa870b135f8915daf072 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Mar 2023 17:41:41 +0900 Subject: [PATCH 03/11] Reply Signed-off-by: Suguru Hirahara --- cypress/e2e/audio-player/audio-player.spec.ts | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts index 33d826c5e8a..9d9ee32826f 100644 --- a/cypress/e2e/audio-player/audio-player.spec.ts +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -189,4 +189,48 @@ describe("Audio player", () => { }); }); }); + + it("should reply to audio file with another audio file", () => { + 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"); + + // 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(() => { + // Assert the audio player is rendered + cy.get(".mx_EventTile_last .mx_AudioPlayer_container").should("exist"); + + cy.get(".mx_EventTile_last") + .realHover() + .within(() => { + // Click "Reply" button on MessageActionBar + cy.get('[aria-label="Reply"]').click({ force: false }); + }); + }); + + // Reply to the player with another audio file + uploadFile("cypress/fixtures/1sec.ogg"); + + // Assert that audio file is rendered as file button inside ReplyChain + cy.get(".mx_RoomView_MessageList").within(() => { + cy.get(".mx_EventTile_last").within(() => { + cy.get(".mx_ReplyChain").within(() => { + cy.get(".mx_MFileBody_info[role='button']").within(() => { + // Asser that the file button has file name + cy.get(".mx_MFileBody_info_filename").should("exist"); + }); + }); + }); + }); + + // Take snapshots + takeSnapshots("Reply to audio player"); + }); }); From ea63d4e9fa45b0a7205ba6151c30545de23a8afe Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Mar 2023 18:30:49 +0900 Subject: [PATCH 04/11] ReplyChain Signed-off-by: Suguru Hirahara --- cypress/e2e/audio-player/audio-player.spec.ts | 90 ++++++++++++++++++- 1 file changed, 89 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts index 9d9ee32826f..ca21b2cb855 100644 --- a/cypress/e2e/audio-player/audio-player.spec.ts +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -23,6 +23,7 @@ import { Layout } from "../../../src/settings/enums/Layout"; describe("Audio player", () => { let homeserver: HomeserverInstance; let roomId: string; + const TEST_USER = "Hanako"; const uploadFile = (file: string) => { // Upload a file from the message composer @@ -65,7 +66,7 @@ describe("Audio player", () => { beforeEach(() => { cy.startHomeserver("default").then((data) => { homeserver = data; - cy.initTestUser(homeserver, "Hanako").then(() => + cy.initTestUser(homeserver, TEST_USER).then(() => cy.createRoom({}).then((_roomId) => { roomId = _roomId; }), @@ -233,4 +234,91 @@ describe("Audio player", () => { // Take snapshots takeSnapshots("Reply to audio player"); }); + + it("should create reply chain of audio files", () => { + 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"); + + // 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(() => { + // Assert the audio player is rendered + cy.get(".mx_EventTile_last .mx_AudioPlayer_container").should("exist"); + + cy.get(".mx_EventTile_last") + .realHover() + .within(() => { + // Click "Reply" button on MessageActionBar + cy.get('[aria-label="Reply"]').click({ force: false }); + }); + }); + + // Reply to the player with another audio file + uploadFile("cypress/fixtures/1sec.ogg"); + + cy.get(".mx_RoomView_MessageList").within(() => { + cy.get(".mx_EventTile_last").within(() => { + // Assert that audio file is rendered as file button + cy.get(".mx_ReplyChain").within(() => { + cy.get(".mx_MFileBody_info[role='button']").within(() => { + // Asser that the file button has file name + cy.get(".mx_MFileBody_info_filename").should("exist"); + }); + }); + }); + + cy.get(".mx_EventTile_last") + .realHover() + .within(() => { + // Again, click "Reply" button on MessageActionBar + cy.get('[aria-label="Reply"]').click({ force: false }); + }); + }); + + // Reply to the player with another audio file + uploadFile("cypress/fixtures/1sec-long-name-audio-file.ogg"); + + cy.get(".mx_RoomView_MessageList").within(() => { + cy.get(".mx_EventTile_last").within(() => { + // Assert that there are two "ReplyChain" + cy.get(".mx_ReplyChain").should("have.length", 2); + + // Assert that one line contains the user name + cy.contains(".mx_ReplyChain .mx_ReplyTile_sender", TEST_USER); + + // Assert that the other line contains the file button + cy.get(".mx_ReplyChain .mx_MFileBody").within(() => { + // Assert that audio file is rendered as file button + cy.get(".mx_MFileBody_info[role='button']").within(() => { + // Asser that the file button has file name + cy.get(".mx_MFileBody_info_filename").should("exist"); + }); + }); + + // Click "In reply to" + cy.get(".mx_ReplyChain .mx_ReplyChain_show").click(); + + // Assert that "In reply to" on the first ReplyChain is replaced with the audio file sent at first + cy.get("blockquote.mx_ReplyChain:first-of-type .mx_ReplyChain_show").should("not.exist"); + cy.get(".mx_ReplyChain").should("have.length", 2); + cy.get("blockquote.mx_ReplyChain:first-of-type").within(() => { + // Assert that audio file is rendered as file button + cy.get(".mx_MFileBody_info[role='button']").within(() => { + // Asser that the file button contains the name of the file sent at first + cy.contains(".mx_MFileBody_info_filename", "1sec-long-name"); + }); + }); + + // Take snapshots + takeSnapshots("Audio player of ReplyChain"); + }); + }); + }); }); From 4fb21b93f7e401bb398f1ab870d0d3ce960e2d2e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Mar 2023 19:00:15 +0900 Subject: [PATCH 05/11] Audio player on a thread Signed-off-by: Suguru Hirahara --- cypress/e2e/audio-player/audio-player.spec.ts | 88 +++++++++++++++++++ 1 file changed, 88 insertions(+) diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts index ca21b2cb855..ceb3df38a7d 100644 --- a/cypress/e2e/audio-player/audio-player.spec.ts +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -321,4 +321,92 @@ describe("Audio player", () => { }); }); }); + + it("should render, play, and reply on a thread", () => { + 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"); + + // Upload one second audio file with a long file name + uploadFile("cypress/fixtures/1sec-long-name-audio-file.ogg"); + + cy.get(".mx_RoomView_body .mx_RoomView_MessageList").within(() => { + // Assert the audio player is rendered + cy.get(".mx_EventTile_last .mx_AudioPlayer_container").should("exist"); + + cy.get(".mx_EventTile_last") + .realHover() + .within(() => { + // Click "Reply in thread" button on MessageActionBar + cy.get('[aria-label="Reply in thread"]').click({ force: false }); + }); + }); + + // Assert that the thread is visible + cy.get(".mx_ThreadView").should("be.visible"); + + // Take snapshots of audio players on main timeline with ThreadPanel opened + cy.get(".mx_RoomView_body .mx_RoomView_MessageList").within(() => { + takeSnapshots("Audio player on narrow main timeline"); + }); + + cy.get(".mx_ThreadView").within(() => { + // Take snapshots of audio player on a thread + takeSnapshots("Audio player on a thread"); + + 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"); + }); + + cy.get(".mx_EventTile_last") + .realHover() + .within(() => { + // Click the reply button + cy.get('[aria-label="Reply"]').click({ force: false }); + }); + + cy.get(".mx_MessageComposer--compact").within(() => { + // Assert that the reply preview is rendered on the message composer + cy.get(".mx_ReplyPreview").within(() => { + // Assert that the reply preview contains audio ReplyTile + cy.get(".mx_ReplyTile_audio").within(() => { + // Assert that the ReplyTile has the file info button + cy.get(".mx_MFileBody_info[role='button']").should("exist"); + }); + }); + + // Select :smile: emoji and send it + cy.get("[data-testid='basicmessagecomposer']").type(":smile:"); + cy.get(".mx_Autocomplete_Completion[aria-selected='true']").click(); + cy.get("[data-testid='basicmessagecomposer']").type("{enter}"); + }); + + cy.get(".mx_EventTile_last").within(() => { + cy.get(".mx_ReplyTile_audio").within(() => { + cy.get(".mx_MFileBody_info[role='button']").within(() => { + // Assert that the file name is rendered on the file button + cy.contains(".mx_MFileBody_info_filename", "1sec-long-name"); + }); + }); + }); + }); + }); }); From a7164d51a16f577848b7fc4c069b5ec5aed9c5fa Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Mar 2023 19:18:18 +0900 Subject: [PATCH 06/11] Create visitRoom() Signed-off-by: Suguru Hirahara --- cypress/e2e/audio-player/audio-player.spec.ts | 65 +++++-------------- 1 file changed, 17 insertions(+), 48 deletions(-) diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts index ceb3df38a7d..b9ec2d92c0a 100644 --- a/cypress/e2e/audio-player/audio-player.spec.ts +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -25,6 +25,17 @@ describe("Audio player", () => { let roomId: string; const TEST_USER = "Hanako"; + 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 }); @@ -81,14 +92,7 @@ describe("Audio player", () => { }); it("should render with one second audio file with a long file name", () => { - 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"); + visitRoom(); // Upload one second audio file with a long file name uploadFile("cypress/fixtures/1sec-long-name-audio-file.ogg"); @@ -127,14 +131,7 @@ describe("Audio player", () => { }); it("should play audio file", () => { - 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"); + visitRoom(); // Upload an audio file uploadFile("cypress/fixtures/1sec.ogg"); @@ -163,14 +160,7 @@ describe("Audio player", () => { }); it("should download audio file", () => { - 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"); + visitRoom(); // Upload an audio file uploadFile("cypress/fixtures/1sec.ogg"); @@ -192,14 +182,7 @@ describe("Audio player", () => { }); it("should reply to audio file with another audio file", () => { - 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"); + visitRoom(); // Upload one second audio file with a long file name uploadFile("cypress/fixtures/1sec-long-name-audio-file.ogg"); @@ -236,14 +219,7 @@ describe("Audio player", () => { }); it("should create reply chain of audio files", () => { - 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"); + visitRoom(); // Upload one second audio file with a long file name uploadFile("cypress/fixtures/1sec-long-name-audio-file.ogg"); @@ -323,14 +299,7 @@ describe("Audio player", () => { }); it("should render, play, and reply on a thread", () => { - 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"); + visitRoom(); // Upload one second audio file with a long file name uploadFile("cypress/fixtures/1sec-long-name-audio-file.ogg"); From 2f4465182be5472c717de172ac5aad1ac412fa7b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Mar 2023 19:32:19 +0900 Subject: [PATCH 07/11] Output log for reference Signed-off-by: Suguru Hirahara --- cypress/e2e/audio-player/audio-player.spec.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts index b9ec2d92c0a..881f6836ef2 100644 --- a/cypress/e2e/audio-player/audio-player.spec.ts +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -60,15 +60,25 @@ describe("Audio player", () => { // Assert that the pause button is not rendered cy.get("[data-testid='play-pause-button'][aria-label='Pause']").should("not.exist"); - // Take snapshots in IRC, bubble, modern, and compact modern layout, outputting log for reference + // Take a snapshot in IRC layout, outputting log for reference cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); cy.get(".mx_MAudioBody").percySnapshotElement(detail + " on IRC layout"); + cy.log("Took a snapshot of " + detail + " on IRC layout"); + + // Take a snapshot in bubble layout, outputting log for reference cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); cy.get(".mx_MAudioBody").percySnapshotElement(detail + " on bubble layout"); + cy.log("Took a snapshot of " + detail + " on bubble layout"); + + // Take a snapshot in modern layout, outputting log for reference cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); cy.get(".mx_MAudioBody").percySnapshotElement(detail + " on group layout"); + cy.log("Took a snapshot of " + detail + " on group layout"); + + // Take a snapshot in compact modern layout, outputting log for reference cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, true); cy.get(".mx_MAudioBody").percySnapshotElement(detail + " on compact group layout"); + cy.log("Took a snapshot of " + detail + " on compact group layout"); // Reset compact layout setting cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, false); From 52f53b5a729bc4836c52dfef1cd2eec81c04e259 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Mar 2023 23:40:35 +0900 Subject: [PATCH 08/11] Check high contrast Signed-off-by: Suguru Hirahara --- cypress/e2e/audio-player/audio-player.spec.ts | 23 +++++++++++++++++++ .../views/settings/ThemeChoicePanel.tsx | 4 ++-- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts index 881f6836ef2..8f5037c5bfc 100644 --- a/cypress/e2e/audio-player/audio-player.spec.ts +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -138,6 +138,29 @@ describe("Audio player", () => { cy.setSettingValue("theme", null, SettingLevel.ACCOUNT, "dark"); takeSnapshots("Audio player (dark theme)"); }); + + // Take snapshots (high contrast, light theme only) + // 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(); + }); + cy.get(".mx_RoomView_MessageList").within(() => { + takeSnapshots("Audio player (high contrast)"); + }); }); it("should play audio file", () => { 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} -
+
({ From f73d22ff1bde19d00df14367e3a22eb72234797e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 20 Mar 2023 02:58:59 +0900 Subject: [PATCH 09/11] jest -u Signed-off-by: Suguru Hirahara --- .../views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap | 1 + 1 file changed, 1 insertion(+) 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`] = `