mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-21 01:12:09 +03:00
91e84f7951
* Upgrade to latest compound-web package * Use a custom render function for jest tests This way we don't need to manually wrap our components with <TooltipProvider> * Pin wrap-ansi to fix broken yarn install * Add playwright helper to find tooltip from element and use it in the failing test * Exclude floating-ui divs/spans from axe testing This is rendered outside .MatrixChat by compound and contains all the tooltips. * Wrap outermost components with TooltipProvider * Remove onChange and use onSelect for toggle * Fix jest tests and update snapshots * Use vector-im/matrix-wysiwig --------- Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
89 lines
3.5 KiB
TypeScript
89 lines
3.5 KiB
TypeScript
/*
|
|
* Copyright 2024 New Vector Ltd.
|
|
* Copyright 2024 The Matrix.org Foundation C.I.C.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
|
* Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import React from "react";
|
|
import { act, render, screen, waitFor } from "jest-matrix-react";
|
|
import { mocked } from "jest-mock";
|
|
|
|
import { LayoutSwitcher } from "../../../../src/components/views/settings/LayoutSwitcher";
|
|
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
|
|
import { stubClient } from "../../../test-utils";
|
|
import SettingsStore from "../../../../src/settings/SettingsStore";
|
|
import { SettingLevel } from "../../../../src/settings/SettingLevel";
|
|
import { Layout } from "../../../../src/settings/enums/Layout";
|
|
|
|
describe("<LayoutSwitcher />", () => {
|
|
const matrixClient = stubClient();
|
|
const profileInfo = {
|
|
displayname: "Alice",
|
|
};
|
|
|
|
async function renderLayoutSwitcher() {
|
|
const renderResult = render(
|
|
<MatrixClientContext.Provider value={matrixClient}>
|
|
<LayoutSwitcher />
|
|
</MatrixClientContext.Provider>,
|
|
);
|
|
|
|
// Wait for the profile info to be displayed in the event tile preview
|
|
// Also avoid act warning
|
|
await waitFor(() => expect(screen.getAllByText(profileInfo.displayname).length).toBe(3));
|
|
return renderResult;
|
|
}
|
|
|
|
beforeEach(async () => {
|
|
await SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);
|
|
mocked(matrixClient).getProfileInfo.mockResolvedValue(profileInfo);
|
|
});
|
|
|
|
it("should render", async () => {
|
|
const { asFragment } = await renderLayoutSwitcher();
|
|
expect(asFragment()).toMatchSnapshot();
|
|
});
|
|
|
|
describe("layout selection", () => {
|
|
it("should display the modern layout", async () => {
|
|
await renderLayoutSwitcher();
|
|
expect(screen.getByRole("radio", { name: "Modern" })).toBeChecked();
|
|
});
|
|
|
|
it("should change the layout when selected", async () => {
|
|
await renderLayoutSwitcher();
|
|
act(() => screen.getByRole("radio", { name: "Message bubbles" }).click());
|
|
|
|
expect(screen.getByRole("radio", { name: "Message bubbles" })).toBeChecked();
|
|
await waitFor(() => expect(SettingsStore.getValue<boolean>("layout")).toBe(Layout.Bubble));
|
|
});
|
|
});
|
|
|
|
describe("compact layout", () => {
|
|
beforeEach(async () => {
|
|
await SettingsStore.setValue("useCompactLayout", null, SettingLevel.DEVICE, false);
|
|
});
|
|
|
|
it("should be enabled", async () => {
|
|
await SettingsStore.setValue("useCompactLayout", null, SettingLevel.DEVICE, true);
|
|
await renderLayoutSwitcher();
|
|
|
|
expect(screen.getByRole("checkbox", { name: "Show compact text and messages" })).toBeChecked();
|
|
});
|
|
|
|
it("should change the setting when toggled", async () => {
|
|
await renderLayoutSwitcher();
|
|
act(() => screen.getByRole("checkbox", { name: "Show compact text and messages" }).click());
|
|
|
|
await waitFor(() => expect(SettingsStore.getValue<boolean>("useCompactLayout")).toBe(true));
|
|
});
|
|
|
|
it("should be disabled when the modern layout is not enabled", async () => {
|
|
await SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
|
|
await renderLayoutSwitcher();
|
|
expect(screen.getByRole("checkbox", { name: "Show compact text and messages" })).toBeDisabled();
|
|
});
|
|
});
|
|
});
|