element-web/test/stores/WidgetLayoutStore-test.ts
David Baker 39d453a5a3
Stop using the js-sdk's compare function (#12782)
* Stop using the js-sdk's compare function

The file is supposed to be a js-sdk internal module so we shouldn't
have been using it, and now it uses the native collator, it's completely
trivial. It was also causing Intl.Collator to be accessed at the module
scope which risked it beating the modernizr check.

* add test

* Fix tests

Move the restoreAllMocks to prevent mock leakage and also add
some custom themes to test the ordering of those.

* Move spy to the right place

* Add ANOTHER test

* Add test for integration manager ordering
2024-07-17 13:51:42 +00:00

329 lines
13 KiB
TypeScript

/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
import { mocked } from "jest-mock";
import WidgetStore, { IApp } from "../../src/stores/WidgetStore";
import { Container, WidgetLayoutStore } from "../../src/stores/widgets/WidgetLayoutStore";
import { stubClient } from "../test-utils";
import defaultDispatcher from "../../src/dispatcher/dispatcher";
import SettingsStore from "../../src/settings/SettingsStore";
// setup test env values
const roomId = "!room:server";
describe("WidgetLayoutStore", () => {
let client: MatrixClient;
let store: WidgetLayoutStore;
let roomUpdateListener: (event: string) => void;
let mockApps: IApp[];
let mockRoom: Room;
let layoutEventContent: Record<string, any> | null;
beforeEach(() => {
layoutEventContent = null;
mockRoom = <Room>{
roomId: roomId,
currentState: {
getStateEvents: (_l, _x) => {
return {
getId: () => "$layoutEventId",
getContent: () => layoutEventContent,
};
},
},
};
mockApps = [
<IApp>{ roomId: roomId, id: "1" },
<IApp>{ roomId: roomId, id: "2" },
<IApp>{ roomId: roomId, id: "3" },
<IApp>{ roomId: roomId, id: "4" },
];
// fake the WidgetStore.instance to just return an object with `getApps`
jest.spyOn(WidgetStore, "instance", "get").mockReturnValue({
on: jest.fn(),
off: jest.fn(),
getApps: () => mockApps,
} as unknown as WidgetStore);
SettingsStore.reset();
});
beforeAll(() => {
// we need to init a client so it does not error, when asking for DeviceStorage handlers (SettingsStore.setValue("Widgets.layout"))
client = stubClient();
roomUpdateListener = jest.fn();
// @ts-ignore bypass private ctor for tests
store = new WidgetLayoutStore();
store.addListener(`update_${roomId}`, roomUpdateListener);
});
afterAll(() => {
store.removeListener(`update_${roomId}`, roomUpdateListener);
});
it("all widgets should be in the right container by default", () => {
store.recalculateRoom(mockRoom);
expect(store.getContainerWidgets(mockRoom, Container.Right).length).toStrictEqual(mockApps.length);
});
it("add widget to top container", async () => {
store.recalculateRoom(mockRoom);
store.moveToContainer(mockRoom, mockApps[0], Container.Top);
expect(store.getContainerWidgets(mockRoom, Container.Top)).toStrictEqual([mockApps[0]]);
expect(store.getContainerHeight(mockRoom, Container.Top)).toBeNull();
});
it("ordering of top container widgets should be consistent even if no index specified", async () => {
layoutEventContent = {
widgets: {
"1": {
container: "top",
},
"2": {
container: "top",
},
},
};
store.recalculateRoom(mockRoom);
expect(store.getContainerWidgets(mockRoom, Container.Top)).toStrictEqual([mockApps[0], mockApps[1]]);
});
it("add three widgets to top container", async () => {
store.recalculateRoom(mockRoom);
store.moveToContainer(mockRoom, mockApps[0], Container.Top);
store.moveToContainer(mockRoom, mockApps[1], Container.Top);
store.moveToContainer(mockRoom, mockApps[2], Container.Top);
expect(new Set(store.getContainerWidgets(mockRoom, Container.Top))).toEqual(
new Set([mockApps[0], mockApps[1], mockApps[2]]),
);
});
it("cannot add more than three widgets to top container", async () => {
store.recalculateRoom(mockRoom);
store.moveToContainer(mockRoom, mockApps[0], Container.Top);
store.moveToContainer(mockRoom, mockApps[1], Container.Top);
store.moveToContainer(mockRoom, mockApps[2], Container.Top);
expect(store.canAddToContainer(mockRoom, Container.Top)).toEqual(false);
});
it("remove pins when maximising (other widget)", async () => {
store.recalculateRoom(mockRoom);
store.moveToContainer(mockRoom, mockApps[0], Container.Top);
store.moveToContainer(mockRoom, mockApps[1], Container.Top);
store.moveToContainer(mockRoom, mockApps[2], Container.Top);
store.moveToContainer(mockRoom, mockApps[3], Container.Center);
expect(store.getContainerWidgets(mockRoom, Container.Top)).toEqual([]);
expect(new Set(store.getContainerWidgets(mockRoom, Container.Right))).toEqual(
new Set([mockApps[0], mockApps[1], mockApps[2]]),
);
expect(store.getContainerWidgets(mockRoom, Container.Center)).toEqual([mockApps[3]]);
});
it("remove pins when maximising (one of the pinned widgets)", async () => {
store.recalculateRoom(mockRoom);
store.moveToContainer(mockRoom, mockApps[0], Container.Top);
store.moveToContainer(mockRoom, mockApps[1], Container.Top);
store.moveToContainer(mockRoom, mockApps[2], Container.Top);
store.moveToContainer(mockRoom, mockApps[0], Container.Center);
expect(store.getContainerWidgets(mockRoom, Container.Top)).toEqual([]);
expect(store.getContainerWidgets(mockRoom, Container.Center)).toEqual([mockApps[0]]);
expect(new Set(store.getContainerWidgets(mockRoom, Container.Right))).toEqual(
new Set([mockApps[1], mockApps[2], mockApps[3]]),
);
});
it("remove maximised when pinning (other widget)", async () => {
store.recalculateRoom(mockRoom);
store.moveToContainer(mockRoom, mockApps[0], Container.Center);
store.moveToContainer(mockRoom, mockApps[1], Container.Top);
expect(store.getContainerWidgets(mockRoom, Container.Top)).toEqual([mockApps[1]]);
expect(store.getContainerWidgets(mockRoom, Container.Center)).toEqual([]);
expect(new Set(store.getContainerWidgets(mockRoom, Container.Right))).toEqual(
new Set([mockApps[2], mockApps[3], mockApps[0]]),
);
});
it("remove maximised when pinning (same widget)", async () => {
store.recalculateRoom(mockRoom);
store.moveToContainer(mockRoom, mockApps[0], Container.Center);
store.moveToContainer(mockRoom, mockApps[0], Container.Top);
expect(store.getContainerWidgets(mockRoom, Container.Top)).toEqual([mockApps[0]]);
expect(store.getContainerWidgets(mockRoom, Container.Center)).toEqual([]);
expect(new Set(store.getContainerWidgets(mockRoom, Container.Right))).toEqual(
new Set([mockApps[2], mockApps[3], mockApps[1]]),
);
});
it("should recalculate all rooms when the client is ready", async () => {
mocked(client.getVisibleRooms).mockReturnValue([mockRoom]);
await store.start();
expect(roomUpdateListener).toHaveBeenCalled();
expect(store.getContainerWidgets(mockRoom, Container.Top)).toEqual([]);
expect(store.getContainerWidgets(mockRoom, Container.Center)).toEqual([]);
expect(store.getContainerWidgets(mockRoom, Container.Right)).toEqual([
mockApps[0],
mockApps[1],
mockApps[2],
mockApps[3],
]);
});
it("should clear the layout and emit an update if there are no longer apps in the room", () => {
store.recalculateRoom(mockRoom);
mocked(roomUpdateListener).mockClear();
jest.spyOn(WidgetStore, "instance", "get").mockReturnValue(<WidgetStore>(
({ getApps: (): IApp[] => [] } as unknown as WidgetStore)
));
store.recalculateRoom(mockRoom);
expect(roomUpdateListener).toHaveBeenCalled();
expect(store.getContainerWidgets(mockRoom, Container.Top)).toEqual([]);
expect(store.getContainerWidgets(mockRoom, Container.Center)).toEqual([]);
expect(store.getContainerWidgets(mockRoom, Container.Right)).toEqual([]);
});
it("should clear the layout if the client is not viable", () => {
store.recalculateRoom(mockRoom);
defaultDispatcher.dispatch(
{
action: "on_client_not_viable",
},
true,
);
expect(store.getContainerWidgets(mockRoom, Container.Top)).toEqual([]);
expect(store.getContainerWidgets(mockRoom, Container.Center)).toEqual([]);
expect(store.getContainerWidgets(mockRoom, Container.Right)).toEqual([]);
});
it("should return the expected resizer distributions", () => {
// this only works for top widgets
store.recalculateRoom(mockRoom);
store.moveToContainer(mockRoom, mockApps[0], Container.Top);
store.moveToContainer(mockRoom, mockApps[1], Container.Top);
expect(store.getResizerDistributions(mockRoom, Container.Top)).toEqual(["50.0%"]);
});
it("should set and return container height", () => {
store.recalculateRoom(mockRoom);
store.moveToContainer(mockRoom, mockApps[0], Container.Top);
store.moveToContainer(mockRoom, mockApps[1], Container.Top);
store.setContainerHeight(mockRoom, Container.Top, 23);
expect(store.getContainerHeight(mockRoom, Container.Top)).toBe(23);
});
it("should move a widget within a container", () => {
store.recalculateRoom(mockRoom);
store.moveToContainer(mockRoom, mockApps[0], Container.Top);
store.moveToContainer(mockRoom, mockApps[1], Container.Top);
store.moveToContainer(mockRoom, mockApps[2], Container.Top);
expect(store.getContainerWidgets(mockRoom, Container.Top)).toStrictEqual([
mockApps[0],
mockApps[1],
mockApps[2],
]);
store.moveWithinContainer(mockRoom, Container.Top, mockApps[0], 1);
expect(store.getContainerWidgets(mockRoom, Container.Top)).toStrictEqual([
mockApps[1],
mockApps[0],
mockApps[2],
]);
});
it("should copy the layout to the room", async () => {
await store.start();
store.recalculateRoom(mockRoom);
store.moveToContainer(mockRoom, mockApps[0], Container.Top);
store.copyLayoutToRoom(mockRoom);
expect(mocked(client.sendStateEvent).mock.calls).toMatchInlineSnapshot(`
[
[
"!room:server",
"io.element.widgets.layout",
{
"widgets": {
"1": {
"container": "top",
"height": undefined,
"index": 0,
"width": 100,
},
"2": {
"container": "right",
},
"3": {
"container": "right",
},
"4": {
"container": "right",
},
},
},
"",
],
]
`);
});
it("Can call onNotReady before onReady has been called", () => {
// Just to quieten SonarCloud :-(
// @ts-ignore bypass private ctor for tests
const store = new WidgetLayoutStore();
// @ts-ignore calling private method
store.onNotReady();
});
describe("when feature_dynamic_room_predecessors is not enabled", () => {
beforeAll(() => {
jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
});
it("passes the flag in to getVisibleRooms", async () => {
mocked(client.getVisibleRooms).mockRestore();
mocked(client.getVisibleRooms).mockReturnValue([]);
// @ts-ignore bypass private ctor for tests
const store = new WidgetLayoutStore();
await store.start();
expect(client.getVisibleRooms).toHaveBeenCalledWith(false);
});
});
describe("when feature_dynamic_room_predecessors is enabled", () => {
beforeAll(() => {
jest.spyOn(SettingsStore, "getValue").mockImplementation(
(settingName) => settingName === "feature_dynamic_room_predecessors",
);
});
it("passes the flag in to getVisibleRooms", async () => {
mocked(client.getVisibleRooms).mockRestore();
mocked(client.getVisibleRooms).mockReturnValue([]);
// @ts-ignore bypass private ctor for tests
const store = new WidgetLayoutStore();
await store.start();
expect(client.getVisibleRooms).toHaveBeenCalledWith(true);
});
});
});