Graph Prop: isInteractive (#56)

* feat(props): add isInteractive * refactor(selection): dont allow if not interactive * feat(renderer): add class if is interactive * chore(inactive): add tests * refactor(inactive): no connection line, no edge selection closes #49
2019-10-23 18:42:17 +02:00
parent cf4bd7199a
commit 873fb50b19
28 changed files with 2528 additions and 377 deletions
@@ -0,0 +1,71 @@
+describe('Inactive Graph Rendering', () => {
+  it('renders a graph', () => {
+    cy.visit('/inactive');
+
+    cy.get('.react-flow__renderer');
+    cy.get('.react-flow__node').should('have.length', 4);
+    cy.get('.react-flow__edge').should('have.length', 2);
+    cy.get('.react-flow__node')
+      .children('div')
+      .children('.react-flow__handle');
+  });
+
+  it('tries to select a node by click', () => {
+    cy.get('.react-flow__node:first')
+      .click()
+      .should('have.not.class', 'selected');
+  });
+
+  it('tries to select an edge by click', () => {
+    cy.get('.react-flow__edge:first')
+      .click()
+      .should('have.not.class', 'selected');
+  });
+
+  it('tries to do a selection', () => {
+    cy.get('body')
+      .type('{shift}', { release: false })
+      .get('.react-flow__selectionpane')
+      .should('not.exist');
+  });
+
+  it('tries to drag a node', () => {
+    const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
+
+    cy.drag('.react-flow__node:first', { x: 500, y: 25 }).then($el => {
+      const styleAfterDrag = $el.css('transform');
+      expect(styleBeforeDrag).to.equal(styleAfterDrag);
+    });
+  });
+
+  it('tries to connect 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', 2);
+  });
+
+  it('toggles interactive mode', () => {
+    cy.get('.react-flow__interactive').click();
+  });
+
+  it('selects a node by click', () => {
+    cy.get('.react-flow__node:first')
+      .click()
+      .should('have.class', 'selected');
+  });
+
+  it('selects an edge by click', () => {
+    cy.get('.react-flow__edge:first')
+      .click()
+      .should('have.class', 'selected');
+  });
+});