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

Added tests for pane

Browse Source
This commit is contained in:
Peter
2023-11-02 16:29:22 +01:00
parent 92272080e3
commit 0b7613c64e
7 changed files with 233 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
examples/svelte/src/routes/tests/pane/+page.svelte → examples/svelte/src/routes/tests/pane/default/+page.svelte
View File

2
examples/svelte/src/routes/tests/pane/Flow.svelte → examples/svelte/src/routes/tests/pane/default/Flow.svelte
View File

@@ -9,4 +9,4 @@
const edges = writable(initialEdges);
</script>
<SvelteFlow {nodes} {edges} fitView />
<SvelteFlow {nodes} {edges} fitView minZoom={0.25} maxZoom={4} />

10
examples/svelte/src/routes/tests/pane/nodesAndEdges.ts → examples/svelte/src/routes/tests/pane/default/nodesAndEdges.ts
View File

@@ -21,15 +21,13 @@ export const initialNodes: Node[] = [
export const initialEdges: Edge[] = [
{
id: 'edge-with-class',
id: 'first-edge',
source: '1',
target: '2',
class: 'edge-class-test'
target: '2'
},
{
id: 'edge-with-style',
id: 'second-edge',
source: '1',
target: '3',
style: 'stroke: red;'
target: '3'
}
];

9
examples/svelte/src/routes/tests/pane/non-default/+page.svelte Normal file
View File

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

19
examples/svelte/src/routes/tests/pane/non-default/Flow.svelte Normal file
View File

@@ -0,0 +1,19 @@
<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}
panOnScroll={true}
initialViewport={{ x: 1.23, y: 9.87, zoom: 1.234 }}
autoPanOnConnect={false}
autoPanOnNodeDrag={false}
/>

33
examples/svelte/src/routes/tests/pane/non-default/nodesAndEdges.ts Normal file
View File

@@ -0,0 +1,33 @@
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: 'first-edge',
source: '1',
target: '2'
},
{
id: 'second-edge',
source: '1',
target: '3'
}
];

182
tests/playwright/e2e/pane.spec.ts
View File

