fixed tests for react & added scripts to package.json

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

@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'react';
-import { ReactFlow, Controls, Background, applyNodeChanges, applyEdgeChanges } from '@xyflow/react';
+import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';
 
 type FlowProps = {
   generics: GenericTestCase;
@@ -11,7 +11,7 @@ export default ({ generics }: FlowProps) => {
 
   const onNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
   const onEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
-
+  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);
   return (
     <div style={{ height: '100%' }}>
       <ReactFlow
@@ -20,10 +20,8 @@ export default ({ generics }: FlowProps) => {
         onNodesChange={onNodesChange}
         edges={edges}
         onEdgesChange={onEdgesChange}
-      >
-        <Background />
-        <Controls />
-      </ReactFlow>
+        onConnect={onConnect}
+      ></ReactFlow>
     </div>
   );
 };

package.json

@@ -10,6 +10,10 @@
     "dev": "turbo run dev --parallel --concurrency 12",
     "dev:svelte": "turbo run dev --filter=svelte --filter=system",
     "dev:react": "turbo run dev --filter=react",
+    "test:svelte": "pnpm --filter=playwright run test:svelte",
+    "test:svelte:ui": "pnpm --filter=playwright run test:svelte:ui",
+    "test:react": "pnpm --filter=playwright run test:react",
+    "test:react:ui": "pnpm --filter=playwright run test:react:ui",
     "build": "turbo run build",
     "test": "turbo run test",
     "lint": "turbo run lint",

pnpm-workspace.yaml

@@ -1,4 +1,5 @@
 packages:
-  - "packages/*"
-  - "examples/*"
-  - "tooling/*"
+  - 'packages/*'
+  - 'examples/*'
+  - 'tooling/*'
+  - 'tests/*'

tests/playwright/e2e/edges.spec.ts

@@ -47,7 +47,7 @@ test.describe('EDGES', () => {
     });
 
     test('styles get applied', async ({ page }) => {
-      const edge = page.locator('#edge-with-style');
+      const edge = page.locator('[data-id="edge-with-style"]').locator(`.${FRAMEWORK}-flow__edge-path`);
 
       await expect(edge).toHaveCSS('stroke', 'rgb(255, 0, 0)');
     });
@@ -121,7 +121,7 @@ test.describe('EDGES', () => {
     });
 
     test('zIndex sets z-index of edge svgs', async ({ page }) => {
-      const svg = page.locator('svg', { has: page.locator('#z-index') });
+      const svg = page.locator('svg', { has: page.locator('[data-id="z-index"]') });
 
       await expect(svg).toBeAttached();
       await expect(svg).toHaveCSS('z-index', '3141592');
@@ -149,8 +149,8 @@ test.describe('EDGES', () => {
       await expect(edge).toHaveClass(/selected/);
     });
 
-    test('markerEnd is setting marker-end', async ({ page }) => {
-      const edge = page.locator('#markers');
+    test('marker-start, marker-end set markers', async ({ page }) => {
+      const edge = page.locator('[data-id="markers"]').locator(`.${FRAMEWORK}-flow__edge-path`);
 
       await expect(edge).toBeAttached();
 

tests/playwright/e2e/nodes.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, Locator } from '@playwright/test';
 
 import { FRAMEWORK } from './constants';
 
@@ -28,10 +28,10 @@ test.describe('NODES', () => {
 
       const box = await firstNode.boundingBox();
 
-      await page.mouse.move(box!.x - 100, box!.y - 10);
+      await page.mouse.move(box!.x - 150, box!.y - 25);
       await page.keyboard.down('Shift');
       await page.mouse.down();
-      await page.mouse.move(box!.x + 200, box!.y + 200);
+      await page.mouse.move(box!.x + 275, box!.y + 200);
       await page.mouse.up();
       await page.keyboard.up('Shift');
 
@@ -39,8 +39,14 @@ test.describe('NODES', () => {
       await expect(secondNode).toHaveClass(/selected/);
       await expect(thirdNode).toHaveClass(/selected/);
 
-      const selection = page.locator(`.${FRAMEWORK}-flow__selection`);
-      await expect(selection).toBeInViewport();
+      let selection: Locator | undefined;
+      if (FRAMEWORK === 'react') {
+        selection = page.locator('.react-flow__nodesselection');
+      } else if (FRAMEWORK === 'svelte') {
+        selection = page.locator('.svelte-flow__selection');
+      }
+
+      if (selection) await expect(selection).toBeInViewport();
     });
 
     test('selectable=false prevents selection', async ({ page }) => {

tests/playwright/e2e/pane.spec.ts

@@ -25,7 +25,7 @@ test.describe('PANE DEFAULT', () => {
     await page.goto('/tests/generic/pane/general');
 
     // Wait till the edges are rendered
-    await page.waitForSelector('#first-edge', { timeout: 5000 });
+    await page.waitForSelector('[data-id="first-edge"]', { timeout: 5000 });
   });
 
   test.describe('pan & zoom', () => {
@@ -148,7 +148,7 @@ test.describe('PANE NON-DEFAULT', () => {
     await page.goto('/tests/generic/pane/non-defaults');
 
     // Wait till the edges are rendered
-    await page.waitForSelector('#first-edge', { timeout: 5000 });
+    await page.waitForSelector('[data-id="first-edge"]', { timeout: 5000 });
   });
 
   test.describe('pan & zoom', () => {
@@ -190,7 +190,7 @@ test.describe('PANE ACTIVATION KEYS', () => {
     await page.goto('/tests/generic/pane/activation-keys');
 
     // Wait till the edges are rendered
-    await page.waitForSelector('#first-edge', { timeout: 5000 });
+    await page.waitForSelector('[data-id="first-edge"]', { timeout: 5000 });
   });
   // TODO
 });