From 9551ebc0f32ebc46d31f89b2089bf89ccadaa137 Mon Sep 17 00:00:00 2001 From: Peter Date: Tue, 7 Nov 2023 16:31:49 +0100 Subject: [PATCH] ported all test cases from svelte to react --- examples/react/src/app.d.ts | 2 +- examples/react/src/generic-tests/Flow.tsx | 6 +- .../react/src/generic-tests/edges/general.ts | 2 +- .../nodes/components/DragHandleNode.tsx | 25 +++++ .../react/src/generic-tests/nodes/general.ts | 92 ++++++++++++++++++- .../react/src/generic-tests/pane/general.ts | 37 ++++++++ .../src/generic-tests/pane/non-defaults.ts | 38 ++++++++ tests/playwright/e2e/edges.spec.ts | 2 +- tests/playwright/e2e/pane.spec.ts | 2 +- 9 files changed, 198 insertions(+), 8 deletions(-) create mode 100644 examples/react/src/generic-tests/nodes/components/DragHandleNode.tsx create mode 100644 examples/react/src/generic-tests/pane/general.ts create mode 100644 examples/react/src/generic-tests/pane/non-defaults.ts diff --git a/examples/react/src/app.d.ts b/examples/react/src/app.d.ts index 1118fb9d..88375944 100644 --- a/examples/react/src/app.d.ts +++ b/examples/react/src/app.d.ts @@ -2,6 +2,6 @@ import { Edge, Node, ReactFlowProps } from '@xyflow/react'; declare global { interface GenericTestCase { - reactFlowProps: Omit & { nodes: Node[]; edges: Edge[] }; + flowProps: Omit & { nodes: Node[]; edges: Edge[] }; } } diff --git a/examples/react/src/generic-tests/Flow.tsx b/examples/react/src/generic-tests/Flow.tsx index 28b38001..a547bcbc 100644 --- a/examples/react/src/generic-tests/Flow.tsx +++ b/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 [edges, setEdges] = useState(generics.reactFlowProps.edges); + const [nodes, setNodes] = useState(generics.flowProps.nodes); + 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 (
{ + return ( +
+
+
+ ); +}; diff --git a/examples/react/src/generic-tests/nodes/general.ts b/examples/react/src/generic-tests/nodes/general.ts index ff8b4c56..60391602 100644 --- a/examples/react/src/generic-tests/nodes/general.ts +++ b/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; diff --git a/examples/react/src/generic-tests/pane/general.ts b/examples/react/src/generic-tests/pane/general.ts new file mode 100644 index 00000000..cb2ea3a9 --- /dev/null +++ b/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; diff --git a/examples/react/src/generic-tests/pane/non-defaults.ts b/examples/react/src/generic-tests/pane/non-defaults.ts new file mode 100644 index 00000000..1c109b53 --- /dev/null +++ b/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; diff --git a/tests/playwright/e2e/edges.spec.ts b/tests/playwright/e2e/edges.spec.ts index 1318ee4b..a7ea991f 100644 --- a/tests/playwright/e2e/edges.spec.ts +++ b/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(); diff --git a/tests/playwright/e2e/pane.spec.ts b/tests/playwright/e2e/pane.spec.ts index f7f52e3c..9f18090f 100644 --- a/tests/playwright/e2e/pane.spec.ts +++ b/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();