Added tests for pane

tests/playwright/e2e/pane.spec.ts

@@ -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