From 3eaef58ba1bbe0608efeeff502a64d0fbf0c5e7e Mon Sep 17 00:00:00 2001
From: "marc.sirisak" <marc.sirisak@beta.gouv.fr>
Date: Thu, 10 Oct 2024 16:50:16 +0200
Subject: [PATCH] test(fix): fix some random tests and add snapshot

---
 .../components/structures/UserMenu-test.tsx   |  6 +-
 .../__snapshots__/UserMenu-test.tsx.snap      | 22 ++---
 .../BugReportDialog-test.tsx.snap             | 32 +++----
 .../views/rooms/RoomHeaders-test.tsx          |  5 +
 .../__snapshots__/RoomHeaders-test.tsx.snap   | 91 ++++++++++++++++++
 .../views/spaces/SpacePanel-test.tsx          | 24 ++++-
 .../__snapshots__/SpacePanel-test.tsx.snap    | 92 +++++++++++++++++++
 7 files changed, 237 insertions(+), 35 deletions(-)
 create mode 100644 test/unit-tests/tchap/components/views/rooms/__snapshots__/RoomHeaders-test.tsx.snap
 create mode 100644 test/unit-tests/tchap/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap

diff --git a/test/unit-tests/tchap/components/structures/UserMenu-test.tsx b/test/unit-tests/tchap/components/structures/UserMenu-test.tsx
index 932da78e5..ec6044b5e 100644
--- a/test/unit-tests/tchap/components/structures/UserMenu-test.tsx
+++ b/test/unit-tests/tchap/components/structures/UserMenu-test.tsx
@@ -26,7 +26,7 @@ describe("<UserMenu>", () => {
         // it"s a good indicator to see if this could introduce some regression on our code
         it("should render as expected", async () => {
             // open the user menu
-            screen.getByRole("button", { name: "a11y" }).click();
+            screen.getByRole("button", { name: "User menu" }).click();
 
             const menu = screen.getByRole("menu");
             expect(menu).toMatchSnapshot();
@@ -46,9 +46,9 @@ describe("<UserMenu>", () => {
         it("should open the faq when clicking on the faq button", () => {
             global.open = jest.fn();
             // open the user menu
-            screen.getByRole("button", { name: "a11y" }).click();
+            screen.getByRole("button", { name: "User menu" }).click();
             // click on the faq
-            screen.getByRole("menuitem", { name: "common" }).click();
+            screen.getByRole("menuitem", { name: "Help" }).click();
             expect(global.open).toHaveBeenCalledTimes(1);
             expect(global.open).toHaveBeenCalledWith("https://www.tchap.gouv.fr/faq", "_blank");
         });
diff --git a/test/unit-tests/tchap/components/structures/__snapshots__/UserMenu-test.tsx.snap b/test/unit-tests/tchap/components/structures/__snapshots__/UserMenu-test.tsx.snap
index 3ffbfca49..e16b8817e 100644
--- a/test/unit-tests/tchap/components/structures/__snapshots__/UserMenu-test.tsx.snap
+++ b/test/unit-tests/tchap/components/structures/__snapshots__/UserMenu-test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<UserMenu> <UserMenu> UI should render as expected 1`] = `
         </span>
       </div>
       <div
-        aria-label="user_menu"
+        aria-label="Switch to dark mode"
         class="mx_AccessibleButton mx_UserMenu_contextMenu_themeButton"
         role="button"
         tabindex="-1"
@@ -42,7 +42,7 @@ exports[`<UserMenu> <UserMenu> UI should render as expected 1`] = `
       class="mx_IconizedContextMenu_optionList mx_IconizedContextMenu_optionList_notFirst"
     >
       <li
-        aria-label="notifications"
+        aria-label="Notifications"
         class="mx_AccessibleButton mx_IconizedContextMenu_item"
         role="menuitem"
         tabindex="0"
@@ -53,11 +53,11 @@ exports[`<UserMenu> <UserMenu> UI should render as expected 1`] = `
         <span
           class="mx_IconizedContextMenu_label"
         >
-          notifications
+          Notifications
         </span>
       </li>
       <li
-        aria-label="room_settings"
+        aria-label="Security & Privacy"
         class="mx_AccessibleButton mx_IconizedContextMenu_item"
         role="menuitem"
         tabindex="-1"
@@ -68,11 +68,11 @@ exports[`<UserMenu> <UserMenu> UI should render as expected 1`] = `
         <span
           class="mx_IconizedContextMenu_label"
         >
-          room_settings
+          Security & Privacy
         </span>
       </li>
       <li
-        aria-label="user_menu"
+        aria-label="All settings"
         class="mx_AccessibleButton mx_IconizedContextMenu_item"
         role="menuitem"
         tabindex="-1"
@@ -83,11 +83,11 @@ exports[`<UserMenu> <UserMenu> UI should render as expected 1`] = `
         <span
           class="mx_IconizedContextMenu_label"
         >
-          user_menu
+          All settings
         </span>
       </li>
       <li
-        aria-label="common"
+        aria-label="Help"
         class="mx_AccessibleButton mx_IconizedContextMenu_item"
         role="menuitem"
         tabindex="-1"
@@ -98,11 +98,11 @@ exports[`<UserMenu> <UserMenu> UI should render as expected 1`] = `
         <span
           class="mx_IconizedContextMenu_label"
         >
-          common
+          Help
         </span>
       </li>
       <li
-        aria-label="action"
+        aria-label="Sign out"
         class="mx_AccessibleButton mx_IconizedContextMenu_option_red mx_IconizedContextMenu_item"
         role="menuitem"
         tabindex="-1"
@@ -113,7 +113,7 @@ exports[`<UserMenu> <UserMenu> UI should render as expected 1`] = `
         <span
           class="mx_IconizedContextMenu_label"
         >
-          action
+          Sign out
         </span>
       </li>
     </div>
diff --git a/test/unit-tests/tchap/components/views/dialogs/__snapshots__/BugReportDialog-test.tsx.snap b/test/unit-tests/tchap/components/views/dialogs/__snapshots__/BugReportDialog-test.tsx.snap
index bda6b9a3c..32f0ba03a 100644
--- a/test/unit-tests/tchap/components/views/dialogs/__snapshots__/BugReportDialog-test.tsx.snap
+++ b/test/unit-tests/tchap/components/views/dialogs/__snapshots__/BugReportDialog-test.tsx.snap
@@ -33,19 +33,19 @@ exports[`<BugReportDialog> should render as expected 1`] = `
         >
           <p>
             <strong>
-              bug_reporting
+              Reminder: Your browser is unsupported, so your experience may be unpredictable.
             </strong>
           </p>
           <p>
-            bug_reporting
+            Debug logs contain application usage data including your username, the IDs or aliases of the rooms you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.
           </p>
           <div
             class="mx_Field mx_Field_textarea mx_BugReportDialog_field_input"
           >
             <textarea
               id="mx_Field_1"
-              label="bug_reporting"
-              placeholder="bug_reporting"
+              label="Notes"
+              placeholder="If there is additional context that would help in analysing the issue, such as what you were doing at the time, room IDs, user IDs, etc., please include those things here."
               rows="5"
               type="text"
             >
@@ -54,7 +54,7 @@ exports[`<BugReportDialog> should render as expected 1`] = `
             <label
               for="mx_Field_1"
             >
-              bug_reporting
+              Notes
             </label>
           </div>
           <div
@@ -71,7 +71,7 @@ exports[`<BugReportDialog> should render as expected 1`] = `
                   data-testid="dialog-primary-button"
                   type="button"
                 >
-                  bug_reporting
+                  Send logs
                 </button>
               </span>
             </div>
@@ -93,14 +93,14 @@ exports[`<BugReportDialog> should render as expected 1`] = `
                   data-testid="dialog-primary-button"
                   type="button"
                 >
-                  bug_reporting
+                  Download logs
                 </button>
               </span>
             </div>
           </div>
         </div>
         <div
-          aria-label="dialog_close_label"
+          aria-label="Close dialog"
           class="mx_AccessibleButton mx_Dialog_cancelButton"
           role="button"
           tabindex="0"
@@ -142,19 +142,19 @@ exports[`<BugReportDialog> should render as expected 1`] = `
       >
         <p>
           <strong>
-            bug_reporting
+            Reminder: Your browser is unsupported, so your experience may be unpredictable.
           </strong>
         </p>
         <p>
-          bug_reporting
+          Debug logs contain application usage data including your username, the IDs or aliases of the rooms you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.
         </p>
         <div
           class="mx_Field mx_Field_textarea mx_BugReportDialog_field_input"
         >
           <textarea
             id="mx_Field_1"
-            label="bug_reporting"
-            placeholder="bug_reporting"
+            label="Notes"
+            placeholder="If there is additional context that would help in analysing the issue, such as what you were doing at the time, room IDs, user IDs, etc., please include those things here."
             rows="5"
             type="text"
           >
@@ -163,7 +163,7 @@ exports[`<BugReportDialog> should render as expected 1`] = `
           <label
             for="mx_Field_1"
           >
-            bug_reporting
+            Notes
           </label>
         </div>
         <div
@@ -180,7 +180,7 @@ exports[`<BugReportDialog> should render as expected 1`] = `
                 data-testid="dialog-primary-button"
                 type="button"
               >
-                bug_reporting
+                Send logs
               </button>
             </span>
           </div>
@@ -202,14 +202,14 @@ exports[`<BugReportDialog> should render as expected 1`] = `
                 data-testid="dialog-primary-button"
                 type="button"
               >
-                bug_reporting
+                Download logs
               </button>
             </span>
           </div>
         </div>
       </div>
       <div
-        aria-label="dialog_close_label"
+        aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
         role="button"
         tabindex="0"
diff --git a/test/unit-tests/tchap/components/views/rooms/RoomHeaders-test.tsx b/test/unit-tests/tchap/components/views/rooms/RoomHeaders-test.tsx
index 47307a904..3d2e7971b 100644
--- a/test/unit-tests/tchap/components/views/rooms/RoomHeaders-test.tsx
+++ b/test/unit-tests/tchap/components/views/rooms/RoomHeaders-test.tsx
@@ -99,6 +99,11 @@ describe("RoomHeader", () => {
         jest.restoreAllMocks();
     });
 
+    it("should render as expected", async () => {
+        const { container } = getComponent();
+        expect(container).toMatchSnapshot();
+    });
+
     it("renders the room header", () => {
         const { container } = getComponent();
         expect(container).toHaveTextContent(ROOM_ID);
diff --git a/test/unit-tests/tchap/components/views/rooms/__snapshots__/RoomHeaders-test.tsx.snap b/test/unit-tests/tchap/components/views/rooms/__snapshots__/RoomHeaders-test.tsx.snap
new file mode 100644
index 000000000..4d843542a
--- /dev/null
+++ b/test/unit-tests/tchap/components/views/rooms/__snapshots__/RoomHeaders-test.tsx.snap
@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RoomHeader should render as expected 1`] = `
+<div>
+  <header
+    class="mx_Flex mx_RoomHeader light-panel"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+  >
+    <div
+      class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
+    >
+      <div
+        class="mx_DecoratedRoomAvatar_positionedParent"
+      >
+        <span
+          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+          data-color="3"
+          data-testid="avatar-img"
+          data-type="round"
+          role="presentation"
+          style="--cpd-avatar-size: 40px;"
+        >
+          !
+        </span>
+        <div
+          class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_forum"
+          tabindex="0"
+        />
+      </div>
+       
+    </div>
+    <button
+      aria-label="Room info"
+      class="mx_RoomHeader_infoWrapper"
+      tabindex="0"
+    >
+      <div
+        class="mx_Box mx_RoomHeader_info mx_Box--flex"
+        style="--mx-box-flex: 1;"
+      >
+        <div
+          aria-level="1"
+          class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
+          dir="auto"
+          role="heading"
+        >
+          <span
+            class="mx_RoomHeader_truncated mx_lineClamp"
+          >
+            !1:example.org
+          </span>
+        </div>
+      </div>
+    </button>
+    <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-2x);"
+    >
+      <button
+        aria-label="Room info"
+        class="_icon-button_bh2qc_17"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <div />
+        </div>
+      </button>
+    </div>
+    <div
+      class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
+    >
+      <div
+        aria-label="0 members"
+        class="mx_AccessibleButton mx_FacePile"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="_stacked-avatars_mcap2_111"
+        />
+        0
+      </div>
+    </div>
+  </header>
+</div>
+`;
diff --git a/test/unit-tests/tchap/components/views/spaces/SpacePanel-test.tsx b/test/unit-tests/tchap/components/views/spaces/SpacePanel-test.tsx
index 36d233ec8..82e5ff5a0 100644
--- a/test/unit-tests/tchap/components/views/spaces/SpacePanel-test.tsx
+++ b/test/unit-tests/tchap/components/views/spaces/SpacePanel-test.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { render, cleanup } from "@testing-library/react";
+import { render, cleanup, getByRole, logRoles, queryByRole } from "@testing-library/react";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { stubClient } from "~matrix-react-sdk/test/test-utils";
@@ -8,12 +8,18 @@ import { SdkContextClass } from "~matrix-react-sdk/src/contexts/SDKContext";
 import UnwrappedSpacePanel from "~matrix-react-sdk/src/components/views/spaces/SpacePanel";
 import SdkConfig, { ConfigOptions } from "~tchap-web/linked-dependencies/matrix-react-sdk/src/SdkConfig";
 
+jest.mock('~tchap-web/src/tchap/components/views/common/Gaufre.tsx', () => {
+    return jest.fn((props: { isPanelCollapsed: boolean }) => (
+        <div>Mocked ChildComponent with text: </div>
+      ));
+  });
+
 describe("<SpacePanel />", () => {
     const SpacePanel = wrapInSdkContext(wrapInMatrixClientContext(UnwrappedSpacePanel), SdkContextClass.instance);
-    const featureName: string = "feature_thread";
+    const featureThreadName: string = "feature_thread";
     const homeserverName: string = "my.home.server";
 
-    const addHomeserverToMockConfig = (homeservers: string[]) => {
+    const addHomeserverToMockConfig = (homeservers: string[], featureName: string) => {
         // mock SdkConfig.get("tchap_features")
         const config: ConfigOptions = { tchap_features: {} };
         config.tchap_features[featureName] = homeservers;
@@ -29,17 +35,25 @@ describe("<SpacePanel />", () => {
 
     afterEach(() => {
         cleanup();
+        SdkConfig.reset();
+        jest.restoreAllMocks();
+    });
+
+    it("should render as expected", async () => {
+        const { container } = renderSpacePanel();
+
+        expect(container).toMatchSnapshot();
     });
 
     it("returns true when the the homeserver include thread feature", () => {
-        addHomeserverToMockConfig([homeserverName]);
+        addHomeserverToMockConfig([homeserverName], featureThreadName);
         const { container } = renderSpacePanel();
 
         expect(container.getElementsByClassName("mx_ThreadsActivityCentre_container").length).toBe(1);
     });
 
     it("returns false when the the homeserver doesnt include thread feature", async () => {
-        addHomeserverToMockConfig(["other.homeserver"]);
+        addHomeserverToMockConfig(["other.homeserver"], featureThreadName);
         const { container } = renderSpacePanel();
 
         expect(container.getElementsByClassName("mx_ThreadsActivityCentre_container").length).toBe(0);
diff --git a/test/unit-tests/tchap/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/test/unit-tests/tchap/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
new file mode 100644
index 000000000..fabff1750
--- /dev/null
+++ b/test/unit-tests/tchap/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SpacePanel /> should render as expected 1`] = `
+<div>
+  <nav
+    aria-label="Spaces"
+    class="mx_SpacePanel collapsed"
+  >
+    <div
+      class="mx_UserMenu"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        aria-label="User menu"
+        class="mx_AccessibleButton mx_UserMenu_contextMenuButton"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="mx_UserMenu_userAvatar"
+        >
+          <span
+            class="_avatar_mcap2_17 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_mcap2_61"
+            data-color="2"
+            data-testid="avatar-img"
+            data-type="round"
+            role="presentation"
+            style="--cpd-avatar-size: 32px;"
+          >
+            u
+          </span>
+        </div>
+      </div>
+      <div
+        aria-label="Expand"
+        class="mx_AccessibleButton mx_SpacePanel_toggleCollapse"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <ul
+      aria-label="Spaces"
+      class="mx_AutoHideScrollbar mx_SpaceTreeLevel"
+      data-rbd-droppable-context-id="0"
+      data-rbd-droppable-id="top-level-spaces"
+      role="tree"
+      tabindex="-1"
+    >
+      <li
+        aria-selected="false"
+        class="mx_SpaceItem mx_SpaceItem_new collapsed"
+        role="treeitem"
+      >
+        <div
+          aria-label="Create a space"
+          class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_new mx_SpaceButton_narrow"
+          data-testid="create-space-button"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="mx_SpaceButton_selectionWrapper"
+          >
+            <div
+              class="mx_SpaceButton_avatarWrapper"
+            >
+              <div
+                class="mx_SpaceButton_avatarPlaceholder"
+              >
+                <div
+                  class="mx_SpaceButton_icon"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <div
+      aria-expanded="false"
+      aria-label="Help"
+      class="mx_AccessibleButton mx_QuickSettingsButton tc_sidebar_quick_faq"
+      role="button"
+      tabindex="0"
+    />
+    <div>
+      Mocked ChildComponent with text: 
+    </div>
+  </nav>
+</div>
+`;