@@ -1,15 +1,36 @@
import { test, expect } from '@playwright/test';
import { FRAMEWORK } from './constants';
import { transform } from 'typescript';
test.describe('PANE', () => {
test.beforeEach(async ({ page }) => {
// Go to the starting url before each test.
await page.goto('/tests/pane');
const MATCH_ALL_NUMBERS = /[\d\.]+/g;
// Type "Locator" not exported...
async function getTransform(element) {
const transformString = await element.evaluate((el) => {
return el.style.transform;
});
test.describe('pan', () => {
test('panning the pane', async ({ page }) => {
// Parses all numbers in f.ex "translate(590px, 324px) scale(2)""
const transforms = transformString.match(MATCH_ALL_NUMBERS);
return {
translateX: parseFloat(transforms![0]),
translateY: parseFloat(transforms![1]),
scale: parseFloat(transforms![2]),
};
}
test.describe('PANE DEFAULT', () => {
test.beforeEach(async ({ page }) => {
// Go to the starting url before each test.
await page.goto('/tests/pane/default');
// Wait till the edges are rendered
await page.waitForSelector('#first-edge', { timeout: 5000 });
});
test.describe('pan & zoom', () => {
test('panning the pane moves it', async ({ page }) => {
const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
@@ -17,20 +38,151 @@ test.describe('PANE', () => {
const paneBox = await pane.boundingBox();
const viewportTransformBeforePan = await viewport.evaluate((element) => {
return element.style.transform;
});
const transformsBefore = await getTransform(viewport);
await pane.hover();
await page.mouse.down();
await page.mouse.move(paneBox!.x + 150, paneBox!.y + 100);
await page.mouse.up();
// Move pane by 100, 100
await page.mouse.move(paneBox!.x + paneBox!.width * 0.5 + 100, paneBox!.y + paneBox!.height * 0.5 + 100);
const viewportTransformAfterPan = await viewport.evaluate((element) => {
return element.style.transform;
});
const transformsAfter = await getTransform(viewport);
expect(viewportTransformBeforePan).toBe(viewportTransformAfterPan);
expect(transformsAfter.translateX - transformsBefore.translateX).toBe(100);
expect(transformsAfter.translateY - transformsBefore.translateY).toBe(100);
});
test('scrolling the default pane zooms it', async ({ page }) => {
const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
await expect(pane).toBeAttached();
const transformsBefore = await getTransform(viewport);
await pane.hover();
await page.mouse.wheel(0, 100);
const transformsAfter = await getTransform(viewport);
expect(transformsAfter.scale).not.toBe(transformsBefore.scale);
});
});
test.describe('minZoom & maxZoom', () => {
test('minZoom works as intended', async ({ page }) => {
const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
await expect(pane).toBeAttached();
await pane.hover();
// Zoom out
await page.mouse.wheel(5000, 5000);
const transformsMinZoom = await getTransform(viewport);
expect(transformsMinZoom.scale).toBe(0.25);
});
test('maxZoom works as intended', async ({ page }) => {
const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
await expect(pane).toBeAttached();
await pane.hover();
// Zoom in
await page.mouse.wheel(-5000, -5000);
const transformsMaxZoom = await getTransform(viewport);
expect(transformsMaxZoom.scale).toBe(4);
});
});
test.describe('autoPan', () => {
test('autoPanOnNodeDrag works as intended', async ({ page }) => {
const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
const node = page.locator('[data-id="1"]');
await expect(node).toBeAttached();
const transformBefore = await getTransform(viewport);
await node.hover();
await page.mouse.down();
await page.mouse.move(0, 0);
await page.waitForTimeout(500);
await page.mouse.move(100, 100);
const transformAfter = await getTransform(viewport);
await expect(transformAfter.translateX).toBeGreaterThan(transformBefore.translateX);
await expect(transformAfter.translateY).toBeGreaterThan(transformBefore.translateY);
});
test('autoPanOnConnect works as intended', async ({ page }) => {
const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
const handle = page.locator('[data-id="1"] .svelte-flow__handle');
await expect(handle).toBeAttached();
const transformBefore = await getTransform(viewport);
await handle.hover();
await page.mouse.down();
await page.mouse.move(0, 0);
await page.waitForTimeout(500);
await page.mouse.move(100, 100);
const transformAfter = await getTransform(viewport);
await expect(transformAfter.translateX).toBeGreaterThan(transformBefore.translateX);
await expect(transformAfter.translateY).toBeGreaterThan(transformBefore.translateY);
});
});
});
test.describe('PANE NON-DEFAULT', () => {
test.beforeEach(async ({ page }) => {
// Go to the starting url before each test.
await page.goto('/tests/pane/non-default');
// Wait till the edges are rendered
await page.waitForSelector('#first-edge', { timeout: 5000 });
});
test.describe('pan & zoom', () => {
test('panOnScroll pans the pane on scrolling', async ({ page }) => {
const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
await expect(pane).toBeAttached();
const transformsBefore = await getTransform(viewport);
await pane.hover();
await page.mouse.wheel(100, 100);
const transformsAfter = await getTransform(viewport);
expect(transformsAfter.translateX).not.toBe(transformsBefore.translateX);
expect(transformsAfter.translateY).not.toBe(transformsBefore.translateY);
});
test('intialViewport', async ({ page }) => {
const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
await expect(pane).toBeAttached();
const viewportTransform = await getTransform(viewport);
expect(viewportTransform.translateX).toBe(1.23);
expect(viewportTransform.translateY).toBe(9.87);
expect(viewportTransform.scale).toBe(1.234);
});
});
});
//TODO: Inverse: Not zooming/panning when disabled