Add regression tests for context-menu (#1683) (#1697)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -30,7 +30,7 @@ Object {
   "isRotating": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
-  "name": "Unbenannt-201933152653",
+  "name": "Untitled-201933152653",
   "openMenu": null,
   "previousSelectedElementIds": Object {
     "id0": true,
@@ -145,7 +145,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
         },
@@ -179,7 +179,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id1": true,
         },
@@ -234,7 +234,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id2": true,
         },
@@ -310,7 +310,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
           "id2": true,
@@ -1886,7 +1886,7 @@ Object {
   "isRotating": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
-  "name": "Unbenannt-201933152653",
+  "name": "Untitled-201933152653",
   "openMenu": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
@@ -1995,7 +1995,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
         },
@@ -2029,7 +2029,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id1": true,
         },
@@ -2084,7 +2084,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id2": true,
         },
@@ -2160,7 +2160,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
           "id1": true,
@@ -5671,7 +5671,7 @@ Object {
   "isRotating": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
-  "name": "Unbenannt-201933152653",
+  "name": "Untitled-201933152653",
   "openMenu": null,
   "previousSelectedElementIds": Object {
     "id0": true,
@@ -5869,7 +5869,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
         },
@@ -5903,7 +5903,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id1": true,
         },
@@ -5958,7 +5958,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id2": true,
         },
@@ -6034,7 +6034,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
           "id1": true,
@@ -6119,7 +6119,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
           "id1": true,
