mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-25 01:48:43 +08:00
4e4c5c7768
* Rename general user settings to account Everything 'general' is now elsewhere, so this is ready for its new name. * Update snapshots * Rename & update playwright test * Rename class & remove unused CSS class * Change test ID * rethemendex * More tests!! * snapshots * Put the screenshots back in the new place * Fix tests with restoreAllMocks * More screenshot renaming * More test fixes & screenshot updates * More test fixes * un-skip * Typo Co-authored-by: Robin <robin@robin.town> --------- Co-authored-by: Robin <robin@robin.town>
268 lines
11 KiB
TypeScript
268 lines
11 KiB
TypeScript
/*
|
|
Copyright 2022 The Matrix.org Foundation C.I.C.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
import React, { ReactElement } from "react";
|
|
import { render, screen } from "@testing-library/react";
|
|
import { mocked, MockedObject } from "jest-mock";
|
|
import { MatrixClient } from "matrix-js-sdk/src/matrix";
|
|
|
|
import SettingsStore, { CallbackFn } from "../../../../src/settings/SettingsStore";
|
|
import SdkConfig from "../../../../src/SdkConfig";
|
|
import { UserTab } from "../../../../src/components/views/dialogs/UserTab";
|
|
import UserSettingsDialog from "../../../../src/components/views/dialogs/UserSettingsDialog";
|
|
import {
|
|
getMockClientWithEventEmitter,
|
|
mockClientMethodsUser,
|
|
mockClientMethodsServer,
|
|
mockPlatformPeg,
|
|
mockClientMethodsCrypto,
|
|
mockClientMethodsRooms,
|
|
useMockMediaDevices,
|
|
} from "../../../test-utils";
|
|
import { UIFeature } from "../../../../src/settings/UIFeature";
|
|
import { SettingLevel } from "../../../../src/settings/SettingLevel";
|
|
import { SdkContextClass } from "../../../../src/contexts/SDKContext";
|
|
|
|
mockPlatformPeg({
|
|
supportsSpellCheckSettings: jest.fn().mockReturnValue(false),
|
|
getAppVersion: jest.fn().mockResolvedValue("1"),
|
|
});
|
|
|
|
jest.mock("../../../../src/settings/SettingsStore", () => ({
|
|
getValue: jest.fn(),
|
|
getValueAt: jest.fn(),
|
|
canSetValue: jest.fn(),
|
|
monitorSetting: jest.fn(),
|
|
watchSetting: jest.fn(),
|
|
unwatchSetting: jest.fn(),
|
|
getFeatureSettingNames: jest.fn(),
|
|
getBetaInfo: jest.fn(),
|
|
getDisplayName: jest.fn(),
|
|
getDescription: jest.fn(),
|
|
shouldHaveWarning: jest.fn(),
|
|
disabledMessage: jest.fn(),
|
|
settingIsOveriddenAtConfigLevel: jest.fn(),
|
|
}));
|
|
|
|
jest.mock("../../../../src/SdkConfig", () => ({
|
|
get: jest.fn(),
|
|
}));
|
|
|
|
describe("<UserSettingsDialog />", () => {
|
|
const userId = "@alice:server.org";
|
|
const mockSettingsStore = mocked(SettingsStore);
|
|
const mockSdkConfig = mocked(SdkConfig);
|
|
let mockClient!: MockedObject<MatrixClient>;
|
|
|
|
let sdkContext: SdkContextClass;
|
|
const defaultProps = { onFinished: jest.fn() };
|
|
const getComponent = (props: Partial<typeof defaultProps & { initialTabId?: UserTab }> = {}): ReactElement => (
|
|
<UserSettingsDialog sdkContext={sdkContext} {...defaultProps} {...props} />
|
|
);
|
|
|
|
beforeEach(() => {
|
|
jest.clearAllMocks();
|
|
mockClient = getMockClientWithEventEmitter({
|
|
...mockClientMethodsUser(userId),
|
|
...mockClientMethodsServer(),
|
|
...mockClientMethodsCrypto(),
|
|
...mockClientMethodsRooms(),
|
|
getIgnoredUsers: jest.fn().mockResolvedValue([]),
|
|
getPushers: jest.fn().mockResolvedValue([]),
|
|
getProfileInfo: jest.fn().mockResolvedValue({}),
|
|
});
|
|
sdkContext = new SdkContextClass();
|
|
sdkContext.client = mockClient;
|
|
mockSettingsStore.getValue.mockReturnValue(false);
|
|
mockSettingsStore.getValueAt.mockReturnValue(false);
|
|
mockSettingsStore.getFeatureSettingNames.mockReturnValue([]);
|
|
mockSdkConfig.get.mockReturnValue({ brand: "Test" });
|
|
});
|
|
|
|
const getActiveTabLabel = (container: Element) =>
|
|
container.querySelector(".mx_TabbedView_tabLabel_active")?.textContent;
|
|
|
|
it("should render general settings tab when no initialTabId", () => {
|
|
const { container } = render(getComponent());
|
|
|
|
expect(getActiveTabLabel(container)).toEqual("Account");
|
|
});
|
|
|
|
it("should render initial tab when initialTabId is set", () => {
|
|
const { container } = render(getComponent({ initialTabId: UserTab.Help }));
|
|
|
|
expect(getActiveTabLabel(container)).toEqual("Help & About");
|
|
});
|
|
|
|
it("should render general tab if initialTabId tab cannot be rendered", () => {
|
|
// mjolnir tab is only rendered in some configs
|
|
const { container } = render(getComponent({ initialTabId: UserTab.Mjolnir }));
|
|
|
|
expect(getActiveTabLabel(container)).toEqual("Account");
|
|
});
|
|
|
|
it("renders tabs correctly", () => {
|
|
const { container } = render(getComponent());
|
|
expect(container.querySelectorAll(".mx_TabbedView_tabLabel")).toMatchSnapshot();
|
|
});
|
|
|
|
it("renders ignored users tab when feature_mjolnir is enabled", () => {
|
|
mockSettingsStore.getValue.mockImplementation((settingName): any => settingName === "feature_mjolnir");
|
|
const { getByTestId } = render(getComponent());
|
|
expect(getByTestId(`settings-tab-${UserTab.Mjolnir}`)).toBeTruthy();
|
|
});
|
|
|
|
it("renders voip tab when voip is enabled", () => {
|
|
mockSettingsStore.getValue.mockImplementation((settingName): any => settingName === UIFeature.Voip);
|
|
const { getByTestId } = render(getComponent());
|
|
expect(getByTestId(`settings-tab-${UserTab.Voice}`)).toBeTruthy();
|
|
});
|
|
|
|
it("renders with session manager tab selected", () => {
|
|
const { getByTestId } = render(getComponent({ initialTabId: UserTab.SessionManager }));
|
|
expect(getByTestId(`settings-tab-${UserTab.SessionManager}`)).toBeTruthy();
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Settings: Sessions");
|
|
});
|
|
|
|
it("renders with appearance tab selected", () => {
|
|
const { container } = render(getComponent({ initialTabId: UserTab.Appearance }));
|
|
|
|
expect(getActiveTabLabel(container)).toEqual("Appearance");
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Settings: Appearance");
|
|
});
|
|
|
|
it("renders with notifications tab selected", () => {
|
|
const { container } = render(getComponent({ initialTabId: UserTab.Notifications }));
|
|
|
|
expect(getActiveTabLabel(container)).toEqual("Notifications");
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Settings: Notifications");
|
|
});
|
|
|
|
it("renders with preferences tab selected", () => {
|
|
const { container } = render(getComponent({ initialTabId: UserTab.Preferences }));
|
|
|
|
expect(getActiveTabLabel(container)).toEqual("Preferences");
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Settings: Preferences");
|
|
});
|
|
|
|
it("renders with keyboard tab selected", () => {
|
|
const { container } = render(getComponent({ initialTabId: UserTab.Keyboard }));
|
|
|
|
expect(getActiveTabLabel(container)).toEqual("Keyboard");
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Settings: Keyboard");
|
|
});
|
|
|
|
it("renders with sidebar tab selected", () => {
|
|
const { container } = render(getComponent({ initialTabId: UserTab.Sidebar }));
|
|
|
|
expect(getActiveTabLabel(container)).toEqual("Sidebar");
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Settings: Sidebar");
|
|
});
|
|
|
|
it("renders with voip tab selected", () => {
|
|
useMockMediaDevices();
|
|
mockSettingsStore.getValue.mockImplementation((settingName): any => settingName === UIFeature.Voip);
|
|
const { container } = render(getComponent({ initialTabId: UserTab.Voice }));
|
|
|
|
expect(getActiveTabLabel(container)).toEqual("Voice & Video");
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Settings: Voice & Video");
|
|
});
|
|
|
|
it("renders with secutity tab selected", () => {
|
|
const { container } = render(getComponent({ initialTabId: UserTab.Security }));
|
|
|
|
expect(getActiveTabLabel(container)).toEqual("Security & Privacy");
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Settings: Security & Privacy");
|
|
});
|
|
|
|
it("renders with labs tab selected", () => {
|
|
// @ts-ignore I give up trying to get the types right here
|
|
// why do we have functions that return different things depending on what they're passed?
|
|
mockSdkConfig.get.mockImplementation((x) => {
|
|
const mockConfig = { show_labs_settings: true, brand: "Test" };
|
|
switch (x) {
|
|
case "show_labs_settings":
|
|
case "brand":
|
|
// @ts-ignore
|
|
return mockConfig[x];
|
|
default:
|
|
return mockConfig;
|
|
}
|
|
});
|
|
const { container } = render(getComponent({ initialTabId: UserTab.Labs }));
|
|
|
|
expect(getActiveTabLabel(container)).toEqual("Labs");
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Settings: Labs");
|
|
});
|
|
|
|
it("renders with mjolnir tab selected", () => {
|
|
mockSettingsStore.getValue.mockImplementation((settingName): any => settingName === "feature_mjolnir");
|
|
const { container } = render(getComponent({ initialTabId: UserTab.Mjolnir }));
|
|
expect(getActiveTabLabel(container)).toEqual("Ignored users");
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Ignored Users");
|
|
});
|
|
|
|
it("renders with help tab selected", () => {
|
|
const { container } = render(getComponent({ initialTabId: UserTab.Help }));
|
|
|
|
expect(getActiveTabLabel(container)).toEqual("Help & About");
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Settings: Help & About");
|
|
});
|
|
|
|
it("renders labs tab when show_labs_settings is enabled in config", () => {
|
|
// @ts-ignore simplified test stub
|
|
mockSdkConfig.get.mockImplementation((configName) => configName === "show_labs_settings");
|
|
const { getByTestId } = render(getComponent());
|
|
expect(getByTestId(`settings-tab-${UserTab.Labs}`)).toBeTruthy();
|
|
});
|
|
|
|
it("renders labs tab when some feature is in beta", () => {
|
|
mockSettingsStore.getFeatureSettingNames.mockReturnValue(["feature_beta_setting", "feature_just_normal_labs"]);
|
|
mockSettingsStore.getBetaInfo.mockImplementation((settingName) =>
|
|
settingName === "feature_beta_setting" ? ({} as any) : undefined,
|
|
);
|
|
const { getByTestId } = render(getComponent());
|
|
expect(getByTestId(`settings-tab-${UserTab.Labs}`)).toBeTruthy();
|
|
});
|
|
|
|
it("watches settings", () => {
|
|
const watchSettingCallbacks: Record<string, CallbackFn> = {};
|
|
|
|
mockSettingsStore.watchSetting.mockImplementation((settingName, roomId, callback) => {
|
|
watchSettingCallbacks[settingName] = callback;
|
|
return `mock-watcher-id-${settingName}`;
|
|
});
|
|
mockSettingsStore.getValue.mockReturnValue(false);
|
|
|
|
const { queryByTestId, unmount } = render(getComponent());
|
|
expect(queryByTestId(`settings-tab-${UserTab.Mjolnir}`)).toBeFalsy();
|
|
|
|
expect(mockSettingsStore.watchSetting).toHaveBeenCalledWith("feature_mjolnir", null, expect.anything());
|
|
|
|
// call the watch setting callback
|
|
mockSettingsStore.getValue.mockReturnValue(true);
|
|
watchSettingCallbacks["feature_mjolnir"]("feature_mjolnir", "", SettingLevel.ACCOUNT, true, true);
|
|
|
|
// tab is rendered now
|
|
expect(queryByTestId(`settings-tab-${UserTab.Mjolnir}`)).toBeTruthy();
|
|
|
|
unmount();
|
|
|
|
// unwatches settings on unmount
|
|
expect(mockSettingsStore.unwatchSetting).toHaveBeenCalledWith("mock-watcher-id-feature_mjolnir");
|
|
});
|
|
});
|