Add Vue Image Preview widget (#4116)

tests-ui/composables/useImagePreviewWidget.test.ts

@@ -0,0 +1,55 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { describe, expect, it, vi } from 'vitest'
+
+import { useImagePreviewWidget } from '@/composables/widgets/useImagePreviewWidget'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+
+// Mock dependencies
+vi.mock('@/scripts/domWidget', () => ({
+  ComponentWidgetImpl: vi.fn().mockImplementation(() => ({
+    name: 'test-widget',
+    value: ''
+  })),
+  addWidget: vi.fn()
+}))
+
+describe('useImagePreviewWidget', () => {
+  const mockNode = {
+    id: 'test-node',
+    widgets: []
+  } as unknown as LGraphNode
+
+  const mockInputSpec: InputSpec = {
+    name: 'image_preview',
+    type: 'IMAGEPREVIEW',
+    allow_batch: true,
+    image_folder: 'input'
+  }
+
+  it('creates widget constructor with default options', () => {
+    const constructor = useImagePreviewWidget()
+    expect(constructor).toBeDefined()
+    expect(typeof constructor).toBe('function')
+  })
+
+  it('creates widget with custom default value', () => {
+    const constructor = useImagePreviewWidget({
+      defaultValue: 'test-image.png'
+    })
+    expect(constructor).toBeDefined()
+  })
+
+  it('creates widget with array default value for batch mode', () => {
+    const constructor = useImagePreviewWidget({
+      defaultValue: ['image1.png', 'image2.png']
+    })
+    expect(constructor).toBeDefined()
+  })
+
+  it('calls constructor with node and inputSpec', () => {
+    const constructor = useImagePreviewWidget()
+    const widget = constructor(mockNode, mockInputSpec)
+
+    expect(widget).toBeDefined()
+  })
+})

tests-ui/composables/useNodeImagePreview.test.ts

@@ -0,0 +1,69 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { describe, expect, it, vi } from 'vitest'
+
+import { useNodeImagePreview } from '@/composables/node/useNodeImagePreview'
+
+// Mock dependencies
+vi.mock('@/composables/widgets/useImagePreviewWidget', () => ({
+  useImagePreviewWidget: vi.fn(() =>
+    vi.fn(() => ({
+      name: '$$node-image-preview',
+      value: '',
+      onRemove: vi.fn()
+    }))
+  )
+}))
+
+describe('useNodeImagePreview', () => {
+  const mockNode = {
+    id: 'test-node',
+    widgets: [],
+    setDirtyCanvas: vi.fn()
+  } as unknown as LGraphNode
+
+  it('provides showImagePreview and removeImagePreview functions', () => {
+    const { showImagePreview, removeImagePreview } = useNodeImagePreview()
+
+    expect(showImagePreview).toBeDefined()
+    expect(removeImagePreview).toBeDefined()
+    expect(typeof showImagePreview).toBe('function')
+    expect(typeof removeImagePreview).toBe('function')
+  })
+
+  it('shows image preview for single image', () => {
+    const { showImagePreview } = useNodeImagePreview()
+
+    showImagePreview(mockNode, 'test-image.png')
+
+    expect(mockNode.setDirtyCanvas).toHaveBeenCalledWith(true)
+  })
+
+  it('shows image preview for multiple images', () => {
+    const { showImagePreview } = useNodeImagePreview()
+
+    showImagePreview(mockNode, ['image1.png', 'image2.png'], {
+      allow_batch: true
+    })
+
+    expect(mockNode.setDirtyCanvas).toHaveBeenCalledWith(true)
+  })
+
+  it('removes image preview widget', () => {
+    const mockWidget = {
+      name: '$$node-image-preview',
+      onRemove: vi.fn()
+    }
+
+    const nodeWithWidget = {
+      ...mockNode,
+      widgets: [mockWidget]
+    } as unknown as LGraphNode
+
+    const { removeImagePreview } = useNodeImagePreview()
+
+    removeImagePreview(nodeWithWidget)
+
+    expect(mockWidget.onRemove).toHaveBeenCalled()
+    expect(nodeWithWidget.widgets).toHaveLength(0)
+  })
+})