@@ -6608,7 +6608,7 @@ Object {
 
 exports[`regression tests rerenders UI on language change: [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests rerenders UI on language change: [end of test] number of renders 1`] = `4`;
+exports[`regression tests rerenders UI on language change: [end of test] number of renders 1`] = `5`;
 
 exports[`regression tests resize an element, trying every resize handle: [end of test] appState 1`] = `
 Object {
@@ -15243,6 +15243,191 @@ exports[`regression tests shift-click to multiselect, then drag: [end of test] n
 
 exports[`regression tests shift-click to multiselect, then drag: [end of test] number of renders 1`] = `17`;
 
+exports[`regression tests shows context menu for canvas: [end of test] appState 1`] = `
+Object {
+  "collaborators": Map {},
+  "currentItemBackgroundColor": "transparent",
+  "currentItemFillStyle": "hachure",
+  "currentItemFontFamily": 1,
+  "currentItemFontSize": 20,
+  "currentItemOpacity": 100,
+  "currentItemRoughness": 1,
+  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeStyle": "solid",
+  "currentItemStrokeWidth": 1,
+  "currentItemTextAlign": "left",
+  "cursorButton": "up",
+  "cursorX": 0,
+  "cursorY": 0,
+  "draggingElement": null,
+  "editingElement": null,
+  "editingGroupId": null,
+  "editingLinearElement": null,
+  "elementLocked": false,
+  "elementType": "selection",
+  "errorMessage": null,
+  "exportBackground": true,
+  "isCollaborating": false,
+  "isLoading": false,
+  "isResizing": false,
+  "isRotating": false,
+  "lastPointerDownWith": "mouse",
+  "multiElement": null,
+  "name": "Untitled-201933152653",
+  "openMenu": null,
+  "previousSelectedElementIds": Object {},
+  "resizingElement": null,
+  "scrollX": 0,
+  "scrollY": 0,
+  "scrolledOutside": false,
+  "selectedElementIds": Object {},
+  "selectedGroupIds": Object {},
+  "selectionElement": null,
+  "shouldAddWatermark": false,
+  "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
+  "username": "",
+  "viewBackgroundColor": "#ffffff",
+  "zenModeEnabled": false,
+  "zoom": 1,
+}
+`;
+
+exports[`regression tests shows context menu for canvas: [end of test] history 1`] = `
+Object {
+  "recording": false,
+  "redoStack": Array [],
+  "stateHistory": Array [],
+}
+`;
+
+exports[`regression tests shows context menu for canvas: [end of test] number of elements 1`] = `0`;
+
+exports[`regression tests shows context menu for canvas: [end of test] number of renders 1`] = `3`;
+
+exports[`regression tests shows context menu for element: [end of test] appState 1`] = `
+Object {
+  "collaborators": Map {},
+  "currentItemBackgroundColor": "transparent",
+  "currentItemFillStyle": "hachure",
+  "currentItemFontFamily": 1,
+  "currentItemFontSize": 20,
+  "currentItemOpacity": 100,
+  "currentItemRoughness": 1,
+  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeStyle": "solid",
+  "currentItemStrokeWidth": 1,
+  "currentItemTextAlign": "left",
+  "cursorButton": "up",
+  "cursorX": 0,
+  "cursorY": 0,
+  "draggingElement": null,
+  "editingElement": null,
+  "editingGroupId": null,
+  "editingLinearElement": null,
+  "elementLocked": false,
+  "elementType": "selection",
+  "errorMessage": null,
+  "exportBackground": true,
+  "isCollaborating": false,
+  "isLoading": false,
+  "isResizing": false,
+  "isRotating": false,
+  "lastPointerDownWith": "mouse",
+  "multiElement": null,
+  "name": "Untitled-201933152653",
+  "openMenu": null,
+  "previousSelectedElementIds": Object {},
+  "resizingElement": null,
+  "scrollX": 0,
+  "scrollY": 0,
+  "scrolledOutside": false,
+  "selectedElementIds": Object {
+    "id0": true,
+  },
+  "selectedGroupIds": Object {},
+  "selectionElement": null,
+  "shouldAddWatermark": false,
+  "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
+  "username": "",
+  "viewBackgroundColor": "#ffffff",
+  "zenModeEnabled": false,
+  "zoom": 1,
+}
+`;
+
+exports[`regression tests shows context menu for element: [end of test] element 0 1`] = `
+Object {
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "fillStyle": "hachure",
+  "groupIds": Array [],
+  "height": 20,
+  "id": "id0",
+  "isDeleted": false,
+  "opacity": 100,
+  "roughness": 1,
+  "seed": 337897,
+  "strokeColor": "#000000",
+  "strokeStyle": "solid",
+  "strokeWidth": 1,
+  "type": "rectangle",
+  "version": 2,
+  "versionNonce": 1278240551,
+  "width": 20,
+  "x": 10,
+  "y": 10,
+}
+`;
+
+exports[`regression tests shows context menu for element: [end of test] history 1`] = `
+Object {
+  "recording": false,
+  "redoStack": Array [],
+  "stateHistory": Array [
+    Object {
+      "appState": Object {
+        "editingGroupId": null,
+        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
+        "selectedElementIds": Object {
+          "id0": true,
+        },
+        "viewBackgroundColor": "#ffffff",
+      },
+      "elements": Array [
+        Object {
+          "angle": 0,
+          "backgroundColor": "transparent",
+          "fillStyle": "hachure",
+          "groupIds": Array [],
+          "height": 20,
+          "id": "id0",
+          "isDeleted": false,
+          "opacity": 100,
+          "roughness": 1,
+          "seed": 337897,
+          "strokeColor": "#000000",
+          "strokeStyle": "solid",
+          "strokeWidth": 1,
+          "type": "rectangle",
+          "version": 2,
+          "versionNonce": 1278240551,
+          "width": 20,
+          "x": 10,
+          "y": 10,
+        },
+      ],
+    },
+  ],
+}
+`;
+
+exports[`regression tests shows context menu for element: [end of test] number of elements 1`] = `1`;
+
+exports[`regression tests shows context menu for element: [end of test] number of renders 1`] = `7`;
+
 exports[`regression tests spacebar + drag scrolls the canvas: [end of test] appState 1`] = `
 Object {
   "collaborators": Map {},
@@ -15335,7 +15520,7 @@ Object {
   "isRotating": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
-  "name": "Unbenannt-201933152653",
+  "name": "Untitled-201933152653",
   "openMenu": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
@@ -15446,7 +15631,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
         },
@@ -15480,7 +15665,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id1": true,
         },
@@ -15535,7 +15720,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id2": true,
         },
@@ -15611,7 +15796,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
           "id1": true,
@@ -15695,7 +15880,7 @@ Object {
       "appState": Object {
         "editingGroupId": "id3",
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
           "id2": true,
@@ -15779,7 +15964,7 @@ Object {
       "appState": Object {
         "editingGroupId": "id3",
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
           "id2": true,
@@ -15865,7 +16050,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
           "id1": true,
@@ -16475,7 +16660,7 @@ Object {
   "isRotating": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
-  "name": "Unbenannt-201933152653",
+  "name": "Untitled-201933152653",
   "openMenu": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
@@ -16504,7 +16689,7 @@ Object {
       "appState": Object {
         "editingGroupId": null,
         "editingLinearElement": null,
-        "name": "Unbenannt-201933152653",
+        "name": "Untitled-201933152653",
         "selectedElementIds": Object {},
         "viewBackgroundColor": "#ffffff",
       },

src/tests/regressionTests.test.tsx

@@ -665,6 +665,10 @@ describe("regression tests", () => {
     });
     // switching to german, `hachure` label should no longer exist
     expect(screen.queryByText(/hachure/i)).toBeNull();
+    // reset language
+    fireEvent.change(document.querySelector(".dropdown-select__language")!, {
+      target: { value: "en" },
+    });
   });
 
   it("make a group and duplicate it", () => {
@@ -847,4 +851,48 @@ describe("regression tests", () => {
     fireEvent.click(screen.getByText(/code/i));
     expect(h.state.currentItemFontFamily).toEqual(3); // Cascadia
   });
+
+  it("shows context menu for canvas", () => {
+    fireEvent.change(document.querySelector(".dropdown-select__language")!, {
+      target: { value: "en" },
+    });
+    fireEvent.contextMenu(canvas, { button: 2, clientX: 1, clientY: 1 });
+    const contextMenu = document.querySelector(".context-menu");
+    const options = contextMenu?.querySelectorAll(".context-menu-option");
+    const expectedOptions = ["Select all"];
+
+    expect(contextMenu).not.toBeNull();
+    expect(options?.length).toBe(1);
+    expect(options?.item(0).textContent).toBe(expectedOptions[0]);
+  });
+
+  it("shows context menu for element", () => {
+    fireEvent.change(document.querySelector(".dropdown-select__language")!, {
+      target: { value: "en" },
+    });
+    clickTool("rectangle");
+    mouse.down(10, 10);
+    mouse.up(20, 20);
+    fireEvent.contextMenu(canvas, { button: 2, clientX: 1, clientY: 1 });
+    const contextMenu = document.querySelector(".context-menu");
+    const options = contextMenu?.querySelectorAll(".context-menu-option");
+    const expectedOptions = [
+      "Copy styles",
+      "Paste styles",
+      "Delete",
+      "Group selection",
+      "Ungroup selection",
+      "Send backward",
+      "Bring forward",
+      "Send to back",
+      "Bring to front",
+      "Duplicate",
+    ];
+
+    expect(contextMenu).not.toBeNull();
+    expect(contextMenu?.children.length).toBe(10);
+    options?.forEach((opt, i) => {
+      expect(opt.textContent).toBe(expectedOptions[i]);
+    });
+  });
 });