From 3ce88763e22e5ffe07c8369a5a0f77acd8e5ab88 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 9 Jan 2025 16:01:18 +0100 Subject: [PATCH] fix the all the e2e tests --- .../react/src/generic-tests/edges/general.ts | 1 + .../react/src/generic-tests/nodes/general.ts | 2 + .../svelte/src/generic-tests/edges/general.ts | 1 + .../svelte/src/generic-tests/nodes/general.ts | 3 + .../generic/[topic]/[example]/+page.svelte | 1 - tests/playwright/e2e/edges.spec.ts | 4 +- tests/playwright/e2e/nodes.spec.ts | 105 ++++++++++++------ 7 files changed, 77 insertions(+), 40 deletions(-) diff --git a/examples/react/src/generic-tests/edges/general.ts b/examples/react/src/generic-tests/edges/general.ts index 3daceec8..d00c57cc 100644 --- a/examples/react/src/generic-tests/edges/general.ts +++ b/examples/react/src/generic-tests/edges/general.ts @@ -4,6 +4,7 @@ export default { flowProps: { fitView: true, multiSelectionKeyCode: 's', + deleteKeyCode: 'd', nodes: [ { id: '1', diff --git a/examples/react/src/generic-tests/nodes/general.ts b/examples/react/src/generic-tests/nodes/general.ts index d45091dd..c8fb744a 100644 --- a/examples/react/src/generic-tests/nodes/general.ts +++ b/examples/react/src/generic-tests/nodes/general.ts @@ -3,6 +3,8 @@ import DragHandleNode from './components/DragHandleNode'; export default { flowProps: { fitView: true, + deleteKeyCode: 'd', + multiSelectionKeyCode: 's', nodeTypes: { DragHandleNode, }, diff --git a/examples/svelte/src/generic-tests/edges/general.ts b/examples/svelte/src/generic-tests/edges/general.ts index 3011db75..e17da374 100644 --- a/examples/svelte/src/generic-tests/edges/general.ts +++ b/examples/svelte/src/generic-tests/edges/general.ts @@ -4,6 +4,7 @@ export default { flowProps: { fitView: true, multiSelectionKey: ['Meta', 's'], + deleteKey: 'd', nodes: [ { id: '1', diff --git a/examples/svelte/src/generic-tests/nodes/general.ts b/examples/svelte/src/generic-tests/nodes/general.ts index 60757953..874abdad 100644 --- a/examples/svelte/src/generic-tests/nodes/general.ts +++ b/examples/svelte/src/generic-tests/nodes/general.ts @@ -4,6 +4,9 @@ export default { flowProps: { fitView: true, nodeDragThreshold: 0, + autoPanOnConnect: false, + autoPanOnNodeDrag: false, + deleteKey: 'd', nodeTypes: { DragHandleNode }, diff --git a/examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.svelte b/examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.svelte index c5024372..74277ad5 100644 --- a/examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.svelte +++ b/examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.svelte @@ -13,4 +13,3 @@ -w diff --git a/tests/playwright/e2e/edges.spec.ts b/tests/playwright/e2e/edges.spec.ts index 5d5e4258..f059ae32 100644 --- a/tests/playwright/e2e/edges.spec.ts +++ b/tests/playwright/e2e/edges.spec.ts @@ -92,7 +92,7 @@ test.describe('Edges', () => { await edge.click(); await expect(edge).toHaveClass(/selected/); - await page.keyboard.press('Backspace'); + await page.keyboard.press('d'); await expect(edge).not.toBeAttached(); }); @@ -115,7 +115,7 @@ test.describe('Edges', () => { // TODO: times out on webkit await expect(edge).toHaveClass(/selected/); - await page.keyboard.press('Backspace'); + await page.keyboard.press('d'); await expect(edge).toBeAttached(); }); diff --git a/tests/playwright/e2e/nodes.spec.ts b/tests/playwright/e2e/nodes.spec.ts index a28fc977..27b8c4e3 100644 --- a/tests/playwright/e2e/nodes.spec.ts +++ b/tests/playwright/e2e/nodes.spec.ts @@ -17,40 +17,37 @@ test.describe('Nodes', () => { }); test('selecting multiple nodes with shift drag', async ({ page }) => { + let nodeSelection = page.locator( + FRAMEWORK === 'react' ? '.react-flow__nodesselection' : '.svelte-flow__selection' + ); + let selection = page.locator(FRAMEWORK === 'react' ? '.react-flow__selection' : '.svelte-flow__selection'); + const nodes = page.locator(`.${FRAMEWORK}-flow__node`); - const firstNode = nodes.first(); - const secondNode = nodes.nth(1); - const thirdNode = nodes.nth(2); - await expect(firstNode).toBeInViewport(); - await expect(secondNode).toBeInViewport(); - await expect(thirdNode).toBeInViewport(); + await expect(nodes.first()).toHaveCSS('visibility', 'visible'); + await expect(nodes.nth(1)).toHaveCSS('visibility', 'visible'); + await expect(nodes.nth(2)).toHaveCSS('visibility', 'visible'); + const box = await nodes.first().boundingBox(); - const box = await firstNode.boundingBox(); - - await page.mouse.move(box!.x - 150, box!.y - 25); await page.keyboard.down('Shift'); + await page.mouse.move(box!.x - 150, box!.y - 25); await page.mouse.down(); await page.mouse.move(box!.x + 275, box!.y + 200); + + await expect(selection).toBeInViewport(); await page.mouse.up(); await page.keyboard.up('Shift'); - await expect(firstNode).toHaveClass(/selected/); - await expect(secondNode).toHaveClass(/selected/); - await expect(thirdNode).toHaveClass(/selected/); + await expect(nodes.first()).toHaveClass(/selected/); + await expect(nodes.nth(1)).toHaveClass(/selected/); + await expect(nodes.nth(2)).toHaveClass(/selected/); - 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(); + await expect(nodeSelection).toBeInViewport(); }); test('selectable=false prevents selection', async ({ page }) => { const locator = page.locator(`.${FRAMEWORK}-flow__node`).and(page.locator('[data-id="notSelectable"]')); + await expect(page.locator(`.${FRAMEWORK}-flow__nodes`).first()).toHaveCSS('visibility', 'visible'); await locator.click(); await expect(locator).not.toHaveClass(/selected/); @@ -61,6 +58,8 @@ test.describe('Nodes', () => { test('dragging a node', async ({ page }) => { const node = page.locator(`.${FRAMEWORK}-flow__node`).first(); + await expect(node).toHaveCSS('visibility', 'visible'); + const transformBeforeMove = await node.evaluate((element) => { return element.style.transform; }); @@ -79,6 +78,7 @@ test.describe('Nodes', () => { test('draggable=false prevents dragging', async ({ page }) => { const node = page.locator(`.${FRAMEWORK}-flow__node`).and(page.locator('[data-id="notDraggable"]')); + await expect(node).toHaveCSS('visibility', 'visible'); const transformBeforeMove = await node.evaluate((element) => { return element.style.transform; @@ -98,6 +98,7 @@ test.describe('Nodes', () => { test('custom drag handle works', async ({ page }) => { const node = page.locator(`.${FRAMEWORK}-flow__node`).and(page.locator('[data-id="drag-handle"]')); + await expect(node).toHaveCSS('visibility', 'visible'); const dragHandle = page.locator('.custom-drag-handle'); const transformBeforeMove = await node.evaluate((element) => { @@ -133,9 +134,10 @@ test.describe('Nodes', () => { test.describe('deleting', () => { test('deleting a node and its edges', async ({ page }) => { const node = page.locator(`.${FRAMEWORK}-flow__node`).and(page.locator('[data-id="Node-1"]')); + await expect(node).toHaveCSS('visibility', 'visible'); await node.click(); - await page.keyboard.press('Backspace'); + await page.keyboard.press('d'); await expect(node).not.toBeAttached(); @@ -146,11 +148,12 @@ test.describe('Nodes', () => { // TODO: pressing backspace creates problems on webkit test('deletable=false prevents deletion', async ({ page }) => { const node = page.locator(`.${FRAMEWORK}-flow__node`).and(page.locator('[data-id="notDeletable"]')); + await expect(node).toHaveCSS('visibility', 'visible'); await expect(node).toBeAttached(); await node.click(); - await page.keyboard.press('Backspace'); + await page.keyboard.press('d'); await expect(node).toBeAttached(); }); @@ -158,60 +161,86 @@ test.describe('Nodes', () => { test.describe('connecting', () => { test('connecting two nodes', async ({ page }) => { + let connectionLine = page.locator(`.${FRAMEWORK}-flow__connectionline`); const outputSourceHandle = page.locator(`.${FRAMEWORK}-flow__handle`).and(page.locator('[data-nodeid="Node-1"]')); const inputSourceHandle = page.locator(`.${FRAMEWORK}-flow__handle`).and(page.locator('[data-nodeid="Node-4"]')); + await expect(page.locator(`.${FRAMEWORK}-flow__nodes`).first()).toHaveCSS('visibility', 'visible'); await expect(outputSourceHandle).toBeInViewport(); await expect(inputSourceHandle).toBeInViewport(); - const edgesBefore = await page.locator(`.${FRAMEWORK}-flow__edge`).all(); + await expect(page.locator(`.${FRAMEWORK}-flow__edge`)).toHaveCount(2); await outputSourceHandle.hover(); await page.mouse.down(); await inputSourceHandle.hover(); + await expect(connectionLine).toBeInViewport(); await page.mouse.up(); - const edgesAfter = await page.locator(`.${FRAMEWORK}-flow__edge`).all(); - expect(edgesAfter).toHaveLength(edgesBefore.length + 1); + await expect(connectionLine).not.toBeInViewport(); + + await expect(page.locator('[data-id="xy-edge__Node-1-Node-4"]')).toBeInViewport(); + + await expect(page.locator(`.${FRAMEWORK}-flow__edge`)).toHaveCount(3); }); test('connecting two output handles does not work', async ({ page }) => { - const firstOutputHandle = page.locator('[data-nodeid="Node-2"]').and(page.locator(`.${FRAMEWORK}-flow__handle`)); + let connectionLine = page.locator(`.${FRAMEWORK}-flow__connectionline`); + const firstOutputHandle = page.locator(`.${FRAMEWORK}-flow__handle`).and(page.locator('[data-nodeid="Node-2"]')); const secondOutputHandle = page.locator(`.${FRAMEWORK}-flow__handle`).and(page.locator('[data-nodeid="Node-4"]')); + await expect(page.locator(`.${FRAMEWORK}-flow__nodes`).first()).toHaveCSS('visibility', 'visible'); await expect(firstOutputHandle).toBeInViewport(); await expect(secondOutputHandle).toBeInViewport(); - const edgesBefore = await page.locator(`.${FRAMEWORK}-flow__edge`).all(); + await expect(page.locator(`.${FRAMEWORK}-flow__edge`)).toHaveCount(2); await firstOutputHandle.hover(); await page.mouse.down(); - await secondOutputHandle.hover(); + + // TODO: Does not work in SvelteFlow for whatever reason!? + // await secondOutputHandle.hover(); + // but the following works... + const box = await secondOutputHandle.boundingBox(); + await page.mouse.move(box!.x + 2, box!.y + 2); + + await expect(connectionLine).toBeInViewport(); await page.mouse.up(); - const edgesAfter = await page.locator(`.${FRAMEWORK}-flow__edge`).all(); - expect(edgesAfter).toHaveLength(edgesBefore.length); + await expect(connectionLine).not.toBeInViewport(); + + await expect(page.locator(`.${FRAMEWORK}-flow__edge`)).toHaveCount(2); }); test('connecting two input handles does not work', async ({ page }) => { + let connectionLine = page.locator(`.${FRAMEWORK}-flow__connectionline`); const firstInputHandle = page.locator(`.${FRAMEWORK}-flow__handle`).and(page.locator('[data-nodeid="Node-1"]')); const secondInputHandle = page .locator(`.${FRAMEWORK}-flow__handle`) .and(page.locator('[data-nodeid="Node-3"]')) .and(page.locator('.source')); + await expect(page.locator(`.${FRAMEWORK}-flow__nodes`).first()).toHaveCSS('visibility', 'visible'); await expect(firstInputHandle).toBeInViewport(); await expect(secondInputHandle).toBeInViewport(); - const edgesBefore = await page.locator(`.${FRAMEWORK}-flow__edge`).all(); + await expect(page.locator(`.${FRAMEWORK}-flow__edge`)).toHaveCount(2); await firstInputHandle.hover(); await page.mouse.down(); - await secondInputHandle.hover(); + + // TODO: Does not work in SvelteFlow for whatever reason!? + // await secondInputHandle.hover(); + // but the following works... + const box = await secondInputHandle.boundingBox(); + await page.mouse.move(box!.x + 2, box!.y + 2); + + await expect(connectionLine).toBeInViewport(); await page.mouse.up(); - const edgesAfter = await page.locator(`.${FRAMEWORK}-flow__edge`).all(); - expect(edgesAfter).toHaveLength(edgesBefore.length); + await expect(connectionLine).not.toBeInViewport(); + + await expect(page.locator(`.${FRAMEWORK}-flow__edge`)).toHaveCount(2); }); test('connectable=false prevents connections', async ({ page }) => { @@ -222,18 +251,18 @@ test.describe('Nodes', () => { const notConnectableBox = await notConnectableHandle.boundingBox(); + await expect(page.locator(`.${FRAMEWORK}-flow__nodes`).first()).toHaveCSS('visibility', 'visible'); await expect(outputHandle).toBeInViewport(); await expect(notConnectableHandle).toBeInViewport(); - const edgesBefore = await page.locator(`.${FRAMEWORK}-flow__edge`).all(); + await expect(page.locator(`.${FRAMEWORK}-flow__edge`)).toHaveCount(2); await outputHandle.hover(); await page.mouse.down(); await page.mouse.move(notConnectableBox!.x + 2, notConnectableBox!.y + 2); await page.mouse.up(); - const edgesAfter = await page.locator(`.${FRAMEWORK}-flow__edge`).all(); - expect(edgesAfter).toHaveLength(edgesBefore.length); + await expect(page.locator(`.${FRAMEWORK}-flow__edge`)).toHaveCount(2); }); }); @@ -245,12 +274,14 @@ test.describe('Nodes', () => { test('classes get applied', async ({ page }) => { const node = page.locator(`.${FRAMEWORK}-flow__node`).and(page.locator('[data-id="Node-1"]')); + await expect(node).toHaveCSS('visibility', 'visible'); await expect(node).toHaveClass(/playwright-test-class-123/); }); test('styles get applied', async ({ page }) => { const node = page.locator(`.${FRAMEWORK}-flow__node`).and(page.locator('[data-id="Node-1"]')); + await expect(node).toHaveCSS('visibility', 'visible'); await expect(node).toHaveCSS('background-color', 'rgb(255, 0, 0)'); });