fix(cypress): change example urls in tests

cypress.config.js

@@ -6,6 +6,5 @@ module.exports = defineConfig({
     viewportWidth: 1280,
     viewportHeight: 720,
     video: false,
-    supportFile: false,
   },
 });

cypress/e2e/draghandle.cy.js

@@ -1,6 +1,6 @@
 describe('DragHandle Flow Rendering', () => {
   before(() => {
-    cy.visit('/draghandle');
+    cy.visit('/DragHandle');
   });
 
   it('renders a flow with a node', () => {

cypress/e2e/empty.cy.js

@@ -1,6 +1,6 @@
 describe('Empty Flow Rendering', () => {
   before(() => {
-    cy.visit('/empty');
+    cy.visit('/Empty');
   });
 
   it('renders an empty flow', () => {
@@ -26,7 +26,10 @@ describe('Empty Flow Rendering', () => {
   });
 
   it('connects nodes', () => {
-    cy.get('.react-flow__node').first().find('.react-flow__handle.source').trigger('mousedown', { button: 0 });
+    cy.get('.react-flow__node')
+      .first()
+      .find('.react-flow__handle.source')
+      .trigger('mousedown', { button: 0 });
 
     cy.get('.react-flow__node')
       .last()

cypress/e2e/graph-utils.cy.js

@@ -1,7 +1,18 @@
-import { isNode, isEdge, getOutgoers, getIncomers, addEdge } from '../../../dist/esm/index.js';
+import {
+  isNode,
+  isEdge,
+  getOutgoers,
+  getIncomers,
+  addEdge,
+} from '../../packages/core/dist/react-flow-core.esm.js';
 
 const nodes = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+  },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
   { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
@@ -64,7 +75,9 @@ describe('Graph Utils Testing', () => {
       } catch (e) {
         console.log(e.message);
 
-        expect(e.message).to.be.equal("Can't create edge. An edge needs a source and a target.");
+        expect(e.message).to.be.equal(
+          "Can't create edge. An edge needs a source and a target."
+        );
       }
     });
   });

cypress/e2e/hidden.cy.js

@@ -1,6 +1,6 @@
 describe('Hidden Flow Rendering', () => {
   before(() => {
-    cy.visit('/hidden');
+    cy.visit('/Hidden');
   });
 
   it('renders empty flow', () => {

cypress/e2e/interaction.cy.js

@@ -1,6 +1,6 @@
 describe('Interaction Flow Rendering', () => {
   before(() => {
-    cy.visit('/interaction');
+    cy.visit('/Interaction');
   });
 
   it('renders initial flow', () => {
@@ -11,12 +11,16 @@ describe('Interaction Flow Rendering', () => {
   });
 
   it('tries to select a node by click', () => {
-    const pointerEvents = Cypress.$('.react-flow__node:first').css('pointer-events');
+    const pointerEvents = Cypress.$('.react-flow__node:first').css(
+      'pointer-events'
+    );
     expect(pointerEvents).to.equal('none');
   });
 
   it('tries to select an edge by click', () => {
-    const pointerEvents = Cypress.$('.react-flow__edge:first').css('pointer-events');
+    const pointerEvents = Cypress.$('.react-flow__edge:first').css(
+      'pointer-events'
+    );
     expect(pointerEvents).to.equal('none');
   });
 
@@ -25,17 +29,24 @@ describe('Interaction Flow Rendering', () => {
   });
 
   it('allows node clicks when enabled', () => {
-    const pointerEvents = Cypress.$('.react-flow__node:first').css('pointer-events');
+    const pointerEvents = Cypress.$('.react-flow__node:first').css(
+      'pointer-events'
+    );
     expect(pointerEvents).to.equal('all');
   });
 
   it('allows edge clicks when enabled', () => {
-    const pointerEvents = Cypress.$('.react-flow__edge:first').css('pointer-events');
+    const pointerEvents = Cypress.$('.react-flow__edge:first').css(
+      'pointer-events'
+    );
     expect(pointerEvents.toLowerCase()).to.equal('visiblestroke');
   });
 
   it('tries to do a selection', () => {
-    cy.get('body').type('{shift}', { release: false }).get('.react-flow__selectionpane').should('not.exist');
+    cy.get('body')
+      .type('{shift}', { release: false })
+      .get('.react-flow__selectionpane')
+      .should('not.exist');
     cy.get('body').type('{shift}', { release: true });
   });
 
@@ -76,7 +87,9 @@ describe('Interaction Flow Rendering', () => {
   });
 
   it('drags a node', () => {
-    const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
+    const styleBeforeDrag = Cypress.$('.react-flow__node:first').css(
+      'transform'
+    );
 
     cy.drag('.react-flow__node:first', { x: 325, y: 100 }).then(($el) => {
       const styleAfterDrag = $el.css('transform');
@@ -127,7 +140,9 @@ describe('Interaction Flow Rendering', () => {
       .trigger('wheel', 'topLeft', { deltaY: 200 })
       .wait(50)
       .then(() => {
-        const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform');
+        const styleAfterZoom = Cypress.$('.react-flow__viewport').css(
+          'transform'
+        );
         expect(styleBeforeZoom).not.to.equal(styleAfterZoom);
       });
   });
@@ -144,7 +159,9 @@ describe('Interaction Flow Rendering', () => {
       .dblclick()
       .wait(50)
       .then(() => {
-        const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform');
+        const styleAfterZoom = Cypress.$('.react-flow__viewport').css(
+          'transform'
+        );
         expect(styleBeforeZoom).not.to.equal(styleAfterZoom);
       });
   });

cypress/e2e/minimap.cy.js

@@ -10,6 +10,9 @@ describe('Minimap Testing', () => {
 
   it('has same number of nodes as the pane', () => {
     const paneNodes = Cypress.$('.react-flow__node').length;
+
+    cy.wait(100);
+
     const minimapNodes = Cypress.$('.react-flow__minimap-node').length;
 
     cy.wait(100);
@@ -25,8 +28,12 @@ describe('Minimap Testing', () => {
       .trigger('wheel', 'topLeft', { deltaY: -200 })
       .wait(50)
       .then(() => {
-        const viewBoxAfterZoom = Cypress.$('.react-flow__minimap').attr('viewBox');
-        const maskPathAfterZoom = Cypress.$('.react-flow__minimap-mask').attr('d');
+        const viewBoxAfterZoom = Cypress.$('.react-flow__minimap').attr(
+          'viewBox'
+        );
+        const maskPathAfterZoom = Cypress.$('.react-flow__minimap-mask').attr(
+          'd'
+        );
 
         expect(viewBoxBeforeZoom).to.not.equal(viewBoxAfterZoom);
         expect(maskPathBeforeZoom).to.not.equal(maskPathAfterZoom);
@@ -34,14 +41,22 @@ 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 xPosBeforeDrag = Cypress.$('.react-flow__minimap-node:first').attr(
+      'x'
+    );
+    const yPosBeforeDrag = Cypress.$('.react-flow__minimap-node:first').attr(
+      'y'
+    );
 
     cy.drag('.react-flow__node:first', { x: 500, y: 25 })
       .wait(100)
       .then(() => {
-        const xPosAfterDrag = Cypress.$('.react-flow__minimap-node:first').attr('x');
-        const yPosAfterDrag = Cypress.$('.react-flow__minimap-node:first').attr('y');
+        const xPosAfterDrag = Cypress.$('.react-flow__minimap-node:first').attr(
+          'x'
+        );
+        const yPosAfterDrag = Cypress.$('.react-flow__minimap-node:first').attr(
+          'y'
+        );
 
         expect(xPosBeforeDrag).to.not.equal(xPosAfterDrag);
         expect(yPosBeforeDrag).to.not.equal(yPosAfterDrag);
@@ -61,8 +76,12 @@ describe('Minimap Testing', () => {
         .wait(50)
         .trigger('mouseup', { force: true, view: win })
         .then(() => {
-          const viewBoxAfterDrag = Cypress.$('.react-flow__minimap').attr('viewBox');
-          const maskPathAfterDrag = Cypress.$('.react-flow__minimap-mask').attr('d');
+          const viewBoxAfterDrag = Cypress.$('.react-flow__minimap').attr(
+            'viewBox'
+          );
+          const maskPathAfterDrag = Cypress.$('.react-flow__minimap-mask').attr(
+            'd'
+          );
 
           expect(viewBoxBeforeDrag).to.not.equal(viewBoxAfterDrag);
           expect(maskPathBeforeDrag).to.not.equal(maskPathAfterDrag);

examples/nextjs/pages/index.tsx

@@ -9,6 +9,7 @@ import ReactFlow, {
 
 import Minimap from '@react-flow/minimap';
 import Background, { BackgroundVariant } from '@react-flow/background';
+import Controls from '@react-flow/controls';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) =>
@@ -95,6 +96,7 @@ const BasicFlow = () => {
     >
       <Background variant={BackgroundVariant.Lines} />
       <Minimap />
+      <Controls />
 
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
         <button onClick={resetTransform} style={{ marginRight: 5 }}>