test(interaction): add tests

cypress/integration/flow/basic.spec.js

@@ -1,7 +1,9 @@
 describe('Basic Flow Rendering', () => {
-  it('renders a flow with three nodes', () => {
+  before(() => {
     cy.visit('/basic');
+  });
 
+  it('renders a flow with three nodes', () => {
     cy.get('.react-flow__renderer');
     cy.get('.react-flow-basic-example'); // check if className prop works
     cy.get('.react-flow__node').should('have.length', 4);

cypress/integration/flow/controls.spec.js

@@ -1,7 +1,9 @@
 describe('Controls Testing', () => {
-  it('renders the control panel', () => {
+  before(() => {
     cy.visit('/');
+  });
 
+  it('renders the control panel', () => {
     cy.get('.react-flow__controls');
   });
 

cypress/integration/flow/custom-node.spec.js

@@ -1,7 +1,9 @@
 describe('Custom Node Flow Rendering', () => {
-  it('renders a flow', () => {
+  before(() => {
     cy.visit('/custom-node');
+  });
 
+  it('renders initial flow', () => {
     cy.get('.react-flow__renderer');
 
     cy.get('.react-flow__node').should('have.length', 4);

cypress/integration/flow/empty.spec.js

@@ -1,7 +1,9 @@
 describe('Empty Flow Rendering', () => {
-  it('renders an empty flow', () => {
+  before(() => {
     cy.visit('/empty');
+  });
 
+  it('renders an empty flow', () => {
     cy.get('.react-flow__renderer');
     cy.get('.react-flow__node').should('not.exist');
     cy.get('.react-flow__edge').should('not.exist');

cypress/integration/flow/hidden.spec.js

@@ -1,7 +1,9 @@
 describe('Hidden Flow Rendering', () => {
-  it('renders the initial flow', () => {
+  before(() => {
     cy.visit('/hidden');
+  });
 
+  it('renders initial flow', () => {
     cy.get('.react-flow__renderer');
     cy.get('.react-flow__node').should('have.length', 4);
     cy.get('.react-flow__edge').should('have.length', 3);

cypress/integration/flow/interaction.spec.js

@@ -1,7 +1,9 @@
 describe('Interaction Flow Rendering', () => {
-  it('renders initial flow', () => {
+  before(() => {
     cy.visit('/interaction');
+  });
 
+  it('renders initial flow', () => {
     cy.get('.react-flow__renderer');
     cy.get('.react-flow__node').should('have.length', 4);
     cy.get('.react-flow__edge').should('have.length', 2);
@@ -23,6 +25,38 @@ describe('Interaction Flow Rendering', () => {
     cy.get('body').type('{shift}', { release: true });
   });
 
+  it('tries to connect to nodes', () => {
+    cy.get('.react-flow__node')
+      .contains('Node 3')
+      .find('.react-flow__handle.source')
+      .then(($el) => {
+        const pointerEvents = $el.css('pointer-events');
+        expect(pointerEvents).to.equal('none');
+      });
+  });
+
+  it('tries to zoom by scroll', () => {
+    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
+
+    cy.get('.react-flow__zoompane')
+      .dblclick()
+      .then(() => {
+        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
+        expect(styleBeforeZoom).to.equal(styleAfterZoom);
+      });
+  });
+
+  it('tries to zoom by double click', () => {
+    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
+
+    cy.get('.react-flow__zoompane')
+      .trigger('wheel', 'topLeft', { deltaY: -200 })
+      .then(() => {
+        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
+        expect(styleBeforeZoom).to.equal(styleAfterZoom);
+      });
+  });
+
   it('toggles draggable mode', () => {
     cy.get('.react-flow__draggable').click();
   });
@@ -47,4 +81,53 @@ describe('Interaction Flow Rendering', () => {
   it('selects an edge by click', () => {
     cy.get('.react-flow__edge:first').click().should('have.class', 'selected');
   });
+
+  it('toggles connectable mode', () => {
+    cy.get('.react-flow__connectable').click();
+  });
+
+  it('connects two nodes', () => {
+    cy.get('.react-flow__node')
+      .contains('Node 3')
+      .find('.react-flow__handle.source')
+      .trigger('mousedown', { which: 1 });
+
+    cy.get('.react-flow__node')
+      .contains('Node 4')
+      .find('.react-flow__handle.target')
+      .trigger('mousemove')
+      .trigger('mouseup', { force: true });
+
+    cy.get('.react-flow__edge').should('have.length', 3);
+  });
+
+  it('toggles zoom on scroll', () => {
+    cy.get('.react-flow__zoomonscroll').click();
+  });
+
+  it('zooms by scroll', () => {
+    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
+
+    cy.get('.react-flow__zoompane')
+      .trigger('wheel', 'topLeft', { deltaY: 200 })
+      .then(() => {
+        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
+        expect(styleBeforeZoom).not.to.equal(styleAfterZoom);
+      });
+  });
+
+  it('toggles zoom on double click', () => {
+    cy.get('.react-flow__zoomondbl').click();
+  });
+
+  it('zooms by double click', () => {
+    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
+
+    cy.get('.react-flow__zoompane')
+      .dblclick()
+      .then(() => {
+        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
+        expect(styleBeforeZoom).not.to.equal(styleAfterZoom);
+      });
+  });
 });

cypress/integration/flow/minimap.spec.js

@@ -1,7 +1,9 @@
 describe('Minimap Testing', () => {
-  it('renders the mini map', () => {
+  before(() => {
     cy.visit('/');
+  });
 
+  it('renders the mini map', () => {
     cy.get('.react-flow__minimap');
     cy.get('.react-flow__minimap-mask');
   });

cypress/integration/flow/overview.spec.js

@@ -1,9 +1,10 @@
 describe('Overview Flow Rendering', () => {
-  it('renders a flow', () => {
+  before(() => {
     cy.visit('/');
+  });
 
+  it('renders a flow', () => {
     cy.get('.react-flow__renderer');
-
     cy.get('.react-flow__node').should('have.length', 7);
     cy.get('.react-flow__edge').should('have.length', 6);
   });

cypress/integration/flow/stress.spec.js

@@ -1,9 +1,10 @@
 describe('Stress Flow Rendering', () => {
-  it('renders initial flow', () => {
+  before(() => {
     cy.visit('/stress');
+  });
 
+  it('renders initial flow', () => {
     cy.get('.react-flow__renderer');
-
     cy.get('.react-flow__node').should('have.length', 100);
     cy.get('.react-flow__edge').should('have.length', 99);
   });

example/src/Interaction/index.js

@@ -22,8 +22,8 @@ const InteractionFlow = () => {
   const [isSelectable, setIsSelectable] = useState(false);
   const [isDraggable, setIsDraggable] = useState(false);
   const [isConnectable, setIsConnectable] = useState(false);
-  const [zoomOnScroll, setZoomOnScroll] = useState(true);
-  const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(true);
+  const [zoomOnScroll, setZoomOnScroll] = useState(false);
+  const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(false);
 
   return (
     <ReactFlow