From 174c52958f7d212a07f6d0f52dbad04ba2068ee8 Mon Sep 17 00:00:00 2001
From: bymyself <abolkonsky.rem@gmail.com>
Date: Tue, 17 Sep 2024 01:15:05 -0700
Subject: [PATCH] Add test on mobile canvas panning (#863)

* Add test on mobile canvas panning

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 browser_tests/ComfyPage.ts                    |  18 ++++++++++++++++++
 browser_tests/interaction.spec.ts             |   6 ++++++
 .../panned-touch-mobile-chrome-linux.png      | Bin 0 -> 7194 bytes
 3 files changed, 24 insertions(+)
 create mode 100644 browser_tests/interaction.spec.ts-snapshots/panned-touch-mobile-chrome-linux.png

diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts
index bb807c955d..2166fbd1ff 100644
--- a/browser_tests/ComfyPage.ts
+++ b/browser_tests/ComfyPage.ts
@@ -460,6 +460,24 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
+  async panWithTouch(offset: Position, safeSpot?: Position) {
+    safeSpot = safeSpot || { x: 10, y: 10 }
+    const client = await this.page.context().newCDPSession(this.page)
+    await client.send('Input.dispatchTouchEvent', {
+      type: 'touchStart',
+      touchPoints: [safeSpot]
+    })
+    await client.send('Input.dispatchTouchEvent', {
+      type: 'touchMove',
+      touchPoints: [{ x: offset.x + safeSpot.x, y: offset.y + safeSpot.y }]
+    })
+    await client.send('Input.dispatchTouchEvent', {
+      type: 'touchEnd',
+      touchPoints: []
+    })
+    await this.nextFrame()
+  }
+
   async rightClickCanvas() {
     await this.page.mouse.click(10, 10, { button: 'right' })
     await this.nextFrame()
diff --git a/browser_tests/interaction.spec.ts b/browser_tests/interaction.spec.ts
index 9c3beb7b01..b2b3974c43 100644
--- a/browser_tests/interaction.spec.ts
+++ b/browser_tests/interaction.spec.ts
@@ -350,6 +350,12 @@ test.describe('Canvas Interaction', () => {
     await comfyPage.pan({ x: 800, y: 300 }, { x: 1000, y: 10 })
     await expect(comfyPage.canvas).toHaveScreenshot('panned-back-to-one.png')
   })
+
+  test('@mobile Can pan with touch', async ({ comfyPage }) => {
+    await comfyPage.closeMenu()
+    await comfyPage.panWithTouch({ x: 200, y: 200 })
+    await expect(comfyPage.canvas).toHaveScreenshot('panned-touch.png')
+  })
 })
 
 test.describe('Widget Interaction', () => {
diff --git a/browser_tests/interaction.spec.ts-snapshots/panned-touch-mobile-chrome-linux.png b/browser_tests/interaction.spec.ts-snapshots/panned-touch-mobile-chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce20e7f1cc3ef816ac2cd2d1afd459ab1fe0a69d
GIT binary patch
literal 7194
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
Nf3N4B;_re}{|=qRQ=I?+

literal 0
HcmV?d00001