test(controls): add tests

cypress/integration/flow/basic.spec.js

@@ -115,16 +115,10 @@ describe('Basic Flow Rendering', () => {
   });
 
   it('drags the pane', () => {
-    // for d3 we have to pass the window to the event
-    // https://github.com/cypress-io/cypress/issues/3441
-
-    const newPosition = {
-      clientX: Cypress.config('viewportWidth') * 0.6,
-      clientY: Cypress.config('viewportHeight') * 0.7,
-    };
-
     const styleBeforeDrag = Cypress.$('.react-flow__nodes').css('transform');
 
+    // for d3 we have to pass the window to the event
+    // https://github.com/cypress-io/cypress/issues/3441
     cy.window().then((win) => {
       cy.get('.react-flow__zoompane')
         .trigger('mousedown', 'topLeft', { which: 1, view: win })

cypress/integration/flow/controls.js

@@ -0,0 +1,82 @@
+describe('Controls Testing', () => {
+  it('renders a flow', () => {
+    cy.visit('/');
+
+    cy.get('.react-flow__renderer');
+  });
+
+  it('renders the control panel', () => {
+    cy.get('.react-flow__controls');
+  });
+
+  it('zooms in', () => {
+    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
+
+    cy.get('.react-flow__controls-zoomin')
+      .click()
+      .then(() => {
+        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
+        expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
+      });
+  });
+
+  it('zooms out', () => {
+    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
+
+    cy.get('.react-flow__controls-zoomout')
+      .click()
+      .then(() => {
+        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
+        expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
+      });
+  });
+
+  // view is already fitted so we drag the pane to un-fit it
+  it('drags the pane', () => {
+    const styleBeforeDrag = Cypress.$('.react-flow__nodes').css('transform');
+
+    // for d3 we have to pass the window to the event
+    // https://github.com/cypress-io/cypress/issues/3441
+    cy.window().then((win) => {
+      cy.get('.react-flow__zoompane')
+        .trigger('mousedown', 'topLeft', { which: 1, view: win })
+        .trigger('mousemove', 'bottomLeft')
+        .trigger('mouseup', { force: true, view: win })
+        .then(() => {
+          const styleAfterDrag = Cypress.$('.react-flow__nodes').css('transform');
+          expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
+        });
+    });
+  });
+
+  it('fits view', () => {
+    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
+
+    cy.get('.react-flow__controls-fitview')
+      .click()
+      .then(() => {
+        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
+        expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
+      });
+  });
+
+  it('uses interactive control - not interactive', () => {
+    cy.get('.react-flow__node:first').click().should('have.class', 'selected');
+    cy.get('.react-flow__renderer').click('bottomRight');
+    cy.get('.react-flow__node:first').should('not.have.class', 'selected');
+
+    cy.get('.react-flow__controls-interactive')
+      .click()
+      .then(() => {
+        cy.get('.react-flow__node:first').should('not.have.class', 'selected');
+      });
+  });
+
+  it('uses interactive control - interactive', () => {
+    cy.get('.react-flow__controls-interactive')
+      .click()
+      .then(() => {
+        cy.get('.react-flow__node:first').click().should('have.class', 'selected');
+      });
+  });
+});

cypress/integration/flow/empty.spec.js

@@ -16,26 +16,6 @@ describe('Empty Flow Rendering', () => {
       .trigger('mouseup', 'bottomRight', { force: true });
   });
 
-  it('renders a control panel', () => {
-    cy.get('.react-flow__controls');
-  });
-
-  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('uses lock view control', () => {
-    cy.get('.react-flow__controls-interactive');
-  });
-
   it('renders an empty mini map', () => {
     cy.get('.react-flow__minimap');
     cy.get('.react-flow__minimap-node').should('not.exist');