Use ViewModel approach for the CallFooterView + interaction tests

(this is just imaginary. There is no view model yet.)

src/components/CallFooter.stories.tsx

@@ -5,18 +5,40 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { fn } from "storybook/test";
+import { expect, fn, userEvent, within } from "storybook/test";
 import { BehaviorSubject } from "rxjs";
-import { type ReactNode } from "react";
+import { type JSX, type ReactNode } from "react";
 import { Link } from "@vector-im/compound-web";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { CallFooter, type FooterProps } from "./CallFooter";
+import { CallFooter, type FooterSnapshot } from "./CallFooter";
 import inCallViewStyles from "../room/InCallView.module.css";
+import { createMockedViewModel } from "../state/ViewModel";
 import { ReactionsSenderContext } from "../reactions/useReactionsSender";
 import { type ReactionOption } from "../reactions";
+import { type GridMode } from "../state/CallViewModel/CallViewModel";
+// consts for tests
+const reactionIdentifier = "@user:example.com:DEVICE";
+const reactionData = {
+  handsRaised$: new BehaviorSubject({}),
+  reactions$: new BehaviorSubject({}),
+};
 
-function CallFooterWrapper(props: FooterProps): ReactNode {
+/**
+ * A wrapper component that is used for:
+ *  - exposing the snapshot via props so the storybook documents the snapshot properties (basically unpack them form the vm)
+ *  - Add additional react context
+ * @param chilren used for the "Back to Recents" button in the lobby stories, but can be used for anything really
+ * @param vmSnapshot the Snapshot of the vm, the wrapper will create a mocked vm from it and pass it to the CallFooter.
+ * @returns
+ */
+function CallFooterStoryWrapper({
+  children,
+  ...vmSnapshot
+}: FooterSnapshot & {
+  children?: false | JSX.Element | JSX.Element[] | undefined;
+}): ReactNode {
+  const vm = createMockedViewModel(vmSnapshot);
   return (
     <div className={inCallViewStyles.inRoom}>
       <ReactionsSenderContext
@@ -26,33 +48,28 @@ function CallFooterWrapper(props: FooterProps): ReactNode {
           sendReaction: async (reaction: ReactionOption) => Promise.resolve(),
         }}
       >
-        <CallFooter {...props} />
+        <CallFooter vm={vm} />
       </ReactionsSenderContext>
     </div>
   );
 }
 
 const meta = {
-  component: CallFooterWrapper,
-} satisfies Meta<typeof CallFooterWrapper>;
+  component: CallFooterStoryWrapper,
+} satisfies Meta<typeof CallFooterStoryWrapper>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const reactionIdentifier = "@user:example.com:DEVICE";
-const reactionData = {
-  handsRaised$: new BehaviorSubject({}),
-  reactions$: new BehaviorSubject({}),
-};
-
 const fnArgType = {
   control: { type: "select" as const },
   options: ["MockedCallback", "undefined"],
   mapping: { MockedCallback: fn(), undefined: undefined },
 };
