ported all test cases from svelte to react

examples/react/src/app.d.ts

@@ -2,6 +2,6 @@ import { Edge, Node, ReactFlowProps } from '@xyflow/react';
 
 declare global {
   interface GenericTestCase {
-    reactFlowProps: Omit<ReactFlowProps, 'nodes' | 'edges'> & { nodes: Node[]; edges: Edge[] };
+    flowProps: Omit<ReactFlowProps, 'nodes' | 'edges'> & { nodes: Node[]; edges: Edge[] };
   }
 }

examples/react/src/generic-tests/Flow.tsx

@@ -6,8 +6,8 @@ type FlowProps = {
 };
 
 export default ({ generics }: FlowProps) => {
-  const [nodes, setNodes] = useState(generics.reactFlowProps.nodes);
+  const [nodes, setNodes] = useState(generics.flowProps.nodes);
-  const [edges, setEdges] = useState(generics.reactFlowProps.edges);
+  const [edges, setEdges] = useState(generics.flowProps.edges);
 
   const onNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
   const onEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
@@ -15,7 +15,7 @@ export default ({ generics }: FlowProps) => {
   return (
     <div style={{ height: '100%' }}>
       <ReactFlow
-        {...generics.reactFlowProps}
+        {...generics.flowProps}
         nodes={nodes}
         onNodesChange={onNodesChange}
         edges={edges}

examples/react/src/generic-tests/edges/general.ts

@@ -1,7 +1,7 @@
 import { MarkerType } from '@xyflow/react';
 
 export default {
-  reactFlowProps: {
+  flowProps: {
     fitView: true,
     nodes: [
       {

examples/react/src/generic-tests/nodes/components/DragHandleNode.tsx

@@ -0,0 +1,25 @@
+export default () => {
+  return (
+    <div
+      className="container"
+      style={{
+        width: '100px',
+        height: '50px',
+        background: 'red',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div
+        className="drag-handle custom-drag-handle"
+        style={{
+          display: 'inline-block',
+          width: '25px',
+          height: '25px',
+          backgroundColor: 'green',
+        }}
+      />
+    </div>
+  );
+};

examples/react/src/generic-tests/nodes/general.ts

@@ -1 +1,91 @@
-export default {};
+import DragHandleNode from './components/DragHandleNode';
+
+export default {
+  flowProps: {
+    fitView: true,
+    nodeTypes: {
+      DragHandleNode,
+    },
+    nodes: [
+      {
+        id: 'Node-1',
+        data: { label: 'Node-1' },
+        position: { x: 0, y: 0 },
+        type: 'input',
+        className: 'playwright-test-class-123',
+        style: { backgroundColor: 'red' },
+      },
+      {
+        id: 'Node-2',
+        type: 'output',
+        data: { label: 'Node-2' },
+        position: { x: -100, y: 100 },
+      },
+      {
+        id: 'Node-3',
+        data: { label: 'Node-3' },
+        position: { x: 100, y: 100 },
+      },
+      {
+        id: 'Node-4',
+        data: { label: 'Node-4' },
+        position: { x: 0, y: 200 },
+        type: 'output',
+      },
+      {
+        id: 'drag-handle',
+        data: { label: 'Drag Handle' },
+        position: { x: 200, y: 0 },
+        type: 'DragHandleNode',
+        dragHandle: '.custom-drag-handle',
+      },
+      {
+        id: 'notConnectable',
+        type: 'output',
+        data: { label: 'notConnectable' },
+        position: { x: 0, y: 300 },
+        connectable: false,
+      },
+      {
+        id: 'notDraggable',
+        data: { label: 'notDraggable' },
+        position: { x: 0, y: 400 },
+        draggable: false,
+      },
+      {
+        id: 'notSelectable',
+        data: { label: 'notSelectable' },
+        position: { x: 0, y: 500 },
+        selectable: false,
+      },
+      {
+        id: 'notDeletable',
+        data: { label: 'notDeletable' },
+        position: { x: 0, y: 600 },
+        deletable: false,
+      },
+      {
+        id: 'hidden',
+        data: { label: 'hidden' },
+        position: { x: 0, y: 700 },
+        hidden: true,
+      },
+    ],
+    edges: [
+      {
+        id: '1-2',
+        type: 'default',
+        source: 'Node-1',
+        target: 'Node-2',
+        label: 'edge',
+      },
+      {
+        id: '1-3',
+        type: 'default',
+        source: 'Node-1',
+        target: 'Node-3',
+        label: 'edge',
+      },
+    ],
+  },
+} satisfies GenericTestCase;

examples/react/src/generic-tests/pane/general.ts

@@ -0,0 +1,37 @@
+export default {
+  flowProps: {
+    minZoom: 0.25,
+    maxZoom: 4,
+    fitView: true,
+    nodes: [
+      {
+        id: '1',
+        data: { label: '1' },
+        position: { x: 0, y: 0 },
+        type: 'input',
+      },
+      {
+        id: '2',
+        data: { label: '2' },
+        position: { x: -100, y: 100 },
+      },
+      {
+        id: '3',
+        data: { label: '3' },
+        position: { x: 100, y: 100 },
+      },
+    ],
+    edges: [
+      {
+        id: 'first-edge',
+        source: '1',
+        target: '2',
+      },
+      {
+        id: 'second-edge',
+        source: '1',
+        target: '3',
+      },
+    ],
+  },
+} satisfies GenericTestCase;

examples/react/src/generic-tests/pane/non-defaults.ts

@@ -0,0 +1,38 @@
+export default {
+  flowProps: {
+    panOnScroll: true,
+    initialViewport: { x: 1.23, y: 9.87, zoom: 1.234 },
+    autoPanOnConnect: false,
+    autoPanOnNodeDrag: false,
+    nodes: [
+      {
+        id: '1',
+        data: { label: '1' },
+        position: { x: 0, y: 0 },
+        type: 'input',
+      },
+      {
+        id: '2',
+        data: { label: '2' },
+        position: { x: -100, y: 100 },
+      },
+      {
+        id: '3',
+        data: { label: '3' },
+        position: { x: 100, y: 100 },
+      },
+    ],
+    edges: [
+      {
+        id: 'first-edge',
+        source: '1',
+        target: '2',
+      },
+      {
+        id: 'second-edge',
+        source: '1',
+        target: '3',
+      },
+    ],
+  },
+} satisfies GenericTestCase;

tests/playwright/e2e/edges.spec.ts

@@ -13,7 +13,7 @@ test.describe('EDGES', () => {
 
   test.describe('selection', () => {
     test('selecting an edge by click', async ({ page }) => {
-      const edge = page.locator('.svelte-flow__edge').and(page.locator('[data-id="edge-with-class"]'));
+      const edge = page.locator(`${FRAMEWORK}.-flow__edge`).and(page.locator('[data-id="edge-with-class"]'));
 
       await expect(edge).toBeAttached();
       await edge.click();

tests/playwright/e2e/pane.spec.ts

@@ -122,7 +122,7 @@ test.describe('PANE DEFAULT', () => {
 
     test('autoPanOnConnect works as intended', async ({ page }) => {
       const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
-      const handle = page.locator('[data-id="1"] .svelte-flow__handle');
+      const handle = page.locator(`[data-id="1"] .${FRAMEWORK}-flow__handle`);
 
       await expect(handle).toBeAttached();