WidgetContextMenuViewModel unit test

Author: MarcWadai

packages/shared-components/src/right-panel/WidgetContextMenu/WidgetContextMenuView.tsx

@@ -6,7 +6,6 @@
  */
 
 import React, { ReactNode, type JSX } from "react";
-import { type ClientWidgetApi } from "matrix-widget-api";
 import { Menu, MenuItem } from "@vector-im/compound-web";
 
 import { _t } from "../../utils/i18n.tsx";
@@ -21,7 +20,6 @@ export interface WidgetContextMenuSnapshot {
     showSnapshotButton: boolean;
     showMoveButtons: [boolean, boolean];
     canModify: boolean;
-    widgetMessaging: ClientWidgetApi | undefined;
     isMenuOpened: boolean;
     trigger: ReactNode;
 }

src/viewmodels/right-panel/WidgetContextMenuViewModel.tsx

@@ -126,7 +126,6 @@ export class WidgetContextMenuViewModel
             showSnapshotButton,
             showMoveButtons,
             canModify,
-            widgetMessaging,
             isMenuOpened: menuDisplayed,
             trigger,
         };
@@ -245,7 +244,7 @@ interface WidgetContextMenuProps {
     onFinished?(): void;
 }
 
-type WidgetContextMenuViewModelProps = WidgetContextMenuProps & {
+export type WidgetContextMenuViewModelProps = WidgetContextMenuProps & {
     cli: MatrixClient;
     room: Room | undefined;
     roomId: string | undefined;

test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -26,12 +26,15 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
             aria-haspopup="true"
             aria-label="Options"
             class="mx_AccessibleButton mx_BaseCard_header_title_button--option"
+            data-state="closed"
+            id="radix-_r_0_"
             role="button"
             tabindex="0"
+            type="button"
           />
         </div>
         <button
-          aria-labelledby="_r_0_"
+          aria-labelledby="_r_2_"
           class="_icon-button_1pz9o_8"
           data-kind="secondary"
           data-testid="base-card-close-button"
@@ -173,8 +176,11 @@ exports[`AppTile for a pinned widget should render 1`] = `
           aria-haspopup="true"
           aria-label="Options"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
+          data-state="closed"
+          id="radix-_r_1k_"
           role="button"
           tabindex="0"
+          type="button"
         >
           <svg
             class="mx_Icon mx_Icon_12"
@@ -286,8 +292,11 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           aria-haspopup="true"
           aria-label="Options"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
+          data-state="closed"
+          id="radix-_r_3a_"
           role="button"
           tabindex="0"
+          type="button"
         >
           <svg
             class="mx_Icon mx_Icon_12"
@@ -340,8 +349,8 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
             <span>
               Using this widget may share data 
               <div
-                aria-describedby="_r_2n_"
-                aria-labelledby="_r_2m_"
+                aria-describedby="_r_3d_"
+                aria-labelledby="_r_3c_"
                 class="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
               >
                 <svg
@@ -478,8 +487,11 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
                 aria-haspopup="true"
                 aria-label="Options"
                 class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
+                data-state="closed"
+                id="radix-_r_10_"
                 role="button"
                 tabindex="0"
+                type="button"
               >
                 <svg
                   class="mx_Icon mx_Icon_12"

test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap

@@ -264,26 +264,4 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<ExtensionsCard /> should show context menu on widget row 1`] = `
-<ul
-  class="mx_IconizedContextMenu"
-  role="none"
->
-  <div
-    class="mx_IconizedContextMenu_optionList mx_IconizedContextMenu_optionList_notFirst"
-  >
-    <li
-      aria-label="Remove for everyone"
-      class="mx_AccessibleButton mx_IconizedContextMenu_item"
-      role="menuitem"
-      tabindex="0"
-    >
-      <span
-        class="mx_IconizedContextMenu_label"
-      >
-        Remove for everyone
-      </span>
-    </li>
-  </div>
-</ul>
-`;
+exports[`<ExtensionsCard /> should show context menu on widget row 1`] = `null`;

test/viewmodels/right-panel/WidgetContextMenuViewModel-test.tsx

@@ -0,0 +1,112 @@
+/*
+ * Copyright 2025 New Vector 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 React from "react";
+import { MatrixWidgetType } from "matrix-widget-api";
+import { type MatrixClient, Room } from "matrix-js-sdk/src/matrix";
+
+import { WidgetContextMenuViewModel, type WidgetContextMenuViewModelProps } from "../../../src/viewmodels/right-panel/WidgetContextMenuViewModel";
+import { stubClient } from "../../test-utils";
+import WidgetUtils from "../../../src/utils/WidgetUtils";
+import { type IApp } from "../../../src/utils/WidgetUtils-types";
+
+
+describe("WidgetContextMenuViewModel", () => {
+const widgetId = "w1";
+    const eventId = "e1";
+    const roomId = "r1";
+    const userId = "@user-id:server";
+
+    const app: IApp = {
+        id: widgetId,
+        eventId,
+        roomId,
+        type: MatrixWidgetType.Custom,
+        url: "https://example.com",
+        name: "Example 1",
+        creatorUserId: userId,
+        avatar_url: undefined,
+    };
+
+    let client: MatrixClient;
+    const defaultProps: WidgetContextMenuViewModelProps = {
+        menuDisplayed: true,
+        room: undefined,
+        roomId,
+        cli: stubClient(),
+        app,
+        showUnpin: true,
+        userWidget: true,
+        trigger: <></>,
+        onEditClick: jest.fn(),
+        onDeleteClick: jest.fn(),
+        onFinished: jest.fn(),
+    };
+    
+    beforeEach(() => {
+        jest.spyOn(WidgetUtils, "canUserModifyWidgets").mockReturnValue(true);
+        client = stubClient();
+    });
+
+    it("should return the snapshot", () => {
+        const vm = new WidgetContextMenuViewModel(defaultProps);
+        expect(vm.getSnapshot()).toMatchObject({
+            showStreamAudioStreamButton: true,
+            showEditButton: true,
+            showRevokeButton: true,
+            showDeleteButton: true,
+            showSnapshotButton: true,
+            showMoveButtons: [false, false],
+            canModify: true,
+            isMenuOpened: true,
+            trigger: <></>
+        });
+    });
+
+    it("should call edit widget no custom edit function passed and room exist", () => {
+        const props = {
+            ...defaultProps,
+            room: new Room(roomId, client, userId),
+            onEditClick: undefined,
+        };
+        const vm = new WidgetContextMenuViewModel(props);
+        vm.onEditClick();
+        expect(WidgetUtils.editWidget).toHaveBeenCalled();
+        expect(vm.onFinished).toHaveBeenCalled();
+    });
+    
+    it("should call custom onEditClick if passed as props and room exist", () => {
+        const props = {
+            ...defaultProps,
+            room: new Room(roomId, client, userId),
+            onEditClick: jest.fn(),
+        };
+        const vm = new WidgetContextMenuViewModel(props);
+        vm.onEditClick();
+
+        expect(props.onEditClick).toHaveBeenCalled();
+        expect(vm.onFinished).toHaveBeenCalled();
+    });
+
+    it("should just call finish if no custom onEditClick is passed as props and does not room exist", () => {
+        const props = {
+            ...defaultProps,
+            room: undefined,
+            onEditClick: undefined,
+        };
+        const vm = new WidgetContextMenuViewModel(props);
+        vm.onEditClick();
+
+        expect(WidgetUtils.editWidget).not.toHaveBeenCalled();
+        expect(props.onEditClick).not.toHaveBeenCalled();
+        expect(vm.onFinished).toHaveBeenCalled();
+    });
+
+    it("should move container when onmovebutton is called", () => {
+
+    })
+});