From 68ec18570feb97d622dfab32a154f73268c9273b Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 3 Oct 2019 23:07:41 +0200
Subject: [PATCH] feat(test): add connect test

---
 cypress/integration/flow/basic.spec.js | 25 ++++++++++++++++++++-----
 examples/basic/scripts/ExampleGraph.js |  1 +
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/cypress/integration/flow/basic.spec.js b/cypress/integration/flow/basic.spec.js
index ced19793..08fa1f26 100644
--- a/cypress/integration/flow/basic.spec.js
+++ b/cypress/integration/flow/basic.spec.js
@@ -3,7 +3,7 @@ describe('Basic Flow Rendering', () => {
     cy.visit('/index.html');
 
     cy.get('.react-graph__renderer');
-    cy.get('.react-graph__node').should('have.length', 3);
+    cy.get('.react-graph__node').should('have.length', 4);
     cy.get('.react-graph__edge').should('have.length', 2);
   });
 
@@ -16,7 +16,7 @@ describe('Basic Flow Rendering', () => {
   });
 
   it('deselects node', () => {
-    cy.get('.react-graph__renderer').click(0, 0);
+    cy.get('.react-graph__renderer').click('bottomRight');
     cy.get('.react-graph__node:first').should('not.have.class', 'selected');
   });
 
@@ -30,7 +30,7 @@ describe('Basic Flow Rendering', () => {
       .trigger('mousemove', 'bottomRight', { which: 1 })
       .trigger('mouseup', 'bottomRight', { force: true });
 
-      cy.get('.react-graph__node').should('have.class', 'selected');
+    cy.get('.react-graph__node').should('have.class', 'selected');
   });
 
   it('selects an edge', () => {
@@ -48,10 +48,25 @@ describe('Basic Flow Rendering', () => {
   });
 
   it('removes a node', () => {
-    cy.get('.react-graph__node:last').click();
+    cy.get('.react-graph__node').contains('Node 2').click();
     cy.get('body').type('{backspace}');
 
-    cy.get('.react-graph__node').should('have.length', 2);
+    cy.get('.react-graph__node').should('have.length', 3);
     cy.get('.react-graph__edge').should('have.length', 1);
   });
+
+  it('connect nodes', () => {
+    cy.get('.react-graph__node')
+      .contains('Node 3')
+      .find('.react-graph__handle.source')
+      .trigger('mousedown', { which: 1 });
+
+    cy.get('.react-graph__node')
+      .contains('Node 4')
+      .find('.react-graph__handle.target')
+      .trigger('mousemove', { which: 1 })
+      .trigger('mouseup', { force: true });
+
+    cy.get('.react-graph__edge').should('have.length', 2);
+  })
 });
\ No newline at end of file
diff --git a/examples/basic/scripts/ExampleGraph.js b/examples/basic/scripts/ExampleGraph.js
index 2ebc7156..9f841d92 100644
--- a/examples/basic/scripts/ExampleGraph.js
+++ b/examples/basic/scripts/ExampleGraph.js
@@ -14,6 +14,7 @@ class App extends PureComponent {
         { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
         { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
         { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+        { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
         { source: '1', target: '2', animated: true },
         { source: '1', target: '3' },
       ]