Update UserMenu theme toggle to use IconButton (#32591)

* Update UserMenu theme toggle to use IconButton

This lets it use the correct compound colour based on theme

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2026-02-20 14:08:22 +00:00
committed by GitHub
parent c2ed88fbf0
commit fd4695f3d5
10 changed files with 112 additions and 83 deletions
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render, screen, waitFor } from "jest-matrix-react";
import { fireEvent, render, screen, waitFor } from "jest-matrix-react";
import { DEVICE_CODE_SCOPE, type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
import { type CryptoApi } from "matrix-js-sdk/src/crypto-api";
import { mocked } from "jest-mock";
@@ -22,6 +22,7 @@ import Modal from "../../../../src/Modal";
import { mockOpenIdConfiguration } from "../../../test-utils/oidc";
import { Action } from "../../../../src/dispatcher/actions";
import { UserTab } from "../../../../src/components/views/dialogs/UserTab";
import SettingsStore from "../../../../src/settings/SettingsStore.ts";
describe("<UserMenu>", () => {
let client: MatrixClient;
@@ -151,4 +152,26 @@ describe("<UserMenu>", () => {
});
});
});
it("should toggle theme on switcher click", async () => {
sdkContext.client = stubClient();
const spy = jest.spyOn(SettingsStore, "setValue");
const UserMenu = wrapInSdkContext(UnwrappedUserMenu, sdkContext);
render(<UserMenu isPanelCollapsed={true} />);
screen.getByRole("button", { name: /User menu/i }).click();
const themeSwitchButton = await screen.findByRole("button", { name: "Switch to dark mode" });
expect(themeSwitchButton).toBeInTheDocument();
expect(spy).not.toHaveBeenCalled();
fireEvent.click(themeSwitchButton);
expect(spy).toHaveBeenCalledWith("use_system_theme", null, "device", false);
expect(spy).toHaveBeenCalledWith("theme", null, "device", "dark");
fireEvent.click(themeSwitchButton);
expect(spy).toHaveBeenCalledWith("use_system_theme", null, "device", false);
expect(spy).toHaveBeenCalledWith("theme", null, "device", "light");
});
});