chore(tests): add test for selections and empty graphs

cypress/integration/flow/basic.spec.js

@@ -15,7 +15,7 @@ describe('Basic Graph Rendering', () => {
     expect(gridStroke).to.equal('#eee');
   });
 
-  it('selects a node', () => {
+  it('selects a node by click', () => {
     cy.get('.react-flow__node:first').click().should('have.class', 'selected');
   });
 
@@ -24,7 +24,7 @@ describe('Basic Graph Rendering', () => {
     cy.get('.react-flow__node:first').should('not.have.class', 'selected');
   });
 
-  it('selects an edge', () => {
+  it('selects an edge by click', () => {
     cy.get('.react-flow__edge:first').click().should('have.class', 'selected');
   });
 
@@ -33,6 +33,22 @@ describe('Basic Graph Rendering', () => {
     cy.get('.react-flow__edge:first').should('not.have.class', 'selected');
   });
 
+  it('selects one node with a selection', () => {
+    cy.get('body')
+      .type('{shift}', { release: false })
+      .get('.react-flow__selectionpane')
+      .trigger('mousedown', 'topLeft', { which: 1, force: true })
+      .trigger('mousemove', 800, 75, { which: 1 })
+      .trigger('mouseup', 'bottomRight', { force: true })
+      .get('.react-flow__node')
+      .first()
+      .should('have.class', 'selected')
+      .get('.react-flow__node')
+      .last()
+      .should('have.not.class', 'selected')
+      .get('.react-flow__nodesselection-rect');
+  });
+
   it('selects all nodes', () => {
     cy.get('body')
       .type('{shift}', { release: false })

cypress/integration/flow/empty.spec.js

@@ -7,11 +7,58 @@ describe('Empty Flow Rendering', () => {
     cy.get('.react-flow__edge').should('not.exist');
   });
 
+  it('renders empty selection', () => {
+    cy.get('body')
+      .type('{shift}', { release: false })
+      .get('.react-flow__selectionpane')
+      .trigger('mousedown', 'topLeft', { which: 1, force: true })
+      .trigger('mousemove', 'bottomRight', { which: 1 })
+      .trigger('mouseup', 'bottomRight', { force: true })
+  });
+
   it('renders a control panel', () => {
     cy.get('.react-flow__controls');
   });
 
-  it('renders a mini map', () => {
+  it('uses zoom in control', () => {
+    cy.get('.react-flow__controls-zoomin').click();
+  });
+
+  it('uses zoom out control', () => {
+    cy.get('.react-flow__controls-zoomout').click();
+  });
+
+  it('uses fit view control', () => {
+    cy.get('.react-flow__controls-fitview').click();
+  });
+
+  it('renders an empty mini map', () => {
     cy.get('.react-flow__minimap');
+    cy.get('.react-flow__minimap-node').should('not.exist');
+  });
+
+  it('adds two nodes', () => {
+    cy.contains('add node').click();
+    cy.contains('add node').click();
+  });
+
+  it('connects nodes', () => {
+    cy.get('.react-flow__node')
+      .first()
+      .find('.react-flow__handle.source')
+      .trigger('mousedown', { which: 1 });
+
+    cy.get('.react-flow__node')
+      .last()
+      .find('.react-flow__handle.target')
+      .trigger('mousemove')
+      .trigger('mouseup', { force: true });
+
+    cy.get('.react-flow__edge').should('have.length', 1);
+  });
+
+  it('renders mini map with two nodes', () => {
+    cy.get('.react-flow__minimap');
+    cy.get('.react-flow__minimap-node').should('have.length', 2);
   });
 });