From 92272080e36c232c87f4bc260e21f507558897b1 Mon Sep 17 00:00:00 2001 From: Peter Date: Thu, 2 Nov 2023 14:04:41 +0100 Subject: [PATCH] Added more tests for edges, pane --- .../src/routes/tests/edges/nodesAndEdges.ts | 20 +++++----- .../svelte/src/routes/tests/pane/+page.svelte | 9 +++++ .../svelte/src/routes/tests/pane/Flow.svelte | 12 ++++++ .../src/routes/tests/pane/nodesAndEdges.ts | 35 +++++++++++++++++ tests/playwright/e2e/edges.spec.ts | 38 +++++++++++++++++++ tests/playwright/e2e/pane.spec.ts | 36 ++++++++++++++++++ 6 files changed, 140 insertions(+), 10 deletions(-) create mode 100644 examples/svelte/src/routes/tests/pane/+page.svelte create mode 100644 examples/svelte/src/routes/tests/pane/Flow.svelte create mode 100644 examples/svelte/src/routes/tests/pane/nodesAndEdges.ts create mode 100644 tests/playwright/e2e/pane.spec.ts diff --git a/examples/svelte/src/routes/tests/edges/nodesAndEdges.ts b/examples/svelte/src/routes/tests/edges/nodesAndEdges.ts index 6e0d969a..b5452b8c 100644 --- a/examples/svelte/src/routes/tests/edges/nodesAndEdges.ts +++ b/examples/svelte/src/routes/tests/edges/nodesAndEdges.ts @@ -56,17 +56,17 @@ export const initialNodes: Node[] = [ id: '11', data: { label: '11' }, position: { x: 100, y: 500 } - }, - { - id: '12', - data: { label: '12' }, - position: { x: -100, y: 600 } - }, - { - id: '13', - data: { label: '13' }, - position: { x: 100, y: 600 } } + // { + // id: '12', + // data: { label: '12' }, + // position: { x: -100, y: 600 } + // }, + // { + // id: '13', + // data: { label: '13' }, + // position: { x: 100, y: 600 } + // } ]; export const initialEdges: Edge[] = [ diff --git a/examples/svelte/src/routes/tests/pane/+page.svelte b/examples/svelte/src/routes/tests/pane/+page.svelte new file mode 100644 index 00000000..12dec33c --- /dev/null +++ b/examples/svelte/src/routes/tests/pane/+page.svelte @@ -0,0 +1,9 @@ + + + + + diff --git a/examples/svelte/src/routes/tests/pane/Flow.svelte b/examples/svelte/src/routes/tests/pane/Flow.svelte new file mode 100644 index 00000000..6686c907 --- /dev/null +++ b/examples/svelte/src/routes/tests/pane/Flow.svelte @@ -0,0 +1,12 @@ + + + diff --git a/examples/svelte/src/routes/tests/pane/nodesAndEdges.ts b/examples/svelte/src/routes/tests/pane/nodesAndEdges.ts new file mode 100644 index 00000000..81e88cc4 --- /dev/null +++ b/examples/svelte/src/routes/tests/pane/nodesAndEdges.ts @@ -0,0 +1,35 @@ +import type { Edge, Node } from '@xyflow/svelte'; + +export const initialNodes: Node[] = [ + { + 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 } + } +]; + +export const initialEdges: Edge[] = [ + { + id: 'edge-with-class', + source: '1', + target: '2', + class: 'edge-class-test' + }, + { + id: 'edge-with-style', + source: '1', + target: '3', + style: 'stroke: red;' + } +]; diff --git a/tests/playwright/e2e/edges.spec.ts b/tests/playwright/e2e/edges.spec.ts index f91d89e0..033bc107 100644 --- a/tests/playwright/e2e/edges.spec.ts +++ b/tests/playwright/e2e/edges.spec.ts @@ -118,5 +118,43 @@ test.describe('EDGES', () => { await page.keyboard.press('Backspace'); await expect(edge).toBeAttached(); }); + + test('zIndex sets z-index of edge svgs', async ({ page }) => { + const svg = page.locator('svg', { has: page.locator('#z-index') }); + + await expect(svg).toBeAttached(); + await expect(svg).toHaveCSS('z-index', '3141592'); + }); + + test('aria-lable is working', async ({ page }) => { + const edge = page.locator('[data-id="aria-label"]'); + + await expect(edge).toHaveAttribute('aria-label', 'aria-label-test'); + }); + + test('interactionWidth is working', async ({ page }) => { + const edge = page.locator('[data-id="interaction-width"]'); + + await expect(edge).toBeAttached(); + + const edgeBox = await edge.boundingBox(); + + //FIXME: Negative values are not working. Investigate further + await page.mouse.move(edgeBox!.x + edgeBox!.width * 0.5 + 21, edgeBox!.y + edgeBox!.height * 0.5); + await page.mouse.down(); + await page.mouse.up(); + + // TODO: times out on webkit + await expect(edge).toHaveClass(/selected/); + }); + + test('markerEnd is setting marker-end', async ({ page }) => { + const edge = page.locator('#markers'); + + await expect(edge).toBeAttached(); + + await expect(edge).toHaveAttribute('marker-start', 'url(#1__type=arrowclosed)'); + await expect(edge).toHaveAttribute('marker-end', 'url(#1__type=arrow)'); + }); }); }); diff --git a/tests/playwright/e2e/pane.spec.ts b/tests/playwright/e2e/pane.spec.ts new file mode 100644 index 00000000..c3899f12 --- /dev/null +++ b/tests/playwright/e2e/pane.spec.ts @@ -0,0 +1,36 @@ +import { test, expect } from '@playwright/test'; + +import { FRAMEWORK } from './constants'; + +test.describe('PANE', () => { + test.beforeEach(async ({ page }) => { + // Go to the starting url before each test. + await page.goto('/tests/pane'); + }); + + test.describe('pan', () => { + test('panning the pane', async ({ page }) => { + const pane = page.locator(`.${FRAMEWORK}-flow__pane`); + const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`); + + await expect(pane).toBeAttached(); + + const paneBox = await pane.boundingBox(); + + const viewportTransformBeforePan = await viewport.evaluate((element) => { + return element.style.transform; + }); + + await pane.hover(); + await page.mouse.down(); + await page.mouse.move(paneBox!.x + 150, paneBox!.y + 100); + await page.mouse.up(); + + const viewportTransformAfterPan = await viewport.evaluate((element) => { + return element.style.transform; + }); + + expect(viewportTransformBeforePan).toBe(viewportTransformAfterPan); + }); + }); +});