From b92df2ded28f1eaba62cf15365b8dae4c06e1b75 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 7 Nov 2023 14:44:18 +0100
Subject: [PATCH] created new test case

---
 .../src/generic-tests/pane/activation-keys.ts | 40 +++++++++++++++++
 tests/playwright/e2e/pane.spec.ts             | 43 ++++++++++++++++++-
 2 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 examples/svelte/src/generic-tests/pane/activation-keys.ts

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