New room list: add space menu in room header (#29352)

* feat(new room list): add space menu in view model * test(new room list): add space menu in view model * feat(new room list): add space menu in room list header * chore: update i18n * test(new room list): add tests for space menu * test(new room list): update room list tests * test(e2e): add tests for space menu
2025-02-25 15:06:01 +01:00
parent 62a287219d
commit f95218e2b7
11 changed files with 611 additions and 76 deletions
--- a/test/unit-tests/components/views/rooms/RoomListView/RoomListHeaderView-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomListView/RoomListHeaderView-test.tsx
@@ -24,64 +24,129 @@ describe("<RoomListHeaderView />", () => {
    const defaultValue: RoomListHeaderViewState = {
        title: "title",
        displayComposeMenu: true,
+        displaySpaceMenu: true,
        canCreateRoom: true,
        canCreateVideoRoom: true,
+        canInviteInSpace: true,
+        canAccessSpaceSettings: true,
        createRoom: jest.fn(),
        createVideoRoom: jest.fn(),
        createChatRoom: jest.fn(),
+        openSpaceHome: jest.fn(),
+        inviteInSpace: jest.fn(),
+        openSpacePreferences: jest.fn(),
+        openSpaceSettings: jest.fn(),
    };

    afterEach(() => {
        jest.resetAllMocks();
    });

-    it("should display the compose menu", () => {
-        mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
+    describe("compose menu", () => {
+        it("should display the compose menu", () => {
+            mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);

-        const { asFragment } = render(<RoomListHeaderView />);
-        expect(screen.queryByRole("button", { name: "Add" })).toBeInTheDocument();
-        expect(asFragment()).toMatchSnapshot();
-    });
-
-    it("should not display the compose menu", () => {
-        mocked(useRoomListHeaderViewModel).mockReturnValue({ ...defaultValue, displayComposeMenu: false });
-
-        const { asFragment } = render(<RoomListHeaderView />);
-        expect(screen.queryByRole("button", { name: "Add" })).toBeNull();
-        expect(asFragment()).toMatchSnapshot();
-    });
-
-    it("should display all the buttons when the menu is opened", async () => {
-        const user = userEvent.setup();
-        mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
-        render(<RoomListHeaderView />);
-        const openMenu = screen.getByRole("button", { name: "Add" });
-        await user.click(openMenu);
-
-        await user.click(screen.getByRole("menuitem", { name: "New message" }));
-        expect(defaultValue.createChatRoom).toHaveBeenCalled();
-
-        await user.click(openMenu);
-        await user.click(screen.getByRole("menuitem", { name: "New room" }));
-        expect(defaultValue.createRoom).toHaveBeenCalled();
-
-        await user.click(openMenu);
-        await user.click(screen.getByRole("menuitem", { name: "New video room" }));
-        expect(defaultValue.createVideoRoom).toHaveBeenCalled();
-    });
-
-    it("should display only the new message button", async () => {
-        const user = userEvent.setup();
-        mocked(useRoomListHeaderViewModel).mockReturnValue({
-            ...defaultValue,
-            canCreateRoom: false,
-            canCreateVideoRoom: false,
+            const { asFragment } = render(<RoomListHeaderView />);
+            expect(screen.queryByRole("button", { name: "Add" })).toBeInTheDocument();
+            expect(asFragment()).toMatchSnapshot();
        });

-        render(<RoomListHeaderView />);
-        await user.click(screen.getByRole("button", { name: "Add" }));
+        it("should not display the compose menu", () => {
+            mocked(useRoomListHeaderViewModel).mockReturnValue({ ...defaultValue, displayComposeMenu: false });

-        expect(screen.queryByRole("menuitem", { name: "New room" })).toBeNull();
-        expect(screen.queryByRole("menuitem", { name: "New video room" })).toBeNull();
+            const { asFragment } = render(<RoomListHeaderView />);
+            expect(screen.queryByRole("button", { name: "Add" })).toBeNull();
+            expect(asFragment()).toMatchSnapshot();
+        });
+
+        it("should display all the buttons when the menu is opened", async () => {
+            const user = userEvent.setup();
+            mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
+            render(<RoomListHeaderView />);
+            const openMenu = screen.getByRole("button", { name: "Add" });
+            await user.click(openMenu);
+
+            await user.click(screen.getByRole("menuitem", { name: "New message" }));
+            expect(defaultValue.createChatRoom).toHaveBeenCalled();
+
+            await user.click(openMenu);
+            await user.click(screen.getByRole("menuitem", { name: "New room" }));
+            expect(defaultValue.createRoom).toHaveBeenCalled();
+
+            await user.click(openMenu);
+            await user.click(screen.getByRole("menuitem", { name: "New video room" }));
+            expect(defaultValue.createVideoRoom).toHaveBeenCalled();
+        });
+
+        it("should display only the new message button", async () => {
+            const user = userEvent.setup();
+            mocked(useRoomListHeaderViewModel).mockReturnValue({
+                ...defaultValue,
+                canCreateRoom: false,
+                canCreateVideoRoom: false,
+            });
+
+            render(<RoomListHeaderView />);
+            await user.click(screen.getByRole("button", { name: "Add" }));
+
+            expect(screen.queryByRole("menuitem", { name: "New room" })).toBeNull();
+            expect(screen.queryByRole("menuitem", { name: "New video room" })).toBeNull();
+        });
+    });
+
+    describe("space menu", () => {
+        it("should display the space menu", () => {
+            mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
+
+            const { asFragment } = render(<RoomListHeaderView />);
+            expect(screen.queryByRole("button", { name: "Open space menu" })).toBeInTheDocument();
+            expect(asFragment()).toMatchSnapshot();
+        });
+
+        it("should not display the space menu", () => {
+            mocked(useRoomListHeaderViewModel).mockReturnValue({ ...defaultValue, displaySpaceMenu: false });
+
+            const { asFragment } = render(<RoomListHeaderView />);
+            expect(screen.queryByRole("button", { name: "Open space menu" })).toBeNull();
+            expect(asFragment()).toMatchSnapshot();
+        });
+
+        it("should display all the buttons when the space menu is opened", async () => {
+            const user = userEvent.setup();
+            mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
+            render(<RoomListHeaderView />);
+            const openMenu = screen.getByRole("button", { name: "Open space menu" });
+            await user.click(openMenu);
+
+            await user.click(screen.getByRole("menuitem", { name: "Space home" }));
+            expect(defaultValue.openSpaceHome).toHaveBeenCalled();
+
+            await user.click(openMenu);
+            await user.click(screen.getByRole("menuitem", { name: "Invite" }));
+            expect(defaultValue.inviteInSpace).toHaveBeenCalled();
+
+            await user.click(openMenu);
+            await user.click(screen.getByRole("menuitem", { name: "Preferences" }));
+            expect(defaultValue.openSpacePreferences).toHaveBeenCalled();
+
+            await user.click(openMenu);
+            await user.click(screen.getByRole("menuitem", { name: "Space Settings" }));
+            expect(defaultValue.openSpaceSettings).toHaveBeenCalled();
+        });
+
+        it("should display only the home and preference buttons", async () => {
+            const user = userEvent.setup();
+            mocked(useRoomListHeaderViewModel).mockReturnValue({
+                ...defaultValue,
+                canInviteInSpace: false,
+                canAccessSpaceSettings: false,
+            });
+
+            render(<RoomListHeaderView />);
+            await user.click(screen.getByRole("button", { name: "Add" }));
+
+            expect(screen.queryByRole("menuitem", { name: "Invite" })).toBeNull();
+            expect(screen.queryByRole("menuitem", { name: "Space Setting" })).toBeNull();
+        });
    });
 });
--- a/test/unit-tests/components/views/rooms/RoomListView/snapshots/RoomListHeaderView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListView/snapshots/RoomListHeaderView-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<RoomListHeaderView /> should display the compose menu 1`] = `
+exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`] = `
 <DocumentFragment>
  <header
    aria-label="Room options"
@@ -8,9 +8,44 @@ exports[`<RoomListHeaderView /> should display the compose menu 1`] = `
    data-testid="room-list-header"
    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
  >
-    <h1>
-      title
-    </h1>
+    <div
+      class="mx_Flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+    >
+      <h1>
+        title
+      </h1>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Open space menu"
+        class="_icon-button_m2erp_8 mx_SpaceMenu_button"
+        data-state="closed"
+        id="radix-:r0:"
+        role="button"
+        style="--cpd-icon-button-size: 20px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
    <button
      aria-disabled="false"
      aria-expanded="false"
@@ -18,7 +53,7 @@ exports[`<RoomListHeaderView /> should display the compose menu 1`] = `
      aria-label="Add"
      class="_icon-button_m2erp_8"
      data-state="closed"
-      id="radix-:r0:"
+      id="radix-:r2:"
      role="button"
      style="--cpd-icon-button-size: 32px;"
      tabindex="0"
@@ -50,7 +85,7 @@ exports[`<RoomListHeaderView /> should display the compose menu 1`] = `
 </DocumentFragment>
 `;

-exports[`<RoomListHeaderView /> should not display the compose menu 1`] = `
+exports[`<RoomListHeaderView /> compose menu should not display the compose menu 1`] = `
 <DocumentFragment>
  <header
    aria-label="Room options"
@@ -58,9 +93,184 @@ exports[`<RoomListHeaderView /> should not display the compose menu 1`] = `
    data-testid="room-list-header"
    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
  >
-    <h1>
-      title
-    </h1>
+    <div
+      class="mx_Flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+    >
+      <h1>
+        title
+      </h1>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Open space menu"
+        class="_icon-button_m2erp_8 mx_SpaceMenu_button"
+        data-state="closed"
+        id="radix-:r4:"
+        role="button"
+        style="--cpd-icon-button-size: 20px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+  </header>
+</DocumentFragment>
+`;
+
+exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
+<DocumentFragment>
+  <header
+    aria-label="Room options"
+    class="mx_Flex mx_RoomListHeaderView"
+    data-testid="room-list-header"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+  >
+    <div
+      class="mx_Flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+    >
+      <h1>
+        title
+      </h1>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Open space menu"
+        class="_icon-button_m2erp_8 mx_SpaceMenu_button"
+        data-state="closed"
+        id="radix-:rs:"
+        role="button"
+        style="--cpd-icon-button-size: 20px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="Add"
+      class="_icon-button_m2erp_8"
+      data-state="closed"
+      id="radix-:ru:"
+      role="button"
+      style="--cpd-icon-button-size: 32px;"
+      tabindex="0"
+      type="button"
+    >
+      <div
+        class="_indicator-icon_zr2a0_17"
+        style="--cpd-icon-button-size: 100%;"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+            fill-rule="evenodd"
+          />
+          <path
+            d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+          />
+        </svg>
+      </div>
+    </button>
+  </header>
+</DocumentFragment>
+`;
+
+exports[`<RoomListHeaderView /> space menu should not display the space menu 1`] = `
+<DocumentFragment>
+  <header
+    aria-label="Room options"
+    class="mx_Flex mx_RoomListHeaderView"
+    data-testid="room-list-header"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+  >
+    <div
+      class="mx_Flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+    >
+      <h1>
+        title
+      </h1>
+    </div>
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="Add"
+      class="_icon-button_m2erp_8"
+      data-state="closed"
+      id="radix-:r10:"
+      role="button"
+      style="--cpd-icon-button-size: 32px;"
+      tabindex="0"
+      type="button"
+    >
+      <div
+        class="_indicator-icon_zr2a0_17"
+        style="--cpd-icon-button-size: 100%;"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+            fill-rule="evenodd"
+          />
+          <path
+            d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+          />
+        </svg>
+      </div>
+    </button>
  </header>
 </DocumentFragment>
 `;
--- a/test/unit-tests/components/views/rooms/RoomListView/snapshots/RoomListView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListView/snapshots/RoomListView-test.tsx.snap
@@ -12,9 +12,14 @@ exports[`<RoomListView /> should not render the RoomListSearch component when UI
      data-testid="room-list-header"
      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
    >
-      <h1>
-        Home
-      </h1>
+      <div
+        class="mx_Flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+      >
+        <h1>
+          Home
+        </h1>
+      </div>
    </header>
  </section>
 </DocumentFragment>
@@ -88,9 +93,14 @@ exports[`<RoomListView /> should render the RoomListSearch component when UIComp
      data-testid="room-list-header"
      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
    >
-      <h1>
-        Home
-      </h1>
+      <div
+        class="mx_Flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+      >
+        <h1>
+          Home
+        </h1>
+      </div>
      <button
        aria-disabled="false"
        aria-expanded="false"