test: cover boundary link preservation on subgraph creation

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -528,6 +528,49 @@ export class SubgraphHelper {
     return id
   }
 
+  async getBoundaryLinkSnapshot() {
+    return this.page.evaluate(() => {
+      const graph = window.app!.graph!
+      const host = graph.nodes.find((node) => node.isSubgraphNode())
+      if (!host) {
+        return {
+          rootLinks: ['no subgraph node'],
+          incompatibleHostInputLinks: ['no subgraph node'],
+          incompatibleHostOutputLinks: ['no subgraph node']
+        }
+      }
+
+      const hostId = host.id
+      function label(id: string | number) {
+        return id === hostId ? 'HOST' : String(id)
+      }
+
+      const links = [...graph.links.values()]
+      return {
+        rootLinks: links
+          .map(
+            (link) =>
+              `${label(link.origin_id)}:${link.origin_slot}->${label(link.target_id)}:${link.target_slot}`
+          )
+          .sort(),
+        incompatibleHostInputLinks: links
+          .filter((link) => link.target_id === host.id)
+          .filter((link) => host.inputs[link.target_slot]?.type !== link.type)
+          .map(
+            (link) =>
+              `${link.type} link landed on slot ${link.target_slot} typed ${host.inputs[link.target_slot]?.type}`
+          ),
+        incompatibleHostOutputLinks: links
+          .filter((link) => link.origin_id === host.id)
+          .filter((link) => host.outputs[link.origin_slot]?.type !== link.type)
+          .map(
+            (link) =>
+              `${link.type} link left slot ${link.origin_slot} typed ${host.outputs[link.origin_slot]?.type}`
+          )
+      }
+    })
+  }
+
   async serializeAndReload(): Promise<void> {
     const serialized = await this.page.evaluate(() =>
       window.app!.graph!.serialize()

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -356,6 +356,20 @@ export class NodeReference {
     const nodeSize = await this.getSize()
     return { x: nodePos.x + nodeSize.width / 2, y: nodePos.y - 15 }
   }
+  async waitForTitleInView(): Promise<void> {
+    const canvas = await this.comfyPage.canvas.boundingBox()
+    if (!canvas) throw new Error('Canvas bounding box not available')
+
+    let previousX = Number.NaN
+    await expect
+      .poll(async () => {
+        const { x } = await this.getTitlePosition()
+        const settledInView = x === previousX && x < canvas.width
+        previousX = x
+        return settledInView
+      })
+      .toBe(true)
+  }
   async dragBy(
     delta: Position,
     options?: {

browser_tests/tests/subgraph/subgraphCreationBoundaryLinks.spec.ts

@@ -0,0 +1,59 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+const SUBGRAPH_LINKS_EXPECTED = {
+  rootLinks: [
+    '4:0->HOST:0',
+    '4:1->6:0',
+    '4:1->7:0',
+    '4:2->HOST:4',
+    '5:0->HOST:3',
+    '6:0->HOST:1',
+    '7:0->HOST:2',
+    'HOST:0->9:0'
+  ],
+  incompatibleHostInputLinks: [],
+  incompatibleHostOutputLinks: []
+} as const
+
+test(
+  'Subgraph creation rewires boundary links to compatible slots across reload',
+  { tag: ['@slow', '@subgraph', '@vue-nodes'] },
+  async ({ comfyPage }) => {
+    await test.step('Select both nodes in the default workflow', async () => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+      await comfyPage.workflow.loadWorkflow('default')
+
+      // VAE Decode sits past the right edge of the 1280px canvas at the default
+      // view, so clicking its title silently misses and the selection is left
+      // holding KSampler alone.
+      await comfyPage.command.executeCommand('Comfy.Canvas.FitView')
+      const vaeDecode = await comfyPage.nodeOps.getNodeRefById('8')
+      await vaeDecode.waitForTitleInView()
+
+      await comfyPage.nodeOps.selectNodes(['KSampler', 'VAE Decode'])
+      expect(
+        await comfyPage.nodeOps.getSelectedNodeIds(),
+        'both nodes must be selected, or the conversion under test is not the one being asserted'
+      ).toEqual(['3', '8'])
+    })
+
+    await test.step('Convert and verify the boundary links', async () => {
+      const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
+      await ksampler.convertToSubgraph()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getBoundaryLinkSnapshot())
+        .toEqual(SUBGRAPH_LINKS_EXPECTED)
+    })
+
+    await test.step('Reload and verify the boundary links', async () => {
+      await comfyPage.subgraph.serializeAndReload()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getBoundaryLinkSnapshot())
+        .toEqual(SUBGRAPH_LINKS_EXPECTED)
+    })
+  }
+)