+
 export const Default: Story = {
   args: {
-    hideLogo: true,
+    showLogo: false,
     layoutMode: "grid",
     audioEnabled: true,
     videoEnabled: true,
@@ -62,12 +79,16 @@ export const Default: Story = {
     toggleVideo: fn(),
     toggleScreenSharing: fn(),
     hangup: fn(),
+    buttonSize: "lg",
   },
   parameters: {
     layout: "fullscreen",
   },
   argTypes: {
-    layoutMode: { control: "radio", options: ["grid", "spotlight"] },
+    layoutMode: {
+      control: "radio",
+      options: ["grid", "spotlight"] satisfies GridMode[],
+    },
     audioOutputSwitcher: {
       control: "select",
       options: ["NoOutputCallback", "speaker", "earpiece"],
@@ -110,7 +131,7 @@ export const WithLogo: Story = {
   ...Default,
   args: {
     ...Default.args,
-    hideLogo: false,
+    showLogo: true,
   },
 };
 
@@ -121,6 +142,51 @@ export const AudioVideoEnabled: Story = {
     audioEnabled: true,
     videoEnabled: true,
   },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const spotlightRadio = canvas.getByRole("radio", { name: "Spotlight" });
+    await userEvent.click(spotlightRadio);
+    await expect(args.setLayoutMode).toHaveBeenCalledWith("spotlight");
+
+    const micButtonMute = canvas.getByRole("switch", {
+      name: "Mute microphone",
+    });
+    await userEvent.click(micButtonMute);
+    await expect(args.toggleAudio).toHaveBeenCalled();
+
+    const videoMuteButton = canvas.getByRole("switch", {
+      name: "Stop video",
+    });
+    await userEvent.click(videoMuteButton);
+    await expect(args.toggleVideo).toHaveBeenCalled();
+    const screenShare = canvas.getByRole("switch", {
+      name: "Share screen",
+    });
+    await userEvent.click(screenShare);
+    await expect(args.toggleScreenSharing).toHaveBeenCalled();
+    const endCall = canvas.getByRole("button", {
+      name: "End call",
+    });
+    await userEvent.click(endCall);
+    await expect(args.hangup).toHaveBeenCalled();
+  },
+};
+
+/** used to test switching to grid mode */
+export const SpotlightMode: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    layoutMode: "spotlight",
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const spotlightRadio = canvas.getByRole("radio", { name: "Grid" });
+    await userEvent.click(spotlightRadio);
+    await expect(args.setLayoutMode).toHaveBeenCalledWith("grid");
+  },
 };
 
 export const WithAudioOutputSpeaker: Story = {
@@ -150,7 +216,38 @@ export const Pip: Story = {
   ...Default,
   args: {
     ...Default.args,
-    asPip: true,
+    buttonSize: "md",
+    showSettingsButton: false,
+    layoutMode: undefined,
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(
+      canvas.queryByRole("radio", { name: "Spotlight" }),
+    ).not.toBeInTheDocument();
+
+    const micButtonMute = canvas.getByRole("switch", {
+      name: "Mute microphone",
+    });
+    await userEvent.click(micButtonMute);
+    await expect(args.toggleAudio).toHaveBeenCalled();
+
+    const videoMuteButton = canvas.getByRole("switch", {
+      name: "Stop video",
+    });
+    await userEvent.click(videoMuteButton);
+    await expect(args.toggleVideo).toHaveBeenCalled();
+    const screenShare = canvas.getByRole("switch", {
+      name: "Share screen",
+    });
+    await userEvent.click(screenShare);
+    await expect(args.toggleScreenSharing).toHaveBeenCalled();
+    const endCall = canvas.getByRole("button", {
+      name: "End call",
+    });
+    await userEvent.click(endCall);
+    await expect(args.hangup).toHaveBeenCalled();
   },
 };
 export const NoControlsWithLogo: Story = {
@@ -158,7 +255,7 @@ export const NoControlsWithLogo: Story = {
   args: {
     ...Default.args,
     hideControls: true,
-    hideLogo: false,
+    showLogo: true,
   },
 };
 
@@ -187,7 +284,7 @@ export const MobileLayout: Story = {
   ...Default,
   args: {
     ...Default.args,
-    hideLogo: true,
+    showLogo: false,
 
     audioOutputSwitcher: { targetOutput: "speaker", switch: fn() },
   },
@@ -203,7 +300,7 @@ export const Lobby: Story = {
   ...Default,
   args: {
     ...Default.args,
-    hideLogo: true,
+    showLogo: false,
     openSettings: undefined,
     setLayoutMode: undefined,
     toggleScreenSharing: undefined,
@@ -217,7 +314,7 @@ export const LobbyMobile: Story = {
   ...Default,
   args: {
     ...Default.args,
-    hideLogo: true,
+    showLogo: false,
 
     setLayoutMode: undefined,
     toggleScreenSharing: undefined,
@@ -235,7 +332,7 @@ export const LobbyRecentButton: Story = {
   args: {
     ...Default.args,
     children: <Link>Back To Recents</Link>,
-    hideLogo: true,
+    showLogo: false,
     setLayoutMode: undefined,
     toggleScreenSharing: undefined,
   },
@@ -249,7 +346,7 @@ export const LobbyRecentButtonMobile: Story = {
   args: {
     ...Default.args,
     children: <Link>Back To Recents</Link>,
-    hideLogo: true,
+    showLogo: false,
     setLayoutMode: undefined,
     toggleScreenSharing: undefined,
   },