diff --git a/examples/svelte/src/generic-tests/pane/activation-keys.ts b/examples/svelte/src/generic-tests/pane/activation-keys.ts new file mode 100644 index 00000000..e4dbe4e1 --- /dev/null +++ b/examples/svelte/src/generic-tests/pane/activation-keys.ts @@ -0,0 +1,40 @@ +export default { + svelteFlowProps: { + zoomOnScroll: false, + // zoomActivationKey: 'Space', + // panOnDrag: false, + // panOnScroll: false, + panActivationKey: 'Space', + fitView: true, + nodes: [ + { + 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 } + } + ], + edges: [ + { + id: 'first-edge', + source: '1', + target: '2' + }, + { + id: 'second-edge', + source: '1', + target: '3' + } + ] + } +} satisfies GenericTestCase; diff --git a/tests/playwright/e2e/pane.spec.ts b/tests/playwright/e2e/pane.spec.ts index 9c3d83a0..6090beac 100644 --- a/tests/playwright/e2e/pane.spec.ts +++ b/tests/playwright/e2e/pane.spec.ts @@ -182,6 +182,45 @@ test.describe('PANE NON-DEFAULT', () => { expect(viewportTransform.scale).toBe(1.234); }); }); -}); -//TODO: Inverse: Not zooming/panning when disabled + 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 }); + }); + + 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); + }); + }); +});