diff --git a/examples/react/src/generic-tests/Flow.tsx b/examples/react/src/generic-tests/Flow.tsx index a547bcbc..5b0846a3 100644 --- a/examples/react/src/generic-tests/Flow.tsx +++ b/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 (
{ onNodesChange={onNodesChange} edges={edges} onEdgesChange={onEdgesChange} - > - - - + onConnect={onConnect} + >
); }; diff --git a/package.json b/package.json index f0e22afe..4411e137 100644 --- a/package.json +++ b/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", diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index e36b3997..a75d7de6 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,4 +1,5 @@ packages: - - "packages/*" - - "examples/*" - - "tooling/*" \ No newline at end of file + - 'packages/*' + - 'examples/*' + - 'tooling/*' + - 'tests/*' diff --git a/tests/playwright/e2e/edges.spec.ts b/tests/playwright/e2e/edges.spec.ts index c522296d..af2cf980 100644 --- a/tests/playwright/e2e/edges.spec.ts +++ b/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(); diff --git a/tests/playwright/e2e/nodes.spec.ts b/tests/playwright/e2e/nodes.spec.ts index f0e97b0c..5afa41de 100644 --- a/tests/playwright/e2e/nodes.spec.ts +++ b/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 }) => { diff --git a/tests/playwright/e2e/pane.spec.ts b/tests/playwright/e2e/pane.spec.ts index 9f18090f..31777c97 100644 --- a/tests/playwright/e2e/pane.spec.ts +++ b/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 });