test(examples): use new api for test examples

Author: moklick

Diff for: cypress/integration/flow/basic.spec.js

@@ -127,29 +127,29 @@ describe('Basic Flow Rendering', () => {
   });
 
   it('drags the pane', () => {
-    const styleBeforeDrag = Cypress.$('.react-flow__nodes').css('transform');
+    const styleBeforeDrag = Cypress.$('.react-flow__viewport').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__renderer')
+      cy.get('.react-flow__pane')
         .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');
+          const styleAfterDrag = Cypress.$('.react-flow__viewport').css('transform');
           expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
         });
     });
   });
 
   it('zooms the pane', () => {
-    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
+    const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform');
 
-    cy.get('.react-flow__renderer')
+    cy.get('.react-flow__pane')
       .trigger('wheel', 'topLeft', { deltaY: -200 })
       .then(() => {
-        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
+        const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform');
         expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
       });
   });

Diff for: cypress/integration/flow/controls.spec.js

@@ -8,30 +8,30 @@ describe('Controls Testing', () => {
   });
 
   it('zooms in', () => {
-    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
+    const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform');
 
     cy.get('.react-flow__controls-zoomin')
       .click()
       .then(() => {
-        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
+        const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform');
         expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
       });
   });
 
   it('zooms out', () => {
-    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
+    const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform');
 
     cy.get('.react-flow__controls-zoomout')
       .click()
       .then(() => {
-        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
+        const styleAfterZoom = Cypress.$('.react-flow__viewport').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');
+    const styleBeforeDrag = Cypress.$('.react-flow__viewport').css('transform');
 
     // for d3 we have to pass the window to the event
     // https://github.com/cypress-io/cypress/issues/3441
@@ -41,19 +41,19 @@ describe('Controls Testing', () => {
         .trigger('mousemove', 'bottomLeft')
         .trigger('mouseup', { force: true, view: win })
         .then(() => {
-          const styleAfterDrag = Cypress.$('.react-flow__nodes').css('transform');
+          const styleAfterDrag = Cypress.$('.react-flow__viewport').css('transform');
           expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
         });
     });
   });
 
   it('fits view', () => {
-    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
+    const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform');
 
     cy.get('.react-flow__controls-fitview')
       .click()
       .then(() => {
-        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
+        const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform');
         expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
       });
   });

Diff for: cypress/integration/flow/empty.spec.js

@@ -20,11 +20,6 @@ describe('Empty Flow Rendering', () => {
     cy.get('body').type('{shift}', { release: true });
   });
 
-  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();
@@ -41,9 +36,4 @@ describe('Empty Flow Rendering', () => {
 
     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);
-  });
 });

Diff for: cypress/integration/flow/graph-utils.spec.js

