xyflow/tests/playwright/e2e/pane.spec.ts

import { test, expect } from '@playwright/test';

import { FRAMEWORK } from './constants';

const MATCH_ALL_NUMBERS = /[\d\.]+/g;

// Type "Locator" not exported...
async function getTransform(element) {
  const transformString = await element.evaluate((el) => {
    return el.style.transform;
  });

  // 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/generic/pane/general');

    // 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`);

      await expect(pane).toBeAttached();

      const paneBox = await pane.boundingBox();

      const transformsBefore = await getTransform(viewport);

      await pane.hover();
      await page.mouse.down();
      // Move pane by 100, 100
      await page.mouse.move(paneBox!.x + paneBox!.width * 0.5 + 100, paneBox!.y + paneBox!.height * 0.5 + 100);

      const transformsAfter = await getTransform(viewport);

      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/generic/pane/non-defaults');

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

test.describe('PANE ACTIVATION KEYS', () => {
  test.beforeEach(async ({ page }) => {
    // Go to the starting url before each test.
    await page.goto('/tests/generic/pane/activation-keys');

    // Wait till the edges are rendered
    await page.waitForSelector('#first-edge', { timeout: 5000 });
  });
  // TODO
});