From a9b3ef1d5e6a1ea9658ffb56c6c778c4f03f9ea0 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 31 Aug 2022 15:58:49 +0200
Subject: [PATCH] text(event-handler): add tests for pane handlers

---
 .../reactflow/event-handlers.cy.tsx           | 39 +++++++++++++++++++
 examples/nextjs/cypress/support/commands.ts   |  2 +-
 .../core/src/container/ZoomPane/index.tsx     |  2 +-
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/examples/nextjs/cypress/components/reactflow/event-handlers.cy.tsx b/examples/nextjs/cypress/components/reactflow/event-handlers.cy.tsx
index c75e8918..dfe9f57d 100644
--- a/examples/nextjs/cypress/components/reactflow/event-handlers.cy.tsx
+++ b/examples/nextjs/cypress/components/reactflow/event-handlers.cy.tsx
@@ -103,6 +103,7 @@ describe('<ReactFlow />: Event handlers', () => {
         });
     });
   });
+
   describe('Edge event handlers', () => {
     it('handles onEdgeClick', () => {
       const onEdgeClick = cy.spy().as('onEdgeClick');
@@ -165,4 +166,42 @@ describe('<ReactFlow />: Event handlers', () => {
         });
     });
   });
+
+  describe('Pane event handlers', () => {
+    it('handles onMove handlers', () => {
+      const onMoveStart = cy.spy().as('onMoveStart');
+      const onMove = cy.spy().as('onMove');
+      const onMoveEnd = cy.spy().as('onMoveEnd');
+
+      cy.mount(<ControlledFlow onMoveStart={onMoveStart} onMove={onMove} onMoveEnd={onMoveEnd} />).then(() => {
+        expect(onMoveStart.callCount).to.be.eq(0);
+        expect(onMove.callCount).to.be.eq(0);
+        expect(onMoveEnd.callCount).to.be.eq(0);
+
+        cy.dragPane({ from: { x: 10, y: 200 }, to: { x: 100, y: 200 } }).then(() => {
+          expect(onMoveStart.callCount).to.be.eq(1);
+          expect(onMove.callCount).to.be.gt(0);
+          expect(onMoveEnd.callCount).to.be.eq(1);
+        });
+      });
+    });
+
+    it('handles click handlers', () => {
+      const onPaneClick = cy.spy().as('onPaneClick');
+      const onPaneContextMenu = cy.spy().as('onPaneContextMenu');
+
+      cy.mount(<ControlledFlow onPaneClick={onPaneClick} onPaneContextMenu={onPaneContextMenu} />).then(() => {
+        expect(onPaneClick.callCount).to.be.eq(0);
+        expect(onPaneContextMenu.callCount).to.be.eq(0);
+
+        cy.get('.react-flow__pane')
+          .rightclick()
+          .click()
+          .then(() => {
+            expect(onPaneClick.callCount).to.be.eq(1);
+            expect(onPaneContextMenu.callCount).to.be.eq(1);
+          });
+      });
+    });
+  });
 });
diff --git a/examples/nextjs/cypress/support/commands.ts b/examples/nextjs/cypress/support/commands.ts
index eaca8e6f..14302409 100644
--- a/examples/nextjs/cypress/support/commands.ts
+++ b/examples/nextjs/cypress/support/commands.ts
@@ -23,7 +23,7 @@ Cypress.Commands.add('dragPane', ({ from, to }) =>
     .then((window) =>
       cy
         .get('.react-flow__pane')
-        .trigger('mousedown', from.x, from.y, { which: 1, view: window })
+        .trigger('mousedown', from.x, from.y, { view: window })
         .trigger('mousemove', to.x, to.y)
         .trigger('mouseup', { force: true, view: window })
     )
diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx
index c08ff01f..657ce573 100644
--- a/packages/core/src/container/ZoomPane/index.tsx
+++ b/packages/core/src/container/ZoomPane/index.tsx
@@ -257,7 +257,7 @@ const ZoomPane = ({
         }
 
         // default filter for d3-zoom
-        return (!event.ctrlKey || event.type === 'wheel') && event.button <= 1;
+        return (!event.ctrlKey || event.type === 'wheel') && (!event.button || event.button <= 1);
       });
     }
   }, [