New room list: add selection decoration (#29531)

* fix(room list): remove 1px extra padding

* feat(room list): add selection decoration to room list item and scroll list to this element

* test(room list item): add is selected test

* test(room list): update snapshot

* test(e2e): add test to keep the room list item visible

* test(e2e): update snapshots
This commit is contained in:
Florian Duros
2025-03-19 09:39:12 +01:00
committed by GitHub
parent 35aed69604
commit 3587161a2c
10 changed files with 106 additions and 12 deletions
@@ -42,13 +42,13 @@ describe("<RoomListItemView />", () => {
test("should render a room item", () => {
const onClick = jest.fn();
const { asFragment } = render(<RoomListItemView room={room} onClick={onClick} />);
const { asFragment } = render(<RoomListItemView room={room} onClick={onClick} isSelected={false} />);
expect(asFragment()).toMatchSnapshot();
});
test("should call openRoom when clicked", async () => {
const user = userEvent.setup();
render(<RoomListItemView room={room} />);
render(<RoomListItemView room={room} isSelected={false} />);
await user.click(screen.getByRole("button", { name: `Open room ${room.name}` }));
expect(defaultValue.openRoom).toHaveBeenCalled();
@@ -58,11 +58,20 @@ describe("<RoomListItemView />", () => {
mocked(useRoomListItemViewModel).mockReturnValue({ ...defaultValue, showHoverMenu: true });
const user = userEvent.setup();
render(<RoomListItemView room={room} />, withClientContextRenderOptions(matrixClient));
render(<RoomListItemView room={room} isSelected={false} />, withClientContextRenderOptions(matrixClient));
const listItem = screen.getByRole("button", { name: `Open room ${room.name}` });
expect(screen.queryByRole("button", { name: "More Options" })).toBeNull();
await user.hover(listItem);
await waitFor(() => expect(screen.getByRole("button", { name: "More Options" })).toBeInTheDocument());
});
test("should be selected if isSelected=true", async () => {
const { asFragment } = render(<RoomListItemView room={room} isSelected={true} />);
expect(screen.queryByRole("button", { name: `Open room ${room.name}` })).toHaveAttribute(
"aria-selected",
"true",
);
expect(asFragment()).toMatchSnapshot();
});
});