Sync node help with selection and add watcher tests (#7105)

## Summary
- add a watcher to sync the node help panel with the currently selected
node
- add unit coverage for help auto-switching and guard cases

## Testing
- pnpm typecheck
- pnpm lint:fix
- pnpm exec vitest
tests-ui/tests/composables/graph/useSelectionState.test.ts

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7105-Sync-node-help-with-selection-and-add-watcher-tests-2bd6d73d36508140b5acd3f3c65c5680)
by [Unito](https://www.unito.io)

browser_tests/tests/nodeHelp.spec.ts

@@ -553,12 +553,6 @@ This is English documentation.
       )
       await selectNodeWithPan(comfyPage, checkpointNodes[0])
 
-      // Click help button again
-      const helpButton2 = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
-      )
-      await helpButton2.click()
-
       // Content should update
       await expect(helpPage).toContainText('Checkpoint Loader Help')
       await expect(helpPage).toContainText(

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

@@ -19,14 +19,31 @@
 </template>
 
 <script setup lang="ts">
+import { whenever } from '@vueuse/core'
 import Button from 'primevue/button'
 
 import NodeHelpContent from '@/components/node/NodeHelpContent.vue'
+import { useSelectionState } from '@/composables/graph/useSelectionState'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 
 const { node } = defineProps<{ node: ComfyNodeDefImpl }>()
 
 defineEmits<{
   (e: 'close'): void
 }>()
+
+const nodeHelpStore = useNodeHelpStore()
+const { nodeDef } = useSelectionState()
+
+// Keep the open help page synced with the current selection while help is open.
+whenever(
+  () => (nodeHelpStore.isHelpOpen ? nodeDef.value : null),
+  (def) => {
+    if (!def) return
+    const currentHelpNode = nodeHelpStore.currentHelpNode
+    if (currentHelpNode?.nodePath === def.nodePath) return
+    nodeHelpStore.openHelp(def)
+  }
+)
 </script>

src/composables/graph/useSelectionState.ts

@@ -105,12 +105,11 @@ export function useSelectionState() {
 
     const isSidebarActive =
       sidebarTabStore.activeSidebarTabId === nodeLibraryTabId
-    const currentHelpNode: any = nodeHelpStore.currentHelpNode
+    const currentHelpNode = nodeHelpStore.currentHelpNode
     const isSameNodeHelpOpen =
       isSidebarActive &&
       nodeHelpStore.isHelpOpen &&
-      currentHelpNode &&
+      currentHelpNode?.nodePath === def.nodePath
-      currentHelpNode.nodePath === def.nodePath
 
     if (isSameNodeHelpOpen) {
       nodeHelpStore.closeHelp()

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts

@@ -0,0 +1,100 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { computed, ref } from 'vue'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+
+import NodeHelpPage from '@/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue'
+import { useSelectionState } from '@/composables/graph/useSelectionState'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+
+vi.mock('@/composables/graph/useSelectionState')
+vi.mock('@/stores/workspace/nodeHelpStore')
+
+const baseNode = {
+  nodePath: 'NodeA',
+  display_name: 'Node A',
+  description: '',
+  inputs: {},
+  outputs: []
+}
+
+describe('NodeHelpPage', () => {
+  const selection = ref<any | null>(null)
+  let openHelp: ReturnType<typeof vi.fn>
+
+  const mountPage = () =>
+    mount(NodeHelpPage, {
+      props: { node: baseNode as any },
+      global: {
+        mocks: {
+          $t: (key: string) => key
+        },
+        stubs: {
+          ProgressSpinner: true,
+          Button: true
+        }
+      }
+    })
+
+  beforeEach(() => {
+    vi.resetAllMocks()
+    selection.value = null
+    openHelp = vi.fn()
+
+    vi.mocked(useSelectionState).mockReturnValue({
+      nodeDef: computed(() => selection.value)
+    } as any)
+
+    vi.mocked(useNodeHelpStore).mockReturnValue({
+      renderedHelpHtml: ref('<p>help</p>'),
+      isLoading: ref(false),
+      error: ref(null),
+      isHelpOpen: true,
+      currentHelpNode: { nodePath: 'NodeA' },
+      openHelp,
+      closeHelp: vi.fn()
+    } as any)
+  })
+
+  test('opens help for a newly selected node while help is open', async () => {
+    const wrapper = mountPage()
+
+    selection.value = { nodePath: 'NodeB' }
+    await flushPromises()
+
+    expect(openHelp).toHaveBeenCalledWith({ nodePath: 'NodeB' })
+
+    wrapper.unmount()
+  })
+
+  test('does not reopen help when the same node stays selected', async () => {
+    const wrapper = mountPage()
+
+    selection.value = { nodePath: 'NodeA' }
+    await flushPromises()
+
+    expect(openHelp).not.toHaveBeenCalled()
+
+    wrapper.unmount()
+  })
+
+  test('does not react to selection when help is closed', async () => {
+    vi.mocked(useNodeHelpStore).mockReturnValueOnce({
+      renderedHelpHtml: ref('<p>help</p>'),
+      isLoading: ref(false),
+      error: ref(null),
+      isHelpOpen: false,
+      currentHelpNode: null,
+      openHelp,
+      closeHelp: vi.fn()
+    } as any)
+
+    const wrapper = mountPage()
+
+    selection.value = { nodePath: 'NodeB' }
+    await flushPromises()
+
+    expect(openHelp).not.toHaveBeenCalled()
+
+    wrapper.unmount()
+  })
+})

tests-ui/tests/composables/graph/useSelectionState.test.ts

@@ -1,6 +1,7 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
-import { type Ref, ref } from 'vue'
+import { ref } from 'vue'
+import type { Ref } from 'vue'
 
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'