Remove mx_HeaderButtons class and add a test (#10713)

* Remove `_HeaderButtons.pcss`

Now that mx_HeaderButtons class is no longer necessary as ARIA "tabpanel" role has been removed from it, it is possible to remove both the class and the style rule for it.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Tests: add `room-header.spec.ts` and edit the existing tests

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Edit snapshot widths settings

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Fix typo

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Edit a comment

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Optimize a test to check default buttons

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Check highlighted buttons

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Loop

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

cypress/e2e/create-room/create-room.spec.ts

@@ -64,31 +64,4 @@ describe("Create Room", () => {
             cy.findByText(topic);
         });
     });
-
-    it("should create a room with a long room name, which is displayed with ellipsis", () => {
-        let roomId: string;
-        const LONG_ROOM_NAME =
-            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " +
-            "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " +
-            "aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " +
-            "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " +
-            "officia deserunt mollit anim id est laborum.";
-
-        cy.createRoom({ name: LONG_ROOM_NAME }).then((_roomId) => {
-            roomId = _roomId;
-            cy.visit("/#/room/" + roomId);
-        });
-
-        // Wait until the room name is set
-        cy.get(".mx_RoomHeader_nametext").contains("Lorem ipsum");
-
-        // Make sure size of buttons on RoomHeader (except .mx_RoomHeader_name) are specified
-        // and the buttons are not compressed
-        // TODO: use a same class name
-        cy.get(".mx_RoomHeader_button").should("have.css", "height", "32px").should("have.css", "width", "32px");
-        cy.get(".mx_HeaderButtons > .mx_RightPanel_headerButton")
-            .should("have.css", "height", "32px")
-            .should("have.css", "width", "32px");
-        cy.get(".mx_RoomHeader").percySnapshotElement("Room header with a long room name");
-    });
 });

cypress/e2e/lazy-loading/lazy-loading.spec.ts

