fix mouseup test

leanup Update eventData.test.ts
fabricjs · Aug 25, 2023 · 0b47e20 · 0b47e20
1 parent ab38a5d
commit 0b47e20
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 6 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -135,7 +135,7 @@ module.exports = {
   // setupFiles: [],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  // setupFilesAfterEnv: [],
+  setupFilesAfterEnv: ['./jest.setup.ts'],
 
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,

diff --git a/jest.setup.ts b/jest.setup.ts
@@ -0,0 +1,4 @@
+import { setEnv, getEnv } from './src/env';
+
+// set custom env
+beforeAll(() => setEnv({ ...getEnv(), window, document }));
diff --git a/src/canvas/__tests__/__snapshots__/eventData.test.ts.snap b/src/canvas/__tests__/__snapshots__/eventData.test.ts.snap
@@ -925,9 +925,103 @@ exports[`Canvas event data HTML event "mouseover" should fire a corresponding ca
 
 exports[`Canvas event data HTML event "mouseover" should fire a corresponding canvas event with viewportTransform of [ 2, 3.141592653589793, 0, 0.5, 50, 50 ] 1`] = `[]`;
 
-exports[`Canvas event data HTML event "mouseup" should fire a corresponding canvas event with viewportTransform of [ 1, 0, 0, 1, 0, 0 ] 1`] = `[]`;
+exports[`Canvas event data HTML event "mouseup" should fire a corresponding canvas event with viewportTransform of [ 1, 0, 0, 1, 0, 0 ] 1`] = `
+[
+  [
+    "mouse:up:before",
+    {
+      "absolutePointer": Point {
+        "x": 50,
+        "y": 50,
+      },
+      "button": 1,
+      "e": MouseEvent {
+        "isTrusted": false,
+      },
+      "isClick": false,
+      "pointer": Point {
+        "x": 50,
+        "y": 50,
+      },
+      "subTargets": [],
+      "target": undefined,
+      "transform": null,
+    },
+  ],
+  [
+    "mouse:up",
+    {
+      "absolutePointer": Point {
+        "x": 50,
+        "y": 50,
+      },
+      "button": 1,
+      "currentSubTargets": [],
+      "currentTarget": undefined,
+      "e": MouseEvent {
+        "isTrusted": false,
+      },
+      "isClick": true,
+      "pointer": Point {
+        "x": 50,
+        "y": 50,
+      },
+      "subTargets": [],
+      "target": undefined,
+      "transform": null,
+    },
+  ],
+]
+`;
 
-exports[`Canvas event data HTML event "mouseup" should fire a corresponding canvas event with viewportTransform of [ 2, 3.141592653589793, 0, 0.5, 50, 50 ] 1`] = `[]`;
+exports[`Canvas event data HTML event "mouseup" should fire a corresponding canvas event with viewportTransform of [ 2, 3.141592653589793, 0, 0.5, 50, 50 ] 1`] = `
+[
+  [
+    "mouse:up:before",
+    {
+      "absolutePointer": Point {
+        "x": 0,
+        "y": 0,
+      },
+      "button": 1,
+      "e": MouseEvent {
+        "isTrusted": false,
+      },
+      "isClick": false,
+      "pointer": Point {
+        "x": 50,
+        "y": 50,
+      },
+      "subTargets": [],
+      "target": undefined,
+      "transform": null,
+    },
+  ],
+  [
+    "mouse:up",
+    {
+      "absolutePointer": Point {
+        "x": 0,
+        "y": 0,
+      },
+      "button": 1,
+      "currentSubTargets": [],
+      "currentTarget": undefined,
+      "e": MouseEvent {
+        "isTrusted": false,
+      },
+      "isClick": true,
+      "pointer": Point {
+        "x": 50,
+        "y": 50,
+      },
+      "subTargets": [],
+      "target": undefined,
+      "transform": null,
+    },
+  ],
+]
+`;
 
 exports[`Canvas event data HTML event "wheel" should fire a corresponding canvas event with viewportTransform of [ 1, 0, 0, 1, 0, 0 ] 1`] = `
 [

diff --git a/src/canvas/__tests__/eventData.test.ts b/src/canvas/__tests__/eventData.test.ts
@@ -5,6 +5,7 @@ import { Canvas } from '../Canvas';
 describe('Canvas event data', () => {
   let canvas: Canvas;
   let spy: jest.SpyInstance;
+
   beforeEach(() => {
     canvas = new Canvas(null);
     spy = jest.spyOn(canvas, 'fire');
@@ -23,7 +24,6 @@ describe('Canvas event data', () => {
         'mousemove',
         'mouseout',
         'mouseover',
-        'mouseup',
         'dblclick',
         'wheel',
         'contextmenu',
@@ -48,6 +48,24 @@ describe('Canvas event data', () => {
     }
   );
 
+  // must call mousedown for mouseup to be listened to
+  test.each([[iMatrix], [[2, Math.PI, 0, 0.5, 50, 50] as TMat2D]] as const)(
+    'HTML event "mouseup" should fire a corresponding canvas event with viewportTransform of %s',
+    (viewportTransform) => {
+      viewportTransform && canvas.setViewportTransform(viewportTransform);
+      canvas
+        .getSelectionElement()
+        .dispatchEvent(
+          new MouseEvent('mousedown', { clientX: 50, clientY: 50 })
+        );
+      spy.mockReset();
+      document.dispatchEvent(
+        new MouseEvent('mouseup', { clientX: 50, clientY: 50 })
+      );
+      expect(spy.mock.calls).toMatchSnapshot();
+    }
+  );
+
   test.each(
     (
       [

diff --git a/src/util/dom_misc.ts b/src/util/dom_misc.ts
@@ -6,10 +6,12 @@
 export function getScrollLeftTop(element: HTMLElement | null) {
   let left = 0,
     top = 0;
-  if (!element) {
+  const doc = element && getDocumentFromElement(element);
+
+  if (!element || !doc) {
     return { left, top };
   }
-  const doc = getDocumentFromElement(element);
+
   const docElement = doc.documentElement,
     body = doc.body || {
       scrollLeft: 0,