test(fix): fix some random tests and add snapshot

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");
         });

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>

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"

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);

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>
+`;

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);