Change the way we as unknown the mock RTC session.

This commit is contained in:
Half-Shot
2024-12-06 16:52:18 +00:00
parent 13558db1e2
commit 4a0926fe9d
7 changed files with 69 additions and 29 deletions

View File

@@ -18,6 +18,7 @@ import {
} from "../utils/testReactions";
import { ReactionToggleButton } from "./ReactionToggleButton";
import { ElementCallReactionEventType } from "../reactions";
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
const memberUserIdAlice = "@alice:example.org";
const memberEventAlice = "$membership-alice:example.org";
@@ -29,7 +30,7 @@ const membership: Record<string, string> = {
function TestComponent({
rtcSession,
}: {
rtcSession: MockRTCSession;
rtcSession: MatrixRTCSession;
}): ReactNode {
return (
<TooltipProvider>
@@ -45,7 +46,7 @@ test("Can open menu", async () => {
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { getByLabelText, container } = render(
<TestComponent rtcSession={rtcSession} />,
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
await user.click(getByLabelText("common.reactions"));
expect(container).toMatchSnapshot();
@@ -56,7 +57,7 @@ test("Can raise hand", async () => {
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { getByLabelText, container } = render(
<TestComponent rtcSession={rtcSession} />,
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
await user.click(getByLabelText("common.reactions"));
await user.click(getByLabelText("action.raise_hand"));
@@ -81,7 +82,7 @@ test("Can lower hand", async () => {
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { getByLabelText, container } = render(
<TestComponent rtcSession={rtcSession} />,
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
const reactionEvent = room.testSendHandRaise(memberEventAlice, membership);
await user.click(getByLabelText("common.reactions"));
@@ -95,7 +96,7 @@ test("Can react with emoji", async () => {
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { getByLabelText, getByText } = render(
<TestComponent rtcSession={rtcSession} />,
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
await user.click(getByLabelText("common.reactions"));
await user.click(getByText("🐶"));
@@ -120,7 +121,7 @@ test("Can fully expand emoji picker", async () => {
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { getByText, container, getByLabelText } = render(
<TestComponent rtcSession={rtcSession} />,
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
await user.click(getByLabelText("common.reactions"));
await user.click(getByLabelText("action.show_more"));
@@ -148,7 +149,7 @@ test("Can close reaction dialog", async () => {
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { getByLabelText, container } = render(
<TestComponent rtcSession={rtcSession} />,
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
await user.click(getByLabelText("common.reactions"));
await user.click(getByLabelText("action.show_more"));

View File

@@ -84,7 +84,9 @@ function TestComponent({
vm: CallViewModel;
}): ReactNode {
return (
<TestReactionsWrapper rtcSession={rtcSession}>
<TestReactionsWrapper
rtcSession={rtcSession as unknown as MatrixRTCSession}
>
<CallEventAudioRenderer vm={vm} />
</TestReactionsWrapper>
);

View File

@@ -331,7 +331,7 @@ export const GroupCallView: FC<Props> = ({
<ActiveCall
client={client}
matrixInfo={matrixInfo}
rtcSession={rtcSession}
rtcSession={rtcSession as unknown as MatrixRTCSession}
participantCount={participantCount}
onLeave={onLeave}
hideHeader={hideHeader}

View File

@@ -31,6 +31,7 @@ import {
} from "../settings/settings";
import { prefetchSounds, useAudioContext } from "../useAudioContext";
import { GenericReaction, ReactionSet } from "../reactions";
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
const memberUserIdAlice = "@alice:example.org";
const memberUserIdBob = "@bob:example.org";
@@ -48,7 +49,7 @@ const membership: Record<string, string> = {
function TestComponent({
rtcSession,
}: {
rtcSession: MockRTCSession;
rtcSession: MatrixRTCSession;
}): ReactNode {
return (
<TooltipProvider>
@@ -91,7 +92,9 @@ test("preloads all audio elements", () => {
new MockRoom(memberUserIdAlice),
membership,
);
render(<TestComponent rtcSession={rtcSession} />);
render(
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
expect(prefetchSounds).toHaveBeenCalledOnce();
});
@@ -99,7 +102,9 @@ test("will play an audio sound when there is a reaction", () => {
playReactionsSound.setValue(true);
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
render(<TestComponent rtcSession={rtcSession} />);
render(
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
// Find the first reaction with a sound effect
const chosenReaction = ReactionSet.find((r) => !!r.sound);
@@ -118,7 +123,9 @@ test("will play the generic audio sound when there is soundless reaction", () =>
playReactionsSound.setValue(true);
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
render(<TestComponent rtcSession={rtcSession} />);
render(
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
// Find the first reaction with a sound effect
const chosenReaction = ReactionSet.find((r) => !r.sound);
@@ -138,7 +145,9 @@ test("will play multiple audio sounds when there are multiple different reaction
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
render(<TestComponent rtcSession={rtcSession} />);
render(
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
// Find the first reaction with a sound effect
const [reaction1, reaction2] = ReactionSet.filter((r) => !!r.sound);

View File

@@ -40,7 +40,9 @@ function TestComponent({
}): ReactNode {
return (
<TooltipProvider>
<TestReactionsWrapper rtcSession={rtcSession}>
<TestReactionsWrapper
rtcSession={rtcSession as unknown as MatrixRTCSession}
>
<ReactionsOverlay />
</TestReactionsWrapper>
</TooltipProvider>
@@ -57,7 +59,9 @@ test("defaults to showing no reactions", () => {
new MockRoom(memberUserIdAlice),
membership,
);
const { container } = render(<TestComponent rtcSession={rtcSession} />);
const { container } = render(
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
expect(container.getElementsByTagName("span")).toHaveLength(0);
});
@@ -66,7 +70,9 @@ test("shows a reaction when sent", () => {
const reaction = ReactionSet[0];
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { getByRole } = render(<TestComponent rtcSession={rtcSession} />);
const { getByRole } = render(
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
act(() => {
room.testSendReaction(memberEventAlice, reaction, membership);
});
@@ -80,7 +86,9 @@ test("shows two of the same reaction when sent", () => {
const reaction = ReactionSet[0];
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { getAllByRole } = render(<TestComponent rtcSession={rtcSession} />);
const { getAllByRole } = render(
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
act(() => {
room.testSendReaction(memberEventAlice, reaction, membership);
});
@@ -95,7 +103,9 @@ test("shows two different reactions when sent", () => {
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const [reactionA, reactionB] = ReactionSet;
const { getAllByRole } = render(<TestComponent rtcSession={rtcSession} />);
const { getAllByRole } = render(
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
act(() => {
room.testSendReaction(memberEventAlice, reactionA, membership);
});
@@ -115,6 +125,8 @@ test("hides reactions when reaction animations are disabled", () => {
act(() => {
room.testSendReaction(memberEventAlice, reaction, membership);
});
const { container } = render(<TestComponent rtcSession={rtcSession} />);
const { container } = render(
<TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
);
expect(container.getElementsByTagName("span")).toHaveLength(0);
});

View File

@@ -60,7 +60,9 @@ describe("useReactions", () => {
membership,
);
const { queryByRole } = render(
<TestReactionsWrapper rtcSession={rtcSession}>
<TestReactionsWrapper
rtcSession={rtcSession as unknown as MatrixRTCSession}
>
<TestComponent />
</TestReactionsWrapper>,
);
@@ -70,7 +72,9 @@ describe("useReactions", () => {
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestReactionsWrapper rtcSession={rtcSession}>
<TestReactionsWrapper
rtcSession={rtcSession as unknown as MatrixRTCSession}
>
<TestComponent />
</TestReactionsWrapper>,
);
@@ -83,7 +87,9 @@ describe("useReactions", () => {
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestReactionsWrapper rtcSession={rtcSession}>
<TestReactionsWrapper
rtcSession={rtcSession as unknown as MatrixRTCSession}
>
<TestComponent />
</TestReactionsWrapper>,
);
@@ -107,7 +113,9 @@ describe("useReactions", () => {
]);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestReactionsWrapper rtcSession={rtcSession}>
<TestReactionsWrapper
rtcSession={rtcSession as unknown as MatrixRTCSession}
>
<TestComponent />
</TestReactionsWrapper>,
);
@@ -121,7 +129,9 @@ describe("useReactions", () => {
]);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestReactionsWrapper rtcSession={rtcSession}>
<TestReactionsWrapper
rtcSession={rtcSession as unknown as MatrixRTCSession}
>
<TestComponent />
</TestReactionsWrapper>,
);
@@ -135,7 +145,9 @@ describe("useReactions", () => {
]);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestReactionsWrapper rtcSession={rtcSession}>
<TestReactionsWrapper
rtcSession={rtcSession as unknown as MatrixRTCSession}
>
<TestComponent />
</TestReactionsWrapper>,
);
@@ -153,7 +165,9 @@ describe("useReactions", () => {
]);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestReactionsWrapper rtcSession={rtcSession}>
<TestReactionsWrapper
rtcSession={rtcSession as unknown as MatrixRTCSession}
>
<TestComponent />
</TestReactionsWrapper>,
);
@@ -163,7 +177,9 @@ describe("useReactions", () => {
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestReactionsWrapper rtcSession={rtcSession}>
<TestReactionsWrapper
rtcSession={rtcSession as unknown as MatrixRTCSession}
>
<TestComponent />
</TestReactionsWrapper>,
);

View File

@@ -32,7 +32,7 @@ export const TestReactionsWrapper = ({
rtcSession,
children,
}: PropsWithChildren<{
rtcSession: MockRTCSession;
rtcSession: MatrixRTCSession;
}>): ReactNode => {
return (
<ReactionsProvider rtcSession={rtcSession as unknown as MatrixRTCSession}>