Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Rename general user settings to account (#12841)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
dbkr and robintown authored Aug 6, 2024
1 parent 1be4c12 commit 4e4c5c7
Show file tree
Hide file tree
Showing 20 changed files with 173 additions and 55 deletions.
2 changes: 1 addition & 1 deletion playwright/e2e/oidc/oidc-aware.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
2 changes: 1 addition & 1 deletion playwright/e2e/oidc/oidc-native.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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");
Expand Down Expand Up @@ -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 }) => {
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions src/components/views/dialogs/UserSettingsDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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",
),
);
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/dialogs/UserTab.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function generalTabButton(content: string): JSX.Element {
onClick={() => {
dispatcher.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.General,
initialTabId: UserTab.Account,
});
}}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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}
Expand All @@ -208,4 +207,4 @@ const GeneralUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
);
};

export default GeneralUserSettingsTab;
export default AccountUserSettingsTab;
2 changes: 1 addition & 1 deletion src/hooks/useUserOnboardingTasks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ const tasks: UserOnboardingTask[] = [
PosthogTrackers.trackInteraction("WebUserOnboardingTaskSetupProfile", ev);
defaultDispatcher.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.General,
initialTabId: UserTab.Account,
});
},
},
Expand Down
5 changes: 4 additions & 1 deletion src/i18n/strings/en_EN.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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.",
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/dialogs/UserSettingsDialog-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand All @@ -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", () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -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
Expand Down
Loading

0 comments on commit 4e4c5c7

Please sign in to comment.