@@ -116,7 +116,7 @@ describe("Lazy Loading", () => {
     }
 
     function openMemberlist(): void {
-        cy.get(".mx_HeaderButtons").within(() => {
+        cy.get(".mx_RoomHeader").within(() => {
             cy.findByRole("button", { name: "Room info" }).click();
         });
 

cypress/e2e/room/room-header.spec.ts

@@ -0,0 +1,199 @@
+/*
+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.
+*/
+
+/// <reference types="cypress" />
+
+import { HomeserverInstance } from "../../plugins/utils/homeserver";
+import { SettingLevel } from "../../../src/settings/SettingLevel";
+
+describe("Room Header", () => {
+    let homeserver: HomeserverInstance;
+
+    beforeEach(() => {
+        cy.startHomeserver("default").then((data) => {
+            homeserver = data;
+            cy.initTestUser(homeserver, "Sakura");
+        });
+    });
+
+    afterEach(() => {
+        cy.stopHomeserver(homeserver);
+    });
+
+    it("should render default buttons properly", () => {
+        cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
+
+        cy.get(".mx_RoomHeader").within(() => {
+            // Names (aria-label) of every button rendered on mx_RoomHeader by default
+            const expectedButtonNames = [
+                "Room options", // The room name button next to the room avatar, which renders dropdown menu on click
+                "Voice call",
+                "Video call",
+                "Search",
+                "Threads",
+                "Notifications",
+                "Room info",
+            ];
+
+            // Assert they are found and visible
+            for (const name of expectedButtonNames) {
+                cy.findByRole("button", { name }).should("be.visible");
+            }
+
+            // Assert that just those seven buttons exist on mx_RoomHeader by default
+            cy.findAllByRole("button").should("have.length", 7);
+        });
+
+        cy.get(".mx_RoomHeader").percySnapshotElement("Room header");
+    });
+
+    it("should render the pin button for pinned messages card", () => {
+        cy.enableLabsFeature("feature_pinning");
+
+        cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
+
+        cy.getComposer().type("Test message{enter}");
+
+        cy.get(".mx_EventTile_last").realHover().findByRole("button", { name: "Options" }).click();
+
+        cy.findByRole("menuitem", { name: "Pin" }).should("be.visible").click();
+
+        cy.get(".mx_RoomHeader").within(() => {
+            cy.findByRole("button", { name: "Pinned messages" }).should("be.visible");
+        });
+    });
+
+    it("should render a very long room name without collapsing the buttons", () => {
+        const LONG_ROOM_NAME =
+            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " +
+            "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " +
+            "aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " +
+            "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " +
+            "officia deserunt mollit anim id est laborum.";
+
+        cy.createRoom({ name: LONG_ROOM_NAME }).viewRoomByName(LONG_ROOM_NAME);
+
+        cy.get(".mx_RoomHeader").within(() => {
+            // Wait until the room name is set
+            cy.get(".mx_RoomHeader_nametext").within(() => {
+                cy.findByText(LONG_ROOM_NAME).should("exist");
+            });
+
+            // Assert the size of buttons on RoomHeader are specified and the buttons are not compressed
+            // Note these assertions do not check the size of mx_RoomHeader_name button
+            // TODO: merge the assertions by using the same class name
+            cy.get(".mx_RoomHeader_button")
+                .should("have.length", 3)
+                .should("be.visible")
+                .should("have.css", "height", "32px")
+                .should("have.css", "width", "32px");
+            cy.get(".mx_RightPanel_headerButton")
+                .should("have.length", 3)
+                .should("be.visible")
+                .should("have.css", "height", "32px")
+                .should("have.css", "width", "32px");
+        });
+
+        cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with a long room name", {
+            widths: [300, 600], // Magic numbers to emulate the narrow RoomHeader on the actual UI
+        });
+    });
+
+    it("should have buttons highlighted by being clicked", () => {
+        cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
+
+        cy.get(".mx_RoomHeader").within(() => {
+            // Check these buttons
+            const buttonsHighlighted = ["Threads", "Notifications", "Room info"];
+
+            for (const name of buttonsHighlighted) {
+                cy.findByRole("button", { name: name })
+                    .click() // Highlight the button
+                    .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 a highlighted button");
+    });
+
+    describe("with a video room", () => {
+        const createVideoRoom = () => {
+            // Enable video rooms. This command reloads the app
+            cy.setSettingValue("feature_video_rooms", null, SettingLevel.DEVICE, true);
+
+            cy.get(".mx_LeftPanel_roomListContainer", { timeout: 20000 })
+                .findByRole("button", { name: "Add room" })
+                .click();
+
+            cy.findByRole("menuitem", { name: "New video room" }).click();
+
+            cy.findByRole("textbox", { name: "Name" }).type("Test video room");
+
+            cy.findByRole("button", { name: "Create video room" }).click();
+
+            cy.viewRoomByName("Test video room");
+        };
+
+        it("should render buttons for room options, beta pill, invite, chat, and room info", () => {
+            createVideoRoom();
+
+            cy.get(".mx_RoomHeader").within(() => {
+                // Names (aria-label) of the buttons on the video room header
+                const expectedButtonNames = [
+                    "Room options",
+                    "Video rooms are a beta feature Click for more info", // Beta pill
+                    "Invite",
+                    "Chat",
+                    "Room info",
+                ];
+
+                // Assert they are found and visible
+                for (const name of expectedButtonNames) {
+                    cy.findByRole("button", { name }).should("be.visible");
+                }
+
+                // Assert that there is not a button except those buttons
+                cy.findAllByRole("button").should("have.length", 5);
+            });
+
+            cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with a video room");
+        });
+
+        it("should render a working chat button which opens the timeline on a right panel", () => {
+            createVideoRoom();
+
+            cy.get(".mx_RoomHeader").findByRole("button", { name: "Chat" }).click();
+
+            // Assert that the video is rendered
+            cy.get(".mx_CallView video").should("exist");
+
+            cy.get(".mx_RightPanel .mx_TimelineCard")
+                .should("exist")
+                .within(() => {
+                    // Assert that GELS is visible
+                    cy.findByText("Sakura created and configured the room.").should("exist");
+                });
+        });
+    });
+});

res/css/_components.pcss

@@ -63,7 +63,6 @@
 @import "./structures/_FilePanel.pcss";
 @import "./structures/_GenericDropdownMenu.pcss";
 @import "./structures/_GenericErrorPage.pcss";
-@import "./structures/_HeaderButtons.pcss";
 @import "./structures/_HomePage.pcss";
 @import "./structures/_LargeLoader.pcss";
 @import "./structures/_LeftPanel.pcss";

res/css/structures/_HeaderButtons.pcss

@@ -1,19 +0,0 @@
-/*
-Copyright 2019 New Vector Ltd
-
-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.
-*/
-
-.mx_HeaderButtons {
-    display: flex;
-}

src/components/views/right_panel/HeaderButtons.tsx

@@ -98,6 +98,6 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
     public abstract renderButtons(): JSX.Element;
 
     public render(): React.ReactNode {
-        return <div className="mx_HeaderButtons">{this.renderButtons()}</div>;
+        return this.renderButtons();
     }
 }