mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-11-08 12:11:07 +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 SearchWarning, { WarningKind } from "../views/elements/SearchWarning";
import BaseCard from "../views/right_panel/BaseCard";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import TimelinePanel from "./TimelinePanel";
import Spinner from "../views/elements/Spinner";
import { Layout } from "../../settings/enums/Layout";
@ -39,7 +38,6 @@ import { ScopedRoomContextProvider } from "../../contexts/ScopedRoomContext.tsx"
interface IProps {
roomId: string;
onClose: () => void;
resizeNotifier: ResizeNotifier;
}
interface IState {
@ -294,7 +292,6 @@ class FilePanel extends React.Component<IProps, IState> {
timelineSet={this.state.timelineSet}
showUrlPreview={false}
onPaginationRequest={this.onPaginationRequest}
resizeNotifier={this.props.resizeNotifier}
empty={emptyState}
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 ResizeHandle from "../views/elements/ResizeHandle";
import { CollapseDistributor, Resizer } from "../../resizer";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import PlatformPeg from "../../PlatformPeg";
import { DefaultTagID } from "../../stores/room-list/models";
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 { MatrixClientContextProvider } from "./MatrixClientContextProvider";
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)
// so each pinned message may trigger a request. Limit the number per room for sanity.
@ -86,7 +86,6 @@ interface IProps {
// transitioned to PWLU)
onRegistered: (credentials: IMatrixClientCreds) => Promise<MatrixClient>;
hideToSRUsers: boolean;
resizeNotifier: ResizeNotifier;
// eslint-disable-next-line camelcase
page_type?: string;
autoJoin?: boolean;
@ -134,8 +133,11 @@ class LoggedInView extends React.Component<IProps, IState> {
protected timezoneProfileUpdateRef?: string[];
protected resizer?: Resizer<ICollapseConfig, CollapseItem>;
public constructor(props: IProps) {
super(props);
public static contextType = SDKContext;
declare public context: React.ContextType<typeof SDKContext>;
public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
super(props, context);
this.state = {
syncErrorData: undefined,
@ -281,15 +283,15 @@ class LoggedInView extends React.Component<IProps, IState> {
},
onResized: (size) => {
panelSize = size;
this.props.resizeNotifier.notifyLeftHandleResized();
this.context.resizeNotifier.notifyLeftHandleResized();
},
onResizeStart: () => {
this.props.resizeNotifier.startResizing();
this.context.resizeNotifier.startResizing();
},
onResizeStop: () => {
// Always save the lhs size for the new room list.
if (useNewRoomList || !panelCollapsed) window.localStorage.setItem("mx_lhs_size", "" + panelSize);
this.props.resizeNotifier.stopResizing();
this.context.resizeNotifier.stopResizing();
},
isItemCollapsed: (domNode) => {
// New rooms list does not support collapsing.
@ -681,7 +683,6 @@ class LoggedInView extends React.Component<IProps, IState> {
threepidInvite={this.props.threepidInvite}
oobData={this.props.roomOobData}
key={this.props.currentRoomId || "roomview"}
resizeNotifier={this.props.resizeNotifier}
justCreatedOpts={this.props.roomJustCreatedOpts}
forceTimeline={this.props.forceTimeline}
/>
@ -695,7 +696,7 @@ class LoggedInView extends React.Component<IProps, IState> {
case PageTypes.UserView:
if (!!this.props.currentUserId) {
pageElement = (
<UserView userId={this.props.currentUserId} resizeNotifier={this.props.resizeNotifier} />
<UserView userId={this.props.currentUserId} resizeNotifier={this.context.resizeNotifier} />
);
}
break;
@ -748,7 +749,7 @@ class LoggedInView extends React.Component<IProps, IState> {
<LeftPanel
pageType={this.props.page_type as PageTypes}
isMinimized={shouldUseMinimizedUI || false}
resizeNotifier={this.props.resizeNotifier}
resizeNotifier={this.context.resizeNotifier}
/>
</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 WebPanelResize } from "@matrix-org/analytics-events/types/typescript/WebPanelResize";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import { PosthogAnalytics } from "../../PosthogAnalytics.ts";
import { SDKContext } from "../../contexts/SDKContext.ts";
interface IProps {
resizeNotifier: ResizeNotifier;
collapsedRhs?: boolean;
panel?: JSX.Element;
children: ReactNode;
@ -36,16 +35,23 @@ interface IProps {
}
export default class MainSplit extends React.Component<IProps> {
public static contextType = SDKContext;
declare public context: React.ContextType<typeof SDKContext>;
public static defaultProps = {
defaultSize: 320,
};
public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
super(props, context);
}
private onResizeStart = (): void => {
this.props.resizeNotifier.startResizing();
this.context.resizeNotifier.startResizing();
};
private onResize = (): void => {
this.props.resizeNotifier.notifyRightHandleResized();
this.context.resizeNotifier.notifyRightHandleResized();
};
private get sizeSettingStorageKey(): string {
@ -63,7 +69,7 @@ export default class MainSplit extends React.Component<IProps> {
delta: NumberSize,
): void => {
const newSize = this.loadSidePanelSize().width + delta.width;
this.props.resizeNotifier.stopResizing();
this.context.resizeNotifier.stopResizing();
window.localStorage.setItem(this.sizeSettingStorageKey, newSize.toString());
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 ThemeController from "../../settings/controllers/ThemeController";
import { startAnyRegistrationFlow } from "../../Registration";
import ResizeNotifier from "../../utils/ResizeNotifier";
import AutoDiscoveryUtils from "../../utils/AutoDiscoveryUtils";
import { calculateRoomVia, makeRoomPermalink } from "../../utils/permalinks/Permalinks";
import ThemeWatcher, { ThemeWatcherEvent } from "../../settings/watchers/ThemeWatcher";
@ -199,7 +198,6 @@ interface IState {
// and disable it when there are no dialogs
hideToSRUsers: boolean;
syncError: Error | null;
resizeNotifier: ResizeNotifier;
serverConfig?: ValidatedServerConfig;
ready: boolean;
threepidInvite?: IThreepidInvite;
@ -254,7 +252,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
isMobileRegistration: false,
syncError: null, // If the current syncing status is ERROR, the error object, otherwise null.
resizeNotifier: new ResizeNotifier(),
ready: false,
};
@ -459,7 +456,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
UIStore.instance.on(UI_EVENTS.Resize, this.handleResize);
// For PersistentElement
this.state.resizeNotifier.on("middlePanelResized", this.dispatchTimelineResize);
this.stores.resizeNotifier.on("middlePanelResized", this.dispatchTimelineResize);
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.fontWatcher?.stop();
UIStore.destroy();
this.state.resizeNotifier.removeListener("middlePanelResized", this.dispatchTimelineResize);
this.stores.resizeNotifier.removeListener("middlePanelResized", this.dispatchTimelineResize);
window.removeEventListener("resize", this.onWindowResized);
}
@ -828,7 +825,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
collapseLhs: true,
},
() => {
this.state.resizeNotifier.notifyLeftHandleResized();
this.stores.resizeNotifier.notifyLeftHandleResized();
},
);
break;
@ -838,7 +835,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
collapseLhs: false,
},
() => {
this.state.resizeNotifier.notifyLeftHandleResized();
this.stores.resizeNotifier.notifyLeftHandleResized();
},
);
break;
@ -1957,7 +1954,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
}
this.prevWindowWidth = width;
this.state.resizeNotifier.notifyWindowResized();
this.stores.resizeNotifier.notifyWindowResized();
};
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 TimelineSeparator, { SeparatorKind } from "../views/messages/TimelineSeparator";
import ErrorBoundary from "../views/elements/ErrorBoundary";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import Spinner from "../views/elements/Spinner";
import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
import type EditorStateTransfer from "../../utils/EditorStateTransfer";
@ -167,7 +166,6 @@ interface IProps {
// which layout to use
layout?: Layout;
resizeNotifier?: ResizeNotifier;
permalinkCreator?: RoomPermalinkCreator;
editState?: EditorStateTransfer;
@ -1064,7 +1062,6 @@ export default class MessagePanel extends React.Component<IProps, IState> {
onUnfillRequest={this.props.onUnfillRequest}
style={style}
stickyBottom={this.props.stickyBottom}
resizeNotifier={this.props.resizeNotifier}
fixedChildren={ircResizer}
>
{topSpinner}

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

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

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

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

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

@ -151,7 +151,6 @@ interface IRoomProps {
threepidInvite?: IThreepidInvite;
oobData?: IOOBData;
resizeNotifier: ResizeNotifier;
justCreatedOpts?: IOpts;
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")}>
<FileDropTarget parent={props.roomView.current} onFileDrop={props.onFileDrop} room={room} />
<div className="mx_RoomView_timeline">
<ScrollPanel className="mx_RoomView_messagePanel" resizeNotifier={props.resizeNotifier}>
<ScrollPanel className="mx_RoomView_messagePanel">
{encryptionTile}
<NewRoomIntro />
</ScrollPanel>
@ -337,7 +336,6 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
interface ILocalRoomCreateLoaderProps {
localRoom: LocalRoom;
names: string;
resizeNotifier: ResizeNotifier;
mainSplitContentType: MainSplitContentType;
}
@ -894,7 +892,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
this.context.widgetStore.on(UPDATE_EVENT, this.onWidgetStoreUpdate);
this.props.resizeNotifier.on("isResizing", this.onIsResizing);
this.context.resizeNotifier.on("isResizing", this.onIsResizing);
this.settingWatchers = [
SettingsStore.watchSetting("layout", null, (...[, , , value]) =>
@ -1010,7 +1008,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
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) {
this.context.widgetLayoutStore.off(
@ -2056,7 +2054,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
<LocalRoomCreateLoader
localRoom={localRoom}
names={names}
resizeNotifier={this.props.resizeNotifier}
mainSplitContentType={this.state.mainSplitContentType}
/>
</ScopedRoomContextProvider>
@ -2069,7 +2066,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
<LocalRoomView
e2eStatus={this.state.e2eStatus}
localRoom={localRoom}
resizeNotifier={this.props.resizeNotifier}
resizeNotifier={this.context.resizeNotifier}
permalinkCreator={this.permalinkCreator}
roomView={this.roomView}
onFileDrop={this.onFileDrop}
@ -2083,7 +2080,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
return (
<ScopedRoomContextProvider {...this.state}>
<WaitingForThirdPartyRoomView
resizeNotifier={this.props.resizeNotifier}
resizeNotifier={this.context.resizeNotifier}
roomView={this.roomView}
inviteEvent={inviteEvent}
/>
@ -2402,7 +2399,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
<SpaceRoomView
space={this.state.room}
justCreatedOpts={this.props.justCreatedOpts}
resizeNotifier={this.props.resizeNotifier}
resizeNotifier={this.context.resizeNotifier}
permalinkCreator={this.permalinkCreator}
onJoinButtonClicked={this.onJoinButtonClicked}
onRejectButtonClicked={
@ -2419,18 +2416,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
room={this.state.room}
userId={this.context.client.getSafeUserId()}
showApps={this.state.showApps}
resizeNotifier={this.props.resizeNotifier}
>
{aux}
</AuxPanel>
);
const pinnedMessageBanner = (
<PinnedMessageBanner
room={this.state.room}
permalinkCreator={this.permalinkCreator}
resizeNotifier={this.props.resizeNotifier}
/>
<PinnedMessageBanner room={this.state.room} permalinkCreator={this.permalinkCreator} />
);
let messageComposer;
@ -2444,7 +2436,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
<MessageComposer
room={this.state.room}
e2eStatus={this.state.e2eStatus}
resizeNotifier={this.props.resizeNotifier}
resizeNotifier={this.context.resizeNotifier}
replyToEvent={this.state.replyToEvent}
permalinkCreator={this.permalinkCreator}
/>
@ -2466,7 +2458,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
promise={this.state.search.promise}
abortController={this.state.search.abortController}
inProgress={!!this.state.search.inProgress}
resizeNotifier={this.props.resizeNotifier}
className={this.messagePanelClassNames}
onUpdate={this.onSearchUpdate}
/>
@ -2501,7 +2492,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
className={this.messagePanelClassNames}
membersLoaded={this.state.membersLoaded}
permalinkCreator={this.permalinkCreator}
resizeNotifier={this.props.resizeNotifier}
showReactions={true}
layout={this.state.layout}
editState={this.state.editState}
@ -2533,7 +2523,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
const rightPanel = showRightPanel ? (
<RightPanel
room={this.state.room}
resizeNotifier={this.props.resizeNotifier}
resizeNotifier={this.context.resizeNotifier}
permalinkCreator={this.permalinkCreator}
e2eStatus={this.state.e2eStatus}
onSearchChange={this.onSearchChange}
@ -2594,7 +2584,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
<AppsDrawer
room={this.state.room}
userId={this.context.client.getSafeUserId()}
resizeNotifier={this.props.resizeNotifier}
showApps={true}
role="main"
/>
@ -2639,7 +2628,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
<ErrorBoundary>
<MainSplit
panel={rightPanel}
resizeNotifier={this.props.resizeNotifier}
sizeKey={sizeKey}
defaultSize={defaultSize}
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 AutoHideScrollbar from "./AutoHideScrollbar";
import { getKeyBindingsManager } from "../../KeyBindingsManager";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import { SDKContext } from "../../contexts/SDKContext";
// The amount of extra scroll distance to allow prior to unfilling.
// See getExcessHeight.
@ -58,10 +58,6 @@ interface IProps {
*/
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
* of the wrapper
*/
@ -188,15 +184,18 @@ export default class ScrollPanel extends React.Component<IProps> {
private heightUpdateInProgress = false;
public divScroll: HTMLDivElement | null = null;
public constructor(props: IProps) {
super(props);
public static contextType = SDKContext;
declare public context: React.ContextType<typeof SDKContext>;
public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
super(props, context);
this.resetScrollState();
}
public componentDidMount(): void {
this.unmounted = false;
this.props.resizeNotifier?.on("middlePanelResizedNoisy", this.onResize);
this.context?.resizeNotifier?.on("middlePanelResizedNoisy", this.onResize);
this.checkScroll();
}
@ -217,14 +216,14 @@ export default class ScrollPanel extends React.Component<IProps> {
// (We could use isMounted(), but facebook have deprecated that.)
this.unmounted = true;
this.props.resizeNotifier?.removeListener("middlePanelResizedNoisy", this.onResize);
this.context?.resizeNotifier?.removeListener("middlePanelResizedNoisy", this.onResize);
this.divScroll = null;
}
private onScroll = (ev: Event): void => {
// 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);
this.scrollTimeout?.restart();
this.saveScrollState();

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

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

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

@ -47,7 +47,6 @@ import shouldHideEvent from "../../shouldHideEvent";
import MessagePanel from "./MessagePanel";
import { type IScrollState } from "./ScrollPanel";
import { type ActionPayload } from "../../dispatcher/payloads";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
import Spinner from "../views/elements/Spinner";
import type EditorStateTransfer from "../../utils/EditorStateTransfer";
@ -123,7 +122,6 @@ interface IProps {
// whether to always show timestamps for an event
alwaysShowTimestamps?: boolean;
resizeNotifier?: ResizeNotifier;
editState?: EditorStateTransfer;
permalinkCreator?: RoomPermalinkCreator;
membersLoaded?: boolean;
@ -1849,7 +1847,6 @@ class TimelinePanel extends React.Component<IProps, IState> {
this.state.alwaysShowTimestamps
}
className={this.props.className}
resizeNotifier={this.props.resizeNotifier}
getRelationsForEvent={this.getRelationsForEvent}
editState={this.props.editState}
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 (
<MainSplit
panel={panel}
resizeNotifier={this.props.resizeNotifier}
defaultSize={420}
analyticsRoomType="user_profile"
>
<MainSplit panel={panel} defaultSize={420} analyticsRoomType="user_profile">
<HomePage />
</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!} />
<main className="mx_RoomView_body" ref={roomView}>
<div className="mx_RoomView_timeline">
<ScrollPanel className="mx_RoomView_messagePanel" resizeNotifier={resizeNotifier}>
<ScrollPanel className="mx_RoomView_messagePanel">
<EventTileBubble
className="mx_cryptoEvent mx_cryptoEvent_icon"
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}
editState={this.state.editState}
eventId={this.state.initialEventId}
resizeNotifier={this.props.resizeNotifier}
highlightedEventId={highlightedEventId}
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 Spinner from "../elements/Spinner";
import SdkConfig from "../../../SdkConfig";
import { SDKContext } from "../../../contexts/SDKContext";
interface IProps {
userId: string;
room: Room;
resizeNotifier: ResizeNotifier;
showApps?: boolean; // Should apps be rendered
maxHeight: number;
role?: AriaRole;
@ -57,8 +57,11 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
showApps: true,
};
public constructor(props: IProps) {
super(props);
public static contextType = SDKContext;
declare public context: React.ContextType<typeof SDKContext>;
public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
super(props, context);
this.state = {
apps: this.getApps(),
@ -73,7 +76,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
public componentDidMount(): void {
this.unmounted = false;
this.props.resizeNotifier.on("isResizing", this.onIsResizing);
this.context.resizeNotifier.on("isResizing", this.onIsResizing);
ScalarMessaging.startListening();
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) {
this.resizer.detach();
}
this.props.resizeNotifier.off("isResizing", this.onIsResizing);
this.context.resizeNotifier.off("isResizing", this.onIsResizing);
}
private onIsResizing = (resizing: boolean): void => {
@ -281,7 +284,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
className="mx_AppsDrawer_resizer"
handleWrapperClass="mx_AppsDrawer_resizer_container"
handleClass="mx_AppsDrawer_resizer_container_handle"
resizeNotifier={this.props.resizeNotifier}
resizeNotifier={this.context.resizeNotifier}
>
{appContainers}
</PersistentVResizer>

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

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

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

@ -6,7 +6,7 @@
* 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 { Button } from "@vector-im/compound-web";
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 PosthogTrackers from "../../../PosthogTrackers.ts";
import { EventPreview } from "./EventPreview.tsx";
import type ResizeNotifier from "../../../utils/ResizeNotifier";
import { SDKContext } from "../../../contexts/SDKContext.ts";
/**
* The props for the {@link PinnedMessageBanner} component.
@ -39,20 +39,12 @@ interface PinnedMessageBannerProps {
* The room where the banner is displayed
*/
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.
*/
export function PinnedMessageBanner({
room,
permalinkCreator,
resizeNotifier,
}: PinnedMessageBannerProps): JSX.Element | null {
export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBannerProps): JSX.Element | null {
const pinnedEventIds = usePinnedEvents(room);
const pinnedEvents = useSortedFetchedPinnedEvents(room, pinnedEventIds);
const eventCount = pinnedEvents.length;
@ -67,7 +59,7 @@ export function PinnedMessageBanner({
const isLastMessage = currentEventIndex === eventCount - 1;
const pinnedEvent = pinnedEvents[currentEventIndex];
useNotifyTimeline(pinnedEvent, resizeNotifier);
useNotifyTimeline(pinnedEvent);
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.
* @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);
useEffect(() => {
// 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 LegacyCallView from "./LegacyCallView";
import type ResizeNotifier from "../../../utils/ResizeNotifier";
import { SDKContext } from "../../../contexts/SDKContext";
interface IProps {
// What room we should display the call for
roomId: string;
resizeNotifier: ResizeNotifier;
showApps?: boolean;
}
@ -33,8 +31,11 @@ interface IState {
* or nothing if there is no call in that room.
*/
export default class LegacyCallViewForRoom extends React.Component<IProps, IState> {
public constructor(props: IProps) {
super(props);
public static contextType = SDKContext;
declare public context: React.ContextType<typeof SDKContext>;
public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
super(props, context);
const call = this.getCall();
this.state = {
call,
@ -73,15 +74,15 @@ export default class LegacyCallViewForRoom extends React.Component<IProps, IStat
}
private onResizeStart = (): void => {
this.props.resizeNotifier.startResizing();
this.context.resizeNotifier.startResizing();
};
private onResize = (): void => {
this.props.resizeNotifier.notifyTimelineHeightChanged();
this.context.resizeNotifier.notifyTimelineHeightChanged();
};
private onResizeStop = (): void => {
this.props.resizeNotifier.stopResizing();
this.context.resizeNotifier.stopResizing();
};
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 { OidcClientStore } from "../stores/oidc/OidcClientStore";
import WidgetStore from "../stores/WidgetStore";
import ResizeNotifier from "../utils/ResizeNotifier";
// This context is available to components under MatrixChat,
// the context must not be used by components outside a SdkContextClass tree.
@ -64,6 +65,7 @@ export class SdkContextClass {
protected _TypingStore?: TypingStore;
protected _UserProfilesStore?: UserProfilesStore;
protected _OidcClientStore?: OidcClientStore;
protected _ResizeNotifier?: ResizeNotifier;
/**
* Automatically construct stores which need to be created eagerly so they can register with
@ -171,6 +173,16 @@ export class SdkContextClass {
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 {
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 FilePanel from "../../../../src/components/structures/FilePanel";
import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
import { mkEvent, stubClient } from "../../../test-utils";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@ -39,9 +38,7 @@ describe("FilePanel", () => {
room.getOrCreateFilteredTimelineSet = jest.fn().mockReturnValue(timelineSet);
mocked(cli.getRoom).mockReturnValue(room);
const { asFragment } = render(
<FilePanel roomId={room.roomId} onClose={jest.fn()} resizeNotifier={new ResizeNotifier()} />,
);
const { asFragment } = render(<FilePanel roomId={room.roomId} onClose={jest.fn()} />);
await waitFor(() => {
expect(screen.getByText("No files visible in this room")).toBeInTheDocument();
});
@ -64,7 +61,6 @@ describe("FilePanel", () => {
<FilePanel
roomId={room.roomId}
onClose={jest.fn()}
resizeNotifier={new ResizeNotifier()}
ref={(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 MainSplit from "../../../../src/components/structures/MainSplit";
import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
import { PosthogAnalytics } from "../../../../src/PosthogAnalytics.ts";
import { SDKContext, SdkContextClass } from "../../../../src/contexts/SDKContext.ts";
describe("<MainSplit/>", () => {
const resizeNotifier = new ResizeNotifier();
const children = (
<div>
Child<span>Foo</span>Bar
</div>
);
const panel = <div>Right panel</div>;
let sdkContext: SdkContextClass;
beforeEach(() => {
localStorage.clear();
sdkContext = new SdkContextClass();
});
it("renders", () => {
const { asFragment, container } = render(
<MainSplit
resizeNotifier={resizeNotifier}
children={children}
panel={panel}
analyticsRoomType="other_room"
/>,
<MainSplit children={children} panel={panel} analyticsRoomType="other_room" />,
);
expect(asFragment()).toMatchSnapshot();
// Assert it matches the default width of 320
@ -42,13 +38,7 @@ describe("<MainSplit/>", () => {
it("respects defaultSize prop", () => {
const { asFragment, container } = render(
<MainSplit
resizeNotifier={resizeNotifier}
children={children}
panel={panel}
defaultSize={500}
analyticsRoomType="other_room"
/>,
<MainSplit children={children} panel={panel} defaultSize={500} analyticsRoomType="other_room" />,
);
expect(asFragment()).toMatchSnapshot();
// Assert it matches the default width of 350
@ -59,7 +49,6 @@ describe("<MainSplit/>", () => {
localStorage.setItem("mx_rhs_size_thread", "333");
const { container } = render(
<MainSplit
resizeNotifier={resizeNotifier}
children={children}
panel={panel}
sizeKey="thread"
@ -73,18 +62,19 @@ describe("<MainSplit/>", () => {
it("should report to analytics on resize stop", () => {
const { container } = render(
<MainSplit
resizeNotifier={resizeNotifier}
children={children}
panel={panel}
sizeKey="thread"
defaultSize={400}
analyticsRoomType="other_room"
/>,
{ wrapper: ({ children }) => <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider> },
);
const spy = jest.spyOn(PosthogAnalytics.instance, "trackEvent");
const handle = container.querySelector(".mx_ResizeHandle--horizontal")!;
expect(handle).toBeInTheDocument();
fireEvent.mouseDown(handle);
fireEvent.resize(handle, { clientX: 0 });
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", () => {
const issuer = "https://auth.com/";
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 SettingsStore from "../../../../src/settings/SettingsStore";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
import DMRoomMap from "../../../../src/utils/DMRoomMap";
import * as TestUtilsMatrix from "../../../test-utils";
import {
clientAndSDKContextRenderOptions,
createTestClient,
getMockClientWithEventEmitter,
makeBeaconInfoEvent,
@ -32,6 +32,7 @@ import type ResizeNotifier from "../../../../src/utils/ResizeNotifier";
import { type IRoomState } from "../../../../src/components/structures/RoomView";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomContext.tsx";
import { SdkContextClass } from "../../../../src/contexts/SDKContext.ts";
jest.mock("../../../../src/utils/beacon", () => ({
useBeacon: jest.fn(),
@ -54,6 +55,7 @@ describe("MessagePanel", function () {
getClientWellKnown: jest.fn().mockReturnValue({}),
supportsThreads: jest.fn().mockReturnValue(true),
});
let sdkContext: SdkContextClass;
jest.spyOn(MatrixClientPeg, "get").mockReturnValue(client);
const room = new Room(roomId, client, userId);
@ -93,11 +95,9 @@ describe("MessagePanel", function () {
} as unknown as IRoomState;
const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) => (
<MatrixClientContext.Provider value={client}>
<ScopedRoomContextProvider {...defaultRoomContext} {...roomContext}>
<MessagePanel {...defaultProps} {...props} />
</ScopedRoomContextProvider>
</MatrixClientContext.Provider>
);
beforeEach(function () {
@ -107,6 +107,8 @@ describe("MessagePanel", function () {
return arg === "showDisplaynameChanges";
});
sdkContext = new SdkContextClass();
DMRoomMap.makeShared(client);
});
@ -314,7 +316,7 @@ describe("MessagePanel", 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
const tiles = container.getElementsByClassName("mx_EventTile");
@ -322,7 +324,10 @@ describe("MessagePanel", 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
const tiles = container.getElementsByClassName("mx_EventTile");
@ -339,6 +344,7 @@ describe("MessagePanel", function () {
readMarkerEventId: events[4].getId(),
readMarkerVisible: true,
}),
clientAndSDKContextRenderOptions(client, sdkContext),
);
const tiles = container.getElementsByClassName("mx_EventTile");
@ -359,6 +365,7 @@ describe("MessagePanel", function () {
readMarkerEventId: melsEvents[4].getId(),
readMarkerVisible: true,
}),
clientAndSDKContextRenderOptions(client, sdkContext),
);
const [summary] = container.getElementsByClassName("mx_GenericEventListSummary");
@ -381,6 +388,7 @@ describe("MessagePanel", function () {
readMarkerEventId: melsEvents[9].getId(),
readMarkerVisible: true,
}),
clientAndSDKContextRenderOptions(client, sdkContext),
);
const [summary] = container.getElementsByClassName("mx_GenericEventListSummary");
@ -406,6 +414,7 @@ describe("MessagePanel", function () {
readMarkerVisible: true,
})}
</div>,
clientAndSDKContextRenderOptions(client, sdkContext),
);
const tiles = container.getElementsByClassName("mx_EventTile");
@ -448,7 +457,7 @@ describe("MessagePanel", function () {
client.getRoom.mockImplementation((id) => (id === createEvent!.getRoomId() ? room : null));
TestUtilsMatrix.upsertRoomStateEvents(room, events);
const { container } = render(getComponent({ events }));
const { container } = render(getComponent({ events }), clientAndSDKContextRenderOptions(client, sdkContext));
// we expect that
// - the room creation event, the room encryption event, and Alice inviting Bob,
@ -476,7 +485,10 @@ describe("MessagePanel", function () {
});
const combinedEvents = [...events, beaconInfoEvent];
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");
@ -498,6 +510,7 @@ describe("MessagePanel", function () {
readMarkerEventId: events[5].getId(),
readMarkerVisible: true,
}),
clientAndSDKContextRenderOptions(client, sdkContext),
);
// find the <li> which wraps the read marker
@ -514,7 +527,10 @@ describe("MessagePanel", function () {
it("should render Date separators for the events", function () {
const events = mkOneDayEvents();
const { queryAllByRole } = render(getComponent({ events }));
const { queryAllByRole } = render(
getComponent({ events }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
const dates = queryAllByRole("separator");
expect(dates.length).toEqual(1);
@ -523,7 +539,10 @@ describe("MessagePanel", function () {
it("appends events into summaries during forward pagination without changing key", () => {
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");
expect(els.length).toEqual(1);
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", () => {
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");
expect(els.length).toEqual(1);
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", () => {
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");
expect(els.length).toEqual(1);
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", () => {
// 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
const { rerender } = render(getComponent({ events: [] }));
const { rerender } = render(getComponent({ events: [] }), clientAndSDKContextRenderOptions(client, sdkContext));
// Set up our spy and re-render with new events
const settingsSpy = jest.spyOn(SettingsStore, "getValue").mockClear();
@ -654,7 +679,10 @@ describe("MessagePanel", function () {
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");
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();
});
@ -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();
});
@ -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();
// Ignore properties that change every time
@ -751,7 +788,10 @@ describe("MessagePanel", function () {
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");
expect(tiles.length).toEqual(2);
@ -784,7 +824,10 @@ describe("MessagePanel", function () {
},
true,
);
const { container } = render(getComponent({ events, showReadReceipts: true }));
const { container } = render(
getComponent({ events, showReadReceipts: true }),
clientAndSDKContextRenderOptions(client, sdkContext),
);
const tiles = container.getElementsByClassName("mx_EventTile");
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";
import { RoomSearchView } from "../../../../src/components/structures/RoomSearchView";
import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
import { stubClient } from "../../../test-utils";
import { clientAndSDKContextRenderOptions, stubClient } from "../../../test-utils";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import { searchPagination, SearchScope } from "../../../../src/Searching";
import { SdkContextClass } from "../../../../src/contexts/SDKContext";
jest.mock("../../../../src/Searching", () => ({
searchPagination: jest.fn(),
@ -33,13 +33,14 @@ jest.mock("../../../../src/Searching", () => ({
describe("<RoomSearchView/>", () => {
const eventMapper = (obj: Partial<IEvent>) => new MatrixEvent(obj);
const resizeNotifier = new ResizeNotifier();
let client: MatrixClient;
let sdkContext: SdkContextClass;
let room: Room;
beforeEach(async () => {
stubClient();
client = MatrixClientPeg.safeGet();
sdkContext = new SdkContextClass();
client.supportsThreads = jest.fn().mockReturnValue(true);
room = new Room("!room:server", client, client.getSafeUserId());
mocked(client.getRoom).mockReturnValue(room);
@ -60,7 +61,6 @@ describe("<RoomSearchView/>", () => {
term="search term"
scope={SearchScope.All}
promise={deferred.promise}
resizeNotifier={resizeNotifier}
className="someClass"
onUpdate={jest.fn()}
/>,
@ -71,7 +71,6 @@ describe("<RoomSearchView/>", () => {
it("should render results when the promise resolves", async () => {
render(
<MatrixClientContext.Provider value={client}>
<RoomSearchView
inProgress={false}
term="search term"
@ -119,11 +118,10 @@ describe("<RoomSearchView/>", () => {
highlights: [],
count: 1,
})}
resizeNotifier={resizeNotifier}
className="someClass"
onUpdate={jest.fn()}
/>
</MatrixClientContext.Provider>,
/>,
clientAndSDKContextRenderOptions(client, sdkContext),
);
await screen.findByText("Before");
@ -133,7 +131,6 @@ describe("<RoomSearchView/>", () => {
it("should highlight words correctly", async () => {
render(
<MatrixClientContext.Provider value={client}>
<RoomSearchView
inProgress={false}
term="search term"
@ -163,11 +160,10 @@ describe("<RoomSearchView/>", () => {
highlights: ["test"],
count: 1,
})}
resizeNotifier={resizeNotifier}
className="someClass"
onUpdate={jest.fn()}
/>
</MatrixClientContext.Provider>,
/>,
clientAndSDKContextRenderOptions(client, sdkContext),
);
const text = await screen.findByText("Test");
@ -231,17 +227,15 @@ describe("<RoomSearchView/>", () => {
const onUpdate = jest.fn();
const { rerender } = render(
<MatrixClientContext.Provider value={client}>
<RoomSearchView
inProgress={true}
term="search term"
scope={SearchScope.All}
promise={Promise.resolve(searchResults)}
resizeNotifier={resizeNotifier}
className="someClass"
onUpdate={onUpdate}
/>
</MatrixClientContext.Provider>,
/>,
clientAndSDKContextRenderOptions(client, sdkContext),
);
await screen.findByRole("progressbar");
@ -249,17 +243,14 @@ describe("<RoomSearchView/>", () => {
expect(onUpdate).toHaveBeenCalledWith(false, expect.objectContaining({}), null);
rerender(
<MatrixClientContext.Provider value={client}>
<RoomSearchView
inProgress={false}
term="search term"
scope={SearchScope.All}
promise={Promise.resolve(searchResults)}
resizeNotifier={resizeNotifier}
className="someClass"
onUpdate={jest.fn()}
/>
</MatrixClientContext.Provider>,
/>,
);
expect(screen.queryByRole("progressbar")).toBeFalsy();
@ -275,7 +266,6 @@ describe("<RoomSearchView/>", () => {
term="search term"
scope={SearchScope.All}
promise={deferred.promise}
resizeNotifier={resizeNotifier}
className="someClass"
onUpdate={jest.fn()}
/>
@ -299,7 +289,6 @@ describe("<RoomSearchView/>", () => {
term="search term"
scope={SearchScope.All}
promise={deferred.promise}
resizeNotifier={resizeNotifier}
className="someClass"
onUpdate={jest.fn()}
/>
@ -324,7 +313,6 @@ describe("<RoomSearchView/>", () => {
term="search term"
scope={SearchScope.All}
promise={deferred.promise}
resizeNotifier={resizeNotifier}
className="someClass"
onUpdate={onUpdate}
/>
@ -424,17 +412,15 @@ describe("<RoomSearchView/>", () => {
};
render(
<MatrixClientContext.Provider value={client}>
<RoomSearchView
inProgress={false}
term="search term"
scope={SearchScope.All}
promise={Promise.resolve(searchResults)}
resizeNotifier={resizeNotifier}
className="someClass"
onUpdate={jest.fn()}
/>
</MatrixClientContext.Provider>,
/>,
clientAndSDKContextRenderOptions(client, sdkContext),
);
const beforeNode = await screen.findByText("Before");
@ -459,7 +445,6 @@ describe("<RoomSearchView/>", () => {
);
render(
<MatrixClientContext.Provider value={client}>
<RoomSearchView
inProgress={false}
term="search term"
@ -546,11 +531,10 @@ describe("<RoomSearchView/>", () => {
highlights: [],
count: 1,
})}
resizeNotifier={resizeNotifier}
className="someClass"
onUpdate={jest.fn()}
/>
</MatrixClientContext.Provider>,
/>,
clientAndSDKContextRenderOptions(client, sdkContext),
);
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 { type ViewRoomPayload } from "../../../../src/dispatcher/payloads/ViewRoomPayload";
import { RoomView } from "../../../../src/components/structures/RoomView";
import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
import SettingsStore from "../../../../src/settings/SettingsStore";
import { SettingLevel } from "../../../../src/settings/SettingLevel";
import DMRoomMap from "../../../../src/utils/DMRoomMap";
@ -157,7 +156,6 @@ describe("RoomView", () => {
// threepidInvite should be optional on RoomView props
// it is treated as optional in RoomView
threepidInvite={undefined as any}
resizeNotifier={new ResizeNotifier()}
forceTimeline={false}
ref={ref}
/>
@ -196,7 +194,6 @@ describe("RoomView", () => {
// threepidInvite should be optional on RoomView props
// it is treated as optional in RoomView
threepidInvite={undefined}
resizeNotifier={new ResizeNotifier()}
forceTimeline={false}
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 TimelinePanel from "../../../../src/components/structures/TimelinePanel";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import {
clientAndSDKContextRenderOptions,
filterConsole,
flushPromises,
mkMembership,
mkRoom,
stubClient,
withClientContextRenderOptions,
} from "../../../test-utils";
import { mkThread } from "../../../test-utils/threads";
import { createMessageEventContent } from "../../../test-utils/events";
@ -51,6 +50,7 @@ import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
import { Action } from "../../../../src/dispatcher/actions";
import { SettingLevel } from "../../../../src/settings/SettingLevel";
import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController";
import { SdkContextClass } from "../../../../src/contexts/SDKContext";
// ScrollPanel calls this, but jsdom doesn't mock it for us
HTMLDivElement.prototype.scrollBy = () => {};
@ -159,6 +159,7 @@ const setupPagination = (
describe("TimelinePanel", () => {
let client: Mocked<MatrixClient>;
let sdkContext: SdkContextClass;
let userId: string;
filterConsole("checkForPreJoinUISI: showing all messages, skipping check");
@ -166,6 +167,7 @@ describe("TimelinePanel", () => {
beforeEach(() => {
client = mocked(stubClient());
userId = client.getSafeUserId();
sdkContext = new SdkContextClass();
});
describe("read receipts and markers", () => {
@ -200,7 +202,7 @@ describe("TimelinePanel", () => {
timelinePanel = ref;
}}
/>,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
clientAndSDKContextRenderOptions(client, sdkContext),
);
await flushPromises();
await waitFor(() => expect(timelinePanel).toBeTruthy());
@ -396,7 +398,7 @@ describe("TimelinePanel", () => {
await withScrollPanelMountSpy(async (mountSpy) => {
const { container } = render(
<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
clientAndSDKContextRenderOptions(client, sdkContext),
);
await waitFor(() => expectEvents(container, [events[1]]));
@ -416,7 +418,7 @@ describe("TimelinePanel", () => {
await withScrollPanelMountSpy(async (mountSpy) => {
const { container } = render(
<TimelinePanel {...getProps(room, events)} />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
clientAndSDKContextRenderOptions(client, sdkContext),
);
await waitFor(() => expectEvents(container, [events[0], events[1]]));
@ -493,7 +495,7 @@ describe("TimelinePanel", () => {
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 data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: true };
@ -590,9 +592,8 @@ describe("TimelinePanel", () => {
const replyToEvent = jest.spyOn(thread, "replyToEvent", "get");
const dom = render(
<MatrixClientContext.Provider value={client}>
<TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />
</MatrixClientContext.Provider>,
<TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />,
clientAndSDKContextRenderOptions(client, sdkContext),
);
await dom.findByText("RootEvent");
await dom.findByText("ReplyEvent1");
@ -645,9 +646,8 @@ describe("TimelinePanel", () => {
};
const dom = render(
<MatrixClientContext.Provider value={client}>
<TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />
</MatrixClientContext.Provider>,
<TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />,
clientAndSDKContextRenderOptions(client, sdkContext),
);
await dom.findByText("RootEvent");
await dom.findByText("ReplyEvent1");
@ -718,9 +718,8 @@ describe("TimelinePanel", () => {
}
const { container } = render(
<MatrixClientContext.Provider value={client}>
<TimelinePanel timelineSet={timelineSet} manageReadReceipts={true} sendReadReceiptOnLoad={true} />
</MatrixClientContext.Provider>,
<TimelinePanel timelineSet={timelineSet} manageReadReceipts={true} sendReadReceiptOnLoad={true} />,
clientAndSDKContextRenderOptions(client, sdkContext),
);
await waitFor(() => expect(screen.queryByRole("progressbar")).toBeNull());
@ -740,7 +739,7 @@ describe("TimelinePanel", () => {
await withScrollPanelMountSpy(async () => {
const { container } = render(
<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
clientAndSDKContextRenderOptions(client, sdkContext),
);
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 { flushPromises, mkMessage, stubClient } from "../../../../test-utils";
import MessageEditHistoryDialog from "../../../../../src/components/views/dialogs/MessageEditHistoryDialog";
import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
describe("<MessageEditHistory />", () => {
const roomId = "!aroom:example.com";
let client: jest.Mocked<MatrixClient>;
let sdkContext: SdkContextClass;
let event: MatrixEvent;
beforeEach(() => {
@ -27,10 +29,13 @@ describe("<MessageEditHistory />", () => {
room: "!room:example.com",
msg: "My Great Message",
});
sdkContext = new SdkContextClass();
});
async function renderComponent(): Promise<RenderResult> {
const result = render(<MessageEditHistoryDialog mxEvent={event} onFinished={jest.fn()} />);
const result = render(<MessageEditHistoryDialog mxEvent={event} onFinished={jest.fn()} />, {
wrapper: ({ children }) => <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider>,
});
await waitForElementToBeRemoved(() => result.queryByRole("progressbar"));
await flushPromises();
return result;

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

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

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

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 { render } from "jest-matrix-react";
import { fireEvent, render, waitFor } from "jest-matrix-react";
import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
import { CallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/callEventHandler";
@ -15,19 +15,22 @@ import LegacyCallViewForRoom from "../../../../../src/components/views/voip/Lega
import { mkStubRoom, stubClient } from "../../../../test-utils";
import DMRoomMap from "../../../../../src/utils/DMRoomMap";
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
import LegacyCallHandler from "../../../../../src/LegacyCallHandler";
import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
jest.mock("../../../../../src/components/views/voip/LegacyCallView", () => jest.fn(() => "LegacyCallView"));
describe("LegacyCallViewForRoom", () => {
const LegacyCallViewMock = LegacyCallView as unknown as jest.Mock;
let sdkContext: SdkContextClass;
beforeEach(() => {
stubClient();
sdkContext = new SdkContextClass();
LegacyCallViewMock.mockClear();
});
it("should remember sidebar state, defaulting to shown", async () => {
stubClient();
it("should remember sidebar state, defaulting to shown", async () => {
const callHandler = new LegacyCallHandler();
callHandler.start();
jest.spyOn(LegacyCallHandler, "instance", "get").mockImplementation(() => callHandler);
@ -45,16 +48,14 @@ describe("LegacyCallViewForRoom", () => {
const cli = MatrixClientPeg.safeGet();
cli.emit(CallEventHandlerEvent.Incoming, call);
const { rerender } = render(
<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />,
);
const { rerender } = render(<LegacyCallViewForRoom roomId={call.roomId} />);
let props = LegacyCallViewMock.mock.lastCall![0];
expect(props.sidebarShown).toBeTruthy(); // Sidebar defaults to shown
props.setSidebarShown(false); // Hide the sidebar
rerender(<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />);
rerender(<LegacyCallViewForRoom roomId={call.roomId} />);
console.log(LegacyCallViewMock.mock);
@ -64,9 +65,47 @@ describe("LegacyCallViewForRoom", () => {
rerender(<div> </div>); // Destroy the LegacyCallViewForRoom and LegacyCallView
LegacyCallViewMock.mockClear(); // Drop stored LegacyCallView props
rerender(<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />);
rerender(<LegacyCallViewForRoom roomId={call.roomId} />);
props = LegacyCallViewMock.mock.lastCall![0];
expect(props.sidebarShown).toBeFalsy(); // Value was remembered
});
it("should notify on resize start events", async () => {
const call = new MatrixCall({
client: MatrixClientPeg.safeGet(),
roomId: "test-room",
});
const callHandler = {
getCallForRoom: jest.fn().mockReturnValue(call),
isCallSidebarShown: jest.fn().mockReturnValue(true),
addListener: jest.fn(),
removeListener: jest.fn(),
};
jest.spyOn(LegacyCallHandler, "instance", "get").mockImplementation(
() => callHandler as unknown as LegacyCallHandler,
);
jest.spyOn(sdkContext.resizeNotifier, "startResizing");
jest.spyOn(sdkContext.resizeNotifier, "stopResizing");
jest.spyOn(sdkContext.resizeNotifier, "notifyTimelineHeightChanged");
const { container } = render(<LegacyCallViewForRoom roomId={call.roomId} />, {
wrapper: ({ children }) => <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider>,
});
const resizer = container.querySelector(".mx_LegacyCallViewForRoom_ResizeHandle");
await waitFor(() => {
expect(resizer).toBeInTheDocument();
});
fireEvent.mouseDown(resizer!);
fireEvent.mouseMove(resizer!, { clientY: 100 });
fireEvent.mouseUp(resizer!);
expect(sdkContext.resizeNotifier.startResizing).toHaveBeenCalled();
expect(sdkContext.resizeNotifier.stopResizing).toHaveBeenCalled();
expect(sdkContext.resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalled();
});
});