From 31b1aeeb69f63873c9608682af92cda10e33d8b3 Mon Sep 17 00:00:00 2001
From: bymyself <abolkonsky.rem@gmail.com>
Date: Wed, 2 Oct 2024 07:42:57 -0700
Subject: [PATCH] Add test for selecting nodes on mac (#1055)

* Add test for selecting nodes on mac

* Deselect nodes in teardown

* Fix unstable test. Remove test on unimplemented feature
---
 browser_tests/ComfyPage.ts        | 26 ++++++++++++++------
 browser_tests/interaction.spec.ts | 41 ++++++++++++++++++++++++++-----
 2 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts
index 6b89270553..2354d9d6dd 100644
--- a/browser_tests/ComfyPage.ts
+++ b/browser_tests/ComfyPage.ts
@@ -413,6 +413,16 @@ export class ComfyPage {
     })
   }
 
+  async getSelectedGraphNodesCount(): Promise<number> {
+    return await this.page.evaluate(() => {
+      return (
+        window['app']?.graph?.nodes?.filter(
+          (node: any) => node.is_selected === true
+        ).length || 0
+      )
+    })
+  }
+
   async setupWorkflowsDirectory(structure: FolderStructure) {
     const resp = await this.request.post(
       `${this.url}/api/devtools/setup_folder_structure`,
@@ -914,13 +924,15 @@ export class ComfyPage {
     return new NodeReference(id, this)
   }
   async getNodeRefsByType(type: string): Promise<NodeReference[]> {
-    return (
-      await this.page.evaluate((type) => {
-        return window['app'].graph.nodes
-          .filter((n) => n.type === type)
-          .map((n) => n.id)
-      }, type)
-    ).map((id: NodeId) => this.getNodeRefById(id))
+    return Promise.all(
+      (
+        await this.page.evaluate((type) => {
+          return window['app'].graph.nodes
+            .filter((n) => n.type === type)
+            .map((n) => n.id)
+        }, type)
+      ).map((id: NodeId) => this.getNodeRefById(id))
+    )
   }
   async getFirstNodeRef(): Promise<NodeReference | null> {
     const id = await this.page.evaluate(() => {
diff --git a/browser_tests/interaction.spec.ts b/browser_tests/interaction.spec.ts
index 7516568f54..2cd25a51c3 100644
--- a/browser_tests/interaction.spec.ts
+++ b/browser_tests/interaction.spec.ts
@@ -11,12 +11,41 @@ test.describe('Node Interaction', () => {
     await expect(textBox).toHaveValue('Hello World 2')
   })
 
-  test('Can highlight selected', async ({ comfyPage }) => {
-    await expect(comfyPage.canvas).toHaveScreenshot('default.png')
-    await comfyPage.clickTextEncodeNode1()
-    await expect(comfyPage.canvas).toHaveScreenshot('selected-node1.png')
-    await comfyPage.clickTextEncodeNode2()
-    await expect(comfyPage.canvas).toHaveScreenshot('selected-node2.png')
+  test.describe('Node Selection', () => {
+    test.afterEach(async ({ comfyPage }) => {
+      // Deselect all nodes
+      await comfyPage.clickEmptySpace()
+    })
+
+    test('Can highlight selected', async ({ comfyPage }) => {
+      await expect(comfyPage.canvas).toHaveScreenshot('default.png')
+      await comfyPage.clickTextEncodeNode1()
+      await expect(comfyPage.canvas).toHaveScreenshot('selected-node1.png')
+      await comfyPage.clickTextEncodeNode2()
+      await expect(comfyPage.canvas).toHaveScreenshot('selected-node2.png')
+    })
+
+    test('Can drag-select nodes with Meta (mac)', async ({ comfyPage }) => {
+      const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+      const clipNode1Pos = await clipNodes[0].getPosition()
+      const clipNode2Pos = await clipNodes[1].getPosition()
+      const offset = 64
+      await comfyPage.page.keyboard.down('Meta')
+      await comfyPage.dragAndDrop(
+        {
+          x: Math.min(clipNode1Pos.x, clipNode2Pos.x) - offset,
+          y: Math.min(clipNode1Pos.y, clipNode2Pos.y) - offset
+        },
+        {
+          x: Math.max(clipNode1Pos.x, clipNode2Pos.x) + offset,
+          y: Math.max(clipNode1Pos.y, clipNode2Pos.y) + offset
+        }
+      )
+      await comfyPage.page.keyboard.up('Meta')
+      expect(await comfyPage.getSelectedGraphNodesCount()).toBe(
+        clipNodes.length
+      )
+    })
   })
 
   test('Can drag node', async ({ comfyPage }) => {