Merge pull request #942 from tchapgouv/937-study-unit-test-on-tchap-c…

…omponents

test: added testing-library, and unit test exemple with usermenu

jest.config.ts

@@ -68,6 +68,8 @@ const config: Config = {
         "../../../../../../src/tchap/components/views/messages/OriginalAudioBody":
             "<rootDir>/node_modules/matrix-react-sdk/src/components/views/messages/MAudioBody.tsx",
         "MStickerBody": "<rootDir>/src/tchap/customisations/components/views/messages/ContentScanningStickerBody.tsx",
+        "~tchap-web-dep/(.*)": "<rootDir>/yarn-linked-dependencies/$1",
+        "~tchap-web/(.*)": "<rootDir>/$1",
         // end :TCHAP:
     },
     transformIgnorePatterns: ["/node_modules/(?!matrix-js-sdk|matrix-react-sdk).+$"],

package.json

@@ -103,7 +103,9 @@
             "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
             "enzyme": "^3.11.0",
             "enzyme-to-json": "^3.6.2",
-            "cypress packages": "since we run cypress from tchap-web repo, not from react-sdk. We cypress-related deps from matric-react-sdk."
+            "cypress packages": "since we run cypress from tchap-web repo, not from react-sdk. We cypress-related deps from matric-react-sdk.",
+            "@testing-library/jest-dom": "^6.4.2",
+            "@types/testing-library__jest-dom": "^6.0.0"
         }
     },
     "devDependencies": {
@@ -133,6 +135,7 @@
         "@sentry/webpack-plugin": "^2.7.1",
         "@svgr/webpack": "^5.5.0",
         "@testing-library/cypress": "^9.0.0",
+        "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^12.1.5",
         "@types/commonmark": "^0.27.9",
         "@types/content-type": "^1.1.8",
@@ -159,6 +162,7 @@
         "@types/sanitize-html": "^2.9.5",
         "@types/sdp-transform": "^2.4.9",
         "@types/tar-js": "^0.3.5",
+        "@types/testing-library__jest-dom": "^6.0.0",
         "@types/ua-parser-js": "^0.7.36",
         "@types/uuid": "^9.0.7",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -175,11 +179,11 @@
         "concurrently": "^8.0.0",
         "copy-webpack-plugin": "^12.0.0",
         "cronstrue": "^2.41.0",
+        "css-loader": "^5.2.7",
+        "css-minimizer-webpack-plugin": "^5.0.1",
         "cypress": "^13.0.0",
         "cypress-axe": "^1.0.0",
         "cypress-real-events": "^1.7.1",
-        "css-loader": "^5.2.7",
-        "css-minimizer-webpack-plugin": "^5.0.1",
         "dotenv": "^16.0.2",
         "enzyme": "^3.11.0",
         "enzyme-to-json": "^3.6.2",

test/setupTests.ts

@@ -1,5 +1,6 @@
 //is duplicated from matrix-react-sdk/test/setupTests.js in order to work
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+import "@testing-library/jest-dom";
 // eslint-disable-next-line deprecate/import
 import { configure } from "enzyme";
 configure({ adapter: new Adapter() });

test/unit-tests/tchap/components/structures/UserMenu-test.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import UnwrappedUserMenu from "~tchap-web-dep/matrix-react-sdk/src/components/structures/UserMenu";
+import { TestSdkContext } from "~tchap-web-dep/matrix-react-sdk/test/TestSdkContext";
+import { stubClient, wrapInSdkContext } from "~tchap-web-dep/matrix-react-sdk/test/test-utils";
+import { MatrixClient } from "~tchap-web-dep/matrix-js-sdk/src/matrix";
+
+describe("<UserMenu>", () => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let client: MatrixClient;
+    let sdkContext: TestSdkContext;
+
+    beforeEach(() => {
+        client = stubClient();
+        sdkContext = new TestSdkContext();
+    });
+
+    describe("<UserMenu> UI", () => {
+        beforeEach(() => {
+            const UserMenu = wrapInSdkContext(UnwrappedUserMenu, sdkContext);
+            render(<UserMenu isPanelCollapsed={false} />);
+        });
+
+        // If this snapshot change, you should consider to check what change on the UI side from element
+        // 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();
+
+            const menu = screen.getByRole("menu");
+            expect(menu).toMatchSnapshot();
+        });
+
+        // you can also add some specific ui check here
+        // ...
+    });
+
+    // Here you can add some business logic check
+    describe("<UserMenu> faq", () => {
+        beforeEach(() => {
+            const UserMenu = wrapInSdkContext(UnwrappedUserMenu, sdkContext);
+            render(<UserMenu isPanelCollapsed={true} />);
+        });
+
+        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();
+            // click on the faq
+            screen.getByRole("menuitem", { name: "common" }).click();
+            expect(global.open).toHaveBeenCalledTimes(1);
+            expect(global.open).toHaveBeenCalledWith("https://www.tchap.gouv.fr/faq", "_blank");
+        });
+    });
+
+    // Here are the tests for checking the props of the component
+    describe("<UserMenu> props", () => {});
+});

