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"
/>,