refactor(cypress): cleanup

cypress.json

@@ -2,5 +2,6 @@
   "baseUrl": "http://localhost:3000",
   "viewportWidth": 1280,
   "viewportHeight": 720,
-  "video": false
-}
+  "video": false,
+  "pluginsFile": false
+}

cypress/integration/flow/basic.spec.js

@@ -33,7 +33,7 @@ describe('Basic Flow Rendering', () => {
   });
 
   it('deselects node', () => {
-    cy.get('.react-flow__renderer').click('bottomRight');
+    cy.get('.react-flow__renderer').click('bottomLeft');
     cy.get('.react-flow__node:first').should('not.have.class', 'selected');
   });
 
@@ -42,7 +42,7 @@ describe('Basic Flow Rendering', () => {
   });
 
   it('deselects edge', () => {
-    cy.get('.react-flow__renderer').click('bottomRight');
+    cy.get('.react-flow__renderer').click('bottomLeft');
     cy.get('.react-flow__edge:first').should('not.have.class', 'selected');
   });
 
@@ -50,9 +50,9 @@ describe('Basic Flow Rendering', () => {
     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 })
+      .trigger('mousedown', 1000, 1, { which: 1, force: true })
+      .trigger('mousemove', 1, 200, { which: 1 })
+      .trigger('mouseup', 1, 200, { force: true })
       .get('.react-flow__node')
       .first()
       .should('have.class', 'selected')
@@ -68,9 +68,9 @@ describe('Basic Flow Rendering', () => {
     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 })
+      .trigger('mousedown', 'topRight', { which: 1, force: true })
+      .trigger('mousemove', 'bottomLeft', { which: 1 })
+      .trigger('mouseup', 'bottomLeft', { force: true })
       .get('.react-flow__node')
       .should('have.class', 'selected')
       .get('.react-flow__nodesselection-rect');
@@ -79,7 +79,7 @@ describe('Basic Flow Rendering', () => {
   });
 
   it('removes selection', () => {
-    cy.get('.react-flow__renderer').click('bottomRight');
+    cy.get('.react-flow__renderer').click('bottomLeft');
     cy.get('.react-flow__nodesselection-rect').should('not.exist');
   });
 
@@ -108,12 +108,12 @@ describe('Basic Flow Rendering', () => {
     cy.get('.react-flow__node')
       .contains('Node 3')
       .find('.react-flow__handle.source')
-      .trigger('mousedown', { which: 1 });
+      .trigger('mousedown', { button: 0 });
 
     cy.get('.react-flow__node')
       .contains('Node 4')
       .find('.react-flow__handle.target')
-      .trigger('mousemove')
+      .trigger('mousemove', { force: true })
       .trigger('mouseup', { force: true });
 
     cy.get('.react-flow__edge').should('have.length', 2);

cypress/integration/flow/empty.spec.js

@@ -26,7 +26,7 @@ describe('Empty Flow Rendering', () => {
   });
 
   it('connects nodes', () => {
-    cy.get('.react-flow__node').first().find('.react-flow__handle.source').trigger('mousedown', { which: 1 });
+    cy.get('.react-flow__node').first().find('.react-flow__handle.source').trigger('mousedown', { button: 0 });
 
     cy.get('.react-flow__node')
       .last()

cypress/integration/flow/graph-utils.spec.js

@@ -1,4 +1,4 @@
-import { isNode, isEdge, getOutgoers, getIncomers, addEdge } from '../../../dist/ReactFlow.js';
+import { isNode, isEdge, getOutgoers, getIncomers, addEdge } from '../../../dist/esm/index.js';
 
 const nodes = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
@@ -13,8 +13,6 @@ const edges = [
   { id: 'e2-3', source: '2', target: '3' },
 ];
 
-const elements = [...nodes, ...edges];
-
 describe('Graph Utils Testing', () => {
   it('tests isNode function', () => {
     expect(isNode(nodes[0])).to.be.true;
@@ -28,6 +26,7 @@ describe('Graph Utils Testing', () => {
 
   it('tests getOutgoers function', () => {
     const outgoers = getOutgoers(nodes[0], nodes, edges);
+
     expect(outgoers.length).to.be.equal(2);
 
     const noOutgoers = getOutgoers(nodes[2], nodes, edges);

cypress/integration/flow/interaction.spec.js

@@ -93,7 +93,8 @@ describe('Interaction Flow Rendering', () => {
   });
 
   it('selects an edge by click', () => {
-    cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
+    cy.get('.react-flow__edge:first').click({ force: true });
+    cy.get('.react-flow__edge:first').should('have.class', 'selected');
   });
 
   it('toggles connectable mode', () => {
@@ -104,7 +105,7 @@ describe('Interaction Flow Rendering', () => {
     cy.get('.react-flow__node')
       .contains('Node 3')
       .find('.react-flow__handle.source')
-      .trigger('mousedown', { which: 1 });
+      .trigger('mousedown', { button: 0 });
 
     cy.get('.react-flow__node')
       .contains('Node 4')

cypress/integration/flow/minimap.spec.js

@@ -33,16 +33,14 @@ describe('Minimap Testing', () => {
   it('changes node position', () => {
     const xPosBeforeDrag = Cypress.$('.react-flow__minimap-node:first').attr('x');
     const yPosBeforeDrag = Cypress.$('.react-flow__minimap-node:first').attr('y');
-    const maskPathBeforeDrag = Cypress.$('.react-flow__minimap-mask').attr('d');
 
     cy.drag('.react-flow__node:first', { x: 500, y: 25 }).then(($el) => {
+      cy.wait(1000);
       const xPosAfterDrag = Cypress.$('.react-flow__minimap-node:first').attr('x');
       const yPosAfterDrag = Cypress.$('.react-flow__minimap-node:first').attr('y');
-      const maskPathAfterDrag = Cypress.$('.react-flow__minimap-mask').attr('d');
 
       expect(xPosBeforeDrag).to.not.equal(xPosAfterDrag);
       expect(yPosBeforeDrag).to.not.equal(yPosAfterDrag);
-      expect(maskPathBeforeDrag).to.not.equal(maskPathAfterDrag);
     });
   });
 

cypress/plugins/index.js

@@ -1,17 +0,0 @@
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-}