alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix the all the e2e tests

Browse Source
This commit is contained in:
peterkogo
2025-01-09 16:01:18 +01:00
parent b56c1c1838
commit 3ce88763e2
7 changed files with 77 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
examples/react/src/generic-tests/edges/general.ts
View File

@@ -4,6 +4,7 @@ export default {
flowProps: {
fitView: true,
multiSelectionKeyCode: 's',
deleteKeyCode: 'd',
nodes: [
{
id: '1',

2
examples/react/src/generic-tests/nodes/general.ts
View File

@@ -3,6 +3,8 @@ import DragHandleNode from './components/DragHandleNode';
export default {
flowProps: {
fitView: true,
deleteKeyCode: 'd',
multiSelectionKeyCode: 's',
nodeTypes: {
DragHandleNode,
},

1
examples/svelte/src/generic-tests/edges/general.ts
View File

@@ -4,6 +4,7 @@ export default {
flowProps: {
fitView: true,
multiSelectionKey: ['Meta', 's'],
deleteKey: 'd',
nodes: [
{
id: '1',

3
examples/svelte/src/generic-tests/nodes/general.ts
View File

@@ -4,6 +4,9 @@ export default {
flowProps: {
fitView: true,
nodeDragThreshold: 0,
autoPanOnConnect: false,
autoPanOnNodeDrag: false,
deleteKey: 'd',
nodeTypes: {
DragHandleNode
},

1
examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.svelte
View File

@@ -13,4 +13,3 @@
<SvelteFlowProvider>
<Flow flowConfig={data.flowConfig} />
</SvelteFlowProvider>
w

4
tests/playwright/e2e/edges.spec.ts
View File

@@ -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();
});

105
tests/playwright/e2e/nodes.spec.ts
View File

@@ -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)');
});