Files
element-web/apps/web/test/viewmodels/menus/UserMenuViewModel-test.ts
Will Hunt d4f419d1b5 Refactor and redesign user menu (#32812)
* Initial quick settings menu

* Total refactor

* Quick design fixes.

* Refactor to use a view model.

* Remove unused strings

* Apply label

* Refactor naming

* Fixup most tests

* Remove specific theming for old user menu

* prettier

* Lots of cleanup

* Allow overriding the menu classes

* update snap

* Oops translations

* tidy

* Cleanup guest flows.

* Copyrights

* Remove unused classname

* Match guest view to designs

* Add guest screenshots

* Update guests

* snapshot

* Cleanup

* fix import

* Update tests

* More sceenshot fixes

* update collapsed

* move statements to prevent flake

* update snap

* Kick it along

* Click the room list

* Fiddle with the room video list.

* More screenshot adjustments

* fix imports

* fix another import

* Update snaps

* update snaps

* Fix snap flakes

* Refactor to move actions to view component, and callbacks to Actions

* Cleanup

* Cleanup

* Cleanup

* invert auth

* More bits

* fix

* Change md buttons to sm

* Try to assemble the snapshot component of the house of cards

* Consistent newlines between tests

* Update snapshot

Not sure why this was like this, this seems consistet for a logged in user

* Update snapshot

again these seem sensible for a guest

* Remove test

I don't really understand why the thing it asserts matters, so I'm removing
it for now.

* Update snapshot

* screenshot

* Don't show profile picture for guests

I'm not really sure what it meant for this interface to have a
property with a default value, so I've removed it and added the
property to the view model.

* Show avatar in story

* update snapshots for showAvatar

* Update screenshots

& hopefully make hover consistent in one

* Use outline home icon

---------

Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2026-05-06 08:34:36 +00:00

184 lines
6.9 KiB
TypeScript

/*
* Copyright 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import { MatrixError, type MatrixClient } from "matrix-js-sdk/src/matrix";
import { waitFor } from "jest-matrix-react";
import type { MockedObject } from "jest-mock";
import { UserMenuViewModel } from "../../../src/viewmodels/menus/UserMenuViewModel";
import { getMockClientWithEventEmitter, mockClientMethodsServer, mockClientMethodsUser } from "../../test-utils";
import { MatrixDispatcher } from "../../../src/dispatcher/dispatcher";
import { SdkContextClass } from "../../../src/contexts/SDKContext";
import SdkConfig from "../../../src/SdkConfig";
import { Action } from "../../../src/dispatcher/actions";
import { UserTab } from "../../../src/components/views/dialogs/UserTab";
import Modal from "../../../src/Modal";
import FeedbackDialog from "../../../src/components/views/dialogs/FeedbackDialog";
describe("UserMenuViewModel", () => {
let dispatcher: MatrixDispatcher;
let client: MockedObject<MatrixClient>;
beforeEach(() => {
dispatcher = new MatrixDispatcher();
client = getMockClientWithEventEmitter({
...mockClientMethodsUser(),
...mockClientMethodsServer(),
getAuthMetadata: jest.fn().mockRejectedValue(new MatrixError({ errcode: "M_UNRECOGNIZED" }, 404)),
});
SdkContextClass.instance.client = client;
});
afterEach(() => {
jest.resetAllMocks();
SdkConfig.reset();
SdkContextClass.instance.onLoggedOut();
SdkContextClass.instance.client = undefined;
});
it("should generate a menu options for a logged in client", () => {
const vm = new UserMenuViewModel(dispatcher, client, true);
vm.setOpen(true);
expect(vm.getSnapshot()).toMatchSnapshot();
});
it("should show a link for account management", async () => {
const vm = new UserMenuViewModel(dispatcher, client, true, "https://example.org/");
vm.setOpen(true);
expect(vm.getSnapshot().manageAccountHref).toEqual("https://example.org/");
});
it("should generate a menu options for a guest", () => {
client.isGuest.mockReturnValue(true);
const vm = new UserMenuViewModel(dispatcher, client, true);
vm.setOpen(true);
expect(vm.getSnapshot()).toMatchSnapshot();
});
it("should generate a menu options that include feedback", () => {
SdkConfig.put({ bug_report_endpoint_url: "https://example.org" });
const vm = new UserMenuViewModel(dispatcher, client, true);
vm.setOpen(true);
expect(vm.getSnapshot().actions.openFeedback).toEqual(true);
});
it("should generate a menu options that includes a home page", () => {
SdkConfig.put({ embedded_pages: { home_url: "https://example.org" } });
const vm = new UserMenuViewModel(dispatcher, client, true);
vm.setOpen(true);
expect(vm.getSnapshot().actions.openHomePage).toEqual(true);
});
it("can toggle menu", () => {
const vm = new UserMenuViewModel(dispatcher, client, true);
vm.setOpen(true);
expect(vm.getSnapshot().open).toEqual(true);
vm.setOpen(false);
expect(vm.getSnapshot().open).toEqual(false);
});
it("can toggle expanded state", () => {
const vm = new UserMenuViewModel(dispatcher, client, true);
vm.setExpanded(true);
expect(vm.getSnapshot().expanded).toEqual(true);
vm.setExpanded(false);
expect(vm.getSnapshot().expanded).toEqual(false);
});
it("can open the home menu", async () => {
SdkConfig.put({ embedded_pages: { home_url: "https://example.org" } });
const vm = new UserMenuViewModel(dispatcher, client, true);
const dispatcherSpy = jest.fn();
dispatcher.register(dispatcherSpy);
vm.setOpen(true);
vm.openHomePage();
await waitFor(() =>
expect(dispatcherSpy).toHaveBeenCalledWith({
action: Action.ViewHomePage,
}),
);
});
it("can open the 'link new device' settings menu", async () => {
const vm = new UserMenuViewModel(dispatcher, client, true);
const dispatcherSpy = jest.fn();
dispatcher.register(dispatcherSpy);
vm.setOpen(true);
vm.linkNewDevice();
await waitFor(() =>
expect(dispatcherSpy).toHaveBeenCalledWith({
action: Action.ViewUserSettings,
initialTabId: UserTab.SessionManager,
props: { showMsc4108QrCode: true },
}),
);
});
it("can open the 'security' settings menu", async () => {
const vm = new UserMenuViewModel(dispatcher, client, true);
const dispatcherSpy = jest.fn();
dispatcher.register(dispatcherSpy);
vm.setOpen(true);
vm.openSecurity();
await waitFor(() =>
expect(dispatcherSpy).toHaveBeenCalledWith({
action: Action.ViewUserSettings,
initialTabId: UserTab.Security,
}),
);
});
it("can open the 'feedback' settings menu", async () => {
jest.spyOn(Modal, "createDialog");
SdkConfig.put({ bug_report_endpoint_url: "https://example.org" });
const vm = new UserMenuViewModel(dispatcher, client, true);
const dispatcherSpy = jest.fn();
dispatcher.register(dispatcherSpy);
vm.setOpen(true);
vm.openFeedback();
expect(Modal.createDialog).toHaveBeenCalledWith(FeedbackDialog);
});
it("can open the settings menu", async () => {
const vm = new UserMenuViewModel(dispatcher, client, true);
const dispatcherSpy = jest.fn();
dispatcher.register(dispatcherSpy);
vm.setOpen(true);
vm.openSettings();
await waitFor(() =>
expect(dispatcherSpy).toHaveBeenCalledWith({
action: Action.ViewUserSettings,
}),
);
});
it("should be able to open the createAccount screen as a guest", async () => {
client.isGuest.mockReturnValue(true);
const dispatcherSpy = jest.fn();
dispatcher.register(dispatcherSpy);
const vm = new UserMenuViewModel(dispatcher, client, true);
vm.setOpen(true);
vm.createAccount();
await waitFor(() =>
expect(dispatcherSpy).toHaveBeenCalledWith({
action: "start_registration",
}),
);
});
it("should be able to open the onSignIn screen as a guest", async () => {
client.isGuest.mockReturnValue(true);
const dispatcherSpy = jest.fn();
dispatcher.register(dispatcherSpy);
const vm = new UserMenuViewModel(dispatcher, client, true);
vm.setOpen(true);
vm.signIn();
await waitFor(() =>
expect(dispatcherSpy).toHaveBeenCalledWith({
action: "start_login",
}),
);
});
});