Added more tests for edges, pane

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[] = [

examples/svelte/src/routes/tests/pane/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { SvelteFlowProvider } from '@xyflow/svelte';
+
+	import Flow from './Flow.svelte';
+</script>
+
+<SvelteFlowProvider>
+	<Flow />
+</SvelteFlowProvider>

examples/svelte/src/routes/tests/pane/Flow.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import { initialNodes, initialEdges } from './nodesAndEdges';
+	import { SvelteFlow } from '@xyflow/svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	const nodes = writable(initialNodes);
+	const edges = writable(initialEdges);
+</script>
+
+<SvelteFlow {nodes} {edges} fitView />

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;'
+	}
+];

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

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);
+    });
+  });
+});