test/unit-tests/tchap/components/structures/__snapshots__/UserMenu-test.tsx.snap

@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<UserMenu> <UserMenu> UI should render as expected 1`] = `
+<div
+  class="mx_ContextualMenu"
+  role="menu"
+>
+  <ul
+    class="mx_IconizedContextMenu mx_UserMenu_contextMenu"
+    role="none"
+  >
+    <div
+      class="mx_UserMenu_contextMenu_header"
+    >
+      <div
+        class="mx_UserMenu_contextMenu_name"
+      >
+        <span
+          class="mx_UserMenu_contextMenu_displayName"
+        />
+        <span
+          class="mx_UserMenu_contextMenu_userId"
+        >
+          @userId:matrix.org
+        </span>
+      </div>
+      <div
+        aria-label="user_menu"
+        class="mx_AccessibleButton mx_UserMenu_contextMenu_themeButton"
+        role="button"
+        tabindex="-1"
+      >
+        <img
+          alt=""
+          role="presentation"
+          src="image-file-stub"
+          width="16"
+        />
+      </div>
+    </div>
+    <div
+      class="mx_IconizedContextMenu_optionList mx_IconizedContextMenu_optionList_notFirst"
+    >
+      <li
+        aria-label="notifications"
+        class="mx_AccessibleButton mx_IconizedContextMenu_item"
+        role="menuitem"
+        tabindex="0"
+      >
+        <span
+          class="mx_IconizedContextMenu_icon mx_UserMenu_iconBell"
+        />
+        <span
+          class="mx_IconizedContextMenu_label"
+        >
+          notifications
+        </span>
+      </li>
+      <li
+        aria-label="room_settings"
+        class="mx_AccessibleButton mx_IconizedContextMenu_item"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          class="mx_IconizedContextMenu_icon mx_UserMenu_iconLock"
+        />
+        <span
+          class="mx_IconizedContextMenu_label"
+        >
+          room_settings
+        </span>
+      </li>
+      <li
+        aria-label="user_menu"
+        class="mx_AccessibleButton mx_IconizedContextMenu_item"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          class="mx_IconizedContextMenu_icon mx_UserMenu_iconSettings"
+        />
+        <span
+          class="mx_IconizedContextMenu_label"
+        >
+          user_menu
+        </span>
+      </li>
+      <li
+        aria-label="common"
+        class="mx_AccessibleButton mx_IconizedContextMenu_item"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          class="mx_IconizedContextMenu_icon mx_UserMenu_iconInfo"
+        />
+        <span
+          class="mx_IconizedContextMenu_label"
+        >
+          common
+        </span>
+      </li>
+      <li
+        aria-label="action"
+        class="mx_AccessibleButton mx_IconizedContextMenu_option_red mx_IconizedContextMenu_item"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          class="mx_IconizedContextMenu_icon mx_UserMenu_iconSignOut"
+        />
+        <span
+          class="mx_IconizedContextMenu_label"
+        >
+          action
+        </span>
+      </li>
+    </div>
+  </ul>
+</div>
+`;

tsconfig.json

@@ -14,6 +14,13 @@
         "jsx": "react",
         "lib": ["es2021", "dom", "dom.iterable"],
         "strict": true,
+        /* :TCHAP: */
+        "paths": {
+            "~tchap-web/*": ["./*"],
+            "~tchap-web-dep/*": ["./yarn-linked-dependencies/*"],
+        },
+        "types": ["node", "jest", "@testing-library/jest-dom"],
+        /* end :TCHAP: */
     },
     "include": [
         "./node_modules/matrix-js-sdk/src/@types/*.d.ts",

yarn.lock

@@ -45,6 +45,11 @@
     tunnel "^0.0.6"
     undici "^5.25.4"
 
+"@adobe/css-tools@^4.3.2":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.3.tgz#90749bde8b89cd41764224f5aac29cd4138f75ff"
+  integrity sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==
+
 "@ampproject/remapping@^2.1.0", "@ampproject/remapping@^2.2.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
@@ -2711,6 +2716,20 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
+"@testing-library/jest-dom@*", "@testing-library/jest-dom@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz#38949f6b63722900e2d75ba3c6d9bf8cffb3300e"
+  integrity sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw==
+  dependencies:
+    "@adobe/css-tools" "^4.3.2"
+    "@babel/runtime" "^7.9.2"
+    aria-query "^5.0.0"
+    chalk "^3.0.0"
+    css.escape "^1.5.1"
+    dom-accessibility-api "^0.6.3"
+    lodash "^4.17.15"
+    redent "^3.0.0"
+
 "@testing-library/react-hooks@^8.0.1":
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12"
@@ -3258,6 +3277,13 @@
   resolved "https://registry.yarnpkg.com/@types/tar-js/-/tar-js-0.3.5.tgz#c2f20f2577f0381179a3a2daf0412853e92ff79d"
   integrity sha512-resGa1LAQLXI1tKDWnggDn7+o6fL4dZo7a8FcQKctBzC937UYp9iogiQonLElYduhzBarUUsMe/ntx/++xYgAA==
 
+"@types/testing-library__jest-dom@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-6.0.0.tgz#b558b64b80a72130714be1f505c6df482d453690"
+  integrity sha512-bnreXCgus6IIadyHNlN/oI5FfX4dWgvGhOPvpr7zzCYDGAPIfvyIoAozMBINmhmsVuqV0cncejF2y5KC7ScqOg==
+  dependencies:
+    "@testing-library/jest-dom" "*"
+
 "@types/tough-cookie@*":
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz#cb6e2a691b70cb177c6e3ae9c1d2e8b2ea8cd304"
@@ -3828,6 +3854,13 @@ [email protected]:
   dependencies:
     deep-equal "^2.0.5"
 
+aria-query@^5.0.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
+  integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
+  dependencies:
+    dequal "^2.0.3"
+
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -4534,6 +4567,14 @@ chalk@^2.4.1, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -5192,6 +5233,11 @@ css-what@^6.0.1, css-what@^6.1.0:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
+
 csscolorparser@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/csscolorparser/-/csscolorparser-1.0.3.tgz#b34f391eea4da8f3e98231e2ccd8df9c041f171b"
@@ -5566,6 +5612,11 @@ deprecation@^2.0.0, deprecation@^2.3.1:
   resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
 
+dequal@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 [email protected]:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
@@ -5662,6 +5713,11 @@ dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
+dom-accessibility-api@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8"
+  integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==
+
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -9097,7 +9153,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -11531,6 +11587,14 @@ rechoir@^0.8.0:
   dependencies:
     resolve "^1.20.0"
 
+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
 redux@^4.0.0, redux@^4.0.4:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"