feat(test): add connect test

xyflow · Oct 3, 2019 · 68ec185 · 68ec185
1 parent 22d2e62
commit 68ec185
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git 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);
+  })
 });
diff --git 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' },
       ]