From b0f900b385b8a6dbafe185b9d51a9d1a68395ed1 Mon Sep 17 00:00:00 2001 From: "marc.sirisak" Date: Thu, 24 Oct 2024 15:06:10 +0200 Subject: [PATCH] fix: lint and test on accountusersetting and redlist test --- .../tabs/user/TchapRedListSettings.tsx | 22 ++++--- .../settings/AccountUserSettingsTab-test.tsx | 13 ++-- .../settings/TchapRedListSettings-test.tsx | 61 ++++++++----------- .../AccountUserSettingsTab-test.tsx.snap | 26 ++++---- 4 files changed, 60 insertions(+), 62 deletions(-) diff --git a/src/tchap/components/views/settings/tabs/user/TchapRedListSettings.tsx b/src/tchap/components/views/settings/tabs/user/TchapRedListSettings.tsx index 12373ec857..92fe4219a8 100644 --- a/src/tchap/components/views/settings/tabs/user/TchapRedListSettings.tsx +++ b/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 = () => { return - _onRedlistOptionChange(checked)} - label={_t('settings|general|redlist_title')} - disabled={loading} +
+ + _onRedlistOptionChange(checked)} + disabled={loading} + title={_t('settings|general|redlist_title')} /> -

- ({_t("settings|general|redlist_description")}) -

+
} diff --git a/test/unit-tests/tchap/components/views/settings/AccountUserSettingsTab-test.tsx b/test/unit-tests/tchap/components/views/settings/AccountUserSettingsTab-test.tsx index 62c46737aa..f1b910d529 100644 --- a/test/unit-tests/tchap/components/views/settings/AccountUserSettingsTab-test.tsx +++ b/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("", () => { const defaultProps = { closeSettingsFn: jest.fn(), @@ -75,21 +77,20 @@ describe("", () => { 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(); }); }); - - }); diff --git a/test/unit-tests/tchap/components/views/settings/TchapRedListSettings-test.tsx b/test/unit-tests/tchap/components/views/settings/TchapRedListSettings-test.tsx index b6eabafb06..58da840073 100644 --- a/test/unit-tests/tchap/components/views/settings/TchapRedListSettings-test.tsx +++ b/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; - const renderComponent = () => render(); 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"); }); }); }); diff --git a/test/unit-tests/tchap/components/views/settings/__snapshots__/AccountUserSettingsTab-test.tsx.snap b/test/unit-tests/tchap/components/views/settings/__snapshots__/AccountUserSettingsTab-test.tsx.snap index abc2b85199..b17f92203d 100644 --- a/test/unit-tests/tchap/components/views/settings/__snapshots__/AccountUserSettingsTab-test.tsx.snap +++ b/test/unit-tests/tchap/components/views/settings/__snapshots__/AccountUserSettingsTab-test.tsx.snap @@ -83,12 +83,12 @@ exports[` common view snapshot should render section w >
Username
@alice:server.org @@ -136,20 +136,27 @@ exports[` common view snapshot should render section w
- + + settings +
settings
- +
@@ -158,13 +165,6 @@ exports[` common view snapshot should render section w />
-

- ( - settings - ) -