fix: lint and test on accountusersetting and redlist test

modules/tchap-translations/tchap_translations.json

@@ -878,15 +878,15 @@
         "en": "ProConnect is disabled for your domain",
         "fr": "ProConnect est désactivé pour votre domaine"
     },
-    "settings|general|redlist_description" : {
+    "settings|general|redlist_description": {
         "en": "The other users won't be able to discover my account during their search",
         "fr": "Les autres utilisateurs ne pourront pas découvrir mon compte lors de leurs recherches"
     },
-    "settings|general|redlist_title" : {
+    "settings|general|redlist_title": {
         "en": "Register my account on the red list",
         "fr": "Inscrire mon compte sur la liste rouge"
     },
-    "settings|general|redlist" : {
+    "settings|general|redlist": {
         "en": "Red List",
         "fr": "Liste rouge"
     }

src/tchap/components/views/settings/tabs/user/TchapRedListSettings.tsx

@@ -3,6 +3,7 @@ import LabelledToggleSwitch from 'matrix-react-sdk/src/components/views/elements
 import SettingsSubsection from 'matrix-react-sdk/src/components/views/settings/shared/SettingsSubsection';
 import { _t } from "matrix-react-sdk/src/languageHandler";
 import TchapUtils from '../../../../../util/TchapUtils';
+import ToggleSwitch from 'matrix-react-sdk/src/components/views/elements/ToggleSwitch';
 
 interface TchapRedListSettingsProps {
 }
@@ -42,14 +43,21 @@ const TchapRedListSettings: React.FC<TchapRedListSettingsProps> = () => {
     return <SettingsSubsection
             heading={_t("settings|general|redlist")}
             stretchContent>
-                <LabelledToggleSwitch value={isOnRedList}
-                    onChange={(checked: boolean) => _onRedlistOptionChange(checked)}
-                    label={_t('settings|general|redlist_title')}
-                    disabled={loading}
+                <div className="mx_SettingsFlag">
+                    <label className="mx_SettingsFlag_label" htmlFor="redList-toggle">
+                        <span className="mx_SettingsFlag_labelText">{_t('settings|general|redlist_title')}</span>
+                        <div className="mx_SettingsFlag_microcopy">
+                            {_t("settings|general|redlist_description")}
+                        </div>
+                    </label>
+                    <ToggleSwitch
+                        id="redList-toggle"
+                        checked={isOnRedList}
+                        onChange={(checked: boolean) => _onRedlistOptionChange(checked)}
+                        disabled={loading}
+                        title={_t('settings|general|redlist_title')}
                     />
-                <p className="mx_SettingsTab_subsectionText">
-                    ({_t("settings|general|redlist_description")})
-                </p>
+                </div>
             </SettingsSubsection>
 }
 

test/unit-tests/tchap/components/views/settings/AccountUserSettingsTab-test.tsx

@@ -2,7 +2,7 @@ import { render } from "@testing-library/react";
 import React from "react";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MockedObject } from "jest-mock";
+import { mocked, MockedObject } from "jest-mock";
 import AccountUserSettingsTab from "matrix-react-sdk/src/components/views/settings/tabs/user/AccountUserSettingsTab";
 import { SdkContextClass, SDKContext } from "matrix-react-sdk/src/contexts/SDKContext";
 import SettingsStore from "matrix-react-sdk/src/settings/SettingsStore";
@@ -15,7 +15,7 @@ import {
     mockClientMethodsUser,
     mockPlatformPeg,
 } from "matrix-react-sdk/test/test-utils";
-
+import { useId } from "matrix-react-sdk/src/utils/useId";
 
 jest.mock(
     "matrix-react-sdk/src/components/views/settings/ChangePassword",
@@ -25,6 +25,8 @@ jest.mock(
         },
 );
 
+jest.mock("matrix-react-sdk/src/utils/useId");
+
 describe("<AccountUserSettingsTab />", () => {
     const defaultProps = {
         closeSettingsFn: jest.fn(),
@@ -75,21 +77,20 @@ describe("<AccountUserSettingsTab />", () => {
         jest.spyOn(SettingsStore, "getValue").mockImplementation(
             (settingName: string) => settingName === UIFeature.Deactivate,
         );
+
+        // labelled id on username is autogeneraed, we fix it so that snapshot is always the same
+        mocked(useId).mockImplementation(() => "1234");
     });
 
     afterEach(() => {
         jest.restoreAllMocks();
     });
 
-
     describe("common view snapshot", () => {
-
         it("should render section when account deactivation feature is enabled", () => {
             const { container } = render(getComponent());
 
             expect(container).toMatchSnapshot();
         });
     });
-
-
 });

test/unit-tests/tchap/components/views/settings/TchapRedListSettings-test.tsx

@@ -1,26 +1,22 @@
-import { act, logRoles, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
-import { flushPromises, stubClient } from 'matrix-react-sdk/test/test-utils';
-import { Mocked, mocked } from 'jest-mock';
+import { render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import { flushPromises, stubClient } from "matrix-react-sdk/test/test-utils";
+import { mocked } from "jest-mock";
+import userEvent from "@testing-library/user-event";
 
-import TchapRedListSettings from '~tchap-web/src/tchap/components/views/settings/tabs/user/TchapRedListSettings';
-import { MatrixClient } from 'matrix-js-sdk/src/matrix';
-import TchapUtils from '~tchap-web/src/tchap/util/TchapUtils';
-import userEvent from '@testing-library/user-event';
+import TchapRedListSettings from "~tchap-web/src/tchap/components/views/settings/tabs/user/TchapRedListSettings";
+import TchapUtils from "~tchap-web/src/tchap/util/TchapUtils";
 
 jest.mock("~tchap-web/src/tchap/util/TchapUtils");
 
 describe("TchapRedListSettings", () => {
-    let client: Mocked<MatrixClient>;
-
     const renderComponent = () => render(<TchapRedListSettings />);
 
     beforeEach(() => {
-        client = mocked(stubClient());
+        mocked(stubClient());
     });
 
-
-    it("should red list should be activated when initial value is true", async () => { 
+    it("should red list should be activated when initial value is true", async () => {
         mocked(TchapUtils.getUserRedListInfo).mockResolvedValue(true);
         mocked(TchapUtils.setUserRedListInfo).mockResolvedValue();
 
@@ -30,11 +26,10 @@ describe("TchapRedListSettings", () => {
 
         const switchElm = screen.getByRole("switch");
 
-        expect(switchElm).toHaveAttribute('aria-checked', "true");
-
+        expect(switchElm).toHaveAttribute("aria-checked", "true");
     });
-    
-    it("should red list should be desactivated when initial value is false", async () => { 
+
+    it("should red list should be desactivated when initial value is false", async () => {
         mocked(TchapUtils.getUserRedListInfo).mockResolvedValue(false);
         mocked(TchapUtils.setUserRedListInfo).mockResolvedValue();
 
@@ -44,11 +39,10 @@ describe("TchapRedListSettings", () => {
 
         const switchElm = screen.getByRole("switch");
 
-        expect(switchElm).toHaveAttribute('aria-checked', "false");
+        expect(switchElm).toHaveAttribute("aria-checked", "false");
     });
 
-
-    it("should remove user from red list", async () => { 
+    it("should remove user from red list", async () => {
         // initial value
         mocked(TchapUtils.getUserRedListInfo).mockResolvedValue(true);
         mocked(TchapUtils.setUserRedListInfo).mockResolvedValue();
@@ -59,13 +53,11 @@ describe("TchapRedListSettings", () => {
 
         const switchElm = screen.getByRole("switch");
 
-        act(() => {
-            userEvent.click(switchElm);
-        })
-
+        userEvent.click(switchElm);
+
         waitFor(() => {
-            expect(switchElm).toHaveAttribute('aria-checked', "false");
-        })
+            expect(switchElm).toHaveAttribute("aria-checked", "false");
+        });
     });
 
     it("should put user on red list", async () => {
@@ -79,15 +71,13 @@ describe("TchapRedListSettings", () => {
 
         const switchElm = screen.getByRole("switch");
 
-        act(() => {
-            userEvent.click(switchElm);
-        })
+        userEvent.click(switchElm);
 
         waitFor(() => {
-            expect(switchElm).toHaveAttribute('aria-checked', "true");
-        })
+            expect(switchElm).toHaveAttribute("aria-checked", "true");
+        });
     });
-    
+
     it("should get back to initial value if throws an error", async () => {
         // initial value
         mocked(TchapUtils.getUserRedListInfo).mockResolvedValue(false);
@@ -99,11 +89,10 @@ describe("TchapRedListSettings", () => {
 
         const switchElm = screen.getByRole("switch");
 
-        act(() => {
-            userEvent.click(switchElm);
-        })
+        userEvent.click(switchElm);
+
         waitFor(() => {
-            expect(switchElm).toHaveAttribute('aria-checked', "false");
+            expect(switchElm).toHaveAttribute("aria-checked", "false");
         });
     });
 });

test/unit-tests/tchap/components/views/settings/__snapshots__/AccountUserSettingsTab-test.tsx.snap

@@ -83,12 +83,12 @@ exports[`<AccountUserSettingsTab /> common view snapshot should render section w
             >
               <div
                 class="mx_UserProfileSettings_profile_controls_userId_label"
-                id=":r0.7849031942916656:"
+                id="1234"
               >
                 Username
               </div>
               <div
-                aria-labelledby=":r0.7849031942916656:"
+                aria-labelledby="1234"
                 class="mx_CopyableText mx_CopyableText_border"
               >
                 @alice:server.org