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>
This commit is contained in:
Suguru Hirahara 2023-05-05 15:29:10 +00:00 committed by GitHub
parent 499d8110b3
commit f6f5d44bde
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 201 additions and 49 deletions

View file

@ -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");
});
});