feat(tests): add invalid connection test

cypress/integration/flow/advanced.spec.js

@@ -0,0 +1,48 @@
+describe('Advanced Flow Rendering', () => {
+  it('renders a flow with sone nodes', () => {
+    cy.visit('/advanced.html');
+
+    cy.get('.react-flow__renderer');
+
+    cy.get('.react-flow__node').should('have.length', 9);
+    cy.get('.react-flow__edge').should('have.length', 9);
+  });
+
+  it('connects nodes', () => {
+    cy.get('.react-flow__node')
+      .contains('1 Tests')
+      .find('.react-flow__handle.source')
+      .trigger('mousedown', { which: 1 });
+
+    cy.get('.react-flow__node')
+      .contains('7 output')
+      .find('.react-flow__handle.target')
+      .trigger('mousemove')
+      .should('have.class', 'connecting')
+      .should('have.class', 'valid')
+      .trigger('mouseup', { force: true })
+      .should('not.have.class', 'valid')
+      .should('not.have.class', 'connecting');
+
+    cy.get('.react-flow__edge').should('have.length', 10);
+  });
+
+  it('tries to make invalid connection', () => {
+    cy.get('.react-flow__node')
+      .contains('write something')
+      .parents('.react-flow__node')
+      .find('.react-flow__handle.source')
+      .trigger('mousedown', { which: 1 });
+
+    cy.get('.react-flow__node')
+      .contains('5 Another node')
+      .find('.react-flow__handle.target')
+      .trigger('mousemove')
+      .should('have.class', 'connecting')
+      .should('not.have.class', 'valid')
+      .trigger('mouseup', { force: true })
+      .should('not.have.class', 'connecting');
+
+    cy.get('.react-flow__edge').should('have.length', 10);
+  });
+});

dist/ReactGraph.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('prop-types')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'prop-types'], factory) :
-  (global = global || self, factory(global.ReactGraph = {}, global.React, global.ReactDOM, global.PropTypes));
+  (global = global || self, factory(global.ReactFlow = {}, global.React, global.ReactDOM, global.PropTypes));
 }(this, function (exports, React, reactDom, PropTypes) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
@@ -9207,7 +9207,15 @@
       x: evt.clientX - containerBounds.x,
       y: evt.clientY - containerBounds.y
     });
-    setSourceId(nodeId); // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
+    setSourceId(nodeId);
+
+    function resetRecentHandle() {
+      if (recentHoveredHandle) {
+        recentHoveredHandle.classList.remove('valid');
+        recentHoveredHandle.classList.remove('connecting');
+      }
+    } // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
+
 
     function checkElementBelowIsValid(evt) {
       var elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
@@ -9257,12 +9265,7 @@
           isHoveringHandle = _checkElementBelowIsV.isHoveringHandle;
 
       if (!isHoveringHandle) {
-        if (recentHoveredHandle) {
+        return resetRecentHandle();
-          recentHoveredHandle.classList.remove('valid');
-          recentHoveredHandle.classList.remove('connecting');
-        }
-
-        return false;
       }
 
       var isOwnHandle = connection.source === connection.target;
@@ -9283,10 +9286,7 @@
         onConnect(connection);
       }
 
-      if (recentHoveredHandle) {
+      resetRecentHandle();
-        recentHoveredHandle.classList.remove('valid');
-      }
-
       setSourceId(null);
       document.removeEventListener('mousemove', onMouseMove);
       document.removeEventListener('mouseup', onMouseUp);

rollup.config.js

@@ -16,7 +16,7 @@ export default [{
 			}
 		},
 		output: {
-			name: 'ReactGraph',
+			name: 'ReactFlow',
 			file: pkg.browser,
 			format: 'umd',
 			sourcemaps: true,