From 669e84b5d7c258cf1248951716755de606b4b620 Mon Sep 17 00:00:00 2001 From: Farooq AR Date: Fri, 5 Jun 2020 01:09:16 +0500 Subject: [PATCH] Add regression tests for context-menu (#1683) (#1697) Co-authored-by: dwelle --- .../regressionTests.test.tsx.snap | 239 ++++++++++++++++-- src/tests/regressionTests.test.tsx | 48 ++++ 2 files changed, 260 insertions(+), 27 deletions(-) diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index 9e29fedb..15f65206 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/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", }, diff --git a/src/tests/regressionTests.test.tsx b/src/tests/regressionTests.test.tsx index b369cd36..794edaed 100644 --- a/src/tests/regressionTests.test.tsx +++ b/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]); + }); + }); });