Merge remote-tracking branch 'origin/main' into bl-more-slots

browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts

@@ -1,7 +1,7 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
+} from '../../../../fixtures/ComfyPage'
 
 test.describe('Vue Nodes Zoom', () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -1,13 +1,13 @@
 import type { Locator, Page } from '@playwright/test'
 
-import type { NodeId } from '../../../src/platform/workflow/validation/schemas/workflowSchema'
-import { getSlotKey } from '../../../src/renderer/core/layout/slots/slotIdentifier'
+import type { NodeId } from '../../../../../src/platform/workflow/validation/schemas/workflowSchema'
+import { getSlotKey } from '../../../../../src/renderer/core/layout/slots/slotIdentifier'
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../fixtures/ComfyPage'
-import { getMiddlePoint } from '../../fixtures/utils/litegraphUtils'
-import { fitToViewInstant } from '../../helpers/fitToView'
+} from '../../../../fixtures/ComfyPage'
+import { getMiddlePoint } from '../../../../fixtures/utils/litegraphUtils'
+import { fitToViewInstant } from '../../../../helpers/fitToView'
 
 async function getCenter(locator: Locator): Promise<{ x: number; y: number }> {
   const box = await locator.boundingBox()
@@ -189,6 +189,13 @@ test.describe('Vue Node Link Interaction', () => {
 
     expect(await samplerOutput.getLinkCount()).toBe(0)
     expect(await clipInput.getLinkCount()).toBe(0)
+
+    const graphLinkDetails = await getInputLinkDetails(
+      comfyPage.page,
+      clipNode.id,
+      0
+    )
+    expect(graphLinkDetails).toBeNull()
   })
 
   test('should not create a link when dropping onto a slot on the same node', async ({
@@ -218,7 +225,6 @@ test.describe('Vue Node Link Interaction', () => {
     const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
     const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
     expect(samplerNode && vaeNode).toBeTruthy()
-
     const samplerOutputCenter = await getSlotCenter(
       comfyPage.page,
       samplerNode.id,

browser_tests/tests/vueNodes/interactions/node/remove.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../../../../fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')

browser_tests/tests/vueNodes/interactions/node/rename.spec.ts

@@ -0,0 +1,76 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import { VueNodeFixture } from '../../../../fixtures/utils/vueNodeFixtures'
+
+test.describe('Vue Nodes Renaming', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+  })
+
+  test('should display node title', async ({ comfyPage }) => {
+    // Get the KSampler node from the default workflow
+    const nodes = await comfyPage.getNodeRefsByType('KSampler')
+    expect(nodes.length).toBeGreaterThanOrEqual(1)
+
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    const title = await vueNode.getTitle()
+    expect(title).toBe('KSampler')
+
+    // Verify title is visible in the header
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('KSampler')
+  })
+
+  test('should allow title renaming by double clicking on the node header', async ({
+    comfyPage
+  }) => {
+    const nodes = await comfyPage.getNodeRefsByType('KSampler')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Test renaming with Enter
+    await vueNode.setTitle('My Custom Sampler')
+    const newTitle = await vueNode.getTitle()
+    expect(newTitle).toBe('My Custom Sampler')
+
+    // Verify the title is displayed
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('My Custom Sampler')
+
+    // Test cancel with Escape
+    const titleElement = await vueNode.getTitleElement()
+    await titleElement.dblclick()
+    await comfyPage.nextFrame()
+
+    // Type a different value but cancel
+    const input = (await vueNode.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill('This Should Be Cancelled')
+    await input.press('Escape')
+    await comfyPage.nextFrame()
+
+    // Title should remain as the previously saved value
+    const titleAfterCancel = await vueNode.getTitle()
+    expect(titleAfterCancel).toBe('My Custom Sampler')
+  })
+
+  test('Double click node body does not trigger edit', async ({
+    comfyPage
+  }) => {
+    const loadCheckpointNode =
+      comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const nodeBbox = await loadCheckpointNode.boundingBox()
+    if (!nodeBbox) throw new Error('Node not found')
+    await loadCheckpointNode.dblclick()
+
+    const editingTitleInput = comfyPage.page.getByTestId('node-title-input')
+    await expect(editingTitleInput).not.toBeVisible()
+  })
+})

browser_tests/tests/vueNodes/interactions/node/select.spec.ts

@@ -1,7 +1,7 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
+} from '../../../../fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -15,7 +15,8 @@ test.describe('Vue Node Selection', () => {
 
   const modifiers = [
     { key: 'Control', name: 'ctrl' },
-    { key: 'Shift', name: 'shift' }
+    { key: 'Shift', name: 'shift' },
+    { key: 'Meta', name: 'meta' }
   ] as const
 
   for (const { key: modifier, name } of modifiers) {

browser_tests/tests/vueNodes/nodeStates/collapse.spec.ts

@@ -1,80 +1,20 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../fixtures/ComfyPage'
-import { VueNodeFixture } from '../../fixtures/utils/vueNodeFixtures'
+} from '../../../fixtures/ComfyPage'
+import { VueNodeFixture } from '../../../fixtures/utils/vueNodeFixtures'
 
-test.describe('NodeHeader', () => {
+test.describe('Vue Node Collapse', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
     await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.setup()
   })
 
-  test('displays node title', async ({ comfyPage }) => {
-    // Get the KSampler node from the default workflow
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    expect(nodes.length).toBeGreaterThanOrEqual(1)
-
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
-
-    const title = await vueNode.getTitle()
-    expect(title).toBe('KSampler')
-
-    // Verify title is visible in the header
-    const header = await vueNode.getHeader()
-    await expect(header).toContainText('KSampler')
-  })
-
-  test('allows title renaming', async ({ comfyPage }) => {
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
-
-    // Test renaming with Enter
-    await vueNode.setTitle('My Custom Sampler')
-    const newTitle = await vueNode.getTitle()
-    expect(newTitle).toBe('My Custom Sampler')
-
-    // Verify the title is displayed
-    const header = await vueNode.getHeader()
-    await expect(header).toContainText('My Custom Sampler')
-
-    // Test cancel with Escape
-    const titleElement = await vueNode.getTitleElement()
-    await titleElement.dblclick()
-    await comfyPage.nextFrame()
-
-    // Type a different value but cancel
-    const input = (await vueNode.getHeader()).locator(
-      '[data-testid="node-title-input"]'
-    )
-    await input.fill('This Should Be Cancelled')
-    await input.press('Escape')
-    await comfyPage.nextFrame()
-
-    // Title should remain as the previously saved value
-    const titleAfterCancel = await vueNode.getTitle()
-    expect(titleAfterCancel).toBe('My Custom Sampler')
-  })
-
-  test('Double click node body does not trigger edit', async ({
+  test('should allow collapsing node with collapse icon', async ({
     comfyPage
   }) => {
-    const loadCheckpointNode =
-      comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    const nodeBbox = await loadCheckpointNode.boundingBox()
-    if (!nodeBbox) throw new Error('Node not found')
-    await loadCheckpointNode.dblclick()
-
-    const editingTitleInput = comfyPage.page.getByTestId('node-title-input')
-    await expect(editingTitleInput).not.toBeVisible()
-  })
-
-  test('handles node collapsing', async ({ comfyPage }) => {
     // Get the KSampler node from the default workflow
     const nodes = await comfyPage.getNodeRefsByType('KSampler')
     const node = nodes[0]
@@ -103,7 +43,7 @@ test.describe('NodeHeader', () => {
     expect(expandedSize.height).toBeGreaterThanOrEqual(collapsedSize.height)
   })
 
-  test('shows collapse/expand icon state', async ({ comfyPage }) => {
+  test('should show collapse/expand icon state', async ({ comfyPage }) => {
     const nodes = await comfyPage.getNodeRefsByType('KSampler')
     const node = nodes[0]
     const vueNode = new VueNodeFixture(node, comfyPage.page)
@@ -123,7 +63,9 @@ test.describe('NodeHeader', () => {
     expect(iconClass).toContain('pi-chevron-down')
   })
 
-  test('preserves title when collapsing/expanding', async ({ comfyPage }) => {
+  test('should preserve title when collapsing/expanding', async ({
+    comfyPage
+  }) => {
     const nodes = await comfyPage.getNodeRefsByType('KSampler')
     const node = nodes[0]
     const vueNode = new VueNodeFixture(node, comfyPage.page)

browser_tests/tests/vueNodes/nodeStates/colors.spec.ts

@@ -0,0 +1,49 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+test.describe('Vue Node Custom Colors', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('displays color picker button and allows color selection', async ({
+    comfyPage
+  }) => {
+    const loadCheckpointNode = comfyPage.page.locator('[data-node-id]').filter({
+      hasText: 'Load Checkpoint'
+    })
+    await loadCheckpointNode.getByText('Load Checkpoint').click()
+
+    await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+    await comfyPage.page
+      .locator('.color-picker-container')
+      .locator('i[data-testid="blue"]')
+      .click()
+
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-custom-color-blue.png'
+    )
+  })
+
+  test('should load node colors from workflow', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('nodes/every_node_color')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-custom-colors-dark-all-colors.png'
+    )
+  })
+
+  test('should show brightened node colors on light theme', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+    await comfyPage.loadWorkflow('nodes/every_node_color')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-custom-colors-light-all-colors.png'
+    )
+  })
+})

browser_tests/tests/vueNodes/nodeStates/lod.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../../../fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')