diff --git a/src/livekit/useECConnectionState.test.tsx b/src/livekit/useECConnectionState.test.tsx index 6ee63c3b..0b13e6ce 100644 --- a/src/livekit/useECConnectionState.test.tsx +++ b/src/livekit/useECConnectionState.test.tsx @@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details. */ import { type FC, useCallback, useState } from "react"; -import { test } from "vitest"; +import { test, vi } from "vitest"; import { ConnectionError, ConnectionErrorReason, @@ -60,7 +60,7 @@ test.each<[string, ConnectionError]>([ const user = userEvent.setup(); render( - + , diff --git a/src/room/GroupCallErrorBoundary.test.tsx b/src/room/GroupCallErrorBoundary.test.tsx index 893389a7..145b606e 100644 --- a/src/room/GroupCallErrorBoundary.test.tsx +++ b/src/room/GroupCallErrorBoundary.test.tsx @@ -17,7 +17,10 @@ import { import { BrowserRouter } from "react-router-dom"; import userEvent from "@testing-library/user-event"; -import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary.tsx"; +import { + type CallErrorRecoveryAction, + GroupCallErrorBoundary, +} from "./GroupCallErrorBoundary.tsx"; import { ConnectionLostError, E2EENotSupportedError, @@ -60,7 +63,10 @@ test.each([ const onErrorMock = vi.fn(); const { asFragment } = render( - + , @@ -85,14 +91,17 @@ test("should render the error page with link back to home", async () => { const onErrorMock = vi.fn(); const { asFragment } = render( - + , ); await screen.findByText("Call is not supported"); - expect(screen.getByText(/Domain: example.com/i)).toBeInTheDocument(); + expect(screen.getByText(/Domain: example\.com/i)).toBeInTheDocument(); expect( screen.getByText(/Error Code: MISSING_MATRIX_RTC_FOCUS/i), ).toBeInTheDocument(); @@ -105,39 +114,7 @@ test("should render the error page with link back to home", async () => { expect(asFragment()).toMatchSnapshot(); }); -test("should have a reconnect button for ConnectionLostError", async () => { - const user = userEvent.setup(); - - const reconnectCallback = vi.fn(); - - const TestComponent = (): ReactNode => { - throw new ConnectionLostError(); - }; - - const { asFragment } = render( - - - - - , - ); - - await screen.findByText("Connection lost"); - await screen.findByRole("button", { name: "Reconnect" }); - await screen.findByRole("button", { name: "Return to home screen" }); - - expect(asFragment()).toMatchSnapshot(); - - await user.click(screen.getByRole("button", { name: "Reconnect" })); - - expect(reconnectCallback).toHaveBeenCalledOnce(); - expect(reconnectCallback).toHaveBeenCalledWith("reconnect"); -}); - -test("Action handling should reset error state", async () => { +test("ConnectionLostError: Action handling should reset error state", async () => { const user = userEvent.setup(); const TestComponent: FC<{ fail: boolean }> = ({ fail }): ReactNode => { @@ -147,11 +124,17 @@ test("Action handling should reset error state", async () => { return
HELLO
; }; + const reconnectCallbackSpy = vi.fn(); + const WrapComponent = (): ReactNode => { const [failState, setFailState] = useState(true); - const reconnectCallback = useCallback(() => { - setFailState(false); - }, [setFailState]); + const reconnectCallback = useCallback( + (action: CallErrorRecoveryAction) => { + reconnectCallbackSpy(action); + setFailState(false); + }, + [setFailState], + ); return ( @@ -162,15 +145,22 @@ test("Action handling should reset error state", async () => { ); }; - render(); + const { asFragment } = render(); // Should fail first await screen.findByText("Connection lost"); + await screen.findByRole("button", { name: "Reconnect" }); + await screen.findByRole("button", { name: "Return to home screen" }); + + expect(asFragment()).toMatchSnapshot(); await user.click(screen.getByRole("button", { name: "Reconnect" })); // reconnect should have reset the error, thus rendering should be ok await screen.findByText("HELLO"); + + expect(reconnectCallbackSpy).toHaveBeenCalledOnce(); + expect(reconnectCallbackSpy).toHaveBeenCalledWith("reconnect"); }); describe("Rageshake button", () => { @@ -187,7 +177,10 @@ describe("Rageshake button", () => { render( - + , diff --git a/src/room/GroupCallErrorBoundary.tsx b/src/room/GroupCallErrorBoundary.tsx index 67b95733..71a676ed 100644 --- a/src/room/GroupCallErrorBoundary.tsx +++ b/src/room/GroupCallErrorBoundary.tsx @@ -38,7 +38,7 @@ export type RecoveryActionHandler = (action: CallErrorRecoveryAction) => void; interface ErrorPageProps { error: ElementCallError; - recoveryActionHandler?: RecoveryActionHandler; + recoveryActionHandler: RecoveryActionHandler; resetError: () => void; } @@ -48,7 +48,6 @@ const ErrorPage: FC = ({ }: ErrorPageProps): ReactElement => { const { t } = useTranslation(); - // let title: string; let icon: ComponentType>; switch (error.category) { case ErrorCategory.CONFIGURATION_ISSUE: @@ -68,7 +67,7 @@ const ErrorPage: FC = ({ if (error instanceof ConnectionLostError) { actions.push({ label: t("call_ended_view.reconnect_button"), - onClick: () => recoveryActionHandler?.("reconnect"), + onClick: () => recoveryActionHandler("reconnect"), }); } @@ -101,7 +100,7 @@ const ErrorPage: FC = ({ interface BoundaryProps { children: ReactNode | (() => ReactNode); - recoveryActionHandler?: RecoveryActionHandler; + recoveryActionHandler: RecoveryActionHandler; onError?: (error: unknown) => void; } @@ -122,7 +121,7 @@ export const GroupCallErrorBoundary = ({ resetError={resetError} recoveryActionHandler={(action: CallErrorRecoveryAction) => { resetError(); - recoveryActionHandler?.(action); + recoveryActionHandler(action); }} /> ); diff --git a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap index f5814114..c261b635 100644 --- a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap +++ b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`should have a reconnect button for ConnectionLostError 1`] = ` +exports[`ConnectionLostError: Action handling should reset error state 1`] = `
`; -exports[`should render the error page 1`] = ` - -
-
-
- -
-
-
-
-
-
-
- - - - -
-

- Call is not supported -

-

- The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS). -

- -
-
-
-
- -`; - exports[`should render the error page with link back to home 1`] = `