From 7d0c68aa2922ba6e2d0134ab0999698323bb1f27 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 18 May 2023 12:54:53 +0000 Subject: [PATCH] Edit `room-header.spec.ts` to check apps button (#10934) * Edit room-header.spec.ts to check apps button * Check aria-checked status instead * Edit a comment --- cypress/e2e/room/room-header.spec.ts | 99 +++++++++++++++++++++++ src/components/views/rooms/RoomHeader.tsx | 1 + 2 files changed, 100 insertions(+) diff --git a/cypress/e2e/room/room-header.spec.ts b/cypress/e2e/room/room-header.spec.ts index 1073c123e9..fc20dfbebe 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,101 @@ 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(() => { + // 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"); + }); + + 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 "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 + cy.get(".mx_AppsDrawer").should("not.exist"); + + cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with apps button (not highlighted)"); + }); + }); }); diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 53ae9b0537..1e1f0ce772 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" />,