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

test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx

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

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap

@@ -24,6 +24,7 @@ exports[`<RoomList /> should render a room list 1`] = `
         >
           <button
             aria-label="Open room room0"
+            aria-selected="false"
             class="mx_RoomListItemView"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 0px; width: 100%;"
@@ -70,6 +71,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room1"
+            aria-selected="false"
             class="mx_RoomListItemView"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 48px; width: 100%;"
@@ -116,6 +118,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room2"
+            aria-selected="false"
             class="mx_RoomListItemView"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 96px; width: 100%;"
@@ -162,6 +165,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room3"
+            aria-selected="false"
             class="mx_RoomListItemView"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 144px; width: 100%;"
@@ -208,6 +212,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room4"
+            aria-selected="false"
             class="mx_RoomListItemView"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 192px; width: 100%;"
@@ -254,6 +259,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room5"
+            aria-selected="false"
             class="mx_RoomListItemView"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 240px; width: 100%;"
@@ -300,6 +306,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room6"
+            aria-selected="false"
             class="mx_RoomListItemView"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 288px; width: 100%;"
@@ -346,6 +353,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room7"
+            aria-selected="false"
             class="mx_RoomListItemView"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 336px; width: 100%;"
@@ -392,6 +400,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room8"
+            aria-selected="false"
             class="mx_RoomListItemView"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 384px; width: 100%;"
@@ -438,6 +447,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room9"
+            aria-selected="false"
             class="mx_RoomListItemView"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 432px; width: 100%;"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap

@@ -1,9 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
+<DocumentFragment>
+  <button
+    aria-label="Open room room1"
+    aria-selected="true"
+    class="mx_RoomListItemView mx_RoomListItemView_selected"
+    type="button"
+  >
+    <div
+      class="mx_Flex mx_RoomListItemView_container"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="mx_DecoratedRoomAvatar"
+      >
+        <span
+          aria-label="Avatar"
+          class="_avatar_1qbcf_8 mx_BaseAvatar"
+          data-color="3"
+          data-testid="avatar-img"
+          data-type="round"
+          style="--cpd-avatar-size: 32px;"
+        >
+          <img
+            alt=""
+            class="_image_1qbcf_41"
+            data-type="round"
+            height="32px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="http://this.is.a.url/avatar.url/room.png"
+            width="32px"
+          />
+        </span>
+      </div>
+      <div
+        class="mx_Flex mx_RoomListItemView_content"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <span
+          title="room1"
+        >
+          room1
+        </span>
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
 exports[`<RoomListItemView /> should render a room item 1`] = `
 <DocumentFragment>
   <button
     aria-label="Open room room1"
+    aria-selected="false"
     class="mx_RoomListItemView"
     type="button"
   >