imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add feature flag 'feature_new_room_decoration_ui' and segrate legacy UI component (#11345)

Browse source 
* Move RoomHeader to LegacyRoomHeader

* Create new RoomHeader component
This commit is contained in:
Germain 2023-08-01 08:32:53 +01:00 • committed by GitHub
parent 89a92c6351
commit 6ae7c033d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 2309 additions and 2103 deletions
Download patch file Download diff file Expand all files Collapse all files

2
cypress/e2e/create-room/create-room.spec.ts
View file

@ -59,7 +59,7 @@ describe("Create Room", () => {
cy.url().should("contain", "/#/room/#test-room-1:localhost");
cy.get(".mx_RoomHeader").within(() => {
cy.get(".mx_LegacyRoomHeader").within(() => {
cy.findByText(name);
cy.findByText(topic);
});

4
cypress/e2e/invite/invite-dialog.spec.ts
View file

@ -166,8 +166,8 @@ describe("Invite dialog", function () {
// Assert that the hovered user name on invitation UI does not have background color
// TODO: implement the test on room-header.spec.ts
cy.get(".mx_RoomHeader").within(() => {
cy.get(".mx_RoomHeader_name--textonly")
cy.get(".mx_LegacyRoomHeader").within(() => {
cy.get(".mx_LegacyRoomHeader_name--textonly")
.realHover()
.should("have.css", "background-color", "rgba(0, 0, 0, 0)");
});

2
cypress/e2e/lazy-loading/lazy-loading.spec.ts
View file

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

4
cypress/e2e/one-to-one-chat/one-to-one-chat.spec.ts
View file

@ -45,7 +45,7 @@ describe("1:1 chat room", () => {
it("should open new 1:1 chat room after leaving the old one", () => {
// leave 1:1 chat room
cy.get(".mx_RoomHeader_nametext").within(() => {
cy.get(".mx_LegacyRoomHeader_nametext").within(() => {
cy.findByText(username).click();
});
cy.findByRole("menuitem", { name: "Leave" }).click();
@ -60,7 +60,7 @@ describe("1:1 chat room", () => {
// open new 1:1 chat room
cy.visit(`/#/user/${user2.userId}?action=chat`);
cy.get(".mx_RoomHeader_nametext").within(() => {
cy.get(".mx_LegacyRoomHeader_nametext").within(() => {
cy.findByText(username);
});
});

38
cypress/e2e/room/room-header.spec.ts
View file

@ -38,8 +38,8 @@ describe("Room Header", () => {
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
cy.get(".mx_LegacyRoomHeader").within(() => {
// Names (aria-label) of every button rendered on mx_LegacyRoomHeader by default
const expectedButtonNames = [
"Room options", // The room name button next to the room avatar, which renders dropdown menu on click
"Voice call",
@ -55,11 +55,11 @@ describe("Room Header", () => {
cy.findByRole("button", { name }).should("be.visible");
}
// Assert that just those seven buttons exist on mx_RoomHeader by default
// Assert that just those seven buttons exist on mx_LegacyRoomHeader by default
cy.findAllByRole("button").should("have.length", 7);
});
cy.get(".mx_RoomHeader").percySnapshotElement("Room header");
cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header");
});
it("should render the pin button for pinned messages card", () => {
@ -73,7 +73,7 @@ describe("Room Header", () => {
cy.findByRole("menuitem", { name: "Pin" }).should("be.visible").click();
cy.get(".mx_RoomHeader").within(() => {
cy.get(".mx_LegacyRoomHeader").within(() => {
cy.findByRole("button", { name: "Pinned messages" }).should("be.visible");
});
});
@ -88,22 +88,22 @@ describe("Room Header", () => {
cy.createRoom({ name: LONG_ROOM_NAME }).viewRoomByName(LONG_ROOM_NAME);
cy.get(".mx_RoomHeader").within(() => {
cy.get(".mx_LegacyRoomHeader").within(() => {
// Wait until the room name is set
cy.get(".mx_RoomHeader_nametext").within(() => {
cy.get(".mx_LegacyRoomHeader_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
cy.get(".mx_RoomHeader_button")
// Note these assertions do not check the size of mx_LegacyRoomHeader_name button
cy.get(".mx_LegacyRoomHeader_button")
.should("have.length", 6)
.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", {
cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header - with a long room name", {
widths: [300, 600], // Magic numbers to emulate the narrow RoomHeader on the actual UI
});
});
@ -111,7 +111,7 @@ describe("Room Header", () => {
it("should have buttons highlighted by being clicked", () => {
cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
cy.get(".mx_RoomHeader").within(() => {
cy.get(".mx_LegacyRoomHeader").within(() => {
// Check these buttons
const buttonsHighlighted = ["Threads", "Notifications", "Room info"];
@ -120,7 +120,7 @@ describe("Room Header", () => {
}
});
cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with a highlighted button");
cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header - with a highlighted button");
});
describe("with a video room", () => {
@ -144,7 +144,7 @@ describe("Room Header", () => {
it("should render buttons for room options, beta pill, invite, chat, and room info", () => {
createVideoRoom();
cy.get(".mx_RoomHeader").within(() => {
cy.get(".mx_LegacyRoomHeader").within(() => {
// Names (aria-label) of the buttons on the video room header
const expectedButtonNames = [
"Room options",
@ -163,13 +163,13 @@ describe("Room Header", () => {
cy.findAllByRole("button").should("have.length", 7);
});
cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with a video room");
cy.get(".mx_LegacyRoomHeader").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();
cy.get(".mx_LegacyRoomHeader").findByRole("button", { name: "Chat" }).click();
// Assert that the video is rendered
cy.get(".mx_CallView video").should("exist");
@ -250,20 +250,20 @@ describe("Room Header", () => {
// Assert that AppsDrawer is rendered
cy.get(".mx_AppsDrawer").should("exist");
cy.get(".mx_RoomHeader").within(() => {
cy.get(".mx_LegacyRoomHeader").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)");
cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header - with apps button (highlighted)");
});
it("should support hiding a widget", () => {
cy.get(".mx_AppsDrawer").should("exist");
cy.get(".mx_RoomHeader").within(() => {
cy.get(".mx_LegacyRoomHeader").within(() => {
// Click the apps button to hide AppsDrawer
cy.findByRole("button", { name: "Hide Widgets" }).should("exist").click();
@ -276,7 +276,7 @@ describe("Room Header", () => {
// 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)");
cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header - with apps button (not highlighted)");
});
});
});

4
cypress/e2e/spotlight/spotlight.spec.ts
View file

@ -114,7 +114,7 @@ Cypress.Commands.add(
Cypress.Commands.add(
"roomHeaderName",
(options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery<HTMLElement>> => {
return cy.get(".mx_RoomHeader_nametext", options);
return cy.get(".mx_LegacyRoomHeader_nametext", options);
},
);
@ -204,7 +204,7 @@ describe("Spotlight", () => {
});
});
// wait for the room to have the right name
cy.get(".mx_RoomHeader").within(() => {
cy.get(".mx_LegacyRoomHeader").within(() => {
cy.findByText(room1Name);
});
});

2
cypress/e2e/threads/threads.spec.ts
View file

@ -279,7 +279,7 @@ describe("Threads", () => {
});
cy.findByRole("button", { name: "Threads" })
.should("have.class", "mx_RoomHeader_button--unread") // User asserts thread list unread indicator
.should("have.class", "mx_LegacyRoomHeader_button--unread") // User asserts thread list unread indicator
.click(); // User opens thread list
// User asserts thread with correct root & latest events & unread dot

4
cypress/e2e/timeline/timeline.spec.ts
View file

@ -755,7 +755,7 @@ describe("Timeline", () => {
sendEvent(roomId, true);
cy.visit("/#/room/" + roomId);
cy.get(".mx_RoomHeader").findByRole("button", { name: "Search" }).click();
cy.get(".mx_LegacyRoomHeader").findByRole("button", { name: "Search" }).click();
cy.get(".mx_SearchBar").percySnapshotElement("Search bar on the timeline", {
// Emulate narrow timeline
@ -791,7 +791,7 @@ describe("Timeline", () => {
.should("have.class", "mx_TextualEvent");
// Display the room search bar
cy.get(".mx_RoomHeader").findByRole("button", { name: "Search" }).click();
cy.get(".mx_LegacyRoomHeader").findByRole("button", { name: "Search" }).click();
// Search the string to display both the message and TextualEvent on search results panel
cy.get(".mx_SearchBar").within(() => {