@@ -27,41 +27,41 @@ describe('Graph Utils Testing', () => {
   });
 
   it('tests getOutgoers function', () => {
-    const outgoers = getOutgoers(nodes[0], elements);
+    const outgoers = getOutgoers(nodes[0], nodes, edges);
     expect(outgoers.length).to.be.equal(2);
 
-    const noOutgoers = getOutgoers(nodes[2], elements);
+    const noOutgoers = getOutgoers(nodes[2], nodes, edges);
     expect(noOutgoers.length).to.be.equal(0);
   });
 
   it('tests getIncomers function', () => {
-    const incomers = getIncomers(nodes[2], elements);
+    const incomers = getIncomers(nodes[2], nodes, edges);
     expect(incomers.length).to.be.equal(2);
 
-    const noIncomers = getIncomers(nodes[0], elements);
+    const noIncomers = getIncomers(nodes[0], nodes, edges);
     expect(noIncomers.length).to.be.equal(0);
   });
 
   describe('tests addEdge function', () => {
     it('adds edge', () => {
       const newEdge = { source: '1', target: '4' };
-      const nextElements = addEdge(newEdge, elements);
+      const nextEdges = addEdge(newEdge, edges);
 
-      expect(nextElements.length).to.be.equal(elements.length + 1);
+      expect(nextEdges.length).to.be.equal(edges.length + 1);
     });
 
     it('tries to add existing edge', () => {
       const newEdge = { source: '2', target: '3' };
-      const nextElements = addEdge(newEdge, elements);
+      const nextEdges = addEdge(newEdge, edges);
 
-      expect(nextElements.length).to.be.equal(elements.length);
+      expect(nextEdges.length).to.be.equal(edges.length);
     });
 
     it('tries to add invalid edge', () => {
       const newEdge = { nosource: '1', notarget: '3' };
 
       try {
-        addEdge(newEdge, elements);
+        addEdge(newEdge, edges);
       } catch (e) {
         console.log(e.message);
 

Diff for: cypress/integration/flow/hidden.spec.js

@@ -3,14 +3,24 @@ describe('Hidden Flow Rendering', () => {
     cy.visit('/hidden');
   });
 
+  it('renders empty flow', () => {
+    cy.get('.react-flow__node').should('not.exist');
+    cy.get('.react-flow__edge').should('not.exist');
+    cy.get('.react-flow__minimap-node').should('not.exist');
+  });
+
+  it('toggles isHidden mode', () => {
+    cy.get('.react-flow__ishidden').click();
+  });
+
   it('renders initial flow', () => {
     cy.get('.react-flow__renderer');
     cy.get('.react-flow__node').should('have.length', 4);
     cy.get('.react-flow__edge').should('have.length', 3);
     cy.get('.react-flow__minimap-node').should('have.length', 4);
   });
 
-  it('toggles isHidden mode', () => {
+  it('toggles isHidden mode again', () => {
     cy.get('.react-flow__ishidden').click();
   });
 
@@ -19,14 +29,4 @@ describe('Hidden Flow Rendering', () => {
     cy.get('.react-flow__edge').should('not.exist');
     cy.get('.react-flow__minimap-node').should('not.exist');
   });
-
-  it('toggles isHidden mode again', () => {
-    cy.get('.react-flow__ishidden').click();
-  });
-
-  it('renders initial flow', () => {
-    cy.get('.react-flow__node').should('have.length', 4);
-    cy.get('.react-flow__edge').should('have.length', 3);
-    cy.get('.react-flow__minimap-node').should('have.length', 4);
-  });
 });

Diff for: cypress/integration/flow/interaction.spec.js

@@ -120,12 +120,12 @@ describe('Interaction Flow Rendering', () => {
   });
 
   it('zooms by scroll', () => {
-    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
+    const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform');
 
-    cy.get('.react-flow__renderer')
+    cy.get('.react-flow__pane')
       .trigger('wheel', 'topLeft', { deltaY: 200 })
       .then(() => {
-        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
+        const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform');
         expect(styleBeforeZoom).not.to.equal(styleAfterZoom);
       });
   });
@@ -136,12 +136,12 @@ describe('Interaction Flow Rendering', () => {
 
   it('zooms by double click', () => {
     cy.get('.react-flow__controls-zoomout').click();
-    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
+    const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform');
 
-    cy.get('.react-flow__renderer')
+    cy.get('.react-flow__pane')
       .dblclick()
       .then(() => {
-        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
+        const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform');
         expect(styleBeforeZoom).not.to.equal(styleAfterZoom);
       });
   });

Diff for: cypress/integration/flow/minimap.spec.js

@@ -19,7 +19,7 @@ describe('Minimap Testing', () => {
     const viewBoxBeforeZoom = Cypress.$('.react-flow__minimap').attr('viewBox');
     const maskPathBeforeZoom = Cypress.$('.react-flow__minimap-mask').attr('d');
 
-    cy.get('.react-flow__renderer')
+    cy.get('.react-flow__pane')
       .trigger('wheel', 'topLeft', { deltaY: -200 })
       .then(() => {
         const viewBoxAfterZoom = Cypress.$('.react-flow__minimap').attr('viewBox');
@@ -53,7 +53,7 @@ describe('Minimap Testing', () => {
     // 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__renderer')
+      cy.get('.react-flow__pane')
         .trigger('mousedown', 'topLeft', { which: 1, view: win })
         .trigger('mousemove', 'bottomLeft')
         .trigger('mouseup', { force: true, view: win })