From 25ea97d0f9aa88d0432e06b4142d7c7a518b1862 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Fri, 4 Nov 2022 18:22:21 +0530 Subject: [PATCH] test: fix failing tests and API (#5823) * tests: fix failing tests * fix selection.test.tsx * fix excalidraw.test.tsx and don't show image export when SaveAsImage is false in UIOptions.canvasActions * more fixes * require fake index db in setUp test to fix the tests * fix regression --- src/components/LayerUI.tsx | 17 +- src/components/Sidebar/Sidebar.test.tsx | 4 +- src/setupTests.ts | 2 + .../regressionTests.test.tsx.snap | 462 ++++- src/tests/dragCreate.test.tsx | 20 +- src/tests/library.test.tsx | 12 +- src/tests/move.test.tsx | 6 +- src/tests/multiPointCreate.test.tsx | 10 +- .../__snapshots__/excalidraw.test.tsx.snap | 1528 ++++++++++++++--- src/tests/packages/excalidraw.test.tsx | 3 + src/tests/queries/toolQueries.ts | 1 + src/tests/regressionTests.test.tsx | 15 +- src/tests/selection.test.tsx | 16 +- src/tests/test-utils.ts | 2 - 14 files changed, 1798 insertions(+), 300 deletions(-) diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 2cf20d01..2cefeed5 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -196,6 +196,7 @@ const LayerUI = ({ })} onClick={() => setIsMenuOpen(!isMenuOpen)} type="button" + data-testid="menu-button" > {HamburgerMenuIcon} @@ -220,13 +221,15 @@ const LayerUI = ({ {appState.fileHandle && actionManager.renderAction("saveToActiveFile")} {renderJSONExportDialog()} - setAppState({ openDialog: "imageExport" })} - shortcut={getShortcutFromShortcutName("imageExport")} - /> + {UIOptions.canvasActions.saveAsImage && ( + setAppState({ openDialog: "imageExport" })} + shortcut={getShortcutFromShortcutName("imageExport")} + /> + )} {onCollabButtonClick && ( { const sidebar = container.querySelector(".test-sidebar"); expect(sidebar).not.toBe(null); - const closeButton = queryByTestId(sidebar!, "sidebar-close"); + const closeButton = queryByTestId(sidebar!, "sidebar-close")!; expect(closeButton).not.toBe(null); - fireEvent.click(closeButton!.querySelector("button")!); + fireEvent.click(closeButton); await waitFor(() => { expect(container.querySelector(".test-sidebar")).toBe(null); expect(onClose).toHaveBeenCalled(); diff --git a/src/setupTests.ts b/src/setupTests.ts index cb401838..698b2d4c 100644 --- a/src/setupTests.ts +++ b/src/setupTests.ts @@ -3,6 +3,8 @@ import "jest-canvas-mock"; import dotenv from "dotenv"; import polyfill from "./polyfill"; +require("fake-indexeddb/auto"); + polyfill(); // jest doesn't know of .env.development so we need to init it ourselves dotenv.config({ diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index 68ae3178..7cc38fbc 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -1951,7 +1951,9 @@ Object { "penDetected": false, "penMode": false, "pendingImageElementId": null, - "previousSelectedElementIds": Object {}, + "previousSelectedElementIds": Object { + "id0": true, + }, "resizingElement": null, "scrollX": 0, "scrollY": 0, @@ -1988,7 +1990,7 @@ Object { "boundElements": null, "fillStyle": "hachure", "groupIds": Array [], - "height": 15, + "height": 10, "id": "id0", "isDeleted": false, "link": null, @@ -2004,9 +2006,9 @@ Object { "updated": 1, "version": 3, "versionNonce": 453191, - "width": 15, - "x": 10, - "y": 10, + "width": 10, + "x": 25, + "y": 25, } `; @@ -2085,7 +2087,7 @@ Object { "boundElements": null, "fillStyle": "hachure", "groupIds": Array [], - "height": 15, + "height": 10, "id": "id0", "isDeleted": false, "link": null, @@ -2101,9 +2103,9 @@ Object { "updated": 1, "version": 3, "versionNonce": 453191, - "width": 15, - "x": 10, - "y": 10, + "width": 10, + "x": 25, + "y": 25, }, ], }, @@ -2682,7 +2684,9 @@ Object { "penDetected": false, "penMode": false, "pendingImageElementId": null, - "previousSelectedElementIds": Object {}, + "previousSelectedElementIds": Object { + "id0": true, + }, "resizingElement": null, "scrollX": 0, "scrollY": 0, @@ -2713,6 +2717,35 @@ Object { `; exports[`regression tests alt-drag duplicates an element: [end of test] element 0 1`] = ` +Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id0_copy", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 401146281, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 4, + "versionNonce": 2019559783, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests alt-drag duplicates an element: [end of test] element 1 1`] = ` Object { "angle": 0, "backgroundColor": "transparent", @@ -2733,11 +2766,11 @@ Object { "strokeWidth": 1, "type": "rectangle", "updated": 1, - "version": 2, - "versionNonce": 1278240551, + "version": 3, + "versionNonce": 453191, "width": 10, - "x": 10, - "y": 10, + "x": 20, + "y": 20, } `; @@ -2797,11 +2830,78 @@ Object { }, ], }, + Object { + "appState": Object { + "editingGroupId": null, + "editingLinearElement": null, + "name": "Untitled-201933152653", + "selectedElementIds": Object { + "id0": true, + "id1": true, + }, + "selectedGroupIds": Object {}, + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id0_copy", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 401146281, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 4, + "versionNonce": 2019559783, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 3, + "versionNonce": 453191, + "width": 10, + "x": 20, + "y": 20, + }, + ], + }, ], } `; -exports[`regression tests alt-drag duplicates an element: [end of test] number of elements 1`] = `1`; +exports[`regression tests alt-drag duplicates an element: [end of test] number of elements 1`] = `2`; exports[`regression tests alt-drag duplicates an element: [end of test] number of renders 1`] = `12`; @@ -3737,6 +3837,230 @@ exports[`regression tests change the properties of a shape: [end of test] number exports[`regression tests change the properties of a shape: [end of test] number of renders 1`] = `15`; +exports[`regression tests click on an element and drag it: [dragged] appState 1`] = ` +Object { + "activeTool": Object { + "customType": null, + "lastActiveToolBeforeEraser": null, + "locked": false, + "type": "selection", + }, + "collaborators": Map {}, + "currentChartType": "bar", + "currentItemBackgroundColor": "transparent", + "currentItemEndArrowhead": "arrow", + "currentItemFillStyle": "hachure", + "currentItemFontFamily": 1, + "currentItemFontSize": 20, + "currentItemLinearStrokeSharpness": "round", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStartArrowhead": null, + "currentItemStrokeColor": "#000000", + "currentItemStrokeSharpness": "sharp", + "currentItemStrokeStyle": "solid", + "currentItemStrokeWidth": 1, + "currentItemTextAlign": "left", + "cursorButton": "up", + "draggingElement": null, + "editingElement": null, + "editingGroupId": null, + "editingLinearElement": null, + "errorMessage": null, + "exportBackground": true, + "exportEmbedScene": false, + "exportScale": 1, + "exportWithDarkMode": false, + "fileHandle": null, + "gridSize": null, + "height": 768, + "isBindingEnabled": true, + "isLoading": false, + "isResizing": false, + "isRotating": false, + "isSidebarDocked": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "Untitled-201933152653", + "offsetLeft": 0, + "offsetTop": 0, + "openDialog": null, + "openMenu": null, + "openPopup": null, + "openSidebar": null, + "pasteDialog": Object { + "data": null, + "shown": false, + }, + "penDetected": false, + "penMode": false, + "pendingImageElementId": null, + "previousSelectedElementIds": Object { + "id0": true, + }, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id1": true, + }, + "selectedGroupIds": Object {}, + "selectedLinearElement": null, + "selectionElement": null, + "shouldCacheIgnoreZoom": false, + "showHyperlinkPopup": false, + "showStats": false, + "showWelcomeScreen": true, + "startBoundElement": null, + "suggestedBindings": Array [], + "theme": "light", + "toast": null, + "viewBackgroundColor": "#ffffff", + "viewModeEnabled": false, + "width": 1024, + "zenModeEnabled": false, + "zoom": Object { + "value": 1, + }, +} +`; + +exports[`regression tests click on an element and drag it: [dragged] element 0 1`] = ` +Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 3, + "versionNonce": 453191, + "width": 10, + "x": 20, + "y": 20, +} +`; + +exports[`regression tests click on an element and drag it: [dragged] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "editingGroupId": null, + "editingLinearElement": null, + "name": "Untitled-201933152653", + "selectedElementIds": Object {}, + "selectedGroupIds": Object {}, + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [], + }, + Object { + "appState": Object { + "editingGroupId": null, + "editingLinearElement": null, + "name": "Untitled-201933152653", + "selectedElementIds": Object { + "id0": true, + }, + "selectedGroupIds": Object {}, + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "editingGroupId": null, + "editingLinearElement": null, + "name": "Untitled-201933152653", + "selectedElementIds": Object { + "id0": true, + "id1": true, + }, + "selectedGroupIds": Object {}, + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 3, + "versionNonce": 453191, + "width": 10, + "x": 20, + "y": 20, + }, + ], + }, + ], +} +`; + +exports[`regression tests click on an element and drag it: [dragged] number of elements 1`] = `1`; + +exports[`regression tests click on an element and drag it: [dragged] number of renders 1`] = `12`; + exports[`regression tests click on an element and drag it: [end of test] appState 1`] = ` Object { "activeTool": Object { @@ -3795,7 +4119,10 @@ Object { "penDetected": false, "penMode": false, "pendingImageElementId": null, - "previousSelectedElementIds": Object {}, + "previousSelectedElementIds": Object { + "id0": true, + "id1": true, + }, "resizingElement": null, "scrollX": 0, "scrollY": 0, @@ -3803,6 +4130,7 @@ Object { "selectedElementIds": Object { "id0": true, "id1": true, + "id2": true, }, "selectedGroupIds": Object {}, "selectedLinearElement": null, @@ -3846,8 +4174,8 @@ Object { "strokeWidth": 1, "type": "rectangle", "updated": 1, - "version": 2, - "versionNonce": 1278240551, + "version": 4, + "versionNonce": 2019559783, "width": 10, "x": 10, "y": 10, @@ -3910,13 +4238,96 @@ Object { }, ], }, + Object { + "appState": Object { + "editingGroupId": null, + "editingLinearElement": null, + "name": "Untitled-201933152653", + "selectedElementIds": Object { + "id0": true, + "id1": true, + }, + "selectedGroupIds": Object {}, + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 3, + "versionNonce": 453191, + "width": 10, + "x": 20, + "y": 20, + }, + ], + }, + Object { + "appState": Object { + "editingGroupId": null, + "editingLinearElement": null, + "name": "Untitled-201933152653", + "selectedElementIds": Object { + "id0": true, + "id1": true, + "id2": true, + }, + "selectedGroupIds": Object {}, + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 4, + "versionNonce": 2019559783, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, ], } `; exports[`regression tests click on an element and drag it: [end of test] number of elements 1`] = `1`; -exports[`regression tests click on an element and drag it: [end of test] number of renders 1`] = `12`; +exports[`regression tests click on an element and drag it: [end of test] number of renders 1`] = `15`; exports[`regression tests click to select a shape: [end of test] appState 1`] = ` Object { @@ -5513,13 +5924,14 @@ Object { "penDetected": false, "penMode": false, "pendingImageElementId": null, - "previousSelectedElementIds": Object {}, + "previousSelectedElementIds": Object { + "id0": true, + }, "resizingElement": null, "scrollX": 0, "scrollY": 0, "scrolledOutside": false, "selectedElementIds": Object { - "id0": true, "id1": true, }, "selectedGroupIds": Object {}, @@ -13700,7 +14112,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`] = `6`; +exports[`regression tests rerenders UI on language change: [end of test] number of renders 1`] = `10`; exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] appState 1`] = ` Object { @@ -13760,13 +14172,15 @@ Object { "penDetected": false, "penMode": false, "pendingImageElementId": null, - "previousSelectedElementIds": Object {}, + "previousSelectedElementIds": Object { + "id0": true, + }, "resizingElement": null, "scrollX": 0, "scrollY": 0, "scrolledOutside": false, "selectedElementIds": Object { - "id0": true, + "id0": false, "id1": true, }, "selectedGroupIds": Object {}, diff --git a/src/tests/dragCreate.test.tsx b/src/tests/dragCreate.test.tsx index b39601eb..4e69f1ab 100644 --- a/src/tests/dragCreate.test.tsx +++ b/src/tests/dragCreate.test.tsx @@ -42,7 +42,7 @@ describe("Test dragCreate", () => { // finish (position does not matter) fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(8); + expect(renderScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); @@ -73,7 +73,7 @@ describe("Test dragCreate", () => { // finish (position does not matter) fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(8); + expect(renderScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); @@ -104,7 +104,7 @@ describe("Test dragCreate", () => { // finish (position does not matter) fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(8); + expect(renderScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); @@ -135,7 +135,7 @@ describe("Test dragCreate", () => { // finish (position does not matter) fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(8); + expect(renderScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); @@ -170,7 +170,7 @@ describe("Test dragCreate", () => { // finish (position does not matter) fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(8); + expect(renderScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); @@ -210,7 +210,7 @@ describe("Test dragCreate", () => { // finish (position does not matter) fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(6); + expect(renderScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(0); }); @@ -229,7 +229,7 @@ describe("Test dragCreate", () => { // finish (position does not matter) fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(6); + expect(renderScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(0); }); @@ -248,7 +248,7 @@ describe("Test dragCreate", () => { // finish (position does not matter) fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(6); + expect(renderScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(0); }); @@ -272,7 +272,7 @@ describe("Test dragCreate", () => { key: KEYS.ENTER, }); - expect(renderScene).toHaveBeenCalledTimes(7); + expect(renderScene).toHaveBeenCalledTimes(8); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(0); }); @@ -296,7 +296,7 @@ describe("Test dragCreate", () => { key: KEYS.ENTER, }); - expect(renderScene).toHaveBeenCalledTimes(7); + expect(renderScene).toHaveBeenCalledTimes(8); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(0); }); diff --git a/src/tests/library.test.tsx b/src/tests/library.test.tsx index 1013675d..6b3ff5dd 100644 --- a/src/tests/library.test.tsx +++ b/src/tests/library.test.tsx @@ -1,4 +1,6 @@ import { fireEvent, render, waitFor } from "./test-utils"; +import { queryByTestId } from "@testing-library/react"; + import ExcalidrawApp from "../excalidraw-app"; import { API } from "./helpers/api"; import { MIME_TYPES } from "../constants"; @@ -93,15 +95,11 @@ describe("library menu", () => { const latestLibrary = await h.app.library.getLatestLibrary(); expect(latestLibrary.length).toBe(0); - const libraryButton = container.querySelector(".ToolIcon__library"); + const libraryButton = container.querySelector(".library-button"); fireEvent.click(libraryButton!); - - const loadLibraryButton = container.querySelector( - ".library-actions .library-actions--load", - ); - - fireEvent.click(loadLibraryButton!); + fireEvent.click(container.querySelector(".Sidebar__dropdown-btn")!); + queryByTestId(container, "lib-dropdown--load")!.click(); const libraryItems = parseLibraryJSON(await libraryJSONPromise); diff --git a/src/tests/move.test.tsx b/src/tests/move.test.tsx index 7a35dcdb..3fbfceee 100644 --- a/src/tests/move.test.tsx +++ b/src/tests/move.test.tsx @@ -38,7 +38,7 @@ describe("move element", () => { fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(8); + expect(renderScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -77,7 +77,7 @@ describe("move element", () => { // select the second rectangles new Pointer("mouse").clickOn(rectB); - expect(renderScene).toHaveBeenCalledTimes(22); + expect(renderScene).toHaveBeenCalledTimes(23); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(3); expect(h.state.selectedElementIds[rectB.id]).toBeTruthy(); @@ -120,7 +120,7 @@ describe("duplicate element on move when ALT is clicked", () => { fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(8); + expect(renderScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); diff --git a/src/tests/multiPointCreate.test.tsx b/src/tests/multiPointCreate.test.tsx index 7437a1d4..0026041c 100644 --- a/src/tests/multiPointCreate.test.tsx +++ b/src/tests/multiPointCreate.test.tsx @@ -42,7 +42,7 @@ describe("remove shape in non linear elements", () => { fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 }); - expect(renderScene).toHaveBeenCalledTimes(6); + expect(renderScene).toHaveBeenCalledTimes(7); expect(h.elements.length).toEqual(0); }); @@ -56,7 +56,7 @@ describe("remove shape in non linear elements", () => { fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 }); - expect(renderScene).toHaveBeenCalledTimes(6); + expect(renderScene).toHaveBeenCalledTimes(7); expect(h.elements.length).toEqual(0); }); @@ -70,7 +70,7 @@ describe("remove shape in non linear elements", () => { fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 }); - expect(renderScene).toHaveBeenCalledTimes(6); + expect(renderScene).toHaveBeenCalledTimes(7); expect(h.elements.length).toEqual(0); }); }); @@ -102,7 +102,7 @@ describe("multi point mode in linear elements", () => { key: KEYS.ENTER, }); - expect(renderScene).toHaveBeenCalledTimes(14); + expect(renderScene).toHaveBeenCalledTimes(15); expect(h.elements.length).toEqual(1); const element = h.elements[0] as ExcalidrawLinearElement; @@ -145,7 +145,7 @@ describe("multi point mode in linear elements", () => { key: KEYS.ENTER, }); - expect(renderScene).toHaveBeenCalledTimes(14); + expect(renderScene).toHaveBeenCalledTimes(15); expect(h.elements.length).toEqual(1); const element = h.elements[0] as ExcalidrawLinearElement; diff --git a/src/tests/packages/__snapshots__/excalidraw.test.tsx.snap b/src/tests/packages/__snapshots__/excalidraw.test.tsx.snap index 0d8e2728..2fbca534 100644 --- a/src/tests/packages/__snapshots__/excalidraw.test.tsx.snap +++ b/src/tests/packages/__snapshots__/excalidraw.test.tsx.snap @@ -11,102 +11,420 @@ exports[` Test UIOptions prop Test canvasActions should not hide an Canvas actions
-
-
- + +
- -
-
-
-
+
+ Ctrl+O +
+ + + + + +
+ +
+ +
+
+ Excalidraw+ +
+ + +
+ +
+
+ GitHub +
+ + +
+ +
+
+ Discord +
+ + +
+ +
+
+ Twitter +
+ +
+
+
-
-
- -
+
+
+ Canvas background +
+
- +
@@ -179,102 +717,420 @@ exports[` Test UIOptions prop should not hide any UI element when t Canvas actions
-
-
- + +
- -
-
-
-
+
+ Ctrl+O +
+ + + + + +
+ +
+ +
+
+ Excalidraw+ +
+ + +
+ +
+
+ GitHub +
+ + +
+ +
+
+ Discord +
+ + +
+ +
+
+ Twitter +
+ +
+
+
-
-
- -
+
+
+ Canvas background +
+
- +
diff --git a/src/tests/packages/excalidraw.test.tsx b/src/tests/packages/excalidraw.test.tsx index ef12fcff..2957fd47 100644 --- a/src/tests/packages/excalidraw.test.tsx +++ b/src/tests/packages/excalidraw.test.tsx @@ -90,7 +90,10 @@ describe("", () => { describe("Test theme prop", () => { it("should show the theme toggle by default", async () => { const { container } = await render(); + expect(h.state.theme).toBe(THEME.LIGHT); + + queryByTestId(container, "menu-button")!.click(); const darkModeToggle = queryByTestId(container, "toggle-dark-mode"); expect(darkModeToggle).toBeTruthy(); }); diff --git a/src/tests/queries/toolQueries.ts b/src/tests/queries/toolQueries.ts index 5b0ff937..bc1e4928 100644 --- a/src/tests/queries/toolQueries.ts +++ b/src/tests/queries/toolQueries.ts @@ -10,6 +10,7 @@ const toolMap = { line: "line", freedraw: "freedraw", text: "text", + eraser: "eraser", }; export type ToolName = keyof typeof toolMap; diff --git a/src/tests/regressionTests.test.tsx b/src/tests/regressionTests.test.tsx index 7a35e7b3..6c1ec82c 100644 --- a/src/tests/regressionTests.test.tsx +++ b/src/tests/regressionTests.test.tsx @@ -174,7 +174,7 @@ describe("regression tests", () => { mouse.up(10, 10); const { x: prevX, y: prevY } = API.getSelectedElement(); - mouse.down(-10, -10); + mouse.down(-8, -8); mouse.up(10, 10); const { x: nextX, y: nextY } = API.getSelectedElement(); @@ -201,7 +201,7 @@ describe("regression tests", () => { ).toBe(1); Keyboard.withModifierKeys({ alt: true }, () => { - mouse.down(-10, -10); + mouse.down(-8, -8); mouse.up(10, 10); }); @@ -446,6 +446,8 @@ describe("regression tests", () => { UI.clickTool("rectangle"); // english lang should display `thin` label expect(screen.queryByTitle(/thin/i)).not.toBeNull(); + fireEvent.click(document.querySelector(".menu-button")!); + fireEvent.change(document.querySelector(".dropdown-select__language")!, { target: { value: "de-DE" }, }); @@ -672,9 +674,10 @@ describe("regression tests", () => { mouse.down(); mouse.up(100, 100); - // hits bounding box without hitting element - mouse.down(); expect(API.getSelectedElements().length).toBe(1); + + // hits bounding box without hitting element + mouse.down(98, 98); mouse.up(); expect(API.getSelectedElements().length).toBe(0); }); @@ -744,7 +747,7 @@ describe("regression tests", () => { // drag element from point on bounding box that doesn't hit element mouse.reset(); - mouse.down(); + mouse.down(8, 8); mouse.up(25, 25); expect(API.getSelectedElement().x).toEqual(prevX + 25); @@ -1020,7 +1023,7 @@ describe("regression tests", () => { // Rectangle is already selected since creating // it was our last action Keyboard.withModifierKeys({ shift: true }, () => { - mouse.down(); + mouse.down(-8, -8); }); expect(API.getSelectedElements().length).toBe(1); diff --git a/src/tests/selection.test.tsx b/src/tests/selection.test.tsx index 6c6547c7..7bfd6e9b 100644 --- a/src/tests/selection.test.tsx +++ b/src/tests/selection.test.tsx @@ -154,7 +154,7 @@ describe("selection element", () => { const canvas = container.querySelector("canvas")!; fireEvent.pointerDown(canvas, { clientX: 60, clientY: 100 }); - expect(renderScene).toHaveBeenCalledTimes(4); + expect(renderScene).toHaveBeenCalledTimes(5); const selectionElement = h.state.selectionElement!; expect(selectionElement).not.toBeNull(); expect(selectionElement.type).toEqual("selection"); @@ -175,7 +175,7 @@ describe("selection element", () => { fireEvent.pointerDown(canvas, { clientX: 60, clientY: 100 }); fireEvent.pointerMove(canvas, { clientX: 150, clientY: 30 }); - expect(renderScene).toHaveBeenCalledTimes(5); + expect(renderScene).toHaveBeenCalledTimes(6); const selectionElement = h.state.selectionElement!; expect(selectionElement).not.toBeNull(); expect(selectionElement.type).toEqual("selection"); @@ -197,7 +197,7 @@ describe("selection element", () => { fireEvent.pointerMove(canvas, { clientX: 150, clientY: 30 }); fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(6); + expect(renderScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); }); }); @@ -232,7 +232,7 @@ describe("select single element on the scene", () => { fireEvent.pointerDown(canvas, { clientX: 45, clientY: 20 }); fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(10); + expect(renderScene).toHaveBeenCalledTimes(11); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -261,7 +261,7 @@ describe("select single element on the scene", () => { fireEvent.pointerDown(canvas, { clientX: 45, clientY: 20 }); fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(10); + expect(renderScene).toHaveBeenCalledTimes(11); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -290,7 +290,7 @@ describe("select single element on the scene", () => { fireEvent.pointerDown(canvas, { clientX: 45, clientY: 20 }); fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(10); + expect(renderScene).toHaveBeenCalledTimes(11); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -332,7 +332,7 @@ describe("select single element on the scene", () => { fireEvent.pointerDown(canvas, { clientX: 40, clientY: 40 }); fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(10); + expect(renderScene).toHaveBeenCalledTimes(11); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -373,7 +373,7 @@ describe("select single element on the scene", () => { fireEvent.pointerDown(canvas, { clientX: 40, clientY: 40 }); fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(10); + expect(renderScene).toHaveBeenCalledTimes(11); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); diff --git a/src/tests/test-utils.ts b/src/tests/test-utils.ts index 48e6180b..c7af2904 100644 --- a/src/tests/test-utils.ts +++ b/src/tests/test-utils.ts @@ -16,8 +16,6 @@ import { SceneData } from "../types"; import { getSelectedElements } from "../scene/selection"; import { ExcalidrawElement } from "../element/types"; -require("fake-indexeddb/auto"); - const customQueries = { ...queries, ...toolQueries,