Edit room-header.spec.ts to check apps button (#10934)

luixxiul · web-flow · commit 7d0c68aa2922 · 2023-05-18T12:54:53.000Z
* Edit room-header.spec.ts to check apps button

* Check aria-checked status instead

* Edit a comment
diff --git a/cypress/e2e/room/room-header.spec.ts b/cypress/e2e/room/room-header.spec.ts
@@ -16,6 +16,8 @@ limitations under the License.
 
 /// <reference types="cypress" />
 
+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 = `
+            <html lang="en">
+                <head>
+                    <title>Fake Widget</title>
+                </head>
+                <body>
+                    Hello World
+                </body>
+            </html>
+        `;
+
+        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<string>("@widgetEventSent"), cy.get<string>("@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
@@ -591,6 +591,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
                     })}
                     onClick={this.props.onAppsClick}
                     title={this.props.appsShown ? _t("Hide Widgets") : _t("Show Widgets")}
+                    aria-checked={this.props.appsShown}
                     alignment={Alignment.Bottom}
                     key="apps"
                 />,
