Rename general user settings to account (#12841)

* 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>
This commit is contained in:
David Baker 2024-08-06 18:05:08 +01:00 committed by GitHub
parent 1be4c12fd2
commit 4e4c5c7768
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 172 additions and 54 deletions

View file

@ -31,7 +31,7 @@ test.describe("OIDC Aware", () => {
await expect(page.getByRole("heading", { name: "Welcome alice", exact: true })).toBeVisible();
// Open settings and navigate to account management
await app.settings.openUserSettings("General");
await app.settings.openUserSettings("Account");
const newPagePromise = context.waitForEvent("page");
await page.getByRole("button", { name: "Manage account" }).click();

View file

@ -44,7 +44,7 @@ test.describe("OIDC Native", () => {
const deviceId = await page.evaluate<string>(() => window.localStorage.mx_device_id);
await app.settings.openUserSettings("General");
await app.settings.openUserSettings("Account");
const newPagePromise = context.waitForEvent("page");
await page.getByRole("button", { name: "Manage account" }).click();
await app.settings.closeDialog();

View file

@ -19,23 +19,23 @@ import { test, expect } from "../../element-web-test";
const USER_NAME = "Bob";
const USER_NAME_NEW = "Alice";
test.describe("General user settings tab", () => {
test.describe("Account user settings tab", () => {
test.use({
displayName: USER_NAME,
config: {
default_country_code: "US", // For checking the international country calling code
},
uut: async ({ app, user }, use) => {
const locator = await app.settings.openUserSettings("General");
const locator = await app.settings.openUserSettings("Account");
await use(locator);
},
});
test("should be rendered properly", async ({ uut, user }) => {
await expect(uut).toMatchScreenshot("general.png");
await expect(uut).toMatchScreenshot("account.png");
// Assert that the top heading is rendered
await expect(uut.getByRole("heading", { name: "General" })).toBeVisible();
await expect(uut.getByRole("heading", { name: "Account", exact: true })).toBeVisible();
const profile = uut.locator(".mx_UserProfileSettings_profile");
await profile.scrollIntoViewIfNeeded();
@ -49,12 +49,11 @@ test.describe("General user settings tab", () => {
await expect(uut.getByTestId("discoverySection").locator(".mx_Spinner")).not.toBeVisible();
const accountSection = uut.getByTestId("accountSection");
accountSection.scrollIntoViewIfNeeded();
// Assert that input areas for changing a password exists
const changePassword = accountSection.locator("form.mx_GeneralUserSettingsTab_section--account_changePassword");
await changePassword.scrollIntoViewIfNeeded();
await expect(changePassword.getByLabel("Current password")).toBeVisible();
await expect(changePassword.getByLabel("New Password")).toBeVisible();
await expect(changePassword.getByLabel("Confirm password")).toBeVisible();
await expect(accountSection.getByLabel("Current password")).toBeVisible();
await expect(accountSection.getByLabel("New Password")).toBeVisible();
await expect(accountSection.getByLabel("Confirm password")).toBeVisible();
// Check email addresses area
const emailAddresses = uut.getByTestId("mx_AccountEmailAddresses");
@ -82,13 +81,13 @@ test.describe("General user settings tab", () => {
test("should respond to small screen sizes", async ({ page, uut }) => {
await page.setViewportSize({ width: 700, height: 600 });
await expect(uut).toMatchScreenshot("general-smallscreen.png");
await expect(uut).toMatchScreenshot("account-smallscreen.png");
});
test("should show tooltips on narrow screen", async ({ page, uut }) => {
await page.setViewportSize({ width: 700, height: 600 });
await page.getByRole("tab", { name: "General" }).hover();
await expect(page.getByRole("tooltip")).toHaveText("General");
await page.getByRole("tab", { name: "Account" }).hover();
await expect(page.getByRole("tooltip")).toHaveText("Account");
});
test("should support adding and removing a profile picture", async ({ uut, page }) => {

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

View file

@ -32,7 +32,7 @@ import HelpIcon from "@vector-im/compound-design-tokens/assets/web/icons/help";
import TabbedView, { Tab, useActiveTabWithDefault } from "../../structures/TabbedView";
import { _t, _td } from "../../../languageHandler";
import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
import AccountUserSettingsTab from "../settings/tabs/user/AccountUserSettingsTab";
import SettingsStore from "../../../settings/SettingsStore";
import LabsUserSettingsTab, { showLabsFlags } from "../settings/tabs/user/LabsUserSettingsTab";
import AppearanceUserSettingsTab from "../settings/tabs/user/AppearanceUserSettingsTab";
@ -65,8 +65,8 @@ function titleForTabID(tabId: UserTab): React.ReactNode {
strong: (sub: string) => <span className="mx_UserSettingsDialog_title_strong">{sub}</span>,
};
switch (tabId) {
case UserTab.General:
return _t("settings|general|dialog_title", undefined, subs);
case UserTab.Account:
return _t("settings|account|dialog_title", undefined, subs);
case UserTab.SessionManager:
return _t("settings|sessions|dialog_title", undefined, subs);
case UserTab.Appearance:
@ -103,10 +103,10 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
tabs.push(
new Tab(
UserTab.General,
_td("common|general"),
UserTab.Account,
_td("settings|account|title"),
<UserProfileIcon />,
<GeneralUserSettingsTab closeSettingsFn={props.onFinished} />,
<AccountUserSettingsTab closeSettingsFn={props.onFinished} />,
"UserSettingsGeneral",
),
);
@ -216,7 +216,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
return tabs as NonEmptyArray<Tab<UserTab>>;
};
const [activeTabId, _setActiveTabId] = useActiveTabWithDefault(getTabs(), UserTab.General, props.initialTabId);
const [activeTabId, _setActiveTabId] = useActiveTabWithDefault(getTabs(), UserTab.Account, props.initialTabId);
const setActiveTabId = (tabId: UserTab): void => {
_setActiveTabId(tabId);
// Clear this so switching away from the tab and back to it will not show the QR code again

View file

@ -15,7 +15,7 @@ limitations under the License.
*/
export enum UserTab {
General = "USER_GENERAL_TAB",
Account = "USER_ACCOUNT_TAB",
Appearance = "USER_APPEARANCE_TAB",
Notifications = "USER_NOTIFICATIONS_TAB",
Preferences = "USER_PREFERENCES_TAB",

View file

@ -37,7 +37,7 @@ function generalTabButton(content: string): JSX.Element {
onClick={() => {
dispatcher.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.General,
initialTabId: UserTab.Account,
});
}}
>

View file

@ -62,7 +62,6 @@ const AccountSection: React.FC<AccountSectionProps> = ({
>
<SettingsSubsectionText>{_t("settings|general|password_change_section")}</SettingsSubsectionText>
<ChangePassword
className="mx_GeneralUserSettingsTab_section--account_changePassword"
rowClassName=""
buttonKind="primary"
onError={onPasswordChangeError}
@ -93,7 +92,7 @@ const ManagementSection: React.FC<ManagementSectionProps> = ({ onDeactivateClick
);
};
const GeneralUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
const AccountUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
const [externalAccountManagementUrl, setExternalAccountManagementUrl] = React.useState<string | undefined>();
const [canMake3pidChanges, setCanMake3pidChanges] = React.useState<boolean>(false);
const [canSetDisplayName, setCanSetDisplayName] = React.useState<boolean>(false);
@ -189,7 +188,7 @@ const GeneralUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
}
return (
<SettingsTab data-testid="mx_GeneralUserSettingsTab">
<SettingsTab data-testid="mx_AccountUserSettingsTab">
<SettingsSection>
<UserProfileSettings
externalAccountManagementUrl={externalAccountManagementUrl}
@ -208,4 +207,4 @@ const GeneralUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
);
};
export default GeneralUserSettingsTab;
export default AccountUserSettingsTab;

View file

@ -127,7 +127,7 @@ const tasks: UserOnboardingTask[] = [
PosthogTrackers.trackInteraction("WebUserOnboardingTaskSetupProfile", ev);
defaultDispatcher.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.General,
initialTabId: UserTab.Account,
});
},
},

View file

@ -2422,6 +2422,10 @@
}
},
"settings": {
"account": {
"dialog_title": "<strong>Settings:</strong> Account",
"title": "Account"
},
"all_rooms_home": "Show all rooms in Home",
"all_rooms_home_description": "All rooms you're in will appear in Home.",
"always_show_message_timestamps": "Always show message timestamps",
@ -2497,7 +2501,6 @@
"deactivate_confirm_erase_label": "Hide my messages from new joiners",
"deactivate_section": "Deactivate Account",
"deactivate_warning": "Deactivating your account is a permanent action — be careful!",
"dialog_title": "<strong>Settings:</strong> General",
"discovery_email_empty": "Discovery options will appear once you have added an email.",
"discovery_email_verification_instructions": "Verify the link in your inbox",
"discovery_msisdn_empty": "Discovery options will appear once you have added a phone number.",

View file

@ -98,7 +98,7 @@ describe("<UserSettingsDialog />", () => {
it("should render general settings tab when no initialTabId", () => {
const { container } = render(getComponent());
expect(getActiveTabLabel(container)).toEqual("General");
expect(getActiveTabLabel(container)).toEqual("Account");
});
it("should render initial tab when initialTabId is set", () => {
@ -111,7 +111,7 @@ describe("<UserSettingsDialog />", () => {
// mjolnir tab is only rendered in some configs
const { container } = render(getComponent({ initialTabId: UserTab.Mjolnir }));
expect(getActiveTabLabel(container)).toEqual("General");
expect(getActiveTabLabel(container)).toEqual("Account");
});
it("renders tabs correctly", () => {

View file

@ -3,10 +3,10 @@
exports[`<UserSettingsDialog /> renders tabs correctly 1`] = `
NodeList [
<li
aria-controls="mx_tabpanel_USER_GENERAL_TAB"
aria-controls="mx_tabpanel_USER_ACCOUNT_TAB"
aria-selected="true"
class="mx_AccessibleButton mx_TabbedView_tabLabel mx_TabbedView_tabLabel_active"
data-testid="settings-tab-USER_GENERAL_TAB"
data-testid="settings-tab-USER_ACCOUNT_TAB"
role="tab"
tabindex="0"
>
@ -29,9 +29,9 @@ NodeList [
</svg>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_GENERAL_TAB_label"
id="mx_tabpanel_USER_ACCOUNT_TAB_label"
>
General
Account
</span>
</li>,
<li

View file

@ -13,10 +13,12 @@ limitations under the License.
import { fireEvent, render, screen, within } from "@testing-library/react";
import React from "react";
import { ThreepidMedium } from "matrix-js-sdk/src/matrix";
import { MatrixClient, ThreepidMedium } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import userEvent from "@testing-library/user-event";
import { MockedObject } from "jest-mock";
import GeneralUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/GeneralUserSettingsTab";
import AccountUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/AccountUserSettingsTab";
import { SdkContextClass, SDKContext } from "../../../../../../src/contexts/SDKContext";
import SettingsStore from "../../../../../../src/settings/SettingsStore";
import {
@ -29,28 +31,35 @@ import {
import { UIFeature } from "../../../../../../src/settings/UIFeature";
import { OidcClientStore } from "../../../../../../src/stores/oidc/OidcClientStore";
import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
import Modal from "../../../../../../src/Modal";
describe("<GeneralUserSettingsTab />", () => {
let changePasswordOnError: (e: Error) => void;
let changePasswordOnFinished: () => void;
jest.mock(
"../../../../../../src/components/views/settings/ChangePassword",
() =>
({ onError, onFinished }: { onError: (e: Error) => void; onFinished: () => void }) => {
changePasswordOnError = onError;
changePasswordOnFinished = onFinished;
return <button>Mock change password</button>;
},
);
describe("<AccountUserSettingsTab />", () => {
const defaultProps = {
closeSettingsFn: jest.fn(),
};
const userId = "@alice:server.org";
const mockClient = getMockClientWithEventEmitter({
...mockClientMethodsUser(userId),
...mockClientMethodsServer(),
getCapabilities: jest.fn(),
getThreePids: jest.fn(),
getIdentityServerUrl: jest.fn(),
deleteThreePid: jest.fn(),
});
let mockClient: MockedObject<MatrixClient>;
let stores: SdkContextClass;
const getComponent = () => (
<MatrixClientContext.Provider value={mockClient}>
<SDKContext.Provider value={stores}>
<GeneralUserSettingsTab {...defaultProps} />
<AccountUserSettingsTab {...defaultProps} />
</SDKContext.Provider>
</MatrixClientContext.Provider>
);
@ -62,6 +71,15 @@ describe("<GeneralUserSettingsTab />", () => {
jest.spyOn(SettingsStore, "getValue").mockRestore();
jest.spyOn(logger, "error").mockRestore();
mockClient = getMockClientWithEventEmitter({
...mockClientMethodsUser(userId),
...mockClientMethodsServer(),
getCapabilities: jest.fn(),
getThreePids: jest.fn(),
getIdentityServerUrl: jest.fn(),
deleteThreePid: jest.fn(),
});
mockClient.getCapabilities.mockResolvedValue({});
mockClient.getThreePids.mockResolvedValue({
threepids: [],
@ -77,6 +95,10 @@ describe("<GeneralUserSettingsTab />", () => {
jest.spyOn(stores, "oidcClientStore", "get").mockReturnValue(mockOidcClientStore);
});
afterEach(() => {
jest.restoreAllMocks();
});
it("does not show account management link when not available", () => {
const { queryByTestId } = render(getComponent());
@ -131,6 +153,52 @@ describe("<GeneralUserSettingsTab />", () => {
expect(screen.getByText("Deactivate Account", { selector: "h2" }).parentElement!).toMatchSnapshot();
});
it("should display the deactivate account dialog when clicked", async () => {
jest.spyOn(SettingsStore, "getValue").mockImplementation(
(settingName) => settingName === UIFeature.Deactivate,
);
const createDialogFn = jest.fn();
jest.spyOn(Modal, "createDialog").mockImplementation(createDialogFn);
render(getComponent());
await userEvent.click(screen.getByRole("button", { name: "Deactivate Account" }));
expect(createDialogFn).toHaveBeenCalled();
});
it("should close settings if account deactivated", async () => {
jest.spyOn(SettingsStore, "getValue").mockImplementation(
(settingName) => settingName === UIFeature.Deactivate,
);
const createDialogFn = jest.fn();
jest.spyOn(Modal, "createDialog").mockImplementation(createDialogFn);
render(getComponent());
await userEvent.click(screen.getByRole("button", { name: "Deactivate Account" }));
createDialogFn.mock.calls[0][1].onFinished(true);
expect(defaultProps.closeSettingsFn).toHaveBeenCalled();
});
it("should not close settings if account not deactivated", async () => {
jest.spyOn(SettingsStore, "getValue").mockImplementation(
(settingName) => settingName === UIFeature.Deactivate,
);
const createDialogFn = jest.fn();
jest.spyOn(Modal, "createDialog").mockImplementation(createDialogFn);
render(getComponent());
await userEvent.click(screen.getByRole("button", { name: "Deactivate Account" }));
createDialogFn.mock.calls[0][1].onFinished(false);
expect(defaultProps.closeSettingsFn).not.toHaveBeenCalled();
});
});
describe("3pids", () => {
@ -302,4 +370,53 @@ describe("<GeneralUserSettingsTab />", () => {
});
});
});
describe("Password change", () => {
beforeEach(() => {
mockClient.getCapabilities.mockResolvedValue({
"m.change_password": {
enabled: true,
},
});
});
it("should display a dialog if password change succeeded", async () => {
const createDialogFn = jest.fn();
jest.spyOn(Modal, "createDialog").mockImplementation(createDialogFn);
render(getComponent());
const changeButton = await screen.findByRole("button", { name: "Mock change password" });
userEvent.click(changeButton);
expect(changePasswordOnFinished).toBeDefined();
changePasswordOnFinished();
expect(createDialogFn).toHaveBeenCalledWith(expect.anything(), {
title: "Success",
description: "Your password was successfully changed.",
});
});
it("should display an error if password change failed", async () => {
const ERROR_STRING =
"Your password must contain exactly 5 lowercase letters, a box drawing character and the badger emoji.";
const createDialogFn = jest.fn();
jest.spyOn(Modal, "createDialog").mockImplementation(createDialogFn);
render(getComponent());
const changeButton = await screen.findByRole("button", { name: "Mock change password" });
userEvent.click(changeButton);
expect(changePasswordOnError).toBeDefined();
changePasswordOnError(new Error(ERROR_STRING));
expect(createDialogFn).toHaveBeenCalledWith(expect.anything(), {
title: "Error changing password",
description: ERROR_STRING,
});
});
});
});

View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<GeneralUserSettingsTab /> 3pids should display 3pid email addresses and phone numbers 1`] = `
exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses and phone numbers 1`] = `
<div
class="mx_SettingsSubsection"
data-testid="mx_AccountEmailAddresses"
@ -42,14 +42,14 @@ exports[`<GeneralUserSettingsTab /> 3pids should display 3pid email addresses an
>
<input
autocomplete="email"
id="mx_Field_27"
id="mx_Field_9"
label="Email Address"
placeholder="Email Address"
type="text"
value=""
/>
<label
for="mx_Field_27"
for="mx_Field_9"
>
Email Address
</label>
@ -66,7 +66,7 @@ exports[`<GeneralUserSettingsTab /> 3pids should display 3pid email addresses an
</div>
`;
exports[`<GeneralUserSettingsTab /> 3pids should display 3pid email addresses and phone numbers 2`] = `
exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses and phone numbers 2`] = `
<div
class="mx_SettingsSubsection"
data-testid="mx_AccountPhoneNumbers"
@ -150,14 +150,14 @@ exports[`<GeneralUserSettingsTab /> 3pids should display 3pid email addresses an
</span>
<input
autocomplete="tel-national"
id="mx_Field_28"
id="mx_Field_10"
label="Phone Number"
placeholder="Phone Number"
type="text"
value=""
/>
<label
for="mx_Field_28"
for="mx_Field_10"
>
Phone Number
</label>
@ -175,7 +175,7 @@ exports[`<GeneralUserSettingsTab /> 3pids should display 3pid email addresses an
</div>
`;
exports[`<GeneralUserSettingsTab /> deactive account should render section when account deactivation feature is enabled 1`] = `
exports[`<AccountUserSettingsTab /> deactive account should render section when account deactivation feature is enabled 1`] = `
<div
class="mx_SettingsSection"
>