test(view-props): add tests

examples/nextjs/cypress/support/ControlledFlow.tsx

@@ -0,0 +1,65 @@
+import { useCallback, useState } from 'react';
+import {
+  ReactFlow,
+  Node,
+  Edge,
+  NodeChange,
+  EdgeChange,
+  applyNodeChanges,
+  applyEdgeChanges,
+  Connection,
+  addEdge,
+  ReactFlowProps,
+} from '@react-flow/bundle';
+
+function ControlledFlow({
+  addOnNodeChangeHandler = true,
+  addOnEdgeChangeHandler = true,
+  addOnConnectHandler = true,
+  initialNodes = [],
+  initialEdges = [],
+  ...rest
+}: {
+  initialNodes?: Node[];
+  initialEdges?: Edge[];
+  addOnNodeChangeHandler?: boolean;
+  addOnEdgeChangeHandler?: boolean;
+  addOnConnectHandler?: boolean;
+} & Partial<ReactFlowProps>) {
+  const [nodes, setNodes] = useState<Node[]>(initialNodes);
+  const [edges, setEdges] = useState<Edge[]>(initialEdges);
+
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)),
+    [setNodes]
+  );
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+    [setEdges]
+  );
+
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  const handlers: {
+    onNodesChange?: (changes: NodeChange[]) => void;
+    onEdgesChange?: (changes: EdgeChange[]) => void;
+    onConnect?: (params: Connection | Edge) => void;
+  } = {};
+
+  if (addOnNodeChangeHandler) {
+    handlers.onNodesChange = onNodesChange;
+  }
+
+  if (addOnEdgeChangeHandler) {
+    handlers.onEdgesChange = onEdgesChange;
+  }
+
+  if (addOnConnectHandler) {
+    handlers.onConnect = onConnect;
+  }
+
+  return <ReactFlow nodes={nodes} edges={edges} {...handlers} {...rest} />;
+}
+
+export default ControlledFlow;

examples/nextjs/cypress/support/commands.ts

@@ -1,25 +1,34 @@
 /// <reference types="cypress" />
 
 Cypress.Commands.add('drag', (selector, { x, y }) =>
-  cy.window().then((window) =>
-    cy
-      .get(selector as string)
-      .trigger('mousedown', { which: 1, view: window })
-      .trigger('mousemove', { clientX: x, clientY: y, force: true })
-      .wait(50)
-      .trigger('mouseup', { view: window, force: true })
-  )
+  cy.window().then((window) => {
+    const elementToDrag = cy.get(selector as string);
+    return elementToDrag.then(($el) => {
+      const { left, top, width, height } = $el[0].getBoundingClientRect();
+      const centerX = left + width / 2;
+      const centerY = top + height / 2;
+      const nextX: number = centerX + x;
+      const nextY: number = centerY + y;
+
+      return elementToDrag
+        .trigger('mousedown', { which: 1, view: window })
+        .trigger('mousemove', nextX, nextY, { force: true })
+        .wait(50)
+        .trigger('mouseup', { view: window, force: true });
+    });
+  })
 );
 
 Cypress.Commands.add('dragPane', ({ from, to }) =>
-  cy.window().then((window) =>
-    cy
-      .get('.react-flow__pane')
-      .trigger('mousedown', from.x, from.y, { which: 1, view: window })
-
-      .trigger('mousemove', to.x, to.y)
-      .trigger('mouseup', { force: true, view: window })
-  )
+  cy
+    .window()
+    .then((window) =>
+      cy
+        .get('.react-flow__pane')
+        .trigger('mousedown', from.x, from.y, { which: 1, view: window })
+        .trigger('mousemove', to.x, to.y)
+        .trigger('mouseup', { force: true, view: window })
+    )
 );
 
 Cypress.Commands.add('zoomPane', (wheelDelta: number) =>

examples/nextjs/cypress/support/component.ts

@@ -39,6 +39,3 @@ declare global {
 }
 
 Cypress.Commands.add('mount', mount);
-
-// Example use:
-// cy.mount(<MyComponent />)