From 8a016eede8db1ba63d464bc76646f6f8bb5c1065 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 17 May 2023 15:41:38 +0000 Subject: [PATCH 1/3] Edit room-header.spec.ts to check apps button --- cypress/e2e/room/room-header.spec.ts | 101 +++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) diff --git a/cypress/e2e/room/room-header.spec.ts b/cypress/e2e/room/room-header.spec.ts index 1073c123e93..a8ee0b5e2df 100644 --- a/cypress/e2e/room/room-header.spec.ts +++ b/cypress/e2e/room/room-header.spec.ts @@ -16,6 +16,8 @@ limitations under the License. /// +import { IWidget } from "matrix-widget-api"; + import { HomeserverInstance } from "../../plugins/utils/homeserver"; import { SettingLevel } from "../../../src/settings/SettingLevel"; @@ -190,4 +192,103 @@ describe("Room Header", () => { }); }); }); + + describe("with a widget", () => { + const ROOM_NAME = "Test Room with a widget"; + const WIDGET_ID = "fake-widget"; + const WIDGET_HTML = ` + + + Fake Widget + + + Hello World + + + `; + + let widgetUrl: string; + let roomId: string; + + beforeEach(() => { + cy.serveHtmlFile(WIDGET_HTML).then((url) => { + widgetUrl = url; + }); + + cy.createRoom({ name: ROOM_NAME }).then((id) => { + roomId = id; + + // setup widget via state event + cy.getClient() + .then(async (matrixClient) => { + const content: IWidget = { + id: WIDGET_ID, + creatorUserId: "somebody", + type: "widget", + name: "widget", + url: widgetUrl, + }; + await matrixClient.sendStateEvent(roomId, "im.vector.modular.widgets", content, WIDGET_ID); + }) + .as("widgetEventSent"); + + // set initial layout + cy.getClient() + .then(async (matrixClient) => { + const content = { + widgets: { + [WIDGET_ID]: { + container: "top", + index: 1, + width: 100, + height: 0, + }, + }, + }; + await matrixClient.sendStateEvent(roomId, "io.element.widgets.layout", content, ""); + }) + .as("layoutEventSent"); + }); + + cy.all([cy.get("@widgetEventSent"), cy.get("@layoutEventSent")]).then(() => { + // open the room + cy.viewRoomByName(ROOM_NAME); + }); + }); + + it("should highlight the apps button", () => { + // Assert that AppsDrawer is rendered + cy.get(".mx_AppsDrawer").should("exist"); + + cy.get(".mx_RoomHeader").within(() => { + cy.findByRole("button", { name: "Hide Widgets" }) + .should("exist") // Assert that the apps button is rendered + .then(($btn) => { + // Note it is not possible to get CSS values of a pseudo class with "have.css". + const color = $btn[0].ownerDocument.defaultView // get window reference from element + .getComputedStyle($btn[0], "before") // get the pseudo selector + .getPropertyValue("background-color"); // get "background-color" value + + // Assert the value is equal to $accent == hex #0dbd8b == rgba(13, 189, 139) + expect(color).to.eq("rgb(13, 189, 139)"); + }); + }); + + cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with apps button (highlighted)"); + }); + + it("should support hiding a widget", () => { + cy.get(".mx_AppsDrawer").should("exist"); + + cy.get(".mx_RoomHeader").within(() => { + // Click the apps button to hide AppsDrawer + cy.findByRole("button", { name: "Hide Widgets" }).should("exist").click(); + }); + + // Assert that AppsDrawer is not rendered + cy.get(".mx_AppsDrawer").should("not.exist"); + + cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with apps button (not highlighted)"); + }); + }); }); From cd4159458fadca1ebccf5366b1a1ae98e683685a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 18 May 2023 10:09:51 +0000 Subject: [PATCH 2/3] Check aria-checked status instead --- cypress/e2e/room/room-header.spec.ts | 18 ++++++++---------- src/components/views/rooms/RoomHeader.tsx | 1 + 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/cypress/e2e/room/room-header.spec.ts b/cypress/e2e/room/room-header.spec.ts index a8ee0b5e2df..2895c05ca4b 100644 --- a/cypress/e2e/room/room-header.spec.ts +++ b/cypress/e2e/room/room-header.spec.ts @@ -261,17 +261,10 @@ describe("Room Header", () => { cy.get(".mx_AppsDrawer").should("exist"); cy.get(".mx_RoomHeader").within(() => { + // Assert that "Hide Widgets" button is rendered and aria-checked is set to true cy.findByRole("button", { name: "Hide Widgets" }) - .should("exist") // Assert that the apps button is rendered - .then(($btn) => { - // Note it is not possible to get CSS values of a pseudo class with "have.css". - const color = $btn[0].ownerDocument.defaultView // get window reference from element - .getComputedStyle($btn[0], "before") // get the pseudo selector - .getPropertyValue("background-color"); // get "background-color" value - - // Assert the value is equal to $accent == hex #0dbd8b == rgba(13, 189, 139) - expect(color).to.eq("rgb(13, 189, 139)"); - }); + .should("exist") + .should("have.attr", "aria-checked", "true"); }); cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with apps button (highlighted)"); @@ -283,6 +276,11 @@ describe("Room Header", () => { cy.get(".mx_RoomHeader").within(() => { // Click the apps button to hide AppsDrawer cy.findByRole("button", { name: "Hide Widgets" }).should("exist").click(); + + // Assert that "Show widgets" button is rendered and aria-checked is set to false + cy.findByRole("button", { name: "Show Widgets" }) + .should("exist") + .should("have.attr", "aria-checked", "false"); }); // Assert that AppsDrawer is not rendered diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 53ae9b0537f..1e1f0ce772b 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -591,6 +591,7 @@ export default class RoomHeader extends React.Component { })} onClick={this.props.onAppsClick} title={this.props.appsShown ? _t("Hide Widgets") : _t("Show Widgets")} + aria-checked={this.props.appsShown} alignment={Alignment.Bottom} key="apps" />, From cc4be6bae663f3cab42ab583fd92e9961989cdbd Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 18 May 2023 11:09:04 +0000 Subject: [PATCH 3/3] Edit a comment --- cypress/e2e/room/room-header.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/room/room-header.spec.ts b/cypress/e2e/room/room-header.spec.ts index 2895c05ca4b..fc20dfbebee 100644 --- a/cypress/e2e/room/room-header.spec.ts +++ b/cypress/e2e/room/room-header.spec.ts @@ -261,7 +261,7 @@ describe("Room Header", () => { cy.get(".mx_AppsDrawer").should("exist"); cy.get(".mx_RoomHeader").within(() => { - // Assert that "Hide Widgets" button is rendered and aria-checked is set to true + // Assert that "Hide Widgets" button is rendered and aria-checked is set to true cy.findByRole("button", { name: "Hide Widgets" }) .should("exist") .should("have.attr", "aria-checked", "true");