Add group nodes to search and node library (#861)

* Register group nodes in nodeDefStore

* Add playwright tests

* Update test expectations [skip ci]

* Mock nodeDefStore in group node unit test

---------

Co-authored-by: github-actions <github-actions@github.com>

browser_tests/ComfyPage.ts

@@ -608,6 +608,16 @@ export class ComfyPage {
       revertAfter
     )
   }
+
+  async convertAllNodesToGroupNode(groupNodeName: string) {
+    this.page.on('dialog', async (dialog) => {
+      await dialog.accept(groupNodeName)
+    })
+    await this.canvas.press('Control+a')
+    await this.rightClickEmptyLatentNode()
+    await this.page.getByText('Convert to Group Node').click()
+    await this.nextFrame()
+  }
 }
 
 export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({

browser_tests/groupNode.spec.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './ComfyPage'
+
+test.describe('Group Node', () => {
+  test('Can be added with search', async ({ comfyPage }) => {
+    const groupNodeName = 'DefautWorkflowGroupNode'
+    await comfyPage.convertAllNodesToGroupNode(groupNodeName)
+    await comfyPage.doubleClickCanvas()
+    await comfyPage.searchBox.fillAndSelectFirstNode(groupNodeName)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'group-node-copy-added-from-search.png'
+    )
+  })
+
+  test('Displays tooltip on title hover', async ({ comfyPage }) => {
+    await comfyPage.convertAllNodesToGroupNode('Group Node')
+    await comfyPage.page.mouse.move(47, 173)
+    const tooltipTimeout = 500
+    await comfyPage.page.waitForTimeout(tooltipTimeout + 16)
+    await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
+  })
+})

src/extensions/core/groupNode.ts

@@ -4,6 +4,7 @@ import { mergeIfValid } from './widgetInputs'
 import { ManageGroupDialog } from './groupNodeManage'
 import type { LGraphNode } from '@comfyorg/litegraph'
 import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 
 const GROUP = Symbol()
 
@@ -194,6 +195,10 @@ export class GroupNodeConfig {
       display_name: this.name,
       category: 'group nodes' + ('/' + source),
       input: { required: {} },
+      description: `Group node combining ${this.nodeData.nodes
+        .map((n) => n.type)
+        .join(', ')}`,
+      python_module: 'custom_nodes.' + this.name,
 
       [GROUP]: this
     }
@@ -212,6 +217,7 @@ export class GroupNodeConfig {
     }
     this.#convertedToProcess = null
     await app.registerNodeDef('workflow/' + this.name, this.nodeDef)
+    useNodeDefStore().addNodeDef(this.nodeDef)
   }
 
   getLinks() {

src/stores/nodeDefStore.ts

@@ -314,6 +314,11 @@ export const useNodeDefStore = defineStore('nodeDef', {
       this.nodeDefsByName = newNodeDefsByName
       this.nodeDefsByDisplayName = nodeDefsByDisplayName
     },
+    addNodeDef(nodeDef: ComfyNodeDef) {
+      const nodeDefImpl = plainToClass(ComfyNodeDefImpl, nodeDef)
+      this.nodeDefsByName[nodeDef.name] = nodeDefImpl
+      this.nodeDefsByDisplayName[nodeDef.display_name] = nodeDefImpl
+    },
     updateWidgets(widgets: Record<string, ComfyWidgetConstructor>) {
       this.widgets = widgets
     },

tests-ui/utils/index.ts

@@ -1,4 +1,4 @@
-import { APIConfig, mockApi, mockSettingStore } from './setup'
+import { APIConfig, mockApi, mockSettingStore, mockNodeDefStore } from './setup'
 import { Ez, EzGraph, EzNameSpace } from './ezgraph'
 import lg from './litegraph'
 import fs from 'fs'
@@ -44,6 +44,7 @@ export async function start(config: StartConfig = {}): Promise<StartResult> {
   const { app } = await import('../../src/scripts/app')
   const { useSettingStore } = await import('../../src/stores/settingStore')
   useSettingStore().addSettings(app.ui.settings)
+  mockNodeDefStore()
 
   const { LiteGraph, LGraphCanvas } = await import('@comfyorg/litegraph')
   config.preSetup?.(app)

tests-ui/utils/setup.ts

@@ -1,6 +1,7 @@
 import type { ComfySettingsDialog } from '@/scripts/ui/settings'
 import type { ComfyApp } from '@/scripts/app'
 import '../../src/scripts/api'
+import { ComfyNodeDef } from '@/types/apiTypes'
 
 const fs = require('fs')
 const path = require('path')
@@ -124,3 +125,13 @@ export const mockSettingStore = () => {
     useSettingStore: jest.fn(() => mockedSettingStore)
   }))
 }
+
+export const mockNodeDefStore = () => {
+  const mockedNodeDefStore = {
+    addNodeDef: jest.fn((nodeDef: ComfyNodeDef) => {})
+  }
+
+  jest.mock('@/stores/nodeDefStore', () => ({
+    useNodeDefStore: jest.fn(() => mockedNodeDefStore)
+  }))
+}