Refactor and Move TileErrorBoundary to Shared Components (#32793)
* creation of stories and view in shared-components * migrate EventTile error fallback to shared TileErrorView MVVM * Fix lint errors and unused import * Update tests because of the refactoring * Update snapshots + stories * removal of mxEvent since it never changes in timeline * Update packages/shared-components/src/message-body/TileErrorView/TileErrorView.stories.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * Update apps/web/src/viewmodels/message-body/TileErrorViewModel.ts Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * Update apps/web/src/viewmodels/message-body/TileErrorViewModel.ts Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * docs: add TileErrorView tsdoc * docs: add TileErrorViewModel tsdoc * docs: add view source label tsdoc * refactor: move tile error layout into vm * docs: add TileErrorView story view docs * docs: move tile error story list wrapper * refactor: remove unused tile error event setter * Update packages/shared-components/src/message-body/TileErrorView/TileErrorView.stories.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * docs: add tsdoc for event tile error fallback props * refactor: rely on snapshot merge no-op checks * remove unessecery if statment * test: restore EventTile mocks in afterEach * test(shared-components): move TileErrorView baselines --------- Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
This commit is contained in:
Zack
Florian Duros
@@ -1,92 +0,0 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2020-2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React, { type ReactNode } from "react";
|
||||
import classNames from "classnames";
|
||||
import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import Modal from "../../../Modal";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import ViewSource from "../../structures/ViewSource";
|
||||
import { type Layout } from "../../../settings/enums/Layout";
|
||||
import { BugReportDialogButton } from "../elements/BugReportDialogButton";
|
||||
|
||||
interface IProps {
|
||||
mxEvent: MatrixEvent;
|
||||
layout: Layout;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
error?: Error;
|
||||
}
|
||||
|
||||
export default class TileErrorBoundary extends React.Component<IProps, IState> {
|
||||
public constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
public static getDerivedStateFromError(error: Error): Partial<IState> {
|
||||
// Side effects are not permitted here, so we only update the state so
|
||||
// that the next render shows an error message.
|
||||
return { error };
|
||||
}
|
||||
|
||||
private onViewSource = (): void => {
|
||||
Modal.createDialog(
|
||||
ViewSource,
|
||||
{
|
||||
mxEvent: this.props.mxEvent,
|
||||
},
|
||||
"mx_Dialog_viewsource",
|
||||
);
|
||||
};
|
||||
|
||||
public render(): ReactNode {
|
||||
if (this.state.error) {
|
||||
const { mxEvent } = this.props;
|
||||
const classes = {
|
||||
mx_EventTile: true,
|
||||
mx_EventTile_info: true,
|
||||
mx_EventTile_content: true,
|
||||
mx_EventTile_tileError: true,
|
||||
};
|
||||
|
||||
let viewSourceButton;
|
||||
if (mxEvent && SettingsStore.getValue("developerMode")) {
|
||||
viewSourceButton = (
|
||||
<>
|
||||
|
||||
<AccessibleButton onClick={this.onViewSource} kind="link">
|
||||
{_t("action|view_source")}
|
||||
</AccessibleButton>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<li className={classNames(classes)} data-layout={this.props.layout}>
|
||||
<div className="mx_EventTile_line">
|
||||
<span>
|
||||
{_t("timeline|error_rendering_message")}
|
||||
{mxEvent && ` (${mxEvent.getType()})`}
|
||||
<BugReportDialogButton error={this.state.error} label="react-tile-soft-crash" />
|
||||
{viewSourceButton}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
@@ -56,6 +56,8 @@ import {
|
||||
PinnedMessageBadge,
|
||||
ReactionsRowButtonView,
|
||||
ReactionsRowView,
|
||||
TileErrorView,
|
||||
type TileErrorViewLayout,
|
||||
useViewModel,
|
||||
} from "@element-hq/web-shared-components";
|
||||
|
||||
@@ -89,7 +91,6 @@ import { DecryptionFailureTracker } from "../../../DecryptionFailureTracker";
|
||||
import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
|
||||
import { shouldDisplayReply } from "../../../utils/Reply";
|
||||
import PosthogTrackers from "../../../PosthogTrackers";
|
||||
import TileErrorBoundary from "../messages/TileErrorBoundary";
|
||||
import { haveRendererForEvent, isMessageEvent, renderTile } from "../../../events/EventTileFactory";
|
||||
import ThreadSummary, { ThreadMessagePreview } from "./ThreadSummary";
|
||||
import { ReadReceiptGroup } from "./ReadReceiptGroup";
|
||||
@@ -114,9 +115,11 @@ import {
|
||||
MAX_ITEMS_WHEN_LIMITED,
|
||||
ReactionsRowViewModel,
|
||||
} from "../../../viewmodels/room/timeline/event-tile/reactions/ReactionsRowViewModel";
|
||||
import { TileErrorViewModel } from "../../../viewmodels/message-body/TileErrorViewModel";
|
||||
import { EventTileActionBarViewModel } from "../../../viewmodels/room/EventTileActionBarViewModel";
|
||||
import { ThreadListActionBarViewModel } from "../../../viewmodels/room/ThreadListActionBarViewModel";
|
||||
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
|
||||
import { useSettingValue } from "../../../hooks/useSettings";
|
||||
import { DecryptionFailureBodyFactory, RedactedBodyFactory } from "../messages/MBodyFactory";
|
||||
|
||||
export type GetRelationsForEvent = (
|
||||
@@ -1571,12 +1574,77 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Props for the event-tile fallback rendered after the tile error boundary catches a render failure.
|
||||
*/
|
||||
interface EventTileErrorFallbackProps {
|
||||
error: Error;
|
||||
layout: Layout;
|
||||
mxEvent: MatrixEvent;
|
||||
}
|
||||
|
||||
function EventTileErrorFallback({ error, layout, mxEvent }: Readonly<EventTileErrorFallbackProps>): JSX.Element {
|
||||
const developerMode = useSettingValue("developerMode");
|
||||
const vm = useCreateAutoDisposedViewModel(
|
||||
() => new TileErrorViewModel({ error, layout: layout as TileErrorViewLayout, mxEvent, developerMode }),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
vm.setError(error);
|
||||
}, [error, vm]);
|
||||
|
||||
useEffect(() => {
|
||||
vm.setLayout(layout as TileErrorViewLayout);
|
||||
}, [layout, vm]);
|
||||
|
||||
useEffect(() => {
|
||||
vm.setDeveloperMode(developerMode);
|
||||
}, [developerMode, vm]);
|
||||
|
||||
return <TileErrorView vm={vm} className="mx_EventTile mx_EventTile_info mx_EventTile_content" />;
|
||||
}
|
||||
|
||||
interface EventTileErrorBoundaryProps {
|
||||
children: ReactNode;
|
||||
layout: Layout;
|
||||
mxEvent: MatrixEvent;
|
||||
}
|
||||
|
||||
interface EventTileErrorBoundaryState {
|
||||
error?: Error;
|
||||
}
|
||||
|
||||
class EventTileErrorBoundary extends React.Component<EventTileErrorBoundaryProps, EventTileErrorBoundaryState> {
|
||||
public constructor(props: EventTileErrorBoundaryProps) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
public static getDerivedStateFromError(error: Error): Partial<EventTileErrorBoundaryState> {
|
||||
return { error };
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
if (this.state.error) {
|
||||
return (
|
||||
<EventTileErrorFallback
|
||||
error={this.state.error}
|
||||
layout={this.props.layout}
|
||||
mxEvent={this.props.mxEvent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrap all event tiles with the tile error boundary so that any throws even during construction are captured
|
||||
const SafeEventTile = (props: EventTileProps): JSX.Element => {
|
||||
return (
|
||||
<TileErrorBoundary mxEvent={props.mxEvent} layout={props.layout ?? Layout.Group}>
|
||||
<EventTileErrorBoundary mxEvent={props.mxEvent} layout={props.layout ?? Layout.Group}>
|
||||
<UnwrappedEventTile {...props} />
|
||||
</TileErrorBoundary>
|
||||
</EventTileErrorBoundary>
|
||||
);
|
||||
};
|
||||
export default SafeEventTile;
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
/*
|
||||
* Copyright 2026 Element Creations Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { type MouseEventHandler } from "react";
|
||||
import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
|
||||
import {
|
||||
BaseViewModel,
|
||||
type TileErrorViewLayout,
|
||||
type TileErrorViewSnapshot as TileErrorViewSnapshotInterface,
|
||||
type TileErrorViewModel as TileErrorViewModelInterface,
|
||||
} from "@element-hq/web-shared-components";
|
||||
|
||||
import { _t } from "../../languageHandler";
|
||||
import Modal from "../../Modal";
|
||||
import SdkConfig from "../../SdkConfig";
|
||||
import { BugReportEndpointURLLocal } from "../../IConfigOptions";
|
||||
import ViewSource from "../../components/structures/ViewSource";
|
||||
import BugReportDialog from "../../components/views/dialogs/BugReportDialog";
|
||||
|
||||
const TILE_ERROR_BUG_REPORT_LABEL = "react-tile-soft-crash";
|
||||
|
||||
export interface TileErrorViewModelProps {
|
||||
/**
|
||||
* Layout variant used by the host timeline.
|
||||
*/
|
||||
layout: TileErrorViewLayout;
|
||||
/**
|
||||
* Event whose tile failed to render.
|
||||
*/
|
||||
mxEvent: MatrixEvent;
|
||||
/**
|
||||
* Render error captured by the boundary.
|
||||
*/
|
||||
error: Error;
|
||||
/**
|
||||
* Whether developer mode is enabled, which controls the view-source action.
|
||||
*/
|
||||
developerMode: boolean;
|
||||
}
|
||||
|
||||
function getBugReportCtaLabel(): string | undefined {
|
||||
const bugReportUrl = SdkConfig.get().bug_report_endpoint_url;
|
||||
|
||||
if (!bugReportUrl) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return bugReportUrl === BugReportEndpointURLLocal
|
||||
? _t("bug_reporting|download_logs")
|
||||
: _t("bug_reporting|submit_debug_logs");
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the localized view-source action label when developer mode is enabled.
|
||||
*/
|
||||
function getViewSourceCtaLabel(developerMode: boolean): string | undefined {
|
||||
return developerMode ? _t("action|view_source") : undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* ViewModel for the tile error fallback, providing the snapshot shown when a tile fails to render.
|
||||
*
|
||||
* The snapshot includes the host timeline layout, the fallback message, the event type,
|
||||
* and optional bug-report and view-source action labels. The view model also exposes
|
||||
* click handlers for those actions, opening the bug-report or view-source dialog when
|
||||
* available.
|
||||
*/
|
||||
export class TileErrorViewModel
|
||||
extends BaseViewModel<TileErrorViewSnapshotInterface, TileErrorViewModelProps>
|
||||
implements TileErrorViewModelInterface
|
||||
{
|
||||
private static readonly computeSnapshot = (props: TileErrorViewModelProps): TileErrorViewSnapshotInterface => ({
|
||||
layout: props.layout,
|
||||
message: _t("timeline|error_rendering_message"),
|
||||
eventType: props.mxEvent.getType(),
|
||||
bugReportCtaLabel: getBugReportCtaLabel(),
|
||||
viewSourceCtaLabel: getViewSourceCtaLabel(props.developerMode),
|
||||
});
|
||||
|
||||
public constructor(props: TileErrorViewModelProps) {
|
||||
super(props, TileErrorViewModel.computeSnapshot(props));
|
||||
}
|
||||
|
||||
public setLayout(layout: TileErrorViewLayout): void {
|
||||
this.props.layout = layout;
|
||||
this.snapshot.merge({ layout });
|
||||
}
|
||||
|
||||
public setError(error: Error): void {
|
||||
this.props.error = error;
|
||||
}
|
||||
|
||||
public setDeveloperMode(developerMode: boolean): void {
|
||||
this.props.developerMode = developerMode;
|
||||
|
||||
const nextViewSourceCtaLabel = getViewSourceCtaLabel(developerMode);
|
||||
this.snapshot.merge({ viewSourceCtaLabel: nextViewSourceCtaLabel });
|
||||
}
|
||||
|
||||
public onBugReportClick: MouseEventHandler<HTMLButtonElement> = () => {
|
||||
if (!this.snapshot.current.bugReportCtaLabel) {
|
||||
return;
|
||||
}
|
||||
|
||||
Modal.createDialog(BugReportDialog, {
|
||||
label: TILE_ERROR_BUG_REPORT_LABEL,
|
||||
error: this.props.error,
|
||||
});
|
||||
};
|
||||
|
||||
public onViewSourceClick: MouseEventHandler<HTMLButtonElement> = () => {
|
||||
if (!this.snapshot.current.viewSourceCtaLabel) {
|
||||
return;
|
||||
}
|
||||
|
||||
Modal.createDialog(
|
||||
ViewSource,
|
||||
{
|
||||
mxEvent: this.props.mxEvent,
|
||||
},
|
||||
"mx_Dialog_viewsource",
|
||||
);
|
||||
};
|
||||
}
|
||||
+31
-6
@@ -11,8 +11,6 @@ import { type RenderResult, render } from "jest-matrix-react";
|
||||
import { type MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import MKeyVerificationRequest from "../../../../../src/components/views/messages/MKeyVerificationRequest";
|
||||
import TileErrorBoundary from "../../../../../src/components/views/messages/TileErrorBoundary";
|
||||
import { Layout } from "../../../../../src/settings/enums/Layout";
|
||||
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
|
||||
import { filterConsole } from "../../../../test-utils";
|
||||
|
||||
@@ -60,22 +58,49 @@ describe("MKeyVerificationRequest", () => {
|
||||
});
|
||||
});
|
||||
|
||||
interface TestTileErrorBoundaryProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
interface TestTileErrorBoundaryState {
|
||||
error?: Error;
|
||||
}
|
||||
|
||||
class TestTileErrorBoundary extends React.Component<TestTileErrorBoundaryProps, TestTileErrorBoundaryState> {
|
||||
public constructor(props: TestTileErrorBoundaryProps) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
public static getDerivedStateFromError(error: Error): Partial<TestTileErrorBoundaryState> {
|
||||
return { error };
|
||||
}
|
||||
|
||||
public render(): React.ReactNode {
|
||||
if (this.state.error) {
|
||||
return "Can't load this message";
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
function renderEventNoClient(event: MatrixEvent): RenderResult {
|
||||
return render(
|
||||
<TileErrorBoundary mxEvent={event} layout={Layout.Group}>
|
||||
<TestTileErrorBoundary>
|
||||
<MKeyVerificationRequest mxEvent={event} />
|
||||
</TileErrorBoundary>,
|
||||
</TestTileErrorBoundary>,
|
||||
);
|
||||
}
|
||||
|
||||
function renderEvent(client: MatrixClient, event: MatrixEvent): RenderResult {
|
||||
return render(
|
||||
<TileErrorBoundary mxEvent={event} layout={Layout.Group}>
|
||||
<TestTileErrorBoundary>
|
||||
<MatrixClientContext.Provider value={client}>
|
||||
<MKeyVerificationRequest mxEvent={event} />
|
||||
</MatrixClientContext.Provider>
|
||||
,
|
||||
</TileErrorBoundary>,
|
||||
</TestTileErrorBoundary>,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -31,6 +31,7 @@ import { mkEncryptedMatrixEvent } from "matrix-js-sdk/src/testing";
|
||||
import { getByTestId } from "@testing-library/dom";
|
||||
|
||||
import EventTile, { type EventTileProps } from "../../../../../src/components/views/rooms/EventTile";
|
||||
import * as EventTileFactory from "../../../../../src/events/EventTileFactory";
|
||||
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
|
||||
import { type RoomContextType, TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
|
||||
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
|
||||
@@ -106,7 +107,7 @@ describe("EventTile", () => {
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.spyOn(PinningUtils, "isPinned").mockReturnValue(false);
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe("EventTile thread summary", () => {
|
||||
@@ -200,6 +201,19 @@ describe("EventTile", () => {
|
||||
expect(screen.getByText("Pinned message")).toBeInTheDocument();
|
||||
},
|
||||
);
|
||||
|
||||
it("renders the tile error fallback when tile rendering throws", async () => {
|
||||
jest.spyOn(console, "error").mockImplementation(() => {});
|
||||
jest.spyOn(EventTileFactory, "renderTile").mockImplementation(() => {
|
||||
throw new Error("Boom");
|
||||
});
|
||||
|
||||
getComponent();
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Can't load this message (m.room.message)")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("EventTile in the right panel", () => {
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
/*
|
||||
* Copyright 2026 Element Creations Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { mocked } from "jest-mock";
|
||||
import { MatrixEvent } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import Modal from "../../../src/Modal";
|
||||
import SdkConfig from "../../../src/SdkConfig";
|
||||
import { BugReportEndpointURLLocal } from "../../../src/IConfigOptions";
|
||||
import ViewSource from "../../../src/components/structures/ViewSource";
|
||||
import BugReportDialog from "../../../src/components/views/dialogs/BugReportDialog";
|
||||
import { TileErrorViewModel } from "../../../src/viewmodels/message-body/TileErrorViewModel";
|
||||
|
||||
describe("TileErrorViewModel", () => {
|
||||
const createEvent = (type = "m.room.message"): MatrixEvent =>
|
||||
new MatrixEvent({
|
||||
content: {},
|
||||
event_id: `$${type}`,
|
||||
origin_server_ts: Date.now(),
|
||||
room_id: "!room:example.org",
|
||||
sender: "@alice:example.org",
|
||||
type,
|
||||
});
|
||||
|
||||
const createVm = (
|
||||
overrides: Partial<ConstructorParameters<typeof TileErrorViewModel>[0]> = {},
|
||||
): TileErrorViewModel => {
|
||||
const error = overrides.error ?? new Error("Boom");
|
||||
const mxEvent = overrides.mxEvent ?? createEvent();
|
||||
|
||||
return new TileErrorViewModel({
|
||||
layout: "group",
|
||||
developerMode: true,
|
||||
error,
|
||||
mxEvent,
|
||||
...overrides,
|
||||
});
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
SdkConfig.reset();
|
||||
jest.spyOn(Modal, "createDialog").mockImplementation(() => ({ close: jest.fn() }) as any);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
SdkConfig.reset();
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
it("computes the initial snapshot from app state", () => {
|
||||
SdkConfig.add({ bug_report_endpoint_url: "https://example.org" });
|
||||
const vm = createVm();
|
||||
|
||||
expect(vm.getSnapshot()).toEqual({
|
||||
layout: "group",
|
||||
message: "Can't load this message",
|
||||
eventType: "m.room.message",
|
||||
bugReportCtaLabel: "Submit debug logs",
|
||||
viewSourceCtaLabel: "View Source",
|
||||
});
|
||||
});
|
||||
|
||||
it("uses the download logs label for local bug reports", () => {
|
||||
SdkConfig.add({ bug_report_endpoint_url: BugReportEndpointURLLocal });
|
||||
const vm = createVm();
|
||||
|
||||
expect(vm.getSnapshot().bugReportCtaLabel).toBe("Download logs");
|
||||
});
|
||||
|
||||
it("hides optional actions when unavailable", () => {
|
||||
const vm = createVm({ developerMode: false });
|
||||
|
||||
expect(vm.getSnapshot().bugReportCtaLabel).toBeUndefined();
|
||||
expect(vm.getSnapshot().viewSourceCtaLabel).toBeUndefined();
|
||||
});
|
||||
|
||||
it("updates the layout when the host timeline layout changes", () => {
|
||||
const vm = createVm();
|
||||
const listener = jest.fn();
|
||||
vm.subscribe(listener);
|
||||
|
||||
vm.setLayout("bubble");
|
||||
|
||||
expect(vm.getSnapshot().layout).toBe("bubble");
|
||||
expect(listener).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("guards setters against unchanged values", () => {
|
||||
const error = new Error("Boom");
|
||||
const mxEvent = createEvent();
|
||||
const vm = createVm({ developerMode: true, error, mxEvent });
|
||||
const listener = jest.fn();
|
||||
vm.subscribe(listener);
|
||||
|
||||
vm.setDeveloperMode(true);
|
||||
vm.setError(error);
|
||||
vm.setLayout("group");
|
||||
|
||||
expect(listener).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("opens the bug report dialog with the current error", () => {
|
||||
SdkConfig.add({ bug_report_endpoint_url: "https://example.org" });
|
||||
const originalError = new Error("Boom");
|
||||
const updatedError = new Error("Updated boom");
|
||||
const vm = createVm({ error: originalError });
|
||||
|
||||
vm.setError(updatedError);
|
||||
vm.onBugReportClick({} as any);
|
||||
|
||||
expect(Modal.createDialog).toHaveBeenCalledWith(BugReportDialog, {
|
||||
label: "react-tile-soft-crash",
|
||||
error: updatedError,
|
||||
});
|
||||
});
|
||||
|
||||
it("opens the view source dialog with the current event", () => {
|
||||
const mxEvent = createEvent("m.room.redaction");
|
||||
const vm = createVm({ mxEvent });
|
||||
|
||||
vm.onViewSourceClick({} as any);
|
||||
|
||||
expect(Modal.createDialog).toHaveBeenCalledWith(
|
||||
ViewSource,
|
||||
{
|
||||
mxEvent,
|
||||
},
|
||||
"mx_Dialog_viewsource",
|
||||
);
|
||||
});
|
||||
|
||||
it("does not open view source when developer mode is disabled", () => {
|
||||
const vm = createVm({ developerMode: false });
|
||||
|
||||
vm.onViewSourceClick({} as any);
|
||||
|
||||
expect(mocked(Modal.createDialog)).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user