mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-11-12 14:11:21 +01:00
Code Issues Projects Releases Wiki Activity

Move ResizerNotifier into SDKContext (#30939)

Browse Source 
* 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 10:23:06 +01:00 committed by GitHub
parent 87fdf96192
commit c08775588d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
32 changed files with 490 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/structures/FilePanel.tsx
View File

@ -27,7 +27,6 @@ import EventIndexPeg from "../../indexing/EventIndexPeg";
import { _t } from "../../languageHandler"; import { _t } from "../../languageHandler";
import SearchWarning, { WarningKind } from "../views/elements/SearchWarning"; import SearchWarning, { WarningKind } from "../views/elements/SearchWarning";
import BaseCard from "../views/right_panel/BaseCard"; import BaseCard from "../views/right_panel/BaseCard";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import TimelinePanel from "./TimelinePanel"; import TimelinePanel from "./TimelinePanel";
import Spinner from "../views/elements/Spinner"; import Spinner from "../views/elements/Spinner";
import { Layout } from "../../settings/enums/Layout"; import { Layout } from "../../settings/enums/Layout";
@ -39,7 +38,6 @@ import { ScopedRoomContextProvider } from "../../contexts/ScopedRoomContext.tsx"
interface IProps { interface IProps {
roomId: string; roomId: string;
onClose: () => void; onClose: () => void;
resizeNotifier: ResizeNotifier;
} }
interface IState { interface IState {
@ -294,7 +292,6 @@ class FilePanel extends React.Component<IProps, IState> {
timelineSet={this.state.timelineSet} timelineSet={this.state.timelineSet}
showUrlPreview={false} showUrlPreview={false}
onPaginationRequest={this.onPaginationRequest} onPaginationRequest={this.onPaginationRequest}
resizeNotifier={this.props.resizeNotifier}
empty={emptyState} empty={emptyState}
layout={Layout.Group} layout={Layout.Group}
/> />

21
src/components/structures/LoggedInView.tsx
View File

@ -30,7 +30,6 @@ import SettingsStore from "../../settings/SettingsStore";
import { SettingLevel } from "../../settings/SettingLevel"; import { SettingLevel } from "../../settings/SettingLevel";
import ResizeHandle from "../views/elements/ResizeHandle"; import ResizeHandle from "../views/elements/ResizeHandle";
import { CollapseDistributor, Resizer } from "../../resizer"; import { CollapseDistributor, Resizer } from "../../resizer";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import PlatformPeg from "../../PlatformPeg"; import PlatformPeg from "../../PlatformPeg";
import { DefaultTagID } from "../../stores/room-list/models"; import { DefaultTagID } from "../../stores/room-list/models";
import { hideToast as hideServerLimitToast, showToast as showServerLimitToast } from "../../toasts/ServerLimitToast"; import { hideToast as hideServerLimitToast, showToast as showServerLimitToast } from "../../toasts/ServerLimitToast";
@ -67,6 +66,7 @@ import { monitorSyncedPushRules } from "../../utils/pushRules/monitorSyncedPushR
import { type ConfigOptions } from "../../SdkConfig"; import { type ConfigOptions } from "../../SdkConfig";
import { MatrixClientContextProvider } from "./MatrixClientContextProvider"; import { MatrixClientContextProvider } from "./MatrixClientContextProvider";
import { Landmark, LandmarkNavigation } from "../../accessibility/LandmarkNavigation"; import { Landmark, LandmarkNavigation } from "../../accessibility/LandmarkNavigation";
import { SDKContext } from "../../contexts/SDKContext.ts";
// We need to fetch each pinned message individually (if we don't already have it) // We need to fetch each pinned message individually (if we don't already have it)
// so each pinned message may trigger a request. Limit the number per room for sanity. // so each pinned message may trigger a request. Limit the number per room for sanity.
@ -86,7 +86,6 @@ interface IProps {
// transitioned to PWLU) // transitioned to PWLU)
onRegistered: (credentials: IMatrixClientCreds) => Promise<MatrixClient>; onRegistered: (credentials: IMatrixClientCreds) => Promise<MatrixClient>;
hideToSRUsers: boolean; hideToSRUsers: boolean;
resizeNotifier: ResizeNotifier;
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
page_type?: string; page_type?: string;
autoJoin?: boolean; autoJoin?: boolean;
@ -134,8 +133,11 @@ class LoggedInView extends React.Component<IProps, IState> {
protected timezoneProfileUpdateRef?: string[]; protected timezoneProfileUpdateRef?: string[];
protected resizer?: Resizer<ICollapseConfig, CollapseItem>; protected resizer?: Resizer<ICollapseConfig, CollapseItem>;
public constructor(props: IProps) { public static contextType = SDKContext;
super(props); declare public context: React.ContextType<typeof SDKContext>;
public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
super(props, context);
this.state = { this.state = {
syncErrorData: undefined, syncErrorData: undefined,
@ -281,15 +283,15 @@ class LoggedInView extends React.Component<IProps, IState> {
}, },
onResized: (size) => { onResized: (size) => {
panelSize = size; panelSize = size;
this.props.resizeNotifier.notifyLeftHandleResized(); this.context.resizeNotifier.notifyLeftHandleResized();
}, },
onResizeStart: () => { onResizeStart: () => {
this.props.resizeNotifier.startResizing(); this.context.resizeNotifier.startResizing();
}, },
onResizeStop: () => { onResizeStop: () => {
// Always save the lhs size for the new room list. // Always save the lhs size for the new room list.
if (useNewRoomList || !panelCollapsed) window.localStorage.setItem("mx_lhs_size", "" + panelSize); if (useNewRoomList || !panelCollapsed) window.localStorage.setItem("mx_lhs_size", "" + panelSize);
this.props.resizeNotifier.stopResizing(); this.context.resizeNotifier.stopResizing();
}, },
isItemCollapsed: (domNode) => { isItemCollapsed: (domNode) => {
// New rooms list does not support collapsing. // New rooms list does not support collapsing.
@ -681,7 +683,6 @@ class LoggedInView extends React.Component<IProps, IState> {
threepidInvite={this.props.threepidInvite} threepidInvite={this.props.threepidInvite}
oobData={this.props.roomOobData} oobData={this.props.roomOobData}
key={this.props.currentRoomId || "roomview"} key={this.props.currentRoomId || "roomview"}
resizeNotifier={this.props.resizeNotifier}
justCreatedOpts={this.props.roomJustCreatedOpts} justCreatedOpts={this.props.roomJustCreatedOpts}
forceTimeline={this.props.forceTimeline} forceTimeline={this.props.forceTimeline}
/> />
@ -695,7 +696,7 @@ class LoggedInView extends React.Component<IProps, IState> {
case PageTypes.UserView: case PageTypes.UserView:
if (!!this.props.currentUserId) { if (!!this.props.currentUserId) {
pageElement = ( pageElement = (
<UserView userId={this.props.currentUserId} resizeNotifier={this.props.resizeNotifier} /> <UserView userId={this.props.currentUserId} resizeNotifier={this.context.resizeNotifier} />
); );
} }
break; break;
@ -748,7 +749,7 @@ class LoggedInView extends React.Component<IProps, IState> {
<LeftPanel <LeftPanel
pageType={this.props.page_type as PageTypes} pageType={this.props.page_type as PageTypes}
isMinimized={shouldUseMinimizedUI || false} isMinimized={shouldUseMinimizedUI || false}
resizeNotifier={this.props.resizeNotifier} resizeNotifier={this.context.resizeNotifier}
/> />
</div> </div>
</div> </div>

16
src/components/structures/MainSplit.tsx
View File

@ -12,11 +12,10 @@ import { type NumberSize, Resizable } from "re-resizable";
import { type Direction } from "re-resizable/lib/resizer"; import { type Direction } from "re-resizable/lib/resizer";
import { type WebPanelResize } from "@matrix-org/analytics-events/types/typescript/WebPanelResize"; import { type WebPanelResize } from "@matrix-org/analytics-events/types/typescript/WebPanelResize";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import { PosthogAnalytics } from "../../PosthogAnalytics.ts"; import { PosthogAnalytics } from "../../PosthogAnalytics.ts";
import { SDKContext } from "../../contexts/SDKContext.ts";
interface IProps { interface IProps {
resizeNotifier: ResizeNotifier;
collapsedRhs?: boolean; collapsedRhs?: boolean;
panel?: JSX.Element; panel?: JSX.Element;
children: ReactNode; children: ReactNode;
@ -36,16 +35,23 @@ interface IProps {
} }
export default class MainSplit extends React.Component<IProps> { export default class MainSplit extends React.Component<IProps> {
public static contextType = SDKContext;
declare public context: React.ContextType<typeof SDKContext>;
public static defaultProps = { public static defaultProps = {
defaultSize: 320, defaultSize: 320,
}; };
public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
super(props, context);
}
private onResizeStart = (): void => { private onResizeStart = (): void => {
this.props.resizeNotifier.startResizing(); this.context.resizeNotifier.startResizing();
}; };
private onResize = (): void => { private onResize = (): void => {
this.props.resizeNotifier.notifyRightHandleResized(); this.context.resizeNotifier.notifyRightHandleResized();
}; };
private get sizeSettingStorageKey(): string { private get sizeSettingStorageKey(): string {
@ -63,7 +69,7 @@ export default class MainSplit extends React.Component<IProps> {
delta: NumberSize, delta: NumberSize,
): void => { ): void => {
const newSize = this.loadSidePanelSize().width + delta.width; const newSize = this.loadSidePanelSize().width + delta.width;
this.props.resizeNotifier.stopResizing(); this.context.resizeNotifier.stopResizing();
window.localStorage.setItem(this.sizeSettingStorageKey, newSize.toString()); window.localStorage.setItem(this.sizeSettingStorageKey, newSize.toString());
PosthogAnalytics.instance.trackEvent<WebPanelResize>({ PosthogAnalytics.instance.trackEvent<WebPanelResize>({

13
src/components/structures/MatrixChat.tsx
View File

@ -49,7 +49,6 @@ import { _t, _td } from "../../languageHandler";
import SettingsStore from "../../settings/SettingsStore"; import SettingsStore from "../../settings/SettingsStore";
import ThemeController from "../../settings/controllers/ThemeController"; import ThemeController from "../../settings/controllers/ThemeController";
import { startAnyRegistrationFlow } from "../../Registration"; import { startAnyRegistrationFlow } from "../../Registration";
import ResizeNotifier from "../../utils/ResizeNotifier";
import AutoDiscoveryUtils from "../../utils/AutoDiscoveryUtils"; import AutoDiscoveryUtils from "../../utils/AutoDiscoveryUtils";
import { calculateRoomVia, makeRoomPermalink } from "../../utils/permalinks/Permalinks"; import { calculateRoomVia, makeRoomPermalink } from "../../utils/permalinks/Permalinks";
import ThemeWatcher, { ThemeWatcherEvent } from "../../settings/watchers/ThemeWatcher"; import ThemeWatcher, { ThemeWatcherEvent } from "../../settings/watchers/ThemeWatcher";
@ -199,7 +198,6 @@ interface IState {
// and disable it when there are no dialogs // and disable it when there are no dialogs
hideToSRUsers: boolean; hideToSRUsers: boolean;
syncError: Error | null; syncError: Error | null;
resizeNotifier: ResizeNotifier;
serverConfig?: ValidatedServerConfig; serverConfig?: ValidatedServerConfig;
ready: boolean; ready: boolean;
threepidInvite?: IThreepidInvite; threepidInvite?: IThreepidInvite;
@ -254,7 +252,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
isMobileRegistration: false, isMobileRegistration: false,
syncError: null, // If the current syncing status is ERROR, the error object, otherwise null. syncError: null, // If the current syncing status is ERROR, the error object, otherwise null.
resizeNotifier: new ResizeNotifier(),
ready: false, ready: false,
}; };
@ -459,7 +456,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
UIStore.instance.on(UI_EVENTS.Resize, this.handleResize); UIStore.instance.on(UI_EVENTS.Resize, this.handleResize);
// For PersistentElement // For PersistentElement
this.state.resizeNotifier.on("middlePanelResized", this.dispatchTimelineResize); this.stores.resizeNotifier.on("middlePanelResized", this.dispatchTimelineResize);
RoomNotificationStateStore.instance.on(UPDATE_STATUS_INDICATOR, this.onUpdateStatusIndicator); RoomNotificationStateStore.instance.on(UPDATE_STATUS_INDICATOR, this.onUpdateStatusIndicator);
@ -511,7 +508,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
this.themeWatcher?.stop(); this.themeWatcher?.stop();
this.fontWatcher?.stop(); this.fontWatcher?.stop();
UIStore.destroy(); UIStore.destroy();
this.state.resizeNotifier.removeListener("middlePanelResized", this.dispatchTimelineResize); this.stores.resizeNotifier.removeListener("middlePanelResized", this.dispatchTimelineResize);
window.removeEventListener("resize", this.onWindowResized); window.removeEventListener("resize", this.onWindowResized);
} }
@ -828,7 +825,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
collapseLhs: true, collapseLhs: true,
}, },
() => { () => {
this.state.resizeNotifier.notifyLeftHandleResized(); this.stores.resizeNotifier.notifyLeftHandleResized();
}, },
); );
break; break;
@ -838,7 +835,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
collapseLhs: false, collapseLhs: false,
}, },
() => { () => {
this.state.resizeNotifier.notifyLeftHandleResized(); this.stores.resizeNotifier.notifyLeftHandleResized();
}, },
); );
break; break;
@ -1957,7 +1954,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
} }
this.prevWindowWidth = width; this.prevWindowWidth = width;
this.state.resizeNotifier.notifyWindowResized(); this.stores.resizeNotifier.notifyWindowResized();
}; };
private dispatchTimelineResize(): void { private dispatchTimelineResize(): void {

3
src/components/structures/MessagePanel.tsx
View File

@ -39,7 +39,6 @@ import ScrollPanel, { type IScrollState } from "./ScrollPanel";
import DateSeparator from "../views/messages/DateSeparator"; import DateSeparator from "../views/messages/DateSeparator";
import TimelineSeparator, { SeparatorKind } from "../views/messages/TimelineSeparator"; import TimelineSeparator, { SeparatorKind } from "../views/messages/TimelineSeparator";
import ErrorBoundary from "../views/elements/ErrorBoundary"; import ErrorBoundary from "../views/elements/ErrorBoundary";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import Spinner from "../views/elements/Spinner"; import Spinner from "../views/elements/Spinner";
import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks"; import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
import type EditorStateTransfer from "../../utils/EditorStateTransfer"; import type EditorStateTransfer from "../../utils/EditorStateTransfer";
@ -167,7 +166,6 @@ interface IProps {
// which layout to use // which layout to use
layout?: Layout; layout?: Layout;
resizeNotifier?: ResizeNotifier;
permalinkCreator?: RoomPermalinkCreator; permalinkCreator?: RoomPermalinkCreator;
editState?: EditorStateTransfer; editState?: EditorStateTransfer;
@ -1064,7 +1062,6 @@ export default class MessagePanel extends React.Component<IProps, IState> {
onUnfillRequest={this.props.onUnfillRequest} onUnfillRequest={this.props.onUnfillRequest}
style={style} style={style}
stickyBottom={this.props.stickyBottom} stickyBottom={this.props.stickyBottom}
resizeNotifier={this.props.resizeNotifier}
fixedChildren={ircResizer} fixedChildren={ircResizer}
> >
{topSpinner} {topSpinner}

4
src/components/structures/RightPanel.tsx
View File

@ -224,9 +224,7 @@ export default class RightPanel extends React.Component<Props, IState> {
break; break;
case RightPanelPhases.FilePanel: case RightPanelPhases.FilePanel:
if (!!roomId) { if (!!roomId) {
card = ( card = <FilePanel roomId={roomId} onClose={this.onClose} />;
<FilePanel roomId={roomId} resizeNotifier={this.props.resizeNotifier} onClose={this.onClose} />
);
} }
break; break;

4
src/components/structures/RoomSearchView.tsx
View File

@ -21,7 +21,6 @@ import { _t } from "../../languageHandler";
import { haveRendererForEvent } from "../../events/EventTileFactory"; import { haveRendererForEvent } from "../../events/EventTileFactory";
import SearchResultTile from "../views/rooms/SearchResultTile"; import SearchResultTile from "../views/rooms/SearchResultTile";
import { searchPagination, SearchScope } from "../../Searching"; import { searchPagination, SearchScope } from "../../Searching";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import MatrixClientContext from "../../contexts/MatrixClientContext"; import MatrixClientContext from "../../contexts/MatrixClientContext";
import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks"; import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
import { useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx"; import { useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx";
@ -41,7 +40,6 @@ interface Props {
inProgress: boolean; inProgress: boolean;
promise: Promise<ISearchResults>; promise: Promise<ISearchResults>;
abortController?: AbortController; abortController?: AbortController;
resizeNotifier: ResizeNotifier;
className: string; className: string;
onUpdate(inProgress: boolean, results: ISearchResults | null, error: Error | null): void; onUpdate(inProgress: boolean, results: ISearchResults | null, error: Error | null): void;
ref?: Ref<ScrollPanel>; ref?: Ref<ScrollPanel>;
@ -54,7 +52,6 @@ export const RoomSearchView = ({
scope, scope,
promise, promise,
abortController, abortController,
resizeNotifier,
className, className,
onUpdate, onUpdate,
inProgress, inProgress,
@ -309,7 +306,6 @@ export const RoomSearchView = ({
ref={onRef} ref={onRef}
className={"mx_RoomView_searchResultsPanel " + className} className={"mx_RoomView_searchResultsPanel " + className}
onFillRequest={onSearchResultsFillRequest} onFillRequest={onSearchResultsFillRequest}
resizeNotifier={resizeNotifier}
> >
<li className="mx_RoomView_scrollheader" /> <li className="mx_RoomView_scrollheader" />
{ret} {ret}

30
src/components/structures/RoomView.tsx
View File

@ -151,7 +151,6 @@ interface IRoomProps {
threepidInvite?: IThreepidInvite; threepidInvite?: IThreepidInvite;
oobData?: IOOBData; oobData?: IOOBData;
resizeNotifier: ResizeNotifier;
justCreatedOpts?: IOpts; justCreatedOpts?: IOpts;
forceTimeline?: boolean; // should we force access to the timeline, overriding (for eg) spaces forceTimeline?: boolean; // should we force access to the timeline, overriding (for eg) spaces
@ -321,7 +320,7 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
<main className="mx_RoomView_body" ref={props.roomView} aria-label={_t("room|room_content")}> <main className="mx_RoomView_body" ref={props.roomView} aria-label={_t("room|room_content")}>
<FileDropTarget parent={props.roomView.current} onFileDrop={props.onFileDrop} room={room} /> <FileDropTarget parent={props.roomView.current} onFileDrop={props.onFileDrop} room={room} />
<div className="mx_RoomView_timeline"> <div className="mx_RoomView_timeline">
<ScrollPanel className="mx_RoomView_messagePanel" resizeNotifier={props.resizeNotifier}> <ScrollPanel className="mx_RoomView_messagePanel">
{encryptionTile} {encryptionTile}
<NewRoomIntro /> <NewRoomIntro />
</ScrollPanel> </ScrollPanel>
@ -337,7 +336,6 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
interface ILocalRoomCreateLoaderProps { interface ILocalRoomCreateLoaderProps {
localRoom: LocalRoom; localRoom: LocalRoom;
names: string; names: string;
resizeNotifier: ResizeNotifier;
mainSplitContentType: MainSplitContentType; mainSplitContentType: MainSplitContentType;
} }
@ -894,7 +892,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate); WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
this.context.widgetStore.on(UPDATE_EVENT, this.onWidgetStoreUpdate); this.context.widgetStore.on(UPDATE_EVENT, this.onWidgetStoreUpdate);
this.props.resizeNotifier.on("isResizing", this.onIsResizing); this.context.resizeNotifier.on("isResizing", this.onIsResizing);
this.settingWatchers = [ this.settingWatchers = [
SettingsStore.watchSetting("layout", null, (...[, , , value]) => SettingsStore.watchSetting("layout", null, (...[, , , value]) =>
@ -1010,7 +1008,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate); WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
this.context.widgetStore.removeListener(UPDATE_EVENT, this.onWidgetStoreUpdate); this.context.widgetStore.removeListener(UPDATE_EVENT, this.onWidgetStoreUpdate);
this.props.resizeNotifier.off("isResizing", this.onIsResizing); this.context.resizeNotifier.off("isResizing", this.onIsResizing);
if (this.state.room) { if (this.state.room) {
this.context.widgetLayoutStore.off( this.context.widgetLayoutStore.off(
@ -2056,7 +2054,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
<LocalRoomCreateLoader <LocalRoomCreateLoader
localRoom={localRoom} localRoom={localRoom}
names={names} names={names}
resizeNotifier={this.props.resizeNotifier}
mainSplitContentType={this.state.mainSplitContentType} mainSplitContentType={this.state.mainSplitContentType}
/> />
</ScopedRoomContextProvider> </ScopedRoomContextProvider>
@ -2069,7 +2066,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
<LocalRoomView <LocalRoomView
e2eStatus={this.state.e2eStatus} e2eStatus={this.state.e2eStatus}
localRoom={localRoom} localRoom={localRoom}
resizeNotifier={this.props.resizeNotifier} resizeNotifier={this.context.resizeNotifier}
permalinkCreator={this.permalinkCreator} permalinkCreator={this.permalinkCreator}
roomView={this.roomView} roomView={this.roomView}
onFileDrop={this.onFileDrop} onFileDrop={this.onFileDrop}
@ -2083,7 +2080,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
return ( return (
<ScopedRoomContextProvider {...this.state}> <ScopedRoomContextProvider {...this.state}>
<WaitingForThirdPartyRoomView <WaitingForThirdPartyRoomView
resizeNotifier={this.props.resizeNotifier} resizeNotifier={this.context.resizeNotifier}
roomView={this.roomView} roomView={this.roomView}
inviteEvent={inviteEvent} inviteEvent={inviteEvent}
/> />
@ -2402,7 +2399,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
<SpaceRoomView <SpaceRoomView
space={this.state.room} space={this.state.room}
justCreatedOpts={this.props.justCreatedOpts} justCreatedOpts={this.props.justCreatedOpts}
resizeNotifier={this.props.resizeNotifier} resizeNotifier={this.context.resizeNotifier}
permalinkCreator={this.permalinkCreator} permalinkCreator={this.permalinkCreator}
onJoinButtonClicked={this.onJoinButtonClicked} onJoinButtonClicked={this.onJoinButtonClicked}
onRejectButtonClicked={ onRejectButtonClicked={
@ -2419,18 +2416,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
room={this.state.room} room={this.state.room}
userId={this.context.client.getSafeUserId()} userId={this.context.client.getSafeUserId()}
showApps={this.state.showApps} showApps={this.state.showApps}
resizeNotifier={this.props.resizeNotifier}
> >
{aux} {aux}
</AuxPanel> </AuxPanel>
); );
const pinnedMessageBanner = ( const pinnedMessageBanner = (
<PinnedMessageBanner <PinnedMessageBanner room={this.state.room} permalinkCreator={this.permalinkCreator} />
room={this.state.room}
permalinkCreator={this.permalinkCreator}
resizeNotifier={this.props.resizeNotifier}
/>
); );
let messageComposer; let messageComposer;
@ -2444,7 +2436,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
<MessageComposer <MessageComposer
room={this.state.room} room={this.state.room}
e2eStatus={this.state.e2eStatus} e2eStatus={this.state.e2eStatus}
resizeNotifier={this.props.resizeNotifier} resizeNotifier={this.context.resizeNotifier}
replyToEvent={this.state.replyToEvent} replyToEvent={this.state.replyToEvent}
permalinkCreator={this.permalinkCreator} permalinkCreator={this.permalinkCreator}
/> />
@ -2466,7 +2458,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
promise={this.state.search.promise} promise={this.state.search.promise}
abortController={this.state.search.abortController} abortController={this.state.search.abortController}
inProgress={!!this.state.search.inProgress} inProgress={!!this.state.search.inProgress}
resizeNotifier={this.props.resizeNotifier}
className={this.messagePanelClassNames} className={this.messagePanelClassNames}
onUpdate={this.onSearchUpdate} onUpdate={this.onSearchUpdate}
/> />
@ -2501,7 +2492,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
className={this.messagePanelClassNames} className={this.messagePanelClassNames}
membersLoaded={this.state.membersLoaded} membersLoaded={this.state.membersLoaded}
permalinkCreator={this.permalinkCreator} permalinkCreator={this.permalinkCreator}
resizeNotifier={this.props.resizeNotifier}
showReactions={true} showReactions={true}
layout={this.state.layout} layout={this.state.layout}
editState={this.state.editState} editState={this.state.editState}
@ -2533,7 +2523,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
const rightPanel = showRightPanel ? ( const rightPanel = showRightPanel ? (
<RightPanel <RightPanel
room={this.state.room} room={this.state.room}
resizeNotifier={this.props.resizeNotifier} resizeNotifier={this.context.resizeNotifier}
permalinkCreator={this.permalinkCreator} permalinkCreator={this.permalinkCreator}
e2eStatus={this.state.e2eStatus} e2eStatus={this.state.e2eStatus}
onSearchChange={this.onSearchChange} onSearchChange={this.onSearchChange}
@ -2594,7 +2584,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
<AppsDrawer <AppsDrawer
room={this.state.room} room={this.state.room}
userId={this.context.client.getSafeUserId()} userId={this.context.client.getSafeUserId()}
resizeNotifier={this.props.resizeNotifier}
showApps={true} showApps={true}
role="main" role="main"
/> />
@ -2639,7 +2628,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
<ErrorBoundary> <ErrorBoundary>
<MainSplit <MainSplit
panel={rightPanel} panel={rightPanel}
resizeNotifier={this.props.resizeNotifier}
sizeKey={sizeKey} sizeKey={sizeKey}
defaultSize={defaultSize} defaultSize={defaultSize}
analyticsRoomType={analyticsRoomType} analyticsRoomType={analyticsRoomType}

19
src/components/structures/ScrollPanel.tsx
View File

@ -13,8 +13,8 @@ import SettingsStore from "../../settings/SettingsStore";
import Timer from "../../utils/Timer"; import Timer from "../../utils/Timer";
import AutoHideScrollbar from "./AutoHideScrollbar"; import AutoHideScrollbar from "./AutoHideScrollbar";
import { getKeyBindingsManager } from "../../KeyBindingsManager"; import { getKeyBindingsManager } from "../../KeyBindingsManager";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts"; import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import { SDKContext } from "../../contexts/SDKContext";
// The amount of extra scroll distance to allow prior to unfilling. // The amount of extra scroll distance to allow prior to unfilling.
// See getExcessHeight. // See getExcessHeight.
@ -58,10 +58,6 @@ interface IProps {
*/ */
style?: CSSProperties; style?: CSSProperties;
/* resizeNotifier: ResizeNotifier to know when middle column has changed size
*/
resizeNotifier?: ResizeNotifier;
/* fixedChildren: allows for children to be passed which are rendered outside /* fixedChildren: allows for children to be passed which are rendered outside
* of the wrapper * of the wrapper
*/ */
@ -188,15 +184,18 @@ export default class ScrollPanel extends React.Component<IProps> {
private heightUpdateInProgress = false; private heightUpdateInProgress = false;
public divScroll: HTMLDivElement | null = null; public divScroll: HTMLDivElement | null = null;
public constructor(props: IProps) { public static contextType = SDKContext;
super(props); declare public context: React.ContextType<typeof SDKContext>;
public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
super(props, context);
this.resetScrollState(); this.resetScrollState();
} }
public componentDidMount(): void { public componentDidMount(): void {
this.unmounted = false; this.unmounted = false;
this.props.resizeNotifier?.on("middlePanelResizedNoisy", this.onResize); this.context?.resizeNotifier?.on("middlePanelResizedNoisy", this.onResize);
this.checkScroll(); this.checkScroll();
} }
@ -217,14 +216,14 @@ export default class ScrollPanel extends React.Component<IProps> {
// (We could use isMounted(), but facebook have deprecated that.) // (We could use isMounted(), but facebook have deprecated that.)
this.unmounted = true; this.unmounted = true;
this.props.resizeNotifier?.removeListener("middlePanelResizedNoisy", this.onResize); this.context?.resizeNotifier?.removeListener("middlePanelResizedNoisy", this.onResize);
this.divScroll = null; this.divScroll = null;
} }
private onScroll = (ev: Event): void => { private onScroll = (ev: Event): void => {
// skip scroll events caused by resizing // skip scroll events caused by resizing
if (this.props.resizeNotifier && this.props.resizeNotifier.isResizing) return; if (this.context?.resizeNotifier && this.context.resizeNotifier.isResizing) return;
debuglog("onScroll called past resize gate; scroll node top:", this.getScrollNode().scrollTop); debuglog("onScroll called past resize gate; scroll node top:", this.getScrollNode().scrollTop);
this.scrollTimeout?.restart(); this.scrollTimeout?.restart();
this.saveScrollState(); this.saveScrollState();

2
src/components/structures/SpaceRoomView.tsx
View File

@ -763,7 +763,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
return ( return (
<main className="mx_SpaceRoomView"> <main className="mx_SpaceRoomView">
<ErrorBoundary> <ErrorBoundary>
<MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier} analyticsRoomType="space"> <MainSplit panel={rightPanel} analyticsRoomType="space">
{this.renderBody()} {this.renderBody()}
</MainSplit> </MainSplit>
</ErrorBoundary> </ErrorBoundary>

3
src/components/structures/TimelinePanel.tsx
View File

@ -47,7 +47,6 @@ import shouldHideEvent from "../../shouldHideEvent";
import MessagePanel from "./MessagePanel"; import MessagePanel from "./MessagePanel";
import { type IScrollState } from "./ScrollPanel"; import { type IScrollState } from "./ScrollPanel";
import { type ActionPayload } from "../../dispatcher/payloads"; import { type ActionPayload } from "../../dispatcher/payloads";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks"; import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
import Spinner from "../views/elements/Spinner"; import Spinner from "../views/elements/Spinner";
import type EditorStateTransfer from "../../utils/EditorStateTransfer"; import type EditorStateTransfer from "../../utils/EditorStateTransfer";
@ -123,7 +122,6 @@ interface IProps {
// whether to always show timestamps for an event // whether to always show timestamps for an event
alwaysShowTimestamps?: boolean; alwaysShowTimestamps?: boolean;
resizeNotifier?: ResizeNotifier;
editState?: EditorStateTransfer; editState?: EditorStateTransfer;
permalinkCreator?: RoomPermalinkCreator; permalinkCreator?: RoomPermalinkCreator;
membersLoaded?: boolean; membersLoaded?: boolean;
@ -1849,7 +1847,6 @@ class TimelinePanel extends React.Component<IProps, IState> {
this.state.alwaysShowTimestamps this.state.alwaysShowTimestamps
} }
className={this.props.className} className={this.props.className}
resizeNotifier={this.props.resizeNotifier}
getRelationsForEvent={this.getRelationsForEvent} getRelationsForEvent={this.getRelationsForEvent}
editState={this.props.editState} editState={this.props.editState}
showReactions={this.props.showReactions} showReactions={this.props.showReactions}

7
src/components/structures/UserView.tsx
View File

@ -87,12 +87,7 @@ export default class UserView extends React.Component<IProps, IState> {
/> />
); );
return ( return (
<MainSplit <MainSplit panel={panel} defaultSize={420} analyticsRoomType="user_profile">
panel={panel}
resizeNotifier={this.props.resizeNotifier}
defaultSize={420}
analyticsRoomType="user_profile"
>
<HomePage /> <HomePage />
</MainSplit> </MainSplit>
); );

2
src/components/structures/WaitingForThirdPartyRoomView.tsx
View File

@ -41,7 +41,7 @@ export const WaitingForThirdPartyRoomView: React.FC<Props> = ({ roomView, resize
<RoomHeader room={context.room!} /> <RoomHeader room={context.room!} />
<main className="mx_RoomView_body" ref={roomView}> <main className="mx_RoomView_body" ref={roomView}>
<div className="mx_RoomView_timeline"> <div className="mx_RoomView_timeline">
<ScrollPanel className="mx_RoomView_messagePanel" resizeNotifier={resizeNotifier}> <ScrollPanel className="mx_RoomView_messagePanel">
<EventTileBubble <EventTileBubble
className="mx_cryptoEvent mx_cryptoEvent_icon" className="mx_cryptoEvent mx_cryptoEvent_icon"
title={_t("room|waiting_for_join_title", { brand })} title={_t("room|waiting_for_join_title", { brand })}

1
src/components/views/right_panel/TimelineCard.tsx
View File

@ -234,7 +234,6 @@ export default class TimelineCard extends React.Component<IProps, IState> {
membersLoaded={true} membersLoaded={true}
editState={this.state.editState} editState={this.state.editState}
eventId={this.state.initialEventId} eventId={this.state.initialEventId}
resizeNotifier={this.props.resizeNotifier}
highlightedEventId={highlightedEventId} highlightedEventId={highlightedEventId}
onScroll={this.onScroll} onScroll={this.onScroll}
/> />

15
src/components/views/rooms/AppsDrawer.tsx
View File

@ -27,11 +27,11 @@ import UIStore from "../../../stores/UIStore";
import { type ActionPayload } from "../../../dispatcher/payloads"; import { type ActionPayload } from "../../../dispatcher/payloads";
import Spinner from "../elements/Spinner"; import Spinner from "../elements/Spinner";
import SdkConfig from "../../../SdkConfig"; import SdkConfig from "../../../SdkConfig";
import { SDKContext } from "../../../contexts/SDKContext";
interface IProps { interface IProps {
userId: string; userId: string;
room: Room; room: Room;
resizeNotifier: ResizeNotifier;
showApps?: boolean; // Should apps be rendered showApps?: boolean; // Should apps be rendered
maxHeight: number; maxHeight: number;
role?: AriaRole; role?: AriaRole;
@ -57,8 +57,11 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
showApps: true, showApps: true,
}; };
public constructor(props: IProps) { public static contextType = SDKContext;
super(props); declare public context: React.ContextType<typeof SDKContext>;
public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
super(props, context);
this.state = { this.state = {
apps: this.getApps(), apps: this.getApps(),
@ -73,7 +76,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
public componentDidMount(): void { public componentDidMount(): void {
this.unmounted = false; this.unmounted = false;
this.props.resizeNotifier.on("isResizing", this.onIsResizing); this.context.resizeNotifier.on("isResizing", this.onIsResizing);
ScalarMessaging.startListening(); ScalarMessaging.startListening();
WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps); WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps);
@ -88,7 +91,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
if (this.resizeContainer) { if (this.resizeContainer) {
this.resizer.detach(); this.resizer.detach();
} }
this.props.resizeNotifier.off("isResizing", this.onIsResizing); this.context.resizeNotifier.off("isResizing", this.onIsResizing);
} }
private onIsResizing = (resizing: boolean): void => { private onIsResizing = (resizing: boolean): void => {
@ -281,7 +284,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
className="mx_AppsDrawer_resizer" className="mx_AppsDrawer_resizer"
handleWrapperClass="mx_AppsDrawer_resizer_container" handleWrapperClass="mx_AppsDrawer_resizer_container"
handleClass="mx_AppsDrawer_resizer_container_handle" handleClass="mx_AppsDrawer_resizer_container_handle"
resizeNotifier={this.props.resizeNotifier} resizeNotifier={this.context.resizeNotifier}
> >
{appContainers} {appContainers}
</PersistentVResizer> </PersistentVResizer>

17
src/components/views/rooms/AuxPanel.tsx
View File

@ -13,7 +13,6 @@ import AppsDrawer from "./AppsDrawer";
import SettingsStore from "../../../settings/SettingsStore"; import SettingsStore from "../../../settings/SettingsStore";
import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import { UIFeature } from "../../../settings/UIFeature"; import { UIFeature } from "../../../settings/UIFeature";
import type ResizeNotifier from "../../../utils/ResizeNotifier";
import LegacyCallViewForRoom from "../voip/LegacyCallViewForRoom"; import LegacyCallViewForRoom from "../voip/LegacyCallViewForRoom";
import { objectHasDiff } from "../../../utils/objects"; import { objectHasDiff } from "../../../utils/objects";
@ -22,7 +21,6 @@ interface IProps {
room: Room; room: Room;
userId: string; userId: string;
showApps: boolean; // Render apps showApps: boolean; // Render apps
resizeNotifier: ResizeNotifier;
children?: ReactNode; children?: ReactNode;
} }
@ -36,23 +34,12 @@ export default class AuxPanel extends React.Component<IProps> {
} }
public render(): React.ReactNode { public render(): React.ReactNode {
const callView = ( const callView = <LegacyCallViewForRoom roomId={this.props.room.roomId} showApps={this.props.showApps} />;
<LegacyCallViewForRoom
roomId={this.props.room.roomId}
resizeNotifier={this.props.resizeNotifier}
showApps={this.props.showApps}
/>
);
let appsDrawer; let appsDrawer;
if (SettingsStore.getValue(UIFeature.Widgets)) { if (SettingsStore.getValue(UIFeature.Widgets)) {
appsDrawer = ( appsDrawer = (
<AppsDrawer <AppsDrawer room={this.props.room} userId={this.props.userId} showApps={this.props.showApps} />
room={this.props.room}
userId={this.props.userId}
showApps={this.props.showApps}
resizeNotifier={this.props.resizeNotifier}
/>
); );
} }

21
src/components/views/rooms/PinnedMessageBanner.tsx
View File

@ -6,7 +6,7 @@
* Please see LICENSE files in the repository root for full details. * Please see LICENSE files in the repository root for full details.
*/ */
import React, { type JSX, useEffect, useId, useRef, useState } from "react"; import React, { type JSX, useContext, useEffect, useId, useRef, useState } from "react";
import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid"; import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
import { Button } from "@vector-im/compound-web"; import { Button } from "@vector-im/compound-web";
import { type MatrixEvent, type Room } from "matrix-js-sdk/src/matrix"; import { type MatrixEvent, type Room } from "matrix-js-sdk/src/matrix";
@ -25,7 +25,7 @@ import { Action } from "../../../dispatcher/actions";
import MessageEvent from "../messages/MessageEvent"; import MessageEvent from "../messages/MessageEvent";
import PosthogTrackers from "../../../PosthogTrackers.ts"; import PosthogTrackers from "../../../PosthogTrackers.ts";
import { EventPreview } from "./EventPreview.tsx"; import { EventPreview } from "./EventPreview.tsx";
import type ResizeNotifier from "../../../utils/ResizeNotifier"; import { SDKContext } from "../../../contexts/SDKContext.ts";
/** /**
* The props for the {@link PinnedMessageBanner} component. * The props for the {@link PinnedMessageBanner} component.
@ -39,20 +39,12 @@ interface PinnedMessageBannerProps {
* The room where the banner is displayed * The room where the banner is displayed
*/ */
room: Room; room: Room;
/**
* The resize notifier to notify the timeline to resize itself when the banner is displayed or hidden.
*/
resizeNotifier: ResizeNotifier;
} }
/** /**
* A banner that displays the pinned messages in a room. * A banner that displays the pinned messages in a room.
*/ */
export function PinnedMessageBanner({ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBannerProps): JSX.Element | null {
room,
permalinkCreator,
resizeNotifier,
}: PinnedMessageBannerProps): JSX.Element | null {
const pinnedEventIds = usePinnedEvents(room); const pinnedEventIds = usePinnedEvents(room);
const pinnedEvents = useSortedFetchedPinnedEvents(room, pinnedEventIds); const pinnedEvents = useSortedFetchedPinnedEvents(room, pinnedEventIds);
const eventCount = pinnedEvents.length; const eventCount = pinnedEvents.length;
@ -67,7 +59,7 @@ export function PinnedMessageBanner({
const isLastMessage = currentEventIndex === eventCount - 1; const isLastMessage = currentEventIndex === eventCount - 1;
const pinnedEvent = pinnedEvents[currentEventIndex]; const pinnedEvent = pinnedEvents[currentEventIndex];
useNotifyTimeline(pinnedEvent, resizeNotifier); useNotifyTimeline(pinnedEvent);
const id = useId(); const id = useId();
@ -152,9 +144,10 @@ export function PinnedMessageBanner({
/** /**
* When the banner is displayed or hidden, we want to notify the timeline to resize itself. * When the banner is displayed or hidden, we want to notify the timeline to resize itself.
* @param pinnedEvent * @param pinnedEvent
* @param resizeNotifier
*/ */
function useNotifyTimeline(pinnedEvent: MatrixEvent | null, resizeNotifier: ResizeNotifier): void { function useNotifyTimeline(pinnedEvent: MatrixEvent | null): void {
const resizeNotifier = useContext(SDKContext).resizeNotifier;
const previousEvent = useRef<MatrixEvent | null>(null); const previousEvent = useRef<MatrixEvent | null>(null);
useEffect(() => { useEffect(() => {
// If we switch from a pinned message to no pinned message or the opposite, we want to resize the timeline // If we switch from a pinned message to no pinned message or the opposite, we want to resize the timeline

17
src/components/views/voip/LegacyCallViewForRoom.tsx
View File

@ -12,14 +12,12 @@ import { Resizable } from "re-resizable";
import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../../LegacyCallHandler"; import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../../LegacyCallHandler";
import LegacyCallView from "./LegacyCallView"; import LegacyCallView from "./LegacyCallView";
import type ResizeNotifier from "../../../utils/ResizeNotifier"; import { SDKContext } from "../../../contexts/SDKContext";
interface IProps { interface IProps {
// What room we should display the call for // What room we should display the call for
roomId: string; roomId: string;
resizeNotifier: ResizeNotifier;
showApps?: boolean; showApps?: boolean;
} }
@ -33,8 +31,11 @@ interface IState {
* or nothing if there is no call in that room. * or nothing if there is no call in that room.
*/ */
export default class LegacyCallViewForRoom extends React.Component<IProps, IState> { export default class LegacyCallViewForRoom extends React.Component<IProps, IState> {
public constructor(props: IProps) { public static contextType = SDKContext;
super(props); declare public context: React.ContextType<typeof SDKContext>;
public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
super(props, context);
const call = this.getCall(); const call = this.getCall();
this.state = { this.state = {
call, call,
@ -73,15 +74,15 @@ export default class LegacyCallViewForRoom extends React.Component<IProps, IStat
} }
private onResizeStart = (): void => { private onResizeStart = (): void => {
this.props.resizeNotifier.startResizing(); this.context.resizeNotifier.startResizing();
}; };
private onResize = (): void => { private onResize = (): void => {
this.props.resizeNotifier.notifyTimelineHeightChanged(); this.context.resizeNotifier.notifyTimelineHeightChanged();
}; };
private onResizeStop = (): void => { private onResizeStop = (): void => {
this.props.resizeNotifier.stopResizing(); this.context.resizeNotifier.stopResizing();
}; };
private setSidebarShown = (sidebarShown: boolean): void => { private setSidebarShown = (sidebarShown: boolean): void => {

12
src/contexts/SDKContext.ts
View File

@ -24,6 +24,7 @@ import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
import { WidgetPermissionStore } from "../stores/widgets/WidgetPermissionStore"; import { WidgetPermissionStore } from "../stores/widgets/WidgetPermissionStore";
import { OidcClientStore } from "../stores/oidc/OidcClientStore"; import { OidcClientStore } from "../stores/oidc/OidcClientStore";
import WidgetStore from "../stores/WidgetStore"; import WidgetStore from "../stores/WidgetStore";
import ResizeNotifier from "../utils/ResizeNotifier";
// This context is available to components under MatrixChat, // This context is available to components under MatrixChat,
// the context must not be used by components outside a SdkContextClass tree. // the context must not be used by components outside a SdkContextClass tree.
@ -64,6 +65,7 @@ export class SdkContextClass {
protected _TypingStore?: TypingStore; protected _TypingStore?: TypingStore;
protected _UserProfilesStore?: UserProfilesStore; protected _UserProfilesStore?: UserProfilesStore;
protected _OidcClientStore?: OidcClientStore; protected _OidcClientStore?: OidcClientStore;
protected _ResizeNotifier?: ResizeNotifier;
/** /**
* Automatically construct stores which need to be created eagerly so they can register with * Automatically construct stores which need to be created eagerly so they can register with
@ -171,6 +173,16 @@ export class SdkContextClass {
return this._OidcClientStore; return this._OidcClientStore;
} }
// This is getting increasingly tenuous to have here but we still have class components so it's
// awkward to consume multiple contexts in them. This should be replaced with ResizeObservers
// anyway really.
public get resizeNotifier(): ResizeNotifier {
if (!this._ResizeNotifier) {
this._ResizeNotifier = new ResizeNotifier();
}
return this._ResizeNotifier;
}
public onLoggedOut(): void { public onLoggedOut(): void {
this._UserProfilesStore = undefined; this._UserProfilesStore = undefined;
} }

10
test/test-utils/wrappers.tsx
View File

@ -62,3 +62,13 @@ export function withClientContextRenderOptions(client: MatrixClient): RenderOpti
), ),
}; };
} }
export function clientAndSDKContextRenderOptions(client: MatrixClient, sdkContext: SdkContextClass): RenderOptions {
return {
wrapper: ({ children }) => (
<SDKContext.Provider value={sdkContext}>
<MatrixClientContext.Provider value={client}>{children}</MatrixClientContext.Provider>
</SDKContext.Provider>
),
};
}

6
test/unit-tests/components/structures/FilePanel-test.tsx
View File

@ -12,7 +12,6 @@ import { screen, render, waitFor } from "jest-matrix-react";
import { mocked } from "jest-mock"; import { mocked } from "jest-mock";
import FilePanel from "../../../../src/components/structures/FilePanel"; import FilePanel from "../../../../src/components/structures/FilePanel";
import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
import { mkEvent, stubClient } from "../../../test-utils"; import { mkEvent, stubClient } from "../../../test-utils";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@ -39,9 +38,7 @@ describe("FilePanel", () => {
room.getOrCreateFilteredTimelineSet = jest.fn().mockReturnValue(timelineSet); room.getOrCreateFilteredTimelineSet = jest.fn().mockReturnValue(timelineSet);
mocked(cli.getRoom).mockReturnValue(room); mocked(cli.getRoom).mockReturnValue(room);
const { asFragment } = render( const { asFragment } = render(<FilePanel roomId={room.roomId} onClose={jest.fn()} />);
<FilePanel roomId={room.roomId} onClose={jest.fn()} resizeNotifier={new ResizeNotifier()} />,
);
await waitFor(() => { await waitFor(() => {
expect(screen.getByText("No files visible in this room")).toBeInTheDocument(); expect(screen.getByText("No files visible in this room")).toBeInTheDocument();
}); });
@ -64,7 +61,6 @@ describe("FilePanel", () => {
<FilePanel <FilePanel
roomId={room.roomId} roomId={room.roomId}
onClose={jest.fn()} onClose={jest.fn()}
resizeNotifier={new ResizeNotifier()}
ref={(ref) => { ref={(ref) => {
filePanel = ref; filePanel = ref;
}} }}

24
test/unit-tests/components/structures/MainSplit-test.tsx
View File

@ -10,30 +10,26 @@ import React from "react";
import { render, fireEvent } from "jest-matrix-react"; import { render, fireEvent } from "jest-matrix-react";
import MainSplit from "../../../../src/components/structures/MainSplit"; import MainSplit from "../../../../src/components/structures/MainSplit";
import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
import { PosthogAnalytics } from "../../../../src/PosthogAnalytics.ts"; import { PosthogAnalytics } from "../../../../src/PosthogAnalytics.ts";
import { SDKContext, SdkContextClass } from "../../../../src/contexts/SDKContext.ts";
describe("<MainSplit/>", () => { describe("<MainSplit/>", () => {
const resizeNotifier = new ResizeNotifier();
const children = ( const children = (
<div> <div>
Child<span>Foo</span>Bar Child<span>Foo</span>Bar
</div> </div>
); );
const panel = <div>Right panel</div>; const panel = <div>Right panel</div>;
let sdkContext: SdkContextClass;
beforeEach(() => { beforeEach(() => {
localStorage.clear(); localStorage.clear();
sdkContext = new SdkContextClass();
}); });
it("renders", () => { it("renders", () => {
const { asFragment, container } = render( const { asFragment, container } = render(
<MainSplit <MainSplit children={children} panel={panel} analyticsRoomType="other_room" />,
resizeNotifier={resizeNotifier}
children={children}
panel={panel}
analyticsRoomType="other_room"
/>,
); );
expect(asFragment()).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
// Assert it matches the default width of 320 // Assert it matches the default width of 320
@ -42,13 +38,7 @@ describe("<MainSplit/>", () => {
it("respects defaultSize prop", () => { it("respects defaultSize prop", () => {
const { asFragment, container } = render( const { asFragment, container } = render(
<MainSplit <MainSplit children={children} panel={panel} defaultSize={500} analyticsRoomType="other_room" />,
resizeNotifier={resizeNotifier}
children={children}
panel={panel}
defaultSize={500}
analyticsRoomType="other_room"
/>,
); );
expect(asFragment()).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
// Assert it matches the default width of 350 // Assert it matches the default width of 350
@ -59,7 +49,6 @@ describe("<MainSplit/>", () => {
localStorage.setItem("mx_rhs_size_thread", "333"); localStorage.setItem("mx_rhs_size_thread", "333");
const { container } = render( const { container } = render(
<MainSplit <MainSplit
resizeNotifier={resizeNotifier}
children={children} children={children}
panel={panel} panel={panel}
sizeKey="thread" sizeKey="thread"
@ -73,18 +62,19 @@ describe("<MainSplit/>", () => {
it("should report to analytics on resize stop", () => { it("should report to analytics on resize stop", () => {
const { container } = render( const { container } = render(
<MainSplit <MainSplit
resizeNotifier={resizeNotifier}
children={children} children={children}
panel={panel} panel={panel}
sizeKey="thread" sizeKey="thread"
defaultSize={400} defaultSize={400}
analyticsRoomType="other_room" analyticsRoomType="other_room"
/>, />,
{ wrapper: ({ children }) => <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider> },
); );
const spy = jest.spyOn(PosthogAnalytics.instance, "trackEvent"); const spy = jest.spyOn(PosthogAnalytics.instance, "trackEvent");
const handle = container.querySelector(".mx_ResizeHandle--horizontal")!; const handle = container.querySelector(".mx_ResizeHandle--horizontal")!;
expect(handle).toBeInTheDocument();
fireEvent.mouseDown(handle); fireEvent.mouseDown(handle);
fireEvent.resize(handle, { clientX: 0 }); fireEvent.resize(handle, { clientX: 0 });
fireEvent.mouseUp(handle); fireEvent.mouseUp(handle);

24
test/unit-tests/components/structures/MatrixChat-test.tsx
View File

@ -307,6 +307,30 @@ describe("<MatrixChat />", () => {
}); });
}); });
it("should notify resizenotifier when left panel hidden", async () => {
getComponent();
jest.spyOn(SdkContextClass.instance.resizeNotifier, "notifyLeftHandleResized");
defaultDispatcher.dispatch({ action: "hide_left_panel" });
await waitFor(() =>
expect(mocked(SdkContextClass.instance.resizeNotifier.notifyLeftHandleResized)).toHaveBeenCalled(),
);
});
it("should notify resizenotifier when left panel shown", async () => {
getComponent();
jest.spyOn(SdkContextClass.instance.resizeNotifier, "notifyLeftHandleResized");
defaultDispatcher.dispatch({ action: "show_left_panel" });
await waitFor(() =>
expect(mocked(SdkContextClass.instance.resizeNotifier.notifyLeftHandleResized)).toHaveBeenCalled(),
);
});
describe("when query params have a OIDC params", () => { describe("when query params have a OIDC params", () => {
const issuer = "https://auth.com/"; const issuer = "https://auth.com/";
const homeserverUrl = "https://matrix.org"; const homeserverUrl = "https://matrix.org";

79
test/unit-tests/components/structures/MessagePanel-test.tsx
View File

@ -15,11 +15,11 @@ import { render } from "jest-matrix-react";
import MessagePanel, { shouldFormContinuation } from "../../../../src/components/structures/MessagePanel"; import MessagePanel, { shouldFormContinuation } from "../../../../src/components/structures/MessagePanel";
import SettingsStore from "../../../../src/settings/SettingsStore"; import SettingsStore from "../../../../src/settings/SettingsStore";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext"; import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
import DMRoomMap from "../../../../src/utils/DMRoomMap"; import DMRoomMap from "../../../../src/utils/DMRoomMap";
import * as TestUtilsMatrix from "../../../test-utils"; import * as TestUtilsMatrix from "../../../test-utils";
import { import {
clientAndSDKContextRenderOptions,
createTestClient, createTestClient,
getMockClientWithEventEmitter, getMockClientWithEventEmitter,
makeBeaconInfoEvent, makeBeaconInfoEvent,
@ -32,6 +32,7 @@ import type ResizeNotifier from "../../../../src/utils/ResizeNotifier";
import { type IRoomState } from "../../../../src/components/structures/RoomView"; import { type IRoomState } from "../../../../src/components/structures/RoomView";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomContext.tsx"; import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomContext.tsx";
import { SdkContextClass } from "../../../../src/contexts/SDKContext.ts";
jest.mock("../../../../src/utils/beacon", () => ({ jest.mock("../../../../src/utils/beacon", () => ({
useBeacon: jest.fn(), useBeacon: jest.fn(),
@ -54,6 +55,7 @@ describe("MessagePanel", function () {
getClientWellKnown: jest.fn().mockReturnValue({}), getClientWellKnown: jest.fn().mockReturnValue({}),
supportsThreads: jest.fn().mockReturnValue(true), supportsThreads: jest.fn().mockReturnValue(true),
}); });
let sdkContext: SdkContextClass;
jest.spyOn(MatrixClientPeg, "get").mockReturnValue(client); jest.spyOn(MatrixClientPeg, "get").mockReturnValue(client);
const room = new Room(roomId, client, userId); const room = new Room(roomId, client, userId);
@ -93,11 +95,9 @@ describe("MessagePanel", function () {
} as unknown as IRoomState; } as unknown as IRoomState;
const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) => ( const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) => (
<MatrixClientContext.Provider value={client}>
<ScopedRoomContextProvider {...defaultRoomContext} {...roomContext}> <ScopedRoomContextProvider {...defaultRoomContext} {...roomContext}>
<MessagePanel {...defaultProps} {...props} /> <MessagePanel {...defaultProps} {...props} />
</ScopedRoomContextProvider> </ScopedRoomContextProvider>
</MatrixClientContext.Provider>
); );
beforeEach(function () { beforeEach(function () {
@ -107,6 +107,8 @@ describe("MessagePanel", function () {
return arg === "showDisplaynameChanges"; return arg === "showDisplaynameChanges";
}); });
sdkContext = new SdkContextClass();
DMRoomMap.makeShared(client); DMRoomMap.makeShared(client);
}); });
@ -314,7 +316,7 @@ describe("MessagePanel", function () {
} }
it("should show the events", function () { it("should show the events", function () {
const { container } = render(getComponent({ events })); const { container } = render(getComponent({ events }), clientAndSDKContextRenderOptions(client, sdkContext));
// just check we have the right number of tiles for now // just check we have the right number of tiles for now
const tiles = container.getElementsByClassName("mx_EventTile"); const tiles = container.getElementsByClassName("mx_EventTile");
@ -322,7 +324,10 @@ describe("MessagePanel", function () {
}); });
it("should collapse adjacent member events", function () { it("should collapse adjacent member events", function () {
const { container } = render(getComponent({ events: mkMelsEvents() })); const { container } = render(
getComponent({ events: mkMelsEvents() }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
// just check we have the right number of tiles for now // just check we have the right number of tiles for now
const tiles = container.getElementsByClassName("mx_EventTile"); const tiles = container.getElementsByClassName("mx_EventTile");
@ -339,6 +344,7 @@ describe("MessagePanel", function () {
readMarkerEventId: events[4].getId(), readMarkerEventId: events[4].getId(),
readMarkerVisible: true, readMarkerVisible: true,
}), }),
clientAndSDKContextRenderOptions(client, sdkContext),
); );
const tiles = container.getElementsByClassName("mx_EventTile"); const tiles = container.getElementsByClassName("mx_EventTile");
@ -359,6 +365,7 @@ describe("MessagePanel", function () {
readMarkerEventId: melsEvents[4].getId(), readMarkerEventId: melsEvents[4].getId(),
readMarkerVisible: true, readMarkerVisible: true,
}), }),
clientAndSDKContextRenderOptions(client, sdkContext),
); );
const [summary] = container.getElementsByClassName("mx_GenericEventListSummary"); const [summary] = container.getElementsByClassName("mx_GenericEventListSummary");
@ -381,6 +388,7 @@ describe("MessagePanel", function () {
readMarkerEventId: melsEvents[9].getId(), readMarkerEventId: melsEvents[9].getId(),
readMarkerVisible: true, readMarkerVisible: true,
}), }),
clientAndSDKContextRenderOptions(client, sdkContext),
); );
const [summary] = container.getElementsByClassName("mx_GenericEventListSummary"); const [summary] = container.getElementsByClassName("mx_GenericEventListSummary");
@ -406,6 +414,7 @@ describe("MessagePanel", function () {
readMarkerVisible: true, readMarkerVisible: true,
})} })}
</div>, </div>,
clientAndSDKContextRenderOptions(client, sdkContext),
); );
const tiles = container.getElementsByClassName("mx_EventTile"); const tiles = container.getElementsByClassName("mx_EventTile");
@ -448,7 +457,7 @@ describe("MessagePanel", function () {
client.getRoom.mockImplementation((id) => (id === createEvent!.getRoomId() ? room : null)); client.getRoom.mockImplementation((id) => (id === createEvent!.getRoomId() ? room : null));
TestUtilsMatrix.upsertRoomStateEvents(room, events); TestUtilsMatrix.upsertRoomStateEvents(room, events);
const { container } = render(getComponent({ events })); const { container } = render(getComponent({ events }), clientAndSDKContextRenderOptions(client, sdkContext));
// we expect that // we expect that
// - the room creation event, the room encryption event, and Alice inviting Bob, // - the room creation event, the room encryption event, and Alice inviting Bob,
@ -476,7 +485,10 @@ describe("MessagePanel", function () {
}); });
const combinedEvents = [...events, beaconInfoEvent]; const combinedEvents = [...events, beaconInfoEvent];
TestUtilsMatrix.upsertRoomStateEvents(room, combinedEvents); TestUtilsMatrix.upsertRoomStateEvents(room, combinedEvents);
const { container } = render(getComponent({ events: combinedEvents })); const { container } = render(
getComponent({ events: combinedEvents }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
const [summaryTile] = container.getElementsByClassName("mx_GenericEventListSummary"); const [summaryTile] = container.getElementsByClassName("mx_GenericEventListSummary");
@ -498,6 +510,7 @@ describe("MessagePanel", function () {
readMarkerEventId: events[5].getId(), readMarkerEventId: events[5].getId(),
readMarkerVisible: true, readMarkerVisible: true,
}), }),
clientAndSDKContextRenderOptions(client, sdkContext),
); );
// find the <li> which wraps the read marker // find the <li> which wraps the read marker
@ -514,7 +527,10 @@ describe("MessagePanel", function () {
it("should render Date separators for the events", function () { it("should render Date separators for the events", function () {
const events = mkOneDayEvents(); const events = mkOneDayEvents();
const { queryAllByRole } = render(getComponent({ events })); const { queryAllByRole } = render(
getComponent({ events }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
const dates = queryAllByRole("separator"); const dates = queryAllByRole("separator");
expect(dates.length).toEqual(1); expect(dates.length).toEqual(1);
@ -523,7 +539,10 @@ describe("MessagePanel", function () {
it("appends events into summaries during forward pagination without changing key", () => { it("appends events into summaries during forward pagination without changing key", () => {
const events = mkMelsEvents().slice(1, 11); const events = mkMelsEvents().slice(1, 11);
const { container, rerender } = render(getComponent({ events })); const { container, rerender } = render(
getComponent({ events }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
let els = container.getElementsByClassName("mx_GenericEventListSummary"); let els = container.getElementsByClassName("mx_GenericEventListSummary");
expect(els.length).toEqual(1); expect(els.length).toEqual(1);
expect(els[0].getAttribute("data-testid")).toEqual("eventlistsummary-" + events[0].getId()); expect(els[0].getAttribute("data-testid")).toEqual("eventlistsummary-" + events[0].getId());
@ -553,7 +572,10 @@ describe("MessagePanel", function () {
it("prepends events into summaries during backward pagination without changing key", () => { it("prepends events into summaries during backward pagination without changing key", () => {
const events = mkMelsEvents().slice(1, 11); const events = mkMelsEvents().slice(1, 11);
const { container, rerender } = render(getComponent({ events })); const { container, rerender } = render(
getComponent({ events }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
let els = container.getElementsByClassName("mx_GenericEventListSummary"); let els = container.getElementsByClassName("mx_GenericEventListSummary");
expect(els.length).toEqual(1); expect(els.length).toEqual(1);
expect(els[0].getAttribute("data-testid")).toEqual("eventlistsummary-" + events[0].getId()); expect(els[0].getAttribute("data-testid")).toEqual("eventlistsummary-" + events[0].getId());
@ -583,7 +605,10 @@ describe("MessagePanel", function () {
it("assigns different keys to summaries that get split up", () => { it("assigns different keys to summaries that get split up", () => {
const events = mkMelsEvents().slice(1, 11); const events = mkMelsEvents().slice(1, 11);
const { container, rerender } = render(getComponent({ events })); const { container, rerender } = render(
getComponent({ events }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
let els = container.getElementsByClassName("mx_GenericEventListSummary"); let els = container.getElementsByClassName("mx_GenericEventListSummary");
expect(els.length).toEqual(1); expect(els.length).toEqual(1);
expect(els[0].getAttribute("data-testid")).toEqual(`eventlistsummary-${events[0].getId()}`); expect(els[0].getAttribute("data-testid")).toEqual(`eventlistsummary-${events[0].getId()}`);
@ -616,7 +641,7 @@ describe("MessagePanel", function () {
it("doesn't lookup showHiddenEventsInTimeline while rendering", () => { it("doesn't lookup showHiddenEventsInTimeline while rendering", () => {
// We're only interested in the setting lookups that happen on every render, // We're only interested in the setting lookups that happen on every render,
// rather than those happening on first mount, so let's get those out of the way // rather than those happening on first mount, so let's get those out of the way
const { rerender } = render(getComponent({ events: [] })); const { rerender } = render(getComponent({ events: [] }), clientAndSDKContextRenderOptions(client, sdkContext));
// Set up our spy and re-render with new events // Set up our spy and re-render with new events
const settingsSpy = jest.spyOn(SettingsStore, "getValue").mockClear(); const settingsSpy = jest.spyOn(SettingsStore, "getValue").mockClear();
@ -654,7 +679,10 @@ describe("MessagePanel", function () {
ts: 3, ts: 3,
}), }),
]; ];
const { container } = render(getComponent({ events }, { showHiddenEvents: true })); const { container } = render(
getComponent({ events }, { showHiddenEvents: true }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
const els = container.getElementsByClassName("mx_GenericEventListSummary"); const els = container.getElementsByClassName("mx_GenericEventListSummary");
expect(els.length).toEqual(1); expect(els.length).toEqual(1);
@ -678,7 +706,10 @@ describe("MessagePanel", function () {
}), }),
); );
} }
const { asFragment } = render(getComponent({ events }, { showHiddenEvents: false })); const { asFragment } = render(
getComponent({ events }, { showHiddenEvents: false }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
expect(asFragment()).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
@ -699,7 +730,10 @@ describe("MessagePanel", function () {
}), }),
); );
} }
const { asFragment } = render(getComponent({ events }, { showHiddenEvents: false })); const { asFragment } = render(
getComponent({ events }, { showHiddenEvents: false }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
expect(asFragment()).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
@ -720,7 +754,10 @@ describe("MessagePanel", function () {
}), }),
); );
} }
const { asFragment } = render(getComponent({ events }, { showHiddenEvents: true })); const { asFragment } = render(
getComponent({ events }, { showHiddenEvents: true }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
const cpt = asFragment(); const cpt = asFragment();
// Ignore properties that change every time // Ignore properties that change every time
@ -751,7 +788,10 @@ describe("MessagePanel", function () {
content: { topic: "TOPIC" }, content: { topic: "TOPIC" },
}), }),
]; ];
const { container } = render(getComponent({ events, showReadReceipts: true })); const { container } = render(
getComponent({ events, showReadReceipts: true }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
const tiles = container.getElementsByClassName("mx_EventTile"); const tiles = container.getElementsByClassName("mx_EventTile");
expect(tiles.length).toEqual(2); expect(tiles.length).toEqual(2);
@ -784,7 +824,10 @@ describe("MessagePanel", function () {
}, },
true, true,
); );
const { container } = render(getComponent({ events, showReadReceipts: true })); const { container } = render(
getComponent({ events, showReadReceipts: true }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
const tiles = container.getElementsByClassName("mx_EventTile"); const tiles = container.getElementsByClassName("mx_EventTile");
expect(tiles.length).toEqual(2); expect(tiles.length).toEqual(2);

46
test/unit-tests/components/structures/RoomSearchView-test.tsx
View File

@ -20,11 +20,11 @@ import {
} from "matrix-js-sdk/src/matrix"; } from "matrix-js-sdk/src/matrix";
import { RoomSearchView } from "../../../../src/components/structures/RoomSearchView"; import { RoomSearchView } from "../../../../src/components/structures/RoomSearchView";
import ResizeNotifier from "../../../../src/utils/ResizeNotifier"; import { clientAndSDKContextRenderOptions, stubClient } from "../../../test-utils";
import { stubClient } from "../../../test-utils";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext"; import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import { searchPagination, SearchScope } from "../../../../src/Searching"; import { searchPagination, SearchScope } from "../../../../src/Searching";
import { SdkContextClass } from "../../../../src/contexts/SDKContext";
jest.mock("../../../../src/Searching", () => ({ jest.mock("../../../../src/Searching", () => ({
searchPagination: jest.fn(), searchPagination: jest.fn(),
@ -33,13 +33,14 @@ jest.mock("../../../../src/Searching", () => ({
describe("<RoomSearchView/>", () => { describe("<RoomSearchView/>", () => {
const eventMapper = (obj: Partial<IEvent>) => new MatrixEvent(obj); const eventMapper = (obj: Partial<IEvent>) => new MatrixEvent(obj);
const resizeNotifier = new ResizeNotifier();
let client: MatrixClient; let client: MatrixClient;
let sdkContext: SdkContextClass;
let room: Room; let room: Room;
beforeEach(async () => { beforeEach(async () => {
stubClient(); stubClient();
client = MatrixClientPeg.safeGet(); client = MatrixClientPeg.safeGet();
sdkContext = new SdkContextClass();
client.supportsThreads = jest.fn().mockReturnValue(true); client.supportsThreads = jest.fn().mockReturnValue(true);
room = new Room("!room:server", client, client.getSafeUserId()); room = new Room("!room:server", client, client.getSafeUserId());
mocked(client.getRoom).mockReturnValue(room); mocked(client.getRoom).mockReturnValue(room);
@ -60,7 +61,6 @@ describe("<RoomSearchView/>", () => {
term="search term" term="search term"
scope={SearchScope.All} scope={SearchScope.All}
promise={deferred.promise} promise={deferred.promise}
resizeNotifier={resizeNotifier}
className="someClass" className="someClass"
onUpdate={jest.fn()} onUpdate={jest.fn()}
/>, />,
@ -71,7 +71,6 @@ describe("<RoomSearchView/>", () => {
it("should render results when the promise resolves", async () => { it("should render results when the promise resolves", async () => {
render( render(
<MatrixClientContext.Provider value={client}>
<RoomSearchView <RoomSearchView
inProgress={false} inProgress={false}
term="search term" term="search term"
@ -119,11 +118,10 @@ describe("<RoomSearchView/>", () => {
highlights: [], highlights: [],
count: 1, count: 1,
})} })}
resizeNotifier={resizeNotifier}
className="someClass" className="someClass"
onUpdate={jest.fn()} onUpdate={jest.fn()}
/> />,
</MatrixClientContext.Provider>, clientAndSDKContextRenderOptions(client, sdkContext),
); );
await screen.findByText("Before"); await screen.findByText("Before");
@ -133,7 +131,6 @@ describe("<RoomSearchView/>", () => {
it("should highlight words correctly", async () => { it("should highlight words correctly", async () => {
render( render(
<MatrixClientContext.Provider value={client}>
<RoomSearchView <RoomSearchView
inProgress={false} inProgress={false}
term="search term" term="search term"
@ -163,11 +160,10 @@ describe("<RoomSearchView/>", () => {
highlights: ["test"], highlights: ["test"],
count: 1, count: 1,
})} })}
resizeNotifier={resizeNotifier}
className="someClass" className="someClass"
onUpdate={jest.fn()} onUpdate={jest.fn()}
/> />,
</MatrixClientContext.Provider>, clientAndSDKContextRenderOptions(client, sdkContext),
); );
const text = await screen.findByText("Test"); const text = await screen.findByText("Test");
@ -231,17 +227,15 @@ describe("<RoomSearchView/>", () => {
const onUpdate = jest.fn(); const onUpdate = jest.fn();
const { rerender } = render( const { rerender } = render(
<MatrixClientContext.Provider value={client}>
<RoomSearchView <RoomSearchView
inProgress={true} inProgress={true}
term="search term" term="search term"
scope={SearchScope.All} scope={SearchScope.All}
promise={Promise.resolve(searchResults)} promise={Promise.resolve(searchResults)}
resizeNotifier={resizeNotifier}
className="someClass" className="someClass"
onUpdate={onUpdate} onUpdate={onUpdate}
/> />,
</MatrixClientContext.Provider>, clientAndSDKContextRenderOptions(client, sdkContext),
); );
await screen.findByRole("progressbar"); await screen.findByRole("progressbar");
@ -249,17 +243,14 @@ describe("<RoomSearchView/>", () => {
expect(onUpdate).toHaveBeenCalledWith(false, expect.objectContaining({}), null); expect(onUpdate).toHaveBeenCalledWith(false, expect.objectContaining({}), null);
rerender( rerender(
<MatrixClientContext.Provider value={client}>
<RoomSearchView <RoomSearchView
inProgress={false} inProgress={false}
term="search term" term="search term"
scope={SearchScope.All} scope={SearchScope.All}
promise={Promise.resolve(searchResults)} promise={Promise.resolve(searchResults)}
resizeNotifier={resizeNotifier}
className="someClass" className="someClass"
onUpdate={jest.fn()} onUpdate={jest.fn()}
/> />,
</MatrixClientContext.Provider>,
); );
expect(screen.queryByRole("progressbar")).toBeFalsy(); expect(screen.queryByRole("progressbar")).toBeFalsy();
@ -275,7 +266,6 @@ describe("<RoomSearchView/>", () => {
term="search term" term="search term"
scope={SearchScope.All} scope={SearchScope.All}
promise={deferred.promise} promise={deferred.promise}
resizeNotifier={resizeNotifier}
className="someClass" className="someClass"
onUpdate={jest.fn()} onUpdate={jest.fn()}
/> />
@ -299,7 +289,6 @@ describe("<RoomSearchView/>", () => {
term="search term" term="search term"
scope={SearchScope.All} scope={SearchScope.All}
promise={deferred.promise} promise={deferred.promise}
resizeNotifier={resizeNotifier}
className="someClass" className="someClass"
onUpdate={jest.fn()} onUpdate={jest.fn()}
/> />
@ -324,7 +313,6 @@ describe("<RoomSearchView/>", () => {
term="search term" term="search term"
scope={SearchScope.All} scope={SearchScope.All}
promise={deferred.promise} promise={deferred.promise}
resizeNotifier={resizeNotifier}
className="someClass" className="someClass"
onUpdate={onUpdate} onUpdate={onUpdate}
/> />
@ -424,17 +412,15 @@ describe("<RoomSearchView/>", () => {
}; };
render( render(
<MatrixClientContext.Provider value={client}>
<RoomSearchView <RoomSearchView
inProgress={false} inProgress={false}
term="search term" term="search term"
scope={SearchScope.All} scope={SearchScope.All}
promise={Promise.resolve(searchResults)} promise={Promise.resolve(searchResults)}
resizeNotifier={resizeNotifier}
className="someClass" className="someClass"
onUpdate={jest.fn()} onUpdate={jest.fn()}
/> />,
</MatrixClientContext.Provider>, clientAndSDKContextRenderOptions(client, sdkContext),
); );
const beforeNode = await screen.findByText("Before"); const beforeNode = await screen.findByText("Before");
@ -459,7 +445,6 @@ describe("<RoomSearchView/>", () => {
); );
render( render(
<MatrixClientContext.Provider value={client}>
<RoomSearchView <RoomSearchView
inProgress={false} inProgress={false}
term="search term" term="search term"
@ -546,11 +531,10 @@ describe("<RoomSearchView/>", () => {
highlights: [], highlights: [],
count: 1, count: 1,
})} })}
resizeNotifier={resizeNotifier}
className="someClass" className="someClass"
onUpdate={jest.fn()} onUpdate={jest.fn()}
/> />,
</MatrixClientContext.Provider>, clientAndSDKContextRenderOptions(client, sdkContext),
); );
const event1 = await screen.findByText("Room 1"); const event1 = await screen.findByText("Room 1");

3
test/unit-tests/components/structures/RoomView-test.tsx
View File

@ -55,7 +55,6 @@ import { Action } from "../../../../src/dispatcher/actions";
import defaultDispatcher from "../../../../src/dispatcher/dispatcher"; import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
import { type ViewRoomPayload } from "../../../../src/dispatcher/payloads/ViewRoomPayload"; import { type ViewRoomPayload } from "../../../../src/dispatcher/payloads/ViewRoomPayload";
import { RoomView } from "../../../../src/components/structures/RoomView"; import { RoomView } from "../../../../src/components/structures/RoomView";
import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
import SettingsStore from "../../../../src/settings/SettingsStore"; import SettingsStore from "../../../../src/settings/SettingsStore";
import { SettingLevel } from "../../../../src/settings/SettingLevel"; import { SettingLevel } from "../../../../src/settings/SettingLevel";
import DMRoomMap from "../../../../src/utils/DMRoomMap"; import DMRoomMap from "../../../../src/utils/DMRoomMap";
@ -157,7 +156,6 @@ describe("RoomView", () => {
// threepidInvite should be optional on RoomView props // threepidInvite should be optional on RoomView props
// it is treated as optional in RoomView // it is treated as optional in RoomView
threepidInvite={undefined as any} threepidInvite={undefined as any}
resizeNotifier={new ResizeNotifier()}
forceTimeline={false} forceTimeline={false}
ref={ref} ref={ref}
/> />
@ -196,7 +194,6 @@ describe("RoomView", () => {
// threepidInvite should be optional on RoomView props // threepidInvite should be optional on RoomView props
// it is treated as optional in RoomView // it is treated as optional in RoomView
threepidInvite={undefined} threepidInvite={undefined}
resizeNotifier={new ResizeNotifier()}
forceTimeline={false} forceTimeline={false}
onRegistered={jest.fn()} onRegistered={jest.fn()}
/> />

31
test/unit-tests/components/structures/TimelinePanel-test.tsx
View File

@ -33,15 +33,14 @@ import { type Mocked, mocked } from "jest-mock";
import { forEachRight } from "lodash"; import { forEachRight } from "lodash";
import TimelinePanel from "../../../../src/components/structures/TimelinePanel"; import TimelinePanel from "../../../../src/components/structures/TimelinePanel";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import { import {
clientAndSDKContextRenderOptions,
filterConsole, filterConsole,
flushPromises, flushPromises,
mkMembership, mkMembership,
mkRoom, mkRoom,
stubClient, stubClient,
withClientContextRenderOptions,
} from "../../../test-utils"; } from "../../../test-utils";
import { mkThread } from "../../../test-utils/threads"; import { mkThread } from "../../../test-utils/threads";
import { createMessageEventContent } from "../../../test-utils/events"; import { createMessageEventContent } from "../../../test-utils/events";
@ -51,6 +50,7 @@ import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
import { Action } from "../../../../src/dispatcher/actions"; import { Action } from "../../../../src/dispatcher/actions";
import { SettingLevel } from "../../../../src/settings/SettingLevel"; import { SettingLevel } from "../../../../src/settings/SettingLevel";
import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController"; import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController";
import { SdkContextClass } from "../../../../src/contexts/SDKContext";
// ScrollPanel calls this, but jsdom doesn't mock it for us // ScrollPanel calls this, but jsdom doesn't mock it for us
HTMLDivElement.prototype.scrollBy = () => {}; HTMLDivElement.prototype.scrollBy = () => {};
@ -159,6 +159,7 @@ const setupPagination = (
describe("TimelinePanel", () => { describe("TimelinePanel", () => {
let client: Mocked<MatrixClient>; let client: Mocked<MatrixClient>;
let sdkContext: SdkContextClass;
let userId: string; let userId: string;
filterConsole("checkForPreJoinUISI: showing all messages, skipping check"); filterConsole("checkForPreJoinUISI: showing all messages, skipping check");
@ -166,6 +167,7 @@ describe("TimelinePanel", () => {
beforeEach(() => { beforeEach(() => {
client = mocked(stubClient()); client = mocked(stubClient());
userId = client.getSafeUserId(); userId = client.getSafeUserId();
sdkContext = new SdkContextClass();
}); });
describe("read receipts and markers", () => { describe("read receipts and markers", () => {
@ -200,7 +202,7 @@ describe("TimelinePanel", () => {
timelinePanel = ref; timelinePanel = ref;
}} }}
/>, />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()), clientAndSDKContextRenderOptions(client, sdkContext),
); );
await flushPromises(); await flushPromises();
await waitFor(() => expect(timelinePanel).toBeTruthy()); await waitFor(() => expect(timelinePanel).toBeTruthy());
@ -396,7 +398,7 @@ describe("TimelinePanel", () => {
await withScrollPanelMountSpy(async (mountSpy) => { await withScrollPanelMountSpy(async (mountSpy) => {
const { container } = render( const { container } = render(
<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />, <TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()), clientAndSDKContextRenderOptions(client, sdkContext),
); );
await waitFor(() => expectEvents(container, [events[1]])); await waitFor(() => expectEvents(container, [events[1]]));
@ -416,7 +418,7 @@ describe("TimelinePanel", () => {
await withScrollPanelMountSpy(async (mountSpy) => { await withScrollPanelMountSpy(async (mountSpy) => {
const { container } = render( const { container } = render(
<TimelinePanel {...getProps(room, events)} />, <TimelinePanel {...getProps(room, events)} />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()), clientAndSDKContextRenderOptions(client, sdkContext),
); );
await waitFor(() => expectEvents(container, [events[0], events[1]])); await waitFor(() => expectEvents(container, [events[0], events[1]]));
@ -493,7 +495,7 @@ describe("TimelinePanel", () => {
const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear(); const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
render(<TimelinePanel {...props} />); render(<TimelinePanel {...props} />, clientAndSDKContextRenderOptions(client, sdkContext));
const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 }); const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: true }; const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: true };
@ -590,9 +592,8 @@ describe("TimelinePanel", () => {
const replyToEvent = jest.spyOn(thread, "replyToEvent", "get"); const replyToEvent = jest.spyOn(thread, "replyToEvent", "get");
const dom = render( const dom = render(
<MatrixClientContext.Provider value={client}> <TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />,
<TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad /> clientAndSDKContextRenderOptions(client, sdkContext),
</MatrixClientContext.Provider>,
); );
await dom.findByText("RootEvent"); await dom.findByText("RootEvent");
await dom.findByText("ReplyEvent1"); await dom.findByText("ReplyEvent1");
@ -645,9 +646,8 @@ describe("TimelinePanel", () => {
}; };
const dom = render( const dom = render(
<MatrixClientContext.Provider value={client}> <TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />,
<TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad /> clientAndSDKContextRenderOptions(client, sdkContext),
</MatrixClientContext.Provider>,
); );
await dom.findByText("RootEvent"); await dom.findByText("RootEvent");
await dom.findByText("ReplyEvent1"); await dom.findByText("ReplyEvent1");
@ -718,9 +718,8 @@ describe("TimelinePanel", () => {
} }
const { container } = render( const { container } = render(
<MatrixClientContext.Provider value={client}> <TimelinePanel timelineSet={timelineSet} manageReadReceipts={true} sendReadReceiptOnLoad={true} />,
<TimelinePanel timelineSet={timelineSet} manageReadReceipts={true} sendReadReceiptOnLoad={true} /> clientAndSDKContextRenderOptions(client, sdkContext),
</MatrixClientContext.Provider>,
); );
await waitFor(() => expect(screen.queryByRole("progressbar")).toBeNull()); await waitFor(() => expect(screen.queryByRole("progressbar")).toBeNull());
@ -740,7 +739,7 @@ describe("TimelinePanel", () => {
await withScrollPanelMountSpy(async () => { await withScrollPanelMountSpy(async () => {
const { container } = render( const { container } = render(
<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />, <TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()), clientAndSDKContextRenderOptions(client, sdkContext),
); );
await waitFor(() => expectEvents(container, [events[1]])); await waitFor(() => expectEvents(container, [events[1]]));

7
test/unit-tests/components/views/dialogs/MessageEditHistoryDialog-test.tsx
View File

@ -13,10 +13,12 @@ import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix";
import type { MatrixClient } from "matrix-js-sdk/src/matrix"; import type { MatrixClient } from "matrix-js-sdk/src/matrix";
import { flushPromises, mkMessage, stubClient } from "../../../../test-utils"; import { flushPromises, mkMessage, stubClient } from "../../../../test-utils";
import MessageEditHistoryDialog from "../../../../../src/components/views/dialogs/MessageEditHistoryDialog"; import MessageEditHistoryDialog from "../../../../../src/components/views/dialogs/MessageEditHistoryDialog";
import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
describe("<MessageEditHistory />", () => { describe("<MessageEditHistory />", () => {
const roomId = "!aroom:example.com"; const roomId = "!aroom:example.com";
let client: jest.Mocked<MatrixClient>; let client: jest.Mocked<MatrixClient>;
let sdkContext: SdkContextClass;
let event: MatrixEvent; let event: MatrixEvent;
beforeEach(() => { beforeEach(() => {
@ -27,10 +29,13 @@ describe("<MessageEditHistory />", () => {
room: "!room:example.com", room: "!room:example.com",
msg: "My Great Message", msg: "My Great Message",
}); });
sdkContext = new SdkContextClass();
}); });
async function renderComponent(): Promise<RenderResult> { 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 waitForElementToBeRemoved(() => result.queryByRole("progressbar"));
await flushPromises(); await flushPromises();
return result; return result;

10
test/unit-tests/components/views/elements/AppTile-test.tsx
View File

@ -21,7 +21,7 @@ import {
import RightPanel from "../../../../../src/components/structures/RightPanel"; import RightPanel from "../../../../../src/components/structures/RightPanel";
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
import ResizeNotifier from "../../../../../src/utils/ResizeNotifier"; import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
import { stubClient } from "../../../../test-utils"; import { clientAndSDKContextRenderOptions, stubClient } from "../../../../test-utils";
import { Action } from "../../../../../src/dispatcher/actions"; import { Action } from "../../../../../src/dispatcher/actions";
import dis from "../../../../../src/dispatcher/dispatcher"; import dis from "../../../../../src/dispatcher/dispatcher";
import DMRoomMap from "../../../../../src/utils/DMRoomMap"; 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 { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore";
import { ModuleRunner } from "../../../../../src/modules/ModuleRunner"; import { ModuleRunner } from "../../../../../src/modules/ModuleRunner";
import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks"; import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
jest.mock("../../../../../src/stores/OwnProfileStore", () => ({ jest.mock("../../../../../src/stores/OwnProfileStore", () => ({
OwnProfileStore: { OwnProfileStore: {
@ -53,6 +54,7 @@ jest.mock("../../../../../src/stores/OwnProfileStore", () => ({
describe("AppTile", () => { describe("AppTile", () => {
let cli: MatrixClient; let cli: MatrixClient;
let sdkContext: SdkContextClass;
let r1: Room; let r1: Room;
let r2: Room; let r2: Room;
const resizeNotifier = new ResizeNotifier(); const resizeNotifier = new ResizeNotifier();
@ -116,6 +118,7 @@ describe("AppTile", () => {
}); });
beforeEach(() => { beforeEach(() => {
sdkContext = new SdkContextClass();
jest.spyOn(SettingsStore, "getValue").mockRestore(); jest.spyOn(SettingsStore, "getValue").mockRestore();
}); });
@ -299,9 +302,8 @@ describe("AppTile", () => {
// Run initial render with room 1, and also running lifecycle methods // Run initial render with room 1, and also running lifecycle methods
const renderResult = render( const renderResult = render(
<MatrixClientContext.Provider value={cli}> <AppsDrawer userId={cli.getSafeUserId()} room={r1} />,
<AppsDrawer userId={cli.getSafeUserId()} room={r1} resizeNotifier={resizeNotifier} /> clientAndSDKContextRenderOptions(cli, sdkContext),
</MatrixClientContext.Provider>,
); );
expect(renderResult.getByText("Example 1")).toBeInTheDocument(); expect(renderResult.getByText("Example 1")).toBeInTheDocument();

24
test/unit-tests/components/views/rooms/AppsDrawer-test.tsx
View File

@ -13,23 +13,23 @@ import { render } from "jest-matrix-react";
import { stubClient } from "../../../../test-utils"; import { stubClient } from "../../../../test-utils";
import AppsDrawer from "../../../../../src/components/views/rooms/AppsDrawer"; import AppsDrawer from "../../../../../src/components/views/rooms/AppsDrawer";
import SdkConfig from "../../../../../src/SdkConfig"; import SdkConfig from "../../../../../src/SdkConfig";
import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
import { WidgetLayoutStore } from "../../../../../src/stores/widgets/WidgetLayoutStore"; import { WidgetLayoutStore } from "../../../../../src/stores/widgets/WidgetLayoutStore";
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext"; import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
const ROOM_ID = "!room:id"; const ROOM_ID = "!room:id";
describe("AppsDrawer", () => { describe("AppsDrawer", () => {
let client: MatrixClient; let client: MatrixClient;
let room: Room; let room: Room;
let dummyResizeNotifier: ResizeNotifier; let sdkContext: SdkContextClass;
beforeEach(async () => { beforeEach(async () => {
client = stubClient(); client = stubClient();
room = new Room(ROOM_ID, client, client.getUserId()!, { room = new Room(ROOM_ID, client, client.getUserId()!, {
pendingEventOrdering: PendingEventOrdering.Detached, pendingEventOrdering: PendingEventOrdering.Detached,
}); });
dummyResizeNotifier = new ResizeNotifier(); sdkContext = new SdkContextClass();
}); });
afterEach(() => { afterEach(() => {
@ -58,17 +58,13 @@ describe("AppsDrawer", () => {
return []; return [];
}); });
const { container } = render( const { container } = render(<AppsDrawer userId={client.getUserId()!} room={room} showApps={true} />, {
<AppsDrawer wrapper: ({ ...rest }) => (
userId={client.getUserId()!} <SDKContext.Provider value={sdkContext}>
room={room} <MatrixClientContext.Provider value={client} {...rest} />
resizeNotifier={dummyResizeNotifier} </SDKContext.Provider>
showApps={true} ),
/>, });
{
wrapper: ({ ...rest }) => <MatrixClientContext.Provider value={client} {...rest} />,
},
);
const appsDrawerResizer = container.getElementsByClassName("mx_AppsDrawer_resizer")[0] as HTMLElement; const appsDrawerResizer = container.getElementsByClassName("mx_AppsDrawer_resizer")[0] as HTMLElement;
expect(appsDrawerResizer.style.height).toBe("500px"); expect(appsDrawerResizer.style.height).toBe("500px");

30
test/unit-tests/components/views/rooms/PinnedMessageBanner-test.tsx
View File

@ -14,13 +14,13 @@ import userEvent from "@testing-library/user-event";
import * as pinnedEventHooks from "../../../../../src/hooks/usePinnedEvents"; import * as pinnedEventHooks from "../../../../../src/hooks/usePinnedEvents";
import { PinnedMessageBanner } from "../../../../../src/components/views/rooms/PinnedMessageBanner"; import { PinnedMessageBanner } from "../../../../../src/components/views/rooms/PinnedMessageBanner";
import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks"; 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 dis from "../../../../../src/dispatcher/dispatcher";
import RightPanelStore from "../../../../../src/stores/right-panel/RightPanelStore"; import RightPanelStore from "../../../../../src/stores/right-panel/RightPanelStore";
import { RightPanelPhases } from "../../../../../src/stores/right-panel/RightPanelStorePhases"; import { RightPanelPhases } from "../../../../../src/stores/right-panel/RightPanelStorePhases";
import { UPDATE_EVENT } from "../../../../../src/stores/AsyncStore"; import { UPDATE_EVENT } from "../../../../../src/stores/AsyncStore";
import { Action } from "../../../../../src/dispatcher/actions"; import { Action } from "../../../../../src/dispatcher/actions";
import ResizeNotifier from "../../../../../src/utils/ResizeNotifier.ts"; import { SdkContextClass } from "../../../../../src/contexts/SDKContext.ts";
describe("<PinnedMessageBanner />", () => { describe("<PinnedMessageBanner />", () => {
const userId = "@alice:server.org"; const userId = "@alice:server.org";
@ -29,12 +29,12 @@ describe("<PinnedMessageBanner />", () => {
let mockClient: MatrixClient; let mockClient: MatrixClient;
let room: Room; let room: Room;
let permalinkCreator: RoomPermalinkCreator; let permalinkCreator: RoomPermalinkCreator;
let resizeNotifier: ResizeNotifier; let sdkContext: SdkContextClass;
beforeEach(() => { beforeEach(() => {
mockClient = stubClient(); mockClient = stubClient();
room = new Room(roomId, mockClient, userId); room = new Room(roomId, mockClient, userId);
permalinkCreator = new RoomPermalinkCreator(room); permalinkCreator = new RoomPermalinkCreator(room);
resizeNotifier = new ResizeNotifier(); sdkContext = new SdkContextClass();
jest.spyOn(dis, "dispatch").mockReturnValue(undefined); jest.spyOn(dis, "dispatch").mockReturnValue(undefined);
}); });
@ -80,8 +80,8 @@ describe("<PinnedMessageBanner />", () => {
*/ */
function renderBanner() { function renderBanner() {
return render( return render(
<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} resizeNotifier={resizeNotifier} />, <PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} />,
withClientContextRenderOptions(mockClient), clientAndSDKContextRenderOptions(mockClient, sdkContext),
); );
} }
@ -153,9 +153,7 @@ describe("<PinnedMessageBanner />", () => {
event3.getId()!, event3.getId()!,
]); ]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2, event3]); jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2, event3]);
rerender( rerender(<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} />);
<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} resizeNotifier={resizeNotifier} />,
);
await expect(screen.findByText("Third pinned message")).resolves.toBeVisible(); await expect(screen.findByText("Third pinned message")).resolves.toBeVisible();
expect(asFragment()).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
@ -226,7 +224,7 @@ describe("<PinnedMessageBanner />", () => {
describe("Notify the timeline to resize", () => { describe("Notify the timeline to resize", () => {
beforeEach(() => { beforeEach(() => {
jest.spyOn(resizeNotifier, "notifyTimelineHeightChanged"); jest.spyOn(sdkContext.resizeNotifier, "notifyTimelineHeightChanged");
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!, event2.getId()!]); jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!, event2.getId()!]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2]); jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2]);
}); });
@ -235,7 +233,7 @@ describe("<PinnedMessageBanner />", () => {
renderBanner(); renderBanner();
await expect(screen.findByText("Second pinned message")).resolves.toBeVisible(); await expect(screen.findByText("Second pinned message")).resolves.toBeVisible();
// The banner is displayed, so we need to resize the timeline // 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( await userEvent.click(
screen.getByRole("button", { screen.getByRole("button", {
@ -244,23 +242,21 @@ describe("<PinnedMessageBanner />", () => {
); );
await expect(screen.findByText("First pinned message")).resolves.toBeVisible(); await expect(screen.findByText("First pinned message")).resolves.toBeVisible();
// The banner is already displayed, so we don't need to resize the timeline // 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 () => { it("should notify the timeline to resize when we hide the banner", async () => {
const { rerender } = renderBanner(); const { rerender } = renderBanner();
await expect(screen.findByText("Second pinned message")).resolves.toBeVisible(); await expect(screen.findByText("Second pinned message")).resolves.toBeVisible();
// The banner is displayed, so we need to resize the timeline // 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 // The banner has no event to display and is hidden
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([]); jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([]); jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([]);
rerender( rerender(<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} />);
<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} resizeNotifier={resizeNotifier} />,
);
// The timeline should be resized // The timeline should be resized
expect(resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(2); expect(sdkContext.resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(2);
}); });
}); });

57
test/unit-tests/components/views/voip/LegacyCallViewForRoom-test.tsx
View File

@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
*/ */
import React from "react"; 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 { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
import { CallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/callEventHandler"; 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 { mkStubRoom, stubClient } from "../../../../test-utils";
import DMRoomMap from "../../../../../src/utils/DMRoomMap"; import DMRoomMap from "../../../../../src/utils/DMRoomMap";
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
import LegacyCallHandler from "../../../../../src/LegacyCallHandler"; import LegacyCallHandler from "../../../../../src/LegacyCallHandler";
import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
jest.mock("../../../../../src/components/views/voip/LegacyCallView", () => jest.fn(() => "LegacyCallView")); jest.mock("../../../../../src/components/views/voip/LegacyCallView", () => jest.fn(() => "LegacyCallView"));
describe("LegacyCallViewForRoom", () => { describe("LegacyCallViewForRoom", () => {
const LegacyCallViewMock = LegacyCallView as unknown as jest.Mock; const LegacyCallViewMock = LegacyCallView as unknown as jest.Mock;
let sdkContext: SdkContextClass;
beforeEach(() => { beforeEach(() => {
stubClient();
sdkContext = new SdkContextClass();
LegacyCallViewMock.mockClear(); 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(); const callHandler = new LegacyCallHandler();
callHandler.start(); callHandler.start();
jest.spyOn(LegacyCallHandler, "instance", "get").mockImplementation(() => callHandler); jest.spyOn(LegacyCallHandler, "instance", "get").mockImplementation(() => callHandler);
@ -45,16 +48,14 @@ describe("LegacyCallViewForRoom", () => {
const cli = MatrixClientPeg.safeGet(); const cli = MatrixClientPeg.safeGet();
cli.emit(CallEventHandlerEvent.Incoming, call); cli.emit(CallEventHandlerEvent.Incoming, call);
const { rerender } = render( const { rerender } = render(<LegacyCallViewForRoom roomId={call.roomId} />);
<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />,
);
let props = LegacyCallViewMock.mock.lastCall![0]; let props = LegacyCallViewMock.mock.lastCall![0];
expect(props.sidebarShown).toBeTruthy(); // Sidebar defaults to shown expect(props.sidebarShown).toBeTruthy(); // Sidebar defaults to shown
props.setSidebarShown(false); // Hide the sidebar props.setSidebarShown(false); // Hide the sidebar
rerender(<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />); rerender(<LegacyCallViewForRoom roomId={call.roomId} />);
console.log(LegacyCallViewMock.mock); console.log(LegacyCallViewMock.mock);
@ -64,9 +65,47 @@ describe("LegacyCallViewForRoom", () => {
rerender(<div> </div>); // Destroy the LegacyCallViewForRoom and LegacyCallView rerender(<div> </div>); // Destroy the LegacyCallViewForRoom and LegacyCallView
LegacyCallViewMock.mockClear(); // Drop stored LegacyCallView props LegacyCallViewMock.mockClear(); // Drop stored LegacyCallView props
rerender(<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />); rerender(<LegacyCallViewForRoom roomId={call.roomId} />);
props = LegacyCallViewMock.mock.lastCall![0]; props = LegacyCallViewMock.mock.lastCall![0];
expect(props.sidebarShown).toBeFalsy(); // Value was remembered 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();
});
}); });