Move ResizerNotifier into SDKContext (#30939)

* Move ResizerNotifier into SDKContext

so we don't have to pass it into RoomView

* Fix test

* Unused import

* Add tests

* Remove a bunch of resizeNotifier props

* Remove more resizeNotifier props

* Add resizenotifier to test

* Add more sdkcontext wrappers in tests

* More sdkcontext wrappers

* Even more sdkcontext wrappers

* Add test to make sonarcloud happy

* Context isn't always there unlike props

* Test actual resizing too

* Remove commented line
This commit is contained in:
David Baker
2025-10-06 09:23:06 +00:00
committed by GitHub
parent 87fdf96192
commit c08775588d
32 changed files with 490 additions and 443 deletions
@@ -13,10 +13,12 @@ import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix";
import type { MatrixClient } from "matrix-js-sdk/src/matrix";
import { flushPromises, mkMessage, stubClient } from "../../../../test-utils";
import MessageEditHistoryDialog from "../../../../../src/components/views/dialogs/MessageEditHistoryDialog";
import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
describe("<MessageEditHistory />", () => {
const roomId = "!aroom:example.com";
let client: jest.Mocked<MatrixClient>;
let sdkContext: SdkContextClass;
let event: MatrixEvent;
beforeEach(() => {
@@ -27,10 +29,13 @@ describe("<MessageEditHistory />", () => {
room: "!room:example.com",
msg: "My Great Message",
});
sdkContext = new SdkContextClass();
});
async function renderComponent(): Promise<RenderResult> {
const result = render(<MessageEditHistoryDialog mxEvent={event} onFinished={jest.fn()} />);
const result = render(<MessageEditHistoryDialog mxEvent={event} onFinished={jest.fn()} />, {
wrapper: ({ children }) => <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider>,
});
await waitForElementToBeRemoved(() => result.queryByRole("progressbar"));
await flushPromises();
return result;
@@ -21,7 +21,7 @@ import {
import RightPanel from "../../../../../src/components/structures/RightPanel";
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
import { stubClient } from "../../../../test-utils";
import { clientAndSDKContextRenderOptions, stubClient } from "../../../../test-utils";
import { Action } from "../../../../../src/dispatcher/actions";
import dis from "../../../../../src/dispatcher/dispatcher";
import DMRoomMap from "../../../../../src/utils/DMRoomMap";
@@ -39,6 +39,7 @@ import { ElementWidget } from "../../../../../src/stores/widgets/StopGapWidget";
import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore";
import { ModuleRunner } from "../../../../../src/modules/ModuleRunner";
import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
jest.mock("../../../../../src/stores/OwnProfileStore", () => ({
OwnProfileStore: {
@@ -53,6 +54,7 @@ jest.mock("../../../../../src/stores/OwnProfileStore", () => ({
describe("AppTile", () => {
let cli: MatrixClient;
let sdkContext: SdkContextClass;
let r1: Room;
let r2: Room;
const resizeNotifier = new ResizeNotifier();
@@ -116,6 +118,7 @@ describe("AppTile", () => {
});
beforeEach(() => {
sdkContext = new SdkContextClass();
jest.spyOn(SettingsStore, "getValue").mockRestore();
});
@@ -299,9 +302,8 @@ describe("AppTile", () => {
// Run initial render with room 1, and also running lifecycle methods
const renderResult = render(
<MatrixClientContext.Provider value={cli}>
<AppsDrawer userId={cli.getSafeUserId()} room={r1} resizeNotifier={resizeNotifier} />
</MatrixClientContext.Provider>,
<AppsDrawer userId={cli.getSafeUserId()} room={r1} />,
clientAndSDKContextRenderOptions(cli, sdkContext),
);
expect(renderResult.getByText("Example 1")).toBeInTheDocument();
@@ -13,23 +13,23 @@ import { render } from "jest-matrix-react";
import { stubClient } from "../../../../test-utils";
import AppsDrawer from "../../../../../src/components/views/rooms/AppsDrawer";
import SdkConfig from "../../../../../src/SdkConfig";
import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
import { WidgetLayoutStore } from "../../../../../src/stores/widgets/WidgetLayoutStore";
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
const ROOM_ID = "!room:id";
describe("AppsDrawer", () => {
let client: MatrixClient;
let room: Room;
let dummyResizeNotifier: ResizeNotifier;
let sdkContext: SdkContextClass;
beforeEach(async () => {
client = stubClient();
room = new Room(ROOM_ID, client, client.getUserId()!, {
pendingEventOrdering: PendingEventOrdering.Detached,
});
dummyResizeNotifier = new ResizeNotifier();
sdkContext = new SdkContextClass();
});
afterEach(() => {
@@ -58,17 +58,13 @@ describe("AppsDrawer", () => {
return [];
});
const { container } = render(
<AppsDrawer
userId={client.getUserId()!}
room={room}
resizeNotifier={dummyResizeNotifier}
showApps={true}
/>,
{
wrapper: ({ ...rest }) => <MatrixClientContext.Provider value={client} {...rest} />,
},
);
const { container } = render(<AppsDrawer userId={client.getUserId()!} room={room} showApps={true} />, {
wrapper: ({ ...rest }) => (
<SDKContext.Provider value={sdkContext}>
<MatrixClientContext.Provider value={client} {...rest} />
</SDKContext.Provider>
),
});
const appsDrawerResizer = container.getElementsByClassName("mx_AppsDrawer_resizer")[0] as HTMLElement;
expect(appsDrawerResizer.style.height).toBe("500px");
@@ -14,13 +14,13 @@ import userEvent from "@testing-library/user-event";
import * as pinnedEventHooks from "../../../../../src/hooks/usePinnedEvents";
import { PinnedMessageBanner } from "../../../../../src/components/views/rooms/PinnedMessageBanner";
import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
import { makePollStartEvent, stubClient, withClientContextRenderOptions } from "../../../../test-utils";
import { makePollStartEvent, stubClient, clientAndSDKContextRenderOptions } from "../../../../test-utils";
import dis from "../../../../../src/dispatcher/dispatcher";
import RightPanelStore from "../../../../../src/stores/right-panel/RightPanelStore";
import { RightPanelPhases } from "../../../../../src/stores/right-panel/RightPanelStorePhases";
import { UPDATE_EVENT } from "../../../../../src/stores/AsyncStore";
import { Action } from "../../../../../src/dispatcher/actions";
import ResizeNotifier from "../../../../../src/utils/ResizeNotifier.ts";
import { SdkContextClass } from "../../../../../src/contexts/SDKContext.ts";
describe("<PinnedMessageBanner />", () => {
const userId = "@alice:server.org";
@@ -29,12 +29,12 @@ describe("<PinnedMessageBanner />", () => {
let mockClient: MatrixClient;
let room: Room;
let permalinkCreator: RoomPermalinkCreator;
let resizeNotifier: ResizeNotifier;
let sdkContext: SdkContextClass;
beforeEach(() => {
mockClient = stubClient();
room = new Room(roomId, mockClient, userId);
permalinkCreator = new RoomPermalinkCreator(room);
resizeNotifier = new ResizeNotifier();
sdkContext = new SdkContextClass();
jest.spyOn(dis, "dispatch").mockReturnValue(undefined);
});
@@ -80,8 +80,8 @@ describe("<PinnedMessageBanner />", () => {
*/
function renderBanner() {
return render(
<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} resizeNotifier={resizeNotifier} />,
withClientContextRenderOptions(mockClient),
<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} />,
clientAndSDKContextRenderOptions(mockClient, sdkContext),
);
}
@@ -153,9 +153,7 @@ describe("<PinnedMessageBanner />", () => {
event3.getId()!,
]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2, event3]);
rerender(
<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} resizeNotifier={resizeNotifier} />,
);
rerender(<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} />);
await expect(screen.findByText("Third pinned message")).resolves.toBeVisible();
expect(asFragment()).toMatchSnapshot();
});
@@ -226,7 +224,7 @@ describe("<PinnedMessageBanner />", () => {
describe("Notify the timeline to resize", () => {
beforeEach(() => {
jest.spyOn(resizeNotifier, "notifyTimelineHeightChanged");
jest.spyOn(sdkContext.resizeNotifier, "notifyTimelineHeightChanged");
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!, event2.getId()!]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2]);
});
@@ -235,7 +233,7 @@ describe("<PinnedMessageBanner />", () => {
renderBanner();
await expect(screen.findByText("Second pinned message")).resolves.toBeVisible();
// The banner is displayed, so we need to resize the timeline
expect(resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);
expect(sdkContext.resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);
await userEvent.click(
screen.getByRole("button", {
@@ -244,23 +242,21 @@ describe("<PinnedMessageBanner />", () => {
);
await expect(screen.findByText("First pinned message")).resolves.toBeVisible();
// The banner is already displayed, so we don't need to resize the timeline
expect(resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);
expect(sdkContext.resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);
});
it("should notify the timeline to resize when we hide the banner", async () => {
const { rerender } = renderBanner();
await expect(screen.findByText("Second pinned message")).resolves.toBeVisible();
// The banner is displayed, so we need to resize the timeline
expect(resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);
expect(sdkContext.resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);
// The banner has no event to display and is hidden
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([]);
rerender(
<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} resizeNotifier={resizeNotifier} />,
);
rerender(<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} />);
// The timeline should be resized
expect(resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(2);
expect(sdkContext.resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(2);
});
});
@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render } from "jest-matrix-react";
import { fireEvent, render, waitFor } from "jest-matrix-react";
import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
import { CallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/callEventHandler";
@@ -15,19 +15,22 @@ import LegacyCallViewForRoom from "../../../../../src/components/views/voip/Lega
import { mkStubRoom, stubClient } from "../../../../test-utils";
import DMRoomMap from "../../../../../src/utils/DMRoomMap";
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
import LegacyCallHandler from "../../../../../src/LegacyCallHandler";
import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
jest.mock("../../../../../src/components/views/voip/LegacyCallView", () => jest.fn(() => "LegacyCallView"));
describe("LegacyCallViewForRoom", () => {
const LegacyCallViewMock = LegacyCallView as unknown as jest.Mock;
let sdkContext: SdkContextClass;
beforeEach(() => {
stubClient();
sdkContext = new SdkContextClass();
LegacyCallViewMock.mockClear();
});
it("should remember sidebar state, defaulting to shown", async () => {
stubClient();
it("should remember sidebar state, defaulting to shown", async () => {
const callHandler = new LegacyCallHandler();
callHandler.start();
jest.spyOn(LegacyCallHandler, "instance", "get").mockImplementation(() => callHandler);
@@ -45,16 +48,14 @@ describe("LegacyCallViewForRoom", () => {
const cli = MatrixClientPeg.safeGet();
cli.emit(CallEventHandlerEvent.Incoming, call);
const { rerender } = render(
<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />,
);
const { rerender } = render(<LegacyCallViewForRoom roomId={call.roomId} />);
let props = LegacyCallViewMock.mock.lastCall![0];
expect(props.sidebarShown).toBeTruthy(); // Sidebar defaults to shown
props.setSidebarShown(false); // Hide the sidebar
rerender(<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />);
rerender(<LegacyCallViewForRoom roomId={call.roomId} />);
console.log(LegacyCallViewMock.mock);
@@ -64,9 +65,47 @@ describe("LegacyCallViewForRoom", () => {
rerender(<div> </div>); // Destroy the LegacyCallViewForRoom and LegacyCallView
LegacyCallViewMock.mockClear(); // Drop stored LegacyCallView props
rerender(<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />);
rerender(<LegacyCallViewForRoom roomId={call.roomId} />);
props = LegacyCallViewMock.mock.lastCall![0];
expect(props.sidebarShown).toBeFalsy(); // Value was remembered
});
it("should notify on resize start events", async () => {
const call = new MatrixCall({
client: MatrixClientPeg.safeGet(),
roomId: "test-room",
});
const callHandler = {
getCallForRoom: jest.fn().mockReturnValue(call),
isCallSidebarShown: jest.fn().mockReturnValue(true),
addListener: jest.fn(),
removeListener: jest.fn(),
};
jest.spyOn(LegacyCallHandler, "instance", "get").mockImplementation(
() => callHandler as unknown as LegacyCallHandler,
);
jest.spyOn(sdkContext.resizeNotifier, "startResizing");
jest.spyOn(sdkContext.resizeNotifier, "stopResizing");
jest.spyOn(sdkContext.resizeNotifier, "notifyTimelineHeightChanged");
const { container } = render(<LegacyCallViewForRoom roomId={call.roomId} />, {
wrapper: ({ children }) => <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider>,
});
const resizer = container.querySelector(".mx_LegacyCallViewForRoom_ResizeHandle");
await waitFor(() => {
expect(resizer).toBeInTheDocument();
});
fireEvent.mouseDown(resizer!);
fireEvent.mouseMove(resizer!, { clientY: 100 });
fireEvent.mouseUp(resizer!);
expect(sdkContext.resizeNotifier.startResizing).toHaveBeenCalled();
expect(sdkContext.resizeNotifier.stopResizing).toHaveBeenCalled();
expect(sdkContext.resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalled();
});
});