ComfyUI_frontend/browser_tests/tests/subgraph-rename-dialog.spec.ts

import { expect } from '@playwright/test'

import { comfyPageFixture as test } from '../fixtures/ComfyPage'

// Constants
const RENAMED_NAME = 'renamed_slot_name'
const SECOND_RENAMED_NAME = 'second_renamed_name'

// Common selectors
const SELECTORS = {
  promptDialog: '.graphdialog input'
} as const

interface SubgraphSlot {
  label?: string
  name?: string
  displayName?: string
}

interface SubgraphGraph {
  inputs: SubgraphSlot[]
  outputs: SubgraphSlot[]
}

function getSubgraph(): SubgraphGraph {
  const assertSubgraph = (graph: unknown): asserts graph is SubgraphGraph => {
    if (
      graph === null ||
      typeof graph !== 'object' ||
      !('inputs' in graph) ||
      !('outputs' in graph) ||
      !Array.isArray((graph as { inputs: unknown }).inputs) ||
      !Array.isArray((graph as { outputs: unknown }).outputs)
    ) {
      throw new Error('Not in subgraph')
    }
  }
  const app = window['app']
  if (!app) throw new Error('App not available')
  const canvas = app.canvas
  if (!canvas) throw new Error('Canvas not available')
  const graph = canvas.graph
  assertSubgraph(graph)
  return graph
}

test.describe('Subgraph Slot Rename Dialog', () => {
  test.beforeEach(async ({ comfyPage }) => {
    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
  })

  test('Shows current slot label (not stale) in rename dialog', async ({
    comfyPage
  }) => {
    await comfyPage.loadWorkflow('subgraphs/basic-subgraph')

    const subgraphNode = await comfyPage.getNodeRefById('2')
    await subgraphNode.navigateIntoSubgraph()

    // Get initial slot label
    const initialInputLabel = await comfyPage.page.evaluate((getSubgraph) => {
      const graph = getSubgraph()
      return graph.inputs[0]?.label || graph.inputs[0]?.name || null
    }, getSubgraph)

    // First rename
    await comfyPage.rightClickSubgraphInputSlot(initialInputLabel ?? undefined)
    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')

    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
      state: 'visible'
    })

    // Clear and enter new name
    await comfyPage.page.fill(SELECTORS.promptDialog, '')
    await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
    await comfyPage.page.keyboard.press('Enter')

    // Wait for dialog to close
    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
      state: 'hidden'
    })

    // Force re-render
    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
    await comfyPage.nextFrame()

    // Verify the rename worked
    const afterFirstRename = await comfyPage.page.evaluate((getSubgraph) => {
      const graph = getSubgraph()
      const slot = graph.inputs[0]
      return {
        label: slot?.label || null,
        name: slot?.name || null,
        displayName: slot?.displayName || slot?.label || slot?.name || null
      }
    }, getSubgraph)
    expect(afterFirstRename.label).toBe(RENAMED_NAME)

    // Now rename again - this is where the bug would show
    // We need to use the index-based approach since the method looks for slot.name
    await comfyPage.rightClickSubgraphInputSlot()
    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')

    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
      state: 'visible'
    })

    // Get the current value in the prompt dialog
    const dialogValue = await comfyPage.page.inputValue(SELECTORS.promptDialog)

    // This should show the current label (RENAMED_NAME), not the original name
    expect(dialogValue).toBe(RENAMED_NAME)
    expect(dialogValue).not.toBe(afterFirstRename.name) // Should not show the original slot.name

    // Complete the second rename to ensure everything still works
    await comfyPage.page.fill(SELECTORS.promptDialog, '')
    await comfyPage.page.fill(SELECTORS.promptDialog, SECOND_RENAMED_NAME)
    await comfyPage.page.keyboard.press('Enter')

    // Wait for dialog to close
    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
      state: 'hidden'
    })

    // Force re-render
    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
    await comfyPage.nextFrame()

    // Verify the second rename worked
    const afterSecondRename = await comfyPage.page.evaluate((getSubgraph) => {
      const graph = getSubgraph()
      return graph.inputs[0]?.label || null
    }, getSubgraph)
    expect(afterSecondRename).toBe(SECOND_RENAMED_NAME)
  })

  test('Shows current output slot label in rename dialog', async ({
    comfyPage
  }) => {
    await comfyPage.loadWorkflow('subgraphs/basic-subgraph')

    const subgraphNode = await comfyPage.getNodeRefById('2')
    await subgraphNode.navigateIntoSubgraph()

    // Get initial output slot label
    const initialOutputLabel = await comfyPage.page.evaluate((getSubgraph) => {
      const graph = getSubgraph()
      return graph.outputs[0]?.label || graph.outputs[0]?.name || null
    }, getSubgraph)

    // First rename
    await comfyPage.rightClickSubgraphOutputSlot(
      initialOutputLabel ?? undefined
    )
    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')

    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
      state: 'visible'
    })

    // Clear and enter new name
    await comfyPage.page.fill(SELECTORS.promptDialog, '')
    await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
    await comfyPage.page.keyboard.press('Enter')

    // Wait for dialog to close
    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
      state: 'hidden'
    })

    // Force re-render
    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
    await comfyPage.nextFrame()

    // Now rename again to check for stale content
    // We need to use the index-based approach since the method looks for slot.name
    await comfyPage.rightClickSubgraphOutputSlot()
    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')

    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
      state: 'visible'
    })

    // Get the current value in the prompt dialog
    const dialogValue = await comfyPage.page.inputValue(SELECTORS.promptDialog)

    // This should show the current label (RENAMED_NAME), not the original name
    expect(dialogValue).toBe(RENAMED_NAME)
  })
})