mirror of
https://github.com/vector-im/element-web.git
synced 2025-11-08 12:11:07 +01:00
Move ResizerNotifier into SDKContext (#30939)
* Move ResizerNotifier into SDKContext so we don't have to pass it into RoomView * Fix test * Unused import * Add tests * Remove a bunch of resizeNotifier props * Remove more resizeNotifier props * Add resizenotifier to test * Add more sdkcontext wrappers in tests * More sdkcontext wrappers * Even more sdkcontext wrappers * Add test to make sonarcloud happy * Context isn't always there unlike props * Test actual resizing too * Remove commented line
This commit is contained in:
David Baker
GitHub
parent
87fdf96192
commit
c08775588d
@ -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}
|
||||
/>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>({
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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 })}
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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} />
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 => {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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>
|
||||
<ScopedRoomContextProvider {...defaultRoomContext} {...roomContext}>
|
||||
<MessagePanel {...defaultProps} {...props} />
|
||||
</ScopedRoomContextProvider>
|
||||
);
|
||||
|
||||
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);
|
||||
|
||||
@ -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,59 +71,57 @@ describe("<RoomSearchView/>", () => {
|
||||
|
||||
it("should render results when the promise resolves", async () => {
|
||||
render(
|
||||
<MatrixClientContext.Provider value={client}>
|
||||
<RoomSearchView
|
||||
inProgress={false}
|
||||
term="search term"
|
||||
scope={SearchScope.All}
|
||||
promise={Promise.resolve<ISearchResults>({
|
||||
results: [
|
||||
SearchResult.fromJson(
|
||||
{
|
||||
rank: 1,
|
||||
result: {
|
||||
room_id: room.roomId,
|
||||
event_id: "$2",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "Foo Test Bar", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
context: {
|
||||
profile_info: {},
|
||||
events_before: [
|
||||
{
|
||||
room_id: room.roomId,
|
||||
event_id: "$1",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "Before", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
],
|
||||
events_after: [
|
||||
{
|
||||
room_id: room.roomId,
|
||||
event_id: "$3",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "After", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
],
|
||||
},
|
||||
<RoomSearchView
|
||||
inProgress={false}
|
||||
term="search term"
|
||||
scope={SearchScope.All}
|
||||
promise={Promise.resolve<ISearchResults>({
|
||||
results: [
|
||||
SearchResult.fromJson(
|
||||
{
|
||||
rank: 1,
|
||||
result: {
|
||||
room_id: room.roomId,
|
||||
event_id: "$2",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "Foo Test Bar", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
eventMapper,
|
||||
),
|
||||
],
|
||||
highlights: [],
|
||||
count: 1,
|
||||
})}
|
||||
resizeNotifier={resizeNotifier}
|
||||
className="someClass"
|
||||
onUpdate={jest.fn()}
|
||||
/>
|
||||
</MatrixClientContext.Provider>,
|
||||
context: {
|
||||
profile_info: {},
|
||||
events_before: [
|
||||
{
|
||||
room_id: room.roomId,
|
||||
event_id: "$1",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "Before", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
],
|
||||
events_after: [
|
||||
{
|
||||
room_id: room.roomId,
|
||||
event_id: "$3",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "After", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
eventMapper,
|
||||
),
|
||||
],
|
||||
highlights: [],
|
||||
count: 1,
|
||||
})}
|
||||
className="someClass"
|
||||
onUpdate={jest.fn()}
|
||||
/>,
|
||||
clientAndSDKContextRenderOptions(client, sdkContext),
|
||||
);
|
||||
|
||||
await screen.findByText("Before");
|
||||
@ -133,41 +131,39 @@ describe("<RoomSearchView/>", () => {
|
||||
|
||||
it("should highlight words correctly", async () => {
|
||||
render(
|
||||
<MatrixClientContext.Provider value={client}>
|
||||
<RoomSearchView
|
||||
inProgress={false}
|
||||
term="search term"
|
||||
scope={SearchScope.Room}
|
||||
promise={Promise.resolve<ISearchResults>({
|
||||
results: [
|
||||
SearchResult.fromJson(
|
||||
{
|
||||
rank: 1,
|
||||
result: {
|
||||
room_id: room.roomId,
|
||||
event_id: "$2",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "Foo Test Bar", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
context: {
|
||||
profile_info: {},
|
||||
events_before: [],
|
||||
events_after: [],
|
||||
},
|
||||
<RoomSearchView
|
||||
inProgress={false}
|
||||
term="search term"
|
||||
scope={SearchScope.Room}
|
||||
promise={Promise.resolve<ISearchResults>({
|
||||
results: [
|
||||
SearchResult.fromJson(
|
||||
{
|
||||
rank: 1,
|
||||
result: {
|
||||
room_id: room.roomId,
|
||||
event_id: "$2",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "Foo Test Bar", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
eventMapper,
|
||||
),
|
||||
],
|
||||
highlights: ["test"],
|
||||
count: 1,
|
||||
})}
|
||||
resizeNotifier={resizeNotifier}
|
||||
className="someClass"
|
||||
onUpdate={jest.fn()}
|
||||
/>
|
||||
</MatrixClientContext.Provider>,
|
||||
context: {
|
||||
profile_info: {},
|
||||
events_before: [],
|
||||
events_after: [],
|
||||
},
|
||||
},
|
||||
eventMapper,
|
||||
),
|
||||
],
|
||||
highlights: ["test"],
|
||||
count: 1,
|
||||
})}
|
||||
className="someClass"
|
||||
onUpdate={jest.fn()}
|
||||
/>,
|
||||
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>,
|
||||
<RoomSearchView
|
||||
inProgress={true}
|
||||
term="search term"
|
||||
scope={SearchScope.All}
|
||||
promise={Promise.resolve(searchResults)}
|
||||
className="someClass"
|
||||
onUpdate={onUpdate}
|
||||
/>,
|
||||
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>,
|
||||
<RoomSearchView
|
||||
inProgress={false}
|
||||
term="search term"
|
||||
scope={SearchScope.All}
|
||||
promise={Promise.resolve(searchResults)}
|
||||
className="someClass"
|
||||
onUpdate={jest.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
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>,
|
||||
<RoomSearchView
|
||||
inProgress={false}
|
||||
term="search term"
|
||||
scope={SearchScope.All}
|
||||
promise={Promise.resolve(searchResults)}
|
||||
className="someClass"
|
||||
onUpdate={jest.fn()}
|
||||
/>,
|
||||
clientAndSDKContextRenderOptions(client, sdkContext),
|
||||
);
|
||||
|
||||
const beforeNode = await screen.findByText("Before");
|
||||
@ -459,98 +445,96 @@ describe("<RoomSearchView/>", () => {
|
||||
);
|
||||
|
||||
render(
|
||||
<MatrixClientContext.Provider value={client}>
|
||||
<RoomSearchView
|
||||
inProgress={false}
|
||||
term="search term"
|
||||
scope={SearchScope.All}
|
||||
promise={Promise.resolve<ISearchResults>({
|
||||
results: [
|
||||
SearchResult.fromJson(
|
||||
{
|
||||
rank: 1,
|
||||
result: {
|
||||
room_id: room.roomId,
|
||||
event_id: "$2",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "Room 1", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
context: {
|
||||
profile_info: {},
|
||||
events_before: [],
|
||||
events_after: [],
|
||||
},
|
||||
<RoomSearchView
|
||||
inProgress={false}
|
||||
term="search term"
|
||||
scope={SearchScope.All}
|
||||
promise={Promise.resolve<ISearchResults>({
|
||||
results: [
|
||||
SearchResult.fromJson(
|
||||
{
|
||||
rank: 1,
|
||||
result: {
|
||||
room_id: room.roomId,
|
||||
event_id: "$2",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "Room 1", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
eventMapper,
|
||||
),
|
||||
SearchResult.fromJson(
|
||||
{
|
||||
rank: 2,
|
||||
result: {
|
||||
room_id: room2.roomId,
|
||||
event_id: "$22",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "Room 2", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
context: {
|
||||
profile_info: {},
|
||||
events_before: [],
|
||||
events_after: [],
|
||||
},
|
||||
context: {
|
||||
profile_info: {},
|
||||
events_before: [],
|
||||
events_after: [],
|
||||
},
|
||||
eventMapper,
|
||||
),
|
||||
SearchResult.fromJson(
|
||||
{
|
||||
rank: 2,
|
||||
result: {
|
||||
room_id: room2.roomId,
|
||||
event_id: "$23",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 2,
|
||||
content: { body: "Room 2 message 2", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
context: {
|
||||
profile_info: {},
|
||||
events_before: [],
|
||||
events_after: [],
|
||||
},
|
||||
},
|
||||
eventMapper,
|
||||
),
|
||||
SearchResult.fromJson(
|
||||
{
|
||||
rank: 2,
|
||||
result: {
|
||||
room_id: room2.roomId,
|
||||
event_id: "$22",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "Room 2", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
eventMapper,
|
||||
),
|
||||
SearchResult.fromJson(
|
||||
{
|
||||
rank: 3,
|
||||
result: {
|
||||
room_id: room3.roomId,
|
||||
event_id: "$32",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "Room 3", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
context: {
|
||||
profile_info: {},
|
||||
events_before: [],
|
||||
events_after: [],
|
||||
},
|
||||
context: {
|
||||
profile_info: {},
|
||||
events_before: [],
|
||||
events_after: [],
|
||||
},
|
||||
eventMapper,
|
||||
),
|
||||
],
|
||||
highlights: [],
|
||||
count: 1,
|
||||
})}
|
||||
resizeNotifier={resizeNotifier}
|
||||
className="someClass"
|
||||
onUpdate={jest.fn()}
|
||||
/>
|
||||
</MatrixClientContext.Provider>,
|
||||
},
|
||||
eventMapper,
|
||||
),
|
||||
SearchResult.fromJson(
|
||||
{
|
||||
rank: 2,
|
||||
result: {
|
||||
room_id: room2.roomId,
|
||||
event_id: "$23",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 2,
|
||||
content: { body: "Room 2 message 2", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
context: {
|
||||
profile_info: {},
|
||||
events_before: [],
|
||||
events_after: [],
|
||||
},
|
||||
},
|
||||
eventMapper,
|
||||
),
|
||||
SearchResult.fromJson(
|
||||
{
|
||||
rank: 3,
|
||||
result: {
|
||||
room_id: room3.roomId,
|
||||
event_id: "$32",
|
||||
sender: client.getSafeUserId(),
|
||||
origin_server_ts: 1,
|
||||
content: { body: "Room 3", msgtype: "m.text" },
|
||||
type: EventType.RoomMessage,
|
||||
},
|
||||
context: {
|
||||
profile_info: {},
|
||||
events_before: [],
|
||||
events_after: [],
|
||||
},
|
||||
},
|
||||
eventMapper,
|
||||
),
|
||||
],
|
||||
highlights: [],
|
||||
count: 1,
|
||||
})}
|
||||
className="someClass"
|
||||
onUpdate={jest.fn()}
|
||||
/>,
|
||||
clientAndSDKContextRenderOptions(client, sdkContext),
|
||||
);
|
||||
|
||||
const event1 = await screen.findByText("Room 1");
|
||||
|
||||
@ -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()}
|
||||
/>
|
||||
|
||||
@ -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]]));
|
||||
|
||||
@ -13,10 +13,12 @@ import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix";
|
||||
import type { MatrixClient } from "matrix-js-sdk/src/matrix";
|
||||
import { flushPromises, mkMessage, stubClient } from "../../../../test-utils";
|
||||
import MessageEditHistoryDialog from "../../../../../src/components/views/dialogs/MessageEditHistoryDialog";
|
||||
import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
|
||||
|
||||
describe("<MessageEditHistory />", () => {
|
||||
const roomId = "!aroom:example.com";
|
||||
let client: jest.Mocked<MatrixClient>;
|
||||
let sdkContext: SdkContextClass;
|
||||
let event: MatrixEvent;
|
||||
|
||||
beforeEach(() => {
|
||||
@ -27,10 +29,13 @@ describe("<MessageEditHistory />", () => {
|
||||
room: "!room:example.com",
|
||||
msg: "My Great Message",
|
||||
});
|
||||
sdkContext = new SdkContextClass();
|
||||
});
|
||||
|
||||
async function renderComponent(): Promise<RenderResult> {
|
||||
const result = render(<MessageEditHistoryDialog mxEvent={event} onFinished={jest.fn()} />);
|
||||
const result = render(<MessageEditHistoryDialog mxEvent={event} onFinished={jest.fn()} />, {
|
||||
wrapper: ({ children }) => <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider>,
|
||||
});
|
||||
await waitForElementToBeRemoved(() => result.queryByRole("progressbar"));
|
||||
await flushPromises();
|
||||
return result;
|
||||
|
||||
@ -21,7 +21,7 @@ import {
|
||||
import RightPanel from "../../../../../src/components/structures/RightPanel";
|
||||
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
|
||||
import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
|
||||
import { stubClient } from "../../../../test-utils";
|
||||
import { clientAndSDKContextRenderOptions, stubClient } from "../../../../test-utils";
|
||||
import { Action } from "../../../../../src/dispatcher/actions";
|
||||
import dis from "../../../../../src/dispatcher/dispatcher";
|
||||
import DMRoomMap from "../../../../../src/utils/DMRoomMap";
|
||||
@ -39,6 +39,7 @@ import { ElementWidget } from "../../../../../src/stores/widgets/StopGapWidget";
|
||||
import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore";
|
||||
import { ModuleRunner } from "../../../../../src/modules/ModuleRunner";
|
||||
import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
|
||||
import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
|
||||
|
||||
jest.mock("../../../../../src/stores/OwnProfileStore", () => ({
|
||||
OwnProfileStore: {
|
||||
@ -53,6 +54,7 @@ jest.mock("../../../../../src/stores/OwnProfileStore", () => ({
|
||||
|
||||
describe("AppTile", () => {
|
||||
let cli: MatrixClient;
|
||||
let sdkContext: SdkContextClass;
|
||||
let r1: Room;
|
||||
let r2: Room;
|
||||
const resizeNotifier = new ResizeNotifier();
|
||||
@ -116,6 +118,7 @@ describe("AppTile", () => {
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
sdkContext = new SdkContextClass();
|
||||
jest.spyOn(SettingsStore, "getValue").mockRestore();
|
||||
});
|
||||
|
||||
@ -299,9 +302,8 @@ describe("AppTile", () => {
|
||||
|
||||
// Run initial render with room 1, and also running lifecycle methods
|
||||
const renderResult = render(
|
||||
<MatrixClientContext.Provider value={cli}>
|
||||
<AppsDrawer userId={cli.getSafeUserId()} room={r1} resizeNotifier={resizeNotifier} />
|
||||
</MatrixClientContext.Provider>,
|
||||
<AppsDrawer userId={cli.getSafeUserId()} room={r1} />,
|
||||
clientAndSDKContextRenderOptions(cli, sdkContext),
|
||||
);
|
||||
|
||||
expect(renderResult.getByText("Example 1")).toBeInTheDocument();
|
||||
|
||||
@ -13,23 +13,23 @@ import { render } from "jest-matrix-react";
|
||||
import { stubClient } from "../../../../test-utils";
|
||||
import AppsDrawer from "../../../../../src/components/views/rooms/AppsDrawer";
|
||||
import SdkConfig from "../../../../../src/SdkConfig";
|
||||
import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
|
||||
import { WidgetLayoutStore } from "../../../../../src/stores/widgets/WidgetLayoutStore";
|
||||
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
|
||||
import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
|
||||
|
||||
const ROOM_ID = "!room:id";
|
||||
|
||||
describe("AppsDrawer", () => {
|
||||
let client: MatrixClient;
|
||||
let room: Room;
|
||||
let dummyResizeNotifier: ResizeNotifier;
|
||||
let sdkContext: SdkContextClass;
|
||||
|
||||
beforeEach(async () => {
|
||||
client = stubClient();
|
||||
room = new Room(ROOM_ID, client, client.getUserId()!, {
|
||||
pendingEventOrdering: PendingEventOrdering.Detached,
|
||||
});
|
||||
dummyResizeNotifier = new ResizeNotifier();
|
||||
sdkContext = new SdkContextClass();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
@ -58,17 +58,13 @@ describe("AppsDrawer", () => {
|
||||
return [];
|
||||
});
|
||||
|
||||
const { container } = render(
|
||||
<AppsDrawer
|
||||
userId={client.getUserId()!}
|
||||
room={room}
|
||||
resizeNotifier={dummyResizeNotifier}
|
||||
showApps={true}
|
||||
/>,
|
||||
{
|
||||
wrapper: ({ ...rest }) => <MatrixClientContext.Provider value={client} {...rest} />,
|
||||
},
|
||||
);
|
||||
const { container } = render(<AppsDrawer userId={client.getUserId()!} room={room} showApps={true} />, {
|
||||
wrapper: ({ ...rest }) => (
|
||||
<SDKContext.Provider value={sdkContext}>
|
||||
<MatrixClientContext.Provider value={client} {...rest} />
|
||||
</SDKContext.Provider>
|
||||
),
|
||||
});
|
||||
|
||||
const appsDrawerResizer = container.getElementsByClassName("mx_AppsDrawer_resizer")[0] as HTMLElement;
|
||||
expect(appsDrawerResizer.style.height).toBe("500px");
|
||||
|
||||
@ -14,13 +14,13 @@ import userEvent from "@testing-library/user-event";
|
||||
import * as pinnedEventHooks from "../../../../../src/hooks/usePinnedEvents";
|
||||
import { PinnedMessageBanner } from "../../../../../src/components/views/rooms/PinnedMessageBanner";
|
||||
import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
|
||||
import { makePollStartEvent, stubClient, withClientContextRenderOptions } from "../../../../test-utils";
|
||||
import { makePollStartEvent, stubClient, clientAndSDKContextRenderOptions } from "../../../../test-utils";
|
||||
import dis from "../../../../../src/dispatcher/dispatcher";
|
||||
import RightPanelStore from "../../../../../src/stores/right-panel/RightPanelStore";
|
||||
import { RightPanelPhases } from "../../../../../src/stores/right-panel/RightPanelStorePhases";
|
||||
import { UPDATE_EVENT } from "../../../../../src/stores/AsyncStore";
|
||||
import { Action } from "../../../../../src/dispatcher/actions";
|
||||
import ResizeNotifier from "../../../../../src/utils/ResizeNotifier.ts";
|
||||
import { SdkContextClass } from "../../../../../src/contexts/SDKContext.ts";
|
||||
|
||||
describe("<PinnedMessageBanner />", () => {
|
||||
const userId = "@alice:server.org";
|
||||
@ -29,12 +29,12 @@ describe("<PinnedMessageBanner />", () => {
|
||||
let mockClient: MatrixClient;
|
||||
let room: Room;
|
||||
let permalinkCreator: RoomPermalinkCreator;
|
||||
let resizeNotifier: ResizeNotifier;
|
||||
let sdkContext: SdkContextClass;
|
||||
beforeEach(() => {
|
||||
mockClient = stubClient();
|
||||
room = new Room(roomId, mockClient, userId);
|
||||
permalinkCreator = new RoomPermalinkCreator(room);
|
||||
resizeNotifier = new ResizeNotifier();
|
||||
sdkContext = new SdkContextClass();
|
||||
jest.spyOn(dis, "dispatch").mockReturnValue(undefined);
|
||||
});
|
||||
|
||||
@ -80,8 +80,8 @@ describe("<PinnedMessageBanner />", () => {
|
||||
*/
|
||||
function renderBanner() {
|
||||
return render(
|
||||
<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} resizeNotifier={resizeNotifier} />,
|
||||
withClientContextRenderOptions(mockClient),
|
||||
<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} />,
|
||||
clientAndSDKContextRenderOptions(mockClient, sdkContext),
|
||||
);
|
||||
}
|
||||
|
||||
@ -153,9 +153,7 @@ describe("<PinnedMessageBanner />", () => {
|
||||
event3.getId()!,
|
||||
]);
|
||||
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2, event3]);
|
||||
rerender(
|
||||
<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} resizeNotifier={resizeNotifier} />,
|
||||
);
|
||||
rerender(<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} />);
|
||||
await expect(screen.findByText("Third pinned message")).resolves.toBeVisible();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
@ -226,7 +224,7 @@ describe("<PinnedMessageBanner />", () => {
|
||||
|
||||
describe("Notify the timeline to resize", () => {
|
||||
beforeEach(() => {
|
||||
jest.spyOn(resizeNotifier, "notifyTimelineHeightChanged");
|
||||
jest.spyOn(sdkContext.resizeNotifier, "notifyTimelineHeightChanged");
|
||||
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!, event2.getId()!]);
|
||||
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2]);
|
||||
});
|
||||
@ -235,7 +233,7 @@ describe("<PinnedMessageBanner />", () => {
|
||||
renderBanner();
|
||||
await expect(screen.findByText("Second pinned message")).resolves.toBeVisible();
|
||||
// The banner is displayed, so we need to resize the timeline
|
||||
expect(resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);
|
||||
expect(sdkContext.resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);
|
||||
|
||||
await userEvent.click(
|
||||
screen.getByRole("button", {
|
||||
@ -244,23 +242,21 @@ describe("<PinnedMessageBanner />", () => {
|
||||
);
|
||||
await expect(screen.findByText("First pinned message")).resolves.toBeVisible();
|
||||
// The banner is already displayed, so we don't need to resize the timeline
|
||||
expect(resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);
|
||||
expect(sdkContext.resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("should notify the timeline to resize when we hide the banner", async () => {
|
||||
const { rerender } = renderBanner();
|
||||
await expect(screen.findByText("Second pinned message")).resolves.toBeVisible();
|
||||
// The banner is displayed, so we need to resize the timeline
|
||||
expect(resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);
|
||||
expect(sdkContext.resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);
|
||||
|
||||
// The banner has no event to display and is hidden
|
||||
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([]);
|
||||
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([]);
|
||||
rerender(
|
||||
<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} resizeNotifier={resizeNotifier} />,
|
||||
);
|
||||
rerender(<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} />);
|
||||
// The timeline should be resized
|
||||
expect(resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(2);
|
||||
expect(sdkContext.resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { render } from "jest-matrix-react";
|
||||
import { fireEvent, render, waitFor } from "jest-matrix-react";
|
||||
import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
|
||||
import { CallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/callEventHandler";
|
||||
|
||||
@ -15,19 +15,22 @@ import LegacyCallViewForRoom from "../../../../../src/components/views/voip/Lega
|
||||
import { mkStubRoom, stubClient } from "../../../../test-utils";
|
||||
import DMRoomMap from "../../../../../src/utils/DMRoomMap";
|
||||
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
|
||||
import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
|
||||
import LegacyCallHandler from "../../../../../src/LegacyCallHandler";
|
||||
import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
|
||||
|
||||
jest.mock("../../../../../src/components/views/voip/LegacyCallView", () => jest.fn(() => "LegacyCallView"));
|
||||
|
||||
describe("LegacyCallViewForRoom", () => {
|
||||
const LegacyCallViewMock = LegacyCallView as unknown as jest.Mock;
|
||||
let sdkContext: SdkContextClass;
|
||||
|
||||
beforeEach(() => {
|
||||
stubClient();
|
||||
sdkContext = new SdkContextClass();
|
||||
LegacyCallViewMock.mockClear();
|
||||
});
|
||||
it("should remember sidebar state, defaulting to shown", async () => {
|
||||
stubClient();
|
||||
|
||||
it("should remember sidebar state, defaulting to shown", async () => {
|
||||
const callHandler = new LegacyCallHandler();
|
||||
callHandler.start();
|
||||
jest.spyOn(LegacyCallHandler, "instance", "get").mockImplementation(() => callHandler);
|
||||
@ -45,16 +48,14 @@ describe("LegacyCallViewForRoom", () => {
|
||||
const cli = MatrixClientPeg.safeGet();
|
||||
cli.emit(CallEventHandlerEvent.Incoming, call);
|
||||
|
||||
const { rerender } = render(
|
||||
<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />,
|
||||
);
|
||||
const { rerender } = render(<LegacyCallViewForRoom roomId={call.roomId} />);
|
||||
|
||||
let props = LegacyCallViewMock.mock.lastCall![0];
|
||||
expect(props.sidebarShown).toBeTruthy(); // Sidebar defaults to shown
|
||||
|
||||
props.setSidebarShown(false); // Hide the sidebar
|
||||
|
||||
rerender(<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />);
|
||||
rerender(<LegacyCallViewForRoom roomId={call.roomId} />);
|
||||
|
||||
console.log(LegacyCallViewMock.mock);
|
||||
|
||||
@ -64,9 +65,47 @@ describe("LegacyCallViewForRoom", () => {
|
||||
rerender(<div> </div>); // Destroy the LegacyCallViewForRoom and LegacyCallView
|
||||
LegacyCallViewMock.mockClear(); // Drop stored LegacyCallView props
|
||||
|
||||
rerender(<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />);
|
||||
rerender(<LegacyCallViewForRoom roomId={call.roomId} />);
|
||||
|
||||
props = LegacyCallViewMock.mock.lastCall![0];
|
||||
expect(props.sidebarShown).toBeFalsy(); // Value was remembered
|
||||
});
|
||||
|
||||
it("should notify on resize start events", async () => {
|
||||
const call = new MatrixCall({
|
||||
client: MatrixClientPeg.safeGet(),
|
||||
roomId: "test-room",
|
||||
});
|
||||
|
||||
const callHandler = {
|
||||
getCallForRoom: jest.fn().mockReturnValue(call),
|
||||
isCallSidebarShown: jest.fn().mockReturnValue(true),
|
||||
addListener: jest.fn(),
|
||||
removeListener: jest.fn(),
|
||||
};
|
||||
jest.spyOn(LegacyCallHandler, "instance", "get").mockImplementation(
|
||||
() => callHandler as unknown as LegacyCallHandler,
|
||||
);
|
||||
|
||||
jest.spyOn(sdkContext.resizeNotifier, "startResizing");
|
||||
jest.spyOn(sdkContext.resizeNotifier, "stopResizing");
|
||||
jest.spyOn(sdkContext.resizeNotifier, "notifyTimelineHeightChanged");
|
||||
|
||||
const { container } = render(<LegacyCallViewForRoom roomId={call.roomId} />, {
|
||||
wrapper: ({ children }) => <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider>,
|
||||
});
|
||||
|
||||
const resizer = container.querySelector(".mx_LegacyCallViewForRoom_ResizeHandle");
|
||||
await waitFor(() => {
|
||||
expect(resizer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
fireEvent.mouseDown(resizer!);
|
||||
fireEvent.mouseMove(resizer!, { clientY: 100 });
|
||||
fireEvent.mouseUp(resizer!);
|
||||
|
||||
expect(sdkContext.resizeNotifier.startResizing).toHaveBeenCalled();
|
||||
expect(sdkContext.resizeNotifier.stopResizing).toHaveBeenCalled();
|
||||
expect(sdkContext.resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user