Auto Collapse Behaviour - Collapse left panel during calls (#33771)

* Add call resize behaviour

* Export behaviour from behaviours.ts

* Fix e2e tests

* Fix lint

* Move test to vitest

* Pass call-store instead of global access

* Fix broken collapse behaviour on strict mode

* Remove unused variable from test
This commit is contained in:
R Midhun Suresh
2026-07-24 12:45:34 +00:00
committed by GitHub
parent 5d27663f26
commit 67206624a0
9 changed files with 155 additions and 24 deletions
@@ -15,6 +15,7 @@ import { type PanelImperativeHandle } from "@element-hq/web-shared-components";
import { ResizerViewModel } from "./ResizerViewModel";
import SettingsStore from "../../settings/SettingsStore";
import { SettingLevel } from "../../settings/SettingLevel";
import { CallStore } from "../../stores/CallStore";
describe("LeftPanelResizerViewModel", () => {
afterEach(() => {
@@ -25,7 +26,7 @@ describe("LeftPanelResizerViewModel", () => {
describe("Initial state is correct", () => {
it("should have correct initial state when panel was previously collapsed", () => {
SettingsStore.setValue("RoomList.isPanelCollapsed", null, SettingLevel.DEVICE, true);
const vm = new ResizerViewModel();
const vm = new ResizerViewModel(CallStore.instance);
expect(vm.getSnapshot()).toStrictEqual({
isCollapsed: true,
initialSize: 0,
@@ -34,7 +35,7 @@ describe("LeftPanelResizerViewModel", () => {
it("should have correct initial state when panel was previously resized", () => {
SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
const vm = new ResizerViewModel();
const vm = new ResizerViewModel(CallStore.instance);
expect(vm.getSnapshot()).toStrictEqual({
isCollapsed: false,
initialSize: 34,
@@ -42,7 +43,7 @@ describe("LeftPanelResizerViewModel", () => {
});
it("should have correct initial state when panel was neither resized nor collapsed", () => {
const vm = new ResizerViewModel();
const vm = new ResizerViewModel(CallStore.instance);
expect(vm.getSnapshot()).toStrictEqual({
isCollapsed: false,
initialSize: undefined,
@@ -51,7 +52,7 @@ describe("LeftPanelResizerViewModel", () => {
});
it("should update isCollapsed on onLeftPanelResized()", async () => {
const vm = new ResizerViewModel();
const vm = new ResizerViewModel(CallStore.instance);
vm.onLeftPanelResize({ inPixels: 100, asPercentage: 6 });
await waitFor(() => {
expect(vm.getSnapshot().isCollapsed).toStrictEqual(false);
@@ -63,7 +64,7 @@ describe("LeftPanelResizerViewModel", () => {
});
it("should noop on click when handle is not yet set", () => {
const vm = new ResizerViewModel();
const vm = new ResizerViewModel(CallStore.instance);
expect(() => {
// Click
vm.onPointerDown();
@@ -72,7 +73,7 @@ describe("LeftPanelResizerViewModel", () => {
});
it("should noop on mouse drag", () => {
const vm = new ResizerViewModel();
const vm = new ResizerViewModel(CallStore.instance);
SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
const mockHandle = {
resize: vi.fn(),
@@ -94,7 +95,7 @@ describe("LeftPanelResizerViewModel", () => {
describe("should expand panel on double click when panel is collapsed", () => {
it("to last non-zero width that the user set", () => {
const vm = new ResizerViewModel();
const vm = new ResizerViewModel(CallStore.instance);
SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
const mockHandle = {
resize: vi.fn(),
@@ -109,7 +110,7 @@ describe("LeftPanelResizerViewModel", () => {
});
it("to maximum size of the panel", () => {
const vm = new ResizerViewModel();
const vm = new ResizerViewModel(CallStore.instance);
const mockHandle = {
resize: vi.fn(),
isCollapsed: vi.fn().mockReturnValue(true),
@@ -124,7 +125,7 @@ describe("LeftPanelResizerViewModel", () => {
});
it("should collapse panel on click when panel is expanded", () => {
const vm = new ResizerViewModel();
const vm = new ResizerViewModel(CallStore.instance);
const mockHandle = {
collapse: vi.fn(),
isCollapsed: vi.fn().mockReturnValue(false),
@@ -136,7 +137,7 @@ describe("LeftPanelResizerViewModel", () => {
});
it("should ignore first resized event", () => {
const vm = new ResizerViewModel();
const vm = new ResizerViewModel(CallStore.instance);
const mockHandle = {
resize: vi.fn(),
getSize: vi.fn().mockReturnValue(0),
@@ -148,7 +149,7 @@ describe("LeftPanelResizerViewModel", () => {
});
it("should resize to nearest whole number", () => {
const vm = new ResizerViewModel();
const vm = new ResizerViewModel(CallStore.instance);
const mockHandle = {
resize: vi.fn(),
getSize: vi.fn().mockReturnValue(0),