Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-04 23:20:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: eliminate unsafe type assertions from Group 2 test files (#8258)

Browse Source 
## Summary
Improved type safety in test files by eliminating unsafe type assertions
and adopting official testing patterns. Reduced unsafe `as unknown as`
type assertions and eliminated all `null!` assertions.

## Changes
- **Adopted @pinia/testing patterns**
- Replaced manual Pinia store mocking with `createTestingPinia()` in
`useSelectionState.test.ts`
  - Eliminated ~120 lines of mock boilerplate
- Created `createMockSettingStore()` helper to replace duplicated store
mocks in `useCoreCommands.test.ts`

- **Eliminated unsafe null assertions**
- Created explicit `MockMaskEditorStore` interface with proper nullable
types in `useCanvasTools.test.ts`
- Replaced `null!` initializations with `null` and used `!` at point of
use or `?.` for optional chaining

- **Made partial mock intent explicit**
- Updated test utilities in `litegraphTestUtils.ts` to use explicit
`Partial<T>` typing
- Changed cast pattern from `as T` to `as Partial<T> as T` to show
incomplete mock intent
- Applied to `createMockLGraphNode()`, `createMockPositionable()`, and
`createMockLGraphGroup()`

- **Created centralized mock utilities** in
`src/utils/__tests__/litegraphTestUtils.ts`
- `createMockLGraphNode()`, `createMockPositionable()`,
`createMockLGraphGroup()`, `createMockSubgraphNode()`
  - Updated 8+ test files to use centralized utilities
- Used union types `Partial<T> | Record<string, unknown>` for flexible
mock creation

## Results
- ✅ 0 typecheck errors
- ✅ 0 lint errors  
- ✅ All tests passing in modified files
- ✅ Eliminated all `null!` assertions
- ✅ Reduced unsafe double-cast patterns significantly

## Files Modified (18)
- `src/components/graph/SelectionToolbox.test.ts`
-
`src/components/graph/selectionToolbox/{BypassButton,ColorPickerButton,ExecuteButton}.test.ts`
- `src/components/sidebar/tabs/queue/ResultGallery.test.ts`
- `src/composables/canvas/useSelectedLiteGraphItems.test.ts`
- `src/composables/graph/{useGraphHierarchy,useSelectionState}.test.ts`
-
`src/composables/maskeditor/{useCanvasHistory,useCanvasManager,useCanvasTools,useCanvasTransform}.test.ts`
- `src/composables/node/{useNodePricing,useWatchWidget}.test.ts`
- `src/composables/{useBrowserTabTitle,useCoreCommands}.test.ts`
- `src/utils/__tests__/litegraphTestUtils.ts`

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8258-refactor-eliminate-unsafe-type-assertions-from-Group-2-test-files-2f16d73d365081549c65fd546cc7c765)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: AustinMroz <austin@comfy.org>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>
This commit is contained in:
Johnpaul Chiwetelu
2026-01-24 05:10:35 +01:00
committed by GitHub
parent 6b6b467e68
commit b1d8bf0b13
24 changed files with 785 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/components/graph/SelectionToolbox.test.ts
View File

@@ -5,9 +5,26 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { createI18n } from 'vue-i18n'
import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
import { useExtensionService } from '@/services/extensionService'
import {
createMockCanvas,
createMockPositionable
} from '@/utils/__tests__/litegraphTestUtils'
function createMockExtensionService(): ReturnType<typeof useExtensionService> {
return {
extensionCommands: { value: new Map() },
loadExtensions: vi.fn(),
registerExtension: vi.fn(),
invokeExtensions: vi.fn(() => []),
invokeExtensionsAsync: vi.fn()
} as Partial<ReturnType<typeof useExtensionService>> as ReturnType<
typeof useExtensionService
>
}
// Mock the composables and services
vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
@@ -112,12 +129,7 @@ describe('SelectionToolbox', () => {
canvasStore = useCanvasStore()
// Mock the canvas to avoid "getCanvas: canvas is null" errors
canvasStore.canvas = {
setDirty: vi.fn(),
state: {
selectionChanged: false
}
} as any
canvasStore.canvas = createMockCanvas()
vi.resetAllMocks()
})
@@ -184,30 +196,27 @@ describe('SelectionToolbox', () => {
describe('Button Visibility Logic', () => {
beforeEach(() => {
const mockExtensionService = vi.mocked(useExtensionService)
mockExtensionService.mockReturnValue({
extensionCommands: { value: new Map() },
invokeExtensions: vi.fn(() => [])
} as any)
mockExtensionService.mockReturnValue(createMockExtensionService())
})
it('should show info button only for single selections', () => {
// Single node selection
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
expect(wrapper.find('.info-button').exists()).toBe(true)
// Multiple node selection
canvasStore.selectedItems = [
{ type: 'TestNode1' },
{ type: 'TestNode2' }
] as any
createMockPositionable(),
createMockPositionable()
]
wrapper.unmount()
const wrapper2 = mountComponent()
expect(wrapper2.find('.info-button').exists()).toBe(false)
})
it('should not show info button when node definition is not found', () => {
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
// mock nodedef and return null
nodeDefMock = null
// remount component
@@ -217,7 +226,7 @@ describe('SelectionToolbox', () => {
it('should show color picker for all selections', () => {
// Single node selection
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
expect(wrapper.find('[data-testid="color-picker-button"]').exists()).toBe(
true
@@ -225,9 +234,9 @@ describe('SelectionToolbox', () => {
// Multiple node selection
canvasStore.selectedItems = [
{ type: 'TestNode1' },
{ type: 'TestNode2' }
] as any
createMockPositionable(),
createMockPositionable()
]
wrapper.unmount()
const wrapper2 = mountComponent()
expect(
@@ -237,15 +246,15 @@ describe('SelectionToolbox', () => {
it('should show frame nodes only for multiple selections', () => {
// Single node selection
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
expect(wrapper.find('.frame-nodes').exists()).toBe(false)
// Multiple node selection
canvasStore.selectedItems = [
{ type: 'TestNode1' },
{ type: 'TestNode2' }
] as any
createMockPositionable(),
createMockPositionable()
]
wrapper.unmount()
const wrapper2 = mountComponent()
expect(wrapper2.find('.frame-nodes').exists()).toBe(true)
@@ -253,22 +262,22 @@ describe('SelectionToolbox', () => {
it('should show bypass button for appropriate selections', () => {
// Single node selection
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
expect(wrapper.find('[data-testid="bypass-button"]').exists()).toBe(true)
// Multiple node selection
canvasStore.selectedItems = [
{ type: 'TestNode1' },
{ type: 'TestNode2' }
] as any
createMockPositionable(),
createMockPositionable()
]
wrapper.unmount()
const wrapper2 = mountComponent()
expect(wrapper2.find('[data-testid="bypass-button"]').exists()).toBe(true)
})
it('should show common buttons for all selections', () => {
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(true)
@@ -286,13 +295,13 @@ describe('SelectionToolbox', () => {
// Single image node
isImageNodeSpy.mockReturnValue(true)
canvasStore.selectedItems = [{ type: 'ImageNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
expect(wrapper.find('.mask-editor-button').exists()).toBe(true)
// Single non-image node
isImageNodeSpy.mockReturnValue(false)
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
wrapper.unmount()
const wrapper2 = mountComponent()
expect(wrapper2.find('.mask-editor-button').exists()).toBe(false)
@@ -304,13 +313,13 @@ describe('SelectionToolbox', () => {
// Single Load3D node
isLoad3dNodeSpy.mockReturnValue(true)
canvasStore.selectedItems = [{ type: 'Load3DNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
expect(wrapper.find('.load-3d-viewer-button').exists()).toBe(true)
// Single non-Load3D node
isLoad3dNodeSpy.mockReturnValue(false)
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
wrapper.unmount()
const wrapper2 = mountComponent()
expect(wrapper2.find('.load-3d-viewer-button').exists()).toBe(false)
@@ -326,17 +335,17 @@ describe('SelectionToolbox', () => {
// With output node selected
isOutputNodeSpy.mockReturnValue(true)
filterOutputNodesSpy.mockReturnValue([{ type: 'SaveImage' }] as any)
canvasStore.selectedItems = [
{ type: 'SaveImage', constructor: { nodeData: { output_node: true } } }
] as any
filterOutputNodesSpy.mockReturnValue([
{ type: 'SaveImage' }
] as LGraphNode[])
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
expect(wrapper.find('.execute-button').exists()).toBe(true)
// Without output node selected
isOutputNodeSpy.mockReturnValue(false)
filterOutputNodesSpy.mockReturnValue([])
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
wrapper.unmount()
const wrapper2 = mountComponent()
expect(wrapper2.find('.execute-button').exists()).toBe(false)
@@ -352,7 +361,7 @@ describe('SelectionToolbox', () => {
describe('Divider Visibility Logic', () => {
it('should show dividers between button groups when both groups have buttons', () => {
// Setup single node to show info + other buttons
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
const dividers = wrapper.findAll('.vertical-divider')
@@ -378,10 +387,13 @@ describe('SelectionToolbox', () => {
['test-command', { id: 'test-command', title: 'Test Command' }]
])
},
invokeExtensions: vi.fn(() => ['test-command'])
} as any)
loadExtensions: vi.fn(),
registerExtension: vi.fn(),
invokeExtensions: vi.fn(() => ['test-command']),
invokeExtensionsAsync: vi.fn()
} as ReturnType<typeof useExtensionService>)
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
expect(wrapper.find('.extension-command-button').exists()).toBe(true)
@@ -389,12 +401,9 @@ describe('SelectionToolbox', () => {
it('should not render extension commands when none available', () => {
const mockExtensionService = vi.mocked(useExtensionService)
mockExtensionService.mockReturnValue({
extensionCommands: { value: new Map() },
invokeExtensions: vi.fn(() => [])
} as any)
mockExtensionService.mockReturnValue(createMockExtensionService())
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
expect(wrapper.find('.extension-command-button').exists()).toBe(false)
@@ -404,12 +413,9 @@ describe('SelectionToolbox', () => {
describe('Container Styling', () => {
it('should apply minimap container styles', () => {
const mockExtensionService = vi.mocked(useExtensionService)
mockExtensionService.mockReturnValue({
extensionCommands: { value: new Map() },
invokeExtensions: vi.fn(() => [])
} as any)
mockExtensionService.mockReturnValue(createMockExtensionService())
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
const panel = wrapper.find('.panel')
@@ -418,12 +424,9 @@ describe('SelectionToolbox', () => {
it('should have correct CSS classes', () => {
const mockExtensionService = vi.mocked(useExtensionService)
mockExtensionService.mockReturnValue({
extensionCommands: { value: new Map() },
invokeExtensions: vi.fn(() => [])
} as any)
mockExtensionService.mockReturnValue(createMockExtensionService())
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
const panel = wrapper.find('.panel')
@@ -435,12 +438,9 @@ describe('SelectionToolbox', () => {
it('should handle animation class conditionally', () => {
const mockExtensionService = vi.mocked(useExtensionService)
mockExtensionService.mockReturnValue({
extensionCommands: { value: new Map() },
invokeExtensions: vi.fn(() => [])
} as any)
mockExtensionService.mockReturnValue(createMockExtensionService())
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
const panel = wrapper.find('.panel')
@@ -453,16 +453,18 @@ describe('SelectionToolbox', () => {
const mockCanvasInteractions = vi.mocked(useCanvasInteractions)
const forwardEventToCanvasSpy = vi.fn()
mockCanvasInteractions.mockReturnValue({
forwardEventToCanvas: forwardEventToCanvasSpy
} as any)
handleWheel: vi.fn(),
handlePointer: vi.fn(),
forwardEventToCanvas: forwardEventToCanvasSpy,
shouldHandleNodePointerEvents: { value: true } as ReturnType<
typeof useCanvasInteractions
>['shouldHandleNodePointerEvents']
} as ReturnType<typeof useCanvasInteractions>)
const mockExtensionService = vi.mocked(useExtensionService)
mockExtensionService.mockReturnValue({
extensionCommands: { value: new Map() },
invokeExtensions: vi.fn(() => [])
} as any)
mockExtensionService.mockReturnValue(createMockExtensionService())
canvasStore.selectedItems = [{ type: 'TestNode' }] as any
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = mountComponent()
const panel = wrapper.find('.panel')
@@ -475,10 +477,7 @@ describe('SelectionToolbox', () => {
describe('No Selection State', () => {
beforeEach(() => {
const mockExtensionService = vi.mocked(useExtensionService)
mockExtensionService.mockReturnValue({
extensionCommands: { value: new Map() },
invokeExtensions: vi.fn(() => [])
} as any)
mockExtensionService.mockReturnValue(createMockExtensionService())
})
it('should hide most buttons when no items selected', () => {

23
src/components/graph/selectionToolbox/BypassButton.test.ts
View File

@@ -6,14 +6,14 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { createI18n } from 'vue-i18n'
import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import { useCommandStore } from '@/stores/commandStore'
import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
const mockLGraphNode = {
type: 'TestNode',
title: 'Test Node',
mode: LGraphEventMode.ALWAYS
function getMockLGraphNode(): LGraphNode {
return createMockLGraphNode({ type: 'TestNode' })
}
vi.mock('@/utils/litegraphUtil', () => ({
@@ -59,21 +59,21 @@ describe('BypassButton', () => {
}
it('should render bypass button', () => {
canvasStore.selectedItems = [mockLGraphNode] as any
canvasStore.selectedItems = [getMockLGraphNode()]
const wrapper = mountComponent()
const button = wrapper.find('button')
expect(button.exists()).toBe(true)
})
it('should have correct test id', () => {
canvasStore.selectedItems = [mockLGraphNode] as any
canvasStore.selectedItems = [getMockLGraphNode()]
const wrapper = mountComponent()
const button = wrapper.find('[data-testid="bypass-button"]')
expect(button.exists()).toBe(true)
})
it('should execute bypass command when clicked', async () => {
canvasStore.selectedItems = [mockLGraphNode] as any
canvasStore.selectedItems = [getMockLGraphNode()]
const executeSpy = vi.spyOn(commandStore, 'execute').mockResolvedValue()
const wrapper = mountComponent()
@@ -85,8 +85,11 @@ describe('BypassButton', () => {
})
it('should show bypassed styling when node is bypassed', async () => {
const bypassedNode = { ...mockLGraphNode, mode: LGraphEventMode.BYPASS }
canvasStore.selectedItems = [bypassedNode] as any
const bypassedNode: Partial<LGraphNode> = {
...getMockLGraphNode(),
mode: LGraphEventMode.BYPASS
}
canvasStore.selectedItems = [bypassedNode as LGraphNode]
vi.spyOn(commandStore, 'execute').mockResolvedValue()
const wrapper = mountComponent()
@@ -100,7 +103,7 @@ describe('BypassButton', () => {
it('should handle multiple selected items', () => {
vi.spyOn(commandStore, 'execute').mockResolvedValue()
canvasStore.selectedItems = [mockLGraphNode, mockLGraphNode] as any
canvasStore.selectedItems = [getMockLGraphNode(), getMockLGraphNode()]
const wrapper = mountComponent()
const button = wrapper.find('button')
expect(button.exists()).toBe(true)

24
src/components/graph/selectionToolbox/ColorPickerButton.test.ts
View File

@@ -1,3 +1,4 @@
import type { Mock } from 'vitest'
import { mount } from '@vue/test-utils'
import { createPinia, setActivePinia } from 'pinia'
import PrimeVue from 'primevue/config'
@@ -8,7 +9,20 @@ import { createI18n } from 'vue-i18n'
// Import after mocks
import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
import type { LoadedComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import { createMockPositionable } from '@/utils/__tests__/litegraphTestUtils'
function createMockWorkflow(
overrides: Partial<LoadedComfyWorkflow> = {}
): LoadedComfyWorkflow {
return {
changeTracker: {
checkState: vi.fn() as Mock
},
...overrides
} as Partial<LoadedComfyWorkflow> as LoadedComfyWorkflow
}
// Mock the litegraph module
vi.mock('@/lib/litegraph/src/litegraph', async () => {
@@ -70,11 +84,7 @@ describe('ColorPickerButton', () => {
canvasStore.selectedItems = []
// Mock workflow store
workflowStore.activeWorkflow = {
changeTracker: {
checkState: vi.fn()
}
} as any
workflowStore.activeWorkflow = createMockWorkflow()
})
const createWrapper = () => {
@@ -90,13 +100,13 @@ describe('ColorPickerButton', () => {
it('should render when nodes are selected', () => {
// Add a mock node to selectedItems
canvasStore.selectedItems = [{ type: 'LGraphNode' } as any]
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = createWrapper()
expect(wrapper.find('button').exists()).toBe(true)
})
it('should toggle color picker visibility on button click', async () => {
canvasStore.selectedItems = [{ type: 'LGraphNode' } as any]
canvasStore.selectedItems = [createMockPositionable()]
const wrapper = createWrapper()
const button = wrapper.find('button')

52
src/components/graph/selectionToolbox/ExecuteButton.test.ts
View File

@@ -1,23 +1,16 @@
import { mount } from '@vue/test-utils'
import { createPinia, setActivePinia } from 'pinia'
import { createTestingPinia } from '@pinia/testing'
import { setActivePinia } from 'pinia'
import PrimeVue from 'primevue/config'
import Tooltip from 'primevue/tooltip'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { createI18n } from 'vue-i18n'
import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import { useCommandStore } from '@/stores/commandStore'
// Mock the stores
vi.mock('@/renderer/core/canvas/canvasStore', () => ({
useCanvasStore: vi.fn()
}))
vi.mock('@/stores/commandStore', () => ({
useCommandStore: vi.fn()
}))
// Mock the utils
vi.mock('@/utils/litegraphUtil', () => ({
isLGraphNode: vi.fn((node) => !!node?.type)
@@ -37,10 +30,8 @@ vi.mock('@/composables/graph/useSelectionState', () => ({
}))
describe('ExecuteButton', () => {
let mockCanvas: any
let mockCanvasStore: any
let mockCommandStore: any
let mockSelectedNodes: any[]
let mockCanvas: LGraphCanvas
let mockSelectedNodes: LGraphNode[]
const i18n = createI18n({
legacy: false,
@@ -57,27 +48,27 @@ describe('ExecuteButton', () => {
})
beforeEach(async () => {
setActivePinia(createPinia())
// Set up Pinia with testing utilities
setActivePinia(
createTestingPinia({
createSpy: vi.fn
})
)
// Reset mocks
mockCanvas = {
const partialCanvas: Partial<LGraphCanvas> = {
setDirty: vi.fn()
}
mockCanvas = partialCanvas as Partial<LGraphCanvas> as LGraphCanvas
mockSelectedNodes = []
mockCanvasStore = {
getCanvas: vi.fn(() => mockCanvas),
selectedItems: []
}
// Get store instances and mock methods
const canvasStore = useCanvasStore()
const commandStore = useCommandStore()
mockCommandStore = {
execute: vi.fn()
}
// Setup store mocks
vi.mocked(useCanvasStore).mockReturnValue(mockCanvasStore as any)
vi.mocked(useCommandStore).mockReturnValue(mockCommandStore as any)
vi.spyOn(canvasStore, 'getCanvas').mockReturnValue(mockCanvas)
vi.spyOn(commandStore, 'execute').mockResolvedValue()
// Update the useSelectionState mock
const { useSelectionState } = vi.mocked(
@@ -87,7 +78,7 @@ describe('ExecuteButton', () => {
selectedNodes: {
value: mockSelectedNodes
}
} as any)
} as ReturnType<typeof useSelectionState>)
vi.clearAllMocks()
})
@@ -114,15 +105,16 @@ describe('ExecuteButton', () => {
describe('Click Handler', () => {
it('should execute Comfy.QueueSelectedOutputNodes command on click', async () => {
const commandStore = useCommandStore()
const wrapper = mountComponent()
const button = wrapper.find('button')
await button.trigger('click')
expect(mockCommandStore.execute).toHaveBeenCalledWith(
expect(commandStore.execute).toHaveBeenCalledWith(
'Comfy.QueueSelectedOutputNodes'
)
expect(mockCommandStore.execute).toHaveBeenCalledTimes(1)
expect(commandStore.execute).toHaveBeenCalledTimes(1)
})
})
})

13
src/components/sidebar/tabs/queue/ResultGallery.test.ts
View File

@@ -92,7 +92,7 @@ describe('ResultGallery', () => {
}
},
props: {
allGalleryItems: mockGalleryItems as unknown as ResultItemImpl[],
allGalleryItems: mockGalleryItems as ResultItemImpl[],
activeIndex: 0,
...props
},
@@ -117,7 +117,10 @@ describe('ResultGallery', () => {
const wrapper = mountGallery({ activeIndex: -1 })
// Initially galleryVisible should be false
const vm: any = wrapper.vm
type GalleryVM = typeof wrapper.vm & {
galleryVisible: boolean
}
const vm = wrapper.vm as GalleryVM
expect(vm.galleryVisible).toBe(false)
// Change activeIndex
@@ -167,7 +170,11 @@ describe('ResultGallery', () => {
expect(galleria.exists()).toBe(true)
// Check that our PT props for positioning work correctly
const pt = galleria.props('pt') as any
interface GalleriaPT {
prevButton?: { style?: string }
nextButton?: { style?: string }
}
const pt = galleria.props('pt') as GalleriaPT
expect(pt?.prevButton?.style).toContain('position: fixed')
expect(pt?.nextButton?.style).toContain('position: fixed')
})

6
src/components/templates/thumbnails/BaseThumbnail.test.ts
View File

@@ -4,6 +4,10 @@ import { nextTick } from 'vue'
import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
type ComponentInstance = InstanceType<typeof BaseThumbnail> & {
error: boolean
}
vi.mock('@vueuse/core', () => ({
useEventListener: vi.fn()
}))
@@ -45,7 +49,7 @@ describe('BaseThumbnail', () => {
it('shows error state when image fails to load', async () => {
const wrapper = mountThumbnail()
const vm = wrapper.vm as any
const vm = wrapper.vm as ComponentInstance
// Manually set error since useEventListener is mocked
vm.error = true

54
src/composables/canvas/useSelectedLiteGraphItems.test.ts
View File

@@ -6,6 +6,9 @@ import type { LGraphNode, Positionable } from '@/lib/litegraph/src/litegraph'
import { LGraphEventMode, Reroute } from '@/lib/litegraph/src/litegraph'
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import { app } from '@/scripts/app'
import type { NodeId } from '@/renderer/core/layout/types'
import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
import { createMockSubgraphNode } from '@/utils/__tests__/litegraphTestUtils'
// Mock the app module
vi.mock('@/scripts/app', () => ({
@@ -29,10 +32,12 @@ vi.mock('@/lib/litegraph/src/litegraph', () => ({
}))
// Mock Positionable objects
// @ts-expect-error - Mock implementation for testing
class MockNode implements Positionable {
pos: [number, number]
size: [number, number]
id: NodeId
boundingRect: ReadOnlyRect
constructor(
pos: [number, number] = [0, 0],
@@ -40,6 +45,13 @@ class MockNode implements Positionable {
) {
this.pos = pos
this.size = size
this.id = 'mock-node'
this.boundingRect = [0, 0, 0, 0]
}
move(): void {}
snapToGrid(_: number): boolean {
return true
}
}
@@ -61,7 +73,7 @@ class MockReroute extends Reroute implements Positionable {
describe('useSelectedLiteGraphItems', () => {
let canvasStore: ReturnType<typeof useCanvasStore>
let mockCanvas: any
let mockCanvas: { selectedItems: Set<Positionable> }
beforeEach(() => {
setActivePinia(createPinia())
@@ -73,7 +85,9 @@ describe('useSelectedLiteGraphItems', () => {
}
// Mock getCanvas to return our mock canvas
vi.spyOn(canvasStore, 'getCanvas').mockReturnValue(mockCanvas)
vi.spyOn(canvasStore, 'getCanvas').mockReturnValue(
mockCanvas as ReturnType<typeof canvasStore.getCanvas>
)
})
describe('isIgnoredItem', () => {
@@ -86,7 +100,6 @@ describe('useSelectedLiteGraphItems', () => {
it('should return false for non-Reroute items', () => {
const { isIgnoredItem } = useSelectedLiteGraphItems()
const node = new MockNode()
// @ts-expect-error - Test mock
expect(isIgnoredItem(node)).toBe(false)
})
})
@@ -98,14 +111,11 @@ describe('useSelectedLiteGraphItems', () => {
const node2 = new MockNode([100, 100])
const reroute = new MockReroute([50, 50])
// @ts-expect-error - Test mocks
const items = new Set<Positionable>([node1, node2, reroute])
const filtered = filterSelectableItems(items)
expect(filtered.size).toBe(2)
// @ts-expect-error - Test mocks
expect(filtered.has(node1)).toBe(true)
// @ts-expect-error - Test mocks
expect(filtered.has(node2)).toBe(true)
expect(filtered.has(reroute)).toBe(false)
})
@@ -143,9 +153,7 @@ describe('useSelectedLiteGraphItems', () => {
const selectableItems = getSelectableItems()
expect(selectableItems.size).toBe(2)
// @ts-expect-error - Test mock
expect(selectableItems.has(node1)).toBe(true)
// @ts-expect-error - Test mock
expect(selectableItems.has(node2)).toBe(true)
expect(selectableItems.has(reroute)).toBe(false)
})
@@ -255,14 +263,7 @@ describe('useSelectedLiteGraphItems', () => {
const { getSelectedNodes } = useSelectedLiteGraphItems()
const subNode1 = { id: 11, mode: LGraphEventMode.ALWAYS } as LGraphNode
const subNode2 = { id: 12, mode: LGraphEventMode.NEVER } as LGraphNode
const subgraphNode = {
id: 1,
mode: LGraphEventMode.ALWAYS,
isSubgraphNode: () => true,
subgraph: {
nodes: [subNode1, subNode2]
}
} as unknown as LGraphNode
const subgraphNode = createMockSubgraphNode([subNode1, subNode2])
const regularNode = { id: 2, mode: LGraphEventMode.NEVER } as LGraphNode
app.canvas.selected_nodes = { '0': subgraphNode, '1': regularNode }
@@ -279,14 +280,7 @@ describe('useSelectedLiteGraphItems', () => {
const { toggleSelectedNodesMode } = useSelectedLiteGraphItems()
const subNode1 = { id: 11, mode: LGraphEventMode.ALWAYS } as LGraphNode
const subNode2 = { id: 12, mode: LGraphEventMode.NEVER } as LGraphNode
const subgraphNode = {
id: 1,
mode: LGraphEventMode.ALWAYS,
isSubgraphNode: () => true,
subgraph: {
nodes: [subNode1, subNode2]
}
} as unknown as LGraphNode
const subgraphNode = createMockSubgraphNode([subNode1, subNode2])
const regularNode = { id: 2, mode: LGraphEventMode.BYPASS } as LGraphNode
app.canvas.selected_nodes = { '0': subgraphNode, '1': regularNode }
@@ -310,14 +304,10 @@ describe('useSelectedLiteGraphItems', () => {
const { toggleSelectedNodesMode } = useSelectedLiteGraphItems()
const subNode1 = { id: 11, mode: LGraphEventMode.ALWAYS } as LGraphNode
const subNode2 = { id: 12, mode: LGraphEventMode.BYPASS } as LGraphNode
const subgraphNode = {
const subgraphNode = createMockSubgraphNode([subNode1, subNode2], {
id: 1,
mode: LGraphEventMode.NEVER, // Already in NEVER mode
isSubgraphNode: () => true,
subgraph: {
nodes: [subNode1, subNode2]
}
} as unknown as LGraphNode
mode: LGraphEventMode.NEVER // Already in NEVER mode
})
app.canvas.selected_nodes = { '0': subgraphNode }

42
src/composables/functional/useChainCallback.ts
View File

@@ -1,19 +1,3 @@
/**
* Shorthand for {@link Parameters} of optional callbacks.
*
* @example
* ```ts
* const { onClick } = CustomClass.prototype
* CustomClass.prototype.onClick = function (...args: CallbackParams<typeof onClick>) {
* const r = onClick?.apply(this, args)
* // ...
* return r
* }
* ```
*/
export type CallbackParams<T extends ((...args: any) => any) | undefined> =
Parameters<Exclude<T, undefined>>
/**
* Chain multiple callbacks together.
*
@@ -21,15 +5,21 @@ export type CallbackParams<T extends ((...args: any) => any) | undefined> =
* @param callbacks - The callbacks to chain.
* @returns A new callback that chains the original callback with the callbacks.
*/
export const useChainCallback = <
O,
T extends (this: O, ...args: any[]) => void
>(
export function useChainCallback<O, T>(
originalCallback: T | undefined,
...callbacks: ((this: O, ...args: Parameters<T>) => void)[]
) => {
return function (this: O, ...args: Parameters<T>) {
originalCallback?.call(this, ...args)
for (const callback of callbacks) callback.call(this, ...args)
}
...callbacks: NonNullable<T> extends (this: O, ...args: infer P) => unknown
? ((this: O, ...args: P) => void)[]
: never
) {
type Args = NonNullable<T> extends (...args: infer P) => unknown ? P : never
type Ret = NonNullable<T> extends (...args: unknown[]) => infer R ? R : never
return function (this: O, ...args: Args) {
if (typeof originalCallback === 'function') {
;(originalCallback as (this: O, ...args: Args) => Ret).call(this, ...args)
}
for (const callback of callbacks) {
callback.call(this, ...args)
}
} as (this: O, ...args: Args) => Ret
}

81
src/composables/graph/useGraphHierarchy.test.ts
View File

@@ -1,23 +1,37 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { Rectangle } from '@/lib/litegraph/src/infrastructure/Rectangle'
import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
import * as measure from '@/lib/litegraph/src/measure'
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import {
createMockLGraphNode,
createMockLGraphGroup
} from '@/utils/__tests__/litegraphTestUtils'
import { useGraphHierarchy } from './useGraphHierarchy'
vi.mock('@/renderer/core/canvas/canvasStore')
function createMockNode(overrides: Partial<LGraphNode> = {}): LGraphNode {
return {
...createMockLGraphNode(),
boundingRect: new Rectangle(100, 100, 50, 50),
...overrides
} as LGraphNode
}
function createMockGroup(overrides: Partial<LGraphGroup> = {}): LGraphGroup {
return createMockLGraphGroup(overrides)
}
describe('useGraphHierarchy', () => {
let mockCanvasStore: ReturnType<typeof useCanvasStore>
let mockCanvasStore: Partial<ReturnType<typeof useCanvasStore>>
let mockNode: LGraphNode
let mockGroups: LGraphGroup[]
beforeEach(() => {
mockNode = {
boundingRect: [100, 100, 50, 50]
} as unknown as LGraphNode
mockNode = createMockNode()
mockGroups = []
mockCanvasStore = {
@@ -25,10 +39,21 @@ describe('useGraphHierarchy', () => {
graph: {
groups: mockGroups
}
}
} as any
},
$id: 'canvas',
$state: {},
$patch: vi.fn(),
$reset: vi.fn(),
$subscribe: vi.fn(),
$onAction: vi.fn(),
$dispose: vi.fn(),
_customProperties: new Set(),
_p: {}
} as unknown as Partial<ReturnType<typeof useCanvasStore>>
vi.mocked(useCanvasStore).mockReturnValue(mockCanvasStore)
vi.mocked(useCanvasStore).mockReturnValue(
mockCanvasStore as ReturnType<typeof useCanvasStore>
)
})
describe('findParentGroup', () => {
@@ -41,9 +66,9 @@ describe('useGraphHierarchy', () => {
})
it('returns null when node is not in any group', () => {
const group = {
boundingRect: [0, 0, 50, 50]
} as unknown as LGraphGroup
const group = createMockGroup({
boundingRect: new Rectangle(0, 0, 50, 50)
})
mockGroups.push(group)
vi.spyOn(measure, 'containsCentre').mockReturnValue(false)
@@ -55,9 +80,9 @@ describe('useGraphHierarchy', () => {
})
it('returns the only group when node is in exactly one group', () => {
const group = {
boundingRect: [0, 0, 200, 200]
} as unknown as LGraphGroup
const group = createMockGroup({
boundingRect: new Rectangle(0, 0, 200, 200)
})
mockGroups.push(group)
vi.spyOn(measure, 'containsCentre').mockReturnValue(true)
@@ -69,12 +94,12 @@ describe('useGraphHierarchy', () => {
})
it('returns the smallest group when node is in multiple groups', () => {
const largeGroup = {
boundingRect: [0, 0, 300, 300]
} as unknown as LGraphGroup
const smallGroup = {
boundingRect: [50, 50, 100, 100]
} as unknown as LGraphGroup
const largeGroup = createMockGroup({
boundingRect: new Rectangle(0, 0, 300, 300)
})
const smallGroup = createMockGroup({
boundingRect: new Rectangle(50, 50, 100, 100)
})
mockGroups.push(largeGroup, smallGroup)
vi.spyOn(measure, 'containsCentre').mockReturnValue(true)
@@ -87,12 +112,12 @@ describe('useGraphHierarchy', () => {
})
it('returns the inner group when one group contains another', () => {
const outerGroup = {
boundingRect: [0, 0, 300, 300]
} as unknown as LGraphGroup
const innerGroup = {
boundingRect: [50, 50, 100, 100]
} as unknown as LGraphGroup
const outerGroup = createMockGroup({
boundingRect: new Rectangle(0, 0, 300, 300)
})
const innerGroup = createMockGroup({
boundingRect: new Rectangle(50, 50, 100, 100)
})
mockGroups.push(outerGroup, innerGroup)
vi.spyOn(measure, 'containsCentre').mockReturnValue(true)
@@ -113,7 +138,7 @@ describe('useGraphHierarchy', () => {
})
it('handles null canvas gracefully', () => {
mockCanvasStore.canvas = null as any
mockCanvasStore.canvas = null
const { findParentGroup } = useGraphHierarchy()
const result = findParentGroup(mockNode)
@@ -122,7 +147,7 @@ describe('useGraphHierarchy', () => {
})
it('handles null graph gracefully', () => {
mockCanvasStore.canvas!.graph = null as any
mockCanvasStore.canvas!.graph = null
const { findParentGroup } = useGraphHierarchy()
const result = findParentGroup(mockNode)

208
src/composables/graph/useSelectionState.test.ts
View File

@@ -1,55 +1,19 @@
import { createPinia, setActivePinia } from 'pinia'
import { createTestingPinia } from '@pinia/testing'
import { setActivePinia } from 'pinia'
import { beforeEach, describe, expect, test, vi } from 'vitest'
import { ref } from 'vue'
import type { Ref } from 'vue'
import { useSelectionState } from '@/composables/graph/useSelectionState'
import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import { useNodeDefStore } from '@/stores/nodeDefStore'
import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
import { filterOutputNodes } from '@/utils/nodeFilterUtil'
import {
createMockLGraphNode,
createMockPositionable
} from '@/utils/__tests__/litegraphTestUtils'
// Test interfaces
interface TestNodeConfig {
type?: string
mode?: LGraphEventMode
flags?: { collapsed?: boolean }
pinned?: boolean
removable?: boolean
}
interface TestNode {
type: string
mode: LGraphEventMode
flags?: { collapsed?: boolean }
pinned?: boolean
removable?: boolean
isSubgraphNode: () => boolean
}
type MockedItem = TestNode | { type: string; isNode: boolean }
// Mock all stores
vi.mock('@/renderer/core/canvas/canvasStore', () => ({
useCanvasStore: vi.fn()
}))
vi.mock('@/stores/nodeDefStore', () => ({
useNodeDefStore: vi.fn()
}))
vi.mock('@/stores/workspace/sidebarTabStore', () => ({
useSidebarTabStore: vi.fn()
}))
vi.mock('@/stores/workspace/nodeHelpStore', () => ({
useNodeHelpStore: vi.fn()
}))
// Mock composables
vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
useNodeLibrarySidebarTab: vi.fn()
}))
@@ -63,102 +27,28 @@ vi.mock('@/utils/nodeFilterUtil', () => ({
filterOutputNodes: vi.fn()
}))
const createTestNode = (config: TestNodeConfig = {}): TestNode => {
return {
type: config.type || 'TestNode',
mode: config.mode || LGraphEventMode.ALWAYS,
flags: config.flags,
pinned: config.pinned,
removable: config.removable,
isSubgraphNode: () => false
}
// Mock comment/connection objects with additional properties
const mockComment = {
...createMockPositionable({ id: 999 }),
type: 'comment',
isNode: false
}
const mockConnection = {
...createMockPositionable({ id: 1000 }),
type: 'connection',
isNode: false
}
// Mock comment/connection objects
const mockComment = { type: 'comment', isNode: false }
const mockConnection = { type: 'connection', isNode: false }
describe('useSelectionState', () => {
// Mock store instances
let mockSelectedItems: Ref<MockedItem[]>
beforeEach(() => {
vi.clearAllMocks()
setActivePinia(createPinia())
// Setup mock canvas store with proper ref
mockSelectedItems = ref([])
vi.mocked(useCanvasStore).mockReturnValue({
selectedItems: mockSelectedItems,
// Add minimal required properties for the store
$id: 'canvas',
$state: {} as any,
$patch: vi.fn(),
$reset: vi.fn(),
$subscribe: vi.fn(),
$onAction: vi.fn(),
$dispose: vi.fn(),
_customProperties: new Set(),
_p: {} as any
} as any)
// Setup mock node def store
vi.mocked(useNodeDefStore).mockReturnValue({
fromLGraphNode: vi.fn((node: TestNode) => {
if (node?.type === 'TestNode') {
return { nodePath: 'test.TestNode', name: 'TestNode' }
}
return null
}),
// Add minimal required properties for the store
$id: 'nodeDef',
$state: {} as any,
$patch: vi.fn(),
$reset: vi.fn(),
$subscribe: vi.fn(),
$onAction: vi.fn(),
$dispose: vi.fn(),
_customProperties: new Set(),
_p: {} as any
} as any)
// Setup mock sidebar tab store
const mockToggleSidebarTab = vi.fn()
vi.mocked(useSidebarTabStore).mockReturnValue({
activeSidebarTabId: null,
toggleSidebarTab: mockToggleSidebarTab,
// Add minimal required properties for the store
$id: 'sidebarTab',
$state: {} as any,
$patch: vi.fn(),
$reset: vi.fn(),
$subscribe: vi.fn(),
$onAction: vi.fn(),
$dispose: vi.fn(),
_customProperties: new Set(),
_p: {} as any
} as any)
// Setup mock node help store
const mockOpenHelp = vi.fn()
const mockCloseHelp = vi.fn()
const mockNodeHelpStore = {
isHelpOpen: false,
currentHelpNode: null,
openHelp: mockOpenHelp,
closeHelp: mockCloseHelp,
// Add minimal required properties for the store
$id: 'nodeHelp',
$state: {} as any,
$patch: vi.fn(),
$reset: vi.fn(),
$subscribe: vi.fn(),
$onAction: vi.fn(),
$dispose: vi.fn(),
_customProperties: new Set(),
_p: {} as any
}
vi.mocked(useNodeHelpStore).mockReturnValue(mockNodeHelpStore as any)
// Create testing Pinia instance
setActivePinia(
createTestingPinia({
createSpy: vi.fn
})
)
// Setup mock composables
vi.mocked(useNodeLibrarySidebarTab).mockReturnValue({
@@ -166,7 +56,7 @@ describe('useSelectionState', () => {
title: 'Node Library',
type: 'custom',
render: () => null
} as any)
} as ReturnType<typeof useNodeLibrarySidebarTab>)
// Setup mock utility functions
vi.mocked(isLGraphNode).mockImplementation((item: unknown) => {
@@ -177,8 +67,8 @@ describe('useSelectionState', () => {
const typedNode = node as { type?: string }
return typedNode?.type === 'ImageNode'
})
vi.mocked(filterOutputNodes).mockImplementation(
(nodes: TestNode[]) => nodes.filter((n) => n.type === 'OutputNode') as any
vi.mocked(filterOutputNodes).mockImplementation((nodes) =>
nodes.filter((n) => n.type === 'OutputNode')
)
})
@@ -189,10 +79,10 @@ describe('useSelectionState', () => {
})
test('should return true when items selected', () => {
// Update the mock data before creating the composable
const node1 = createTestNode()
const node2 = createTestNode()
mockSelectedItems.value = [node1, node2]
const canvasStore = useCanvasStore()
const node1 = createMockLGraphNode({ id: 1 })
const node2 = createMockLGraphNode({ id: 2 })
canvasStore.$state.selectedItems = [node1, node2]
const { hasAnySelection } = useSelectionState()
expect(hasAnySelection.value).toBe(true)
@@ -201,9 +91,13 @@ describe('useSelectionState', () => {
describe('Node Type Filtering', () => {
test('should pick only LGraphNodes from mixed selections', () => {
// Update the mock data before creating the composable
const graphNode = createTestNode()
mockSelectedItems.value = [graphNode, mockComment, mockConnection]
const canvasStore = useCanvasStore()
const graphNode = createMockLGraphNode({ id: 3 })
canvasStore.$state.selectedItems = [
graphNode,
mockComment,
mockConnection
]
const { selectedNodes } = useSelectionState()
expect(selectedNodes.value).toHaveLength(1)
@@ -213,9 +107,12 @@ describe('useSelectionState', () => {
describe('Node State Computation', () => {
test('should detect bypassed nodes', () => {
// Update the mock data before creating the composable
const bypassedNode = createTestNode({ mode: LGraphEventMode.BYPASS })
mockSelectedItems.value = [bypassedNode]
const canvasStore = useCanvasStore()
const bypassedNode = createMockLGraphNode({
id: 4,
mode: LGraphEventMode.BYPASS
})
canvasStore.$state.selectedItems = [bypassedNode]
const { selectedNodes } = useSelectionState()
const isBypassed = selectedNodes.value.some(
@@ -225,10 +122,13 @@ describe('useSelectionState', () => {
})
test('should detect pinned/collapsed states', () => {
// Update the mock data before creating the composable
const pinnedNode = createTestNode({ pinned: true })
const collapsedNode = createTestNode({ flags: { collapsed: true } })
mockSelectedItems.value = [pinnedNode, collapsedNode]
const canvasStore = useCanvasStore()
const pinnedNode = createMockLGraphNode({ id: 5, pinned: true })
const collapsedNode = createMockLGraphNode({
id: 6,
flags: { collapsed: true }
})
canvasStore.$state.selectedItems = [pinnedNode, collapsedNode]
const { selectedNodes } = useSelectionState()
const isPinned = selectedNodes.value.some((n) => n.pinned === true)
@@ -244,9 +144,9 @@ describe('useSelectionState', () => {
})
test('should provide non-reactive state computation', () => {
// Update the mock data before creating the composable
const node = createTestNode({ pinned: true })
mockSelectedItems.value = [node]
const canvasStore = useCanvasStore()
const node = createMockLGraphNode({ id: 7, pinned: true })
canvasStore.$state.selectedItems = [node]
const { selectedNodes } = useSelectionState()
const isPinned = selectedNodes.value.some((n) => n.pinned === true)
@@ -262,7 +162,7 @@ describe('useSelectionState', () => {
expect(isBypassed).toBe(false)
// Test with empty selection using new composable instance
mockSelectedItems.value = []
canvasStore.$state.selectedItems = []
const { selectedNodes: newSelectedNodes } = useSelectionState()
const newIsPinned = newSelectedNodes.value.some((n) => n.pinned === true)
expect(newIsPinned).toBe(false)

2
src/composables/maskeditor/useCanvasHistory.test.ts
View File

@@ -75,7 +75,7 @@ if (typeof globalThis.ImageBitmap === 'undefined') {
this.height = height
}
close() {}
} as unknown as typeof globalThis.ImageBitmap
} as typeof ImageBitmap
}
describe('useCanvasHistory', () => {

44
src/composables/maskeditor/useCanvasManager.test.ts
View File

@@ -3,13 +3,13 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { MaskBlendMode } from '@/extensions/core/maskeditor/types'
import { useCanvasManager } from '@/composables/maskeditor/useCanvasManager'
const mockStore = {
imgCanvas: null as any,
maskCanvas: null as any,
rgbCanvas: null as any,
imgCtx: null as any,
maskCtx: null as any,
rgbCtx: null as any,
canvasBackground: null as any,
imgCanvas: null! as HTMLCanvasElement,
maskCanvas: null! as HTMLCanvasElement,
rgbCanvas: null! as HTMLCanvasElement,
imgCtx: null! as CanvasRenderingContext2D,
maskCtx: null! as CanvasRenderingContext2D,
rgbCtx: null! as CanvasRenderingContext2D,
canvasBackground: null! as HTMLElement,
maskColor: { r: 0, g: 0, b: 0 },
maskBlendMode: MaskBlendMode.Black,
maskOpacity: 0.8
@@ -38,26 +38,30 @@ describe('useCanvasManager', () => {
height: 100
} as ImageData
mockStore.imgCtx = {
const partialImgCtx: Partial<CanvasRenderingContext2D> = {
drawImage: vi.fn()
}
mockStore.imgCtx = partialImgCtx as CanvasRenderingContext2D
mockStore.maskCtx = {
const partialMaskCtx: Partial<CanvasRenderingContext2D> = {
drawImage: vi.fn(),
getImageData: vi.fn(() => mockImageData),
putImageData: vi.fn(),
globalCompositeOperation: 'source-over',
fillStyle: ''
}
mockStore.maskCtx = partialMaskCtx as CanvasRenderingContext2D
mockStore.rgbCtx = {
const partialRgbCtx: Partial<CanvasRenderingContext2D> = {
drawImage: vi.fn()
}
mockStore.rgbCtx = partialRgbCtx as CanvasRenderingContext2D
mockStore.imgCanvas = {
const partialImgCanvas: Partial<HTMLCanvasElement> = {
width: 0,
height: 0
}
mockStore.imgCanvas = partialImgCanvas as HTMLCanvasElement
mockStore.maskCanvas = {
width: 0,
@@ -65,19 +69,19 @@ describe('useCanvasManager', () => {
style: {
mixBlendMode: '',
opacity: ''
}
}
} as Pick<CSSStyleDeclaration, 'mixBlendMode' | 'opacity'>
} as HTMLCanvasElement
mockStore.rgbCanvas = {
width: 0,
height: 0
}
} as HTMLCanvasElement
mockStore.canvasBackground = {
style: {
backgroundColor: ''
}
}
} as Pick<CSSStyleDeclaration, 'backgroundColor'>
} as HTMLElement
mockStore.maskColor = { r: 0, g: 0, b: 0 }
mockStore.maskBlendMode = MaskBlendMode.Black
@@ -163,7 +167,7 @@ describe('useCanvasManager', () => {
it('should throw error when canvas missing', async () => {
const manager = useCanvasManager()
mockStore.imgCanvas = null
mockStore.imgCanvas = null! as HTMLCanvasElement
const origImage = createMockImage(512, 512)
const maskImage = createMockImage(512, 512)
@@ -176,7 +180,7 @@ describe('useCanvasManager', () => {
it('should throw error when context missing', async () => {
const manager = useCanvasManager()
mockStore.imgCtx = null
mockStore.imgCtx = null! as CanvasRenderingContext2D
const origImage = createMockImage(512, 512)
const maskImage = createMockImage(512, 512)
@@ -259,7 +263,7 @@ describe('useCanvasManager', () => {
it('should return early when canvas missing', async () => {
const manager = useCanvasManager()
mockStore.maskCanvas = null
mockStore.maskCanvas = null! as HTMLCanvasElement
await manager.updateMaskColor()
@@ -269,7 +273,7 @@ describe('useCanvasManager', () => {
it('should return early when context missing', async () => {
const manager = useCanvasManager()
mockStore.maskCtx = null
mockStore.maskCtx = null! as CanvasRenderingContext2D
await manager.updateMaskColor()

115
src/composables/maskeditor/useCanvasTools.test.ts
View File

@@ -4,17 +4,37 @@ import { ColorComparisonMethod } from '@/extensions/core/maskeditor/types'
import { useCanvasTools } from '@/composables/maskeditor/useCanvasTools'
// Mock store interface matching the real store's nullable fields
interface MockMaskEditorStore {
maskCtx: CanvasRenderingContext2D | null
imgCtx: CanvasRenderingContext2D | null
maskCanvas: HTMLCanvasElement | null
imgCanvas: HTMLCanvasElement | null
rgbCtx: CanvasRenderingContext2D | null
rgbCanvas: HTMLCanvasElement | null
maskColor: { r: number; g: number; b: number }
paintBucketTolerance: number
fillOpacity: number
colorSelectTolerance: number
colorComparisonMethod: ColorComparisonMethod
selectionOpacity: number
applyWholeImage: boolean
maskBoundary: boolean
maskTolerance: number
canvasHistory: { saveState: ReturnType<typeof vi.fn> }
}
const mockCanvasHistory = {
saveState: vi.fn()
}
const mockStore = {
maskCtx: null as any,
imgCtx: null as any,
maskCanvas: null as any,
imgCanvas: null as any,
rgbCtx: null as any,
rgbCanvas: null as any,
const mockStore: MockMaskEditorStore = {
maskCtx: null,
imgCtx: null,
maskCanvas: null,
imgCanvas: null,
rgbCtx: null,
rgbCanvas: null,
maskColor: { r: 255, g: 255, b: 255 },
paintBucketTolerance: 10,
fillOpacity: 100,
@@ -57,34 +77,40 @@ describe('useCanvasTools', () => {
mockImgImageData.data[i + 3] = 255
}
mockStore.maskCtx = {
const partialMaskCtx: Partial<CanvasRenderingContext2D> = {
getImageData: vi.fn(() => mockMaskImageData),
putImageData: vi.fn(),
clearRect: vi.fn()
}
mockStore.maskCtx = partialMaskCtx as CanvasRenderingContext2D
mockStore.imgCtx = {
const partialImgCtx: Partial<CanvasRenderingContext2D> = {
getImageData: vi.fn(() => mockImgImageData)
}
mockStore.imgCtx = partialImgCtx as CanvasRenderingContext2D
mockStore.rgbCtx = {
const partialRgbCtx: Partial<CanvasRenderingContext2D> = {
clearRect: vi.fn()
}
mockStore.rgbCtx = partialRgbCtx as CanvasRenderingContext2D
mockStore.maskCanvas = {
const partialMaskCanvas: Partial<HTMLCanvasElement> = {
width: 100,
height: 100
}
mockStore.maskCanvas = partialMaskCanvas as HTMLCanvasElement
mockStore.imgCanvas = {
const partialImgCanvas: Partial<HTMLCanvasElement> = {
width: 100,
height: 100
}
mockStore.imgCanvas = partialImgCanvas as HTMLCanvasElement
mockStore.rgbCanvas = {
const partialRgbCanvas: Partial<HTMLCanvasElement> = {
width: 100,
height: 100
}
mockStore.rgbCanvas = partialRgbCanvas as HTMLCanvasElement
mockStore.maskColor = { r: 255, g: 255, b: 255 }
mockStore.paintBucketTolerance = 10
@@ -103,13 +129,13 @@ describe('useCanvasTools', () => {
tools.paintBucketFill({ x: 50, y: 50 })
expect(mockStore.maskCtx.getImageData).toHaveBeenCalledWith(
expect(mockStore.maskCtx!.getImageData).toHaveBeenCalledWith(
0,
0,
100,
100
)
expect(mockStore.maskCtx.putImageData).toHaveBeenCalledWith(
expect(mockStore.maskCtx!.putImageData).toHaveBeenCalledWith(
mockMaskImageData,
0,
0
@@ -154,7 +180,7 @@ describe('useCanvasTools', () => {
tools.paintBucketFill({ x: -1, y: 50 })
expect(mockStore.maskCtx.putImageData).not.toHaveBeenCalled()
expect(mockStore.maskCtx!.putImageData).not.toHaveBeenCalled()
})
it('should return early when canvas missing', () => {
@@ -164,7 +190,7 @@ describe('useCanvasTools', () => {
tools.paintBucketFill({ x: 50, y: 50 })
expect(mockStore.maskCtx.getImageData).not.toHaveBeenCalled()
expect(mockStore.maskCtx?.getImageData).not.toHaveBeenCalled()
})
it('should apply fill opacity', () => {
@@ -198,14 +224,19 @@ describe('useCanvasTools', () => {
await tools.colorSelectFill({ x: 50, y: 50 })
expect(mockStore.maskCtx.getImageData).toHaveBeenCalledWith(
expect(mockStore.maskCtx!.getImageData).toHaveBeenCalledWith(
0,
0,
100,
100
)
expect(mockStore.imgCtx.getImageData).toHaveBeenCalledWith(0, 0, 100, 100)
expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
expect(mockStore.imgCtx!.getImageData).toHaveBeenCalledWith(
0,
0,
100,
100
)
expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
expect(mockCanvasHistory.saveState).toHaveBeenCalled()
})
@@ -216,7 +247,7 @@ describe('useCanvasTools', () => {
await tools.colorSelectFill({ x: 50, y: 50 })
expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
})
it('should respect color tolerance', async () => {
@@ -239,7 +270,7 @@ describe('useCanvasTools', () => {
await tools.colorSelectFill({ x: -1, y: 50 })
expect(mockStore.maskCtx.putImageData).not.toHaveBeenCalled()
expect(mockStore.maskCtx!.putImageData).not.toHaveBeenCalled()
})
it('should return early when canvas missing', async () => {
@@ -249,7 +280,7 @@ describe('useCanvasTools', () => {
await tools.colorSelectFill({ x: 50, y: 50 })
expect(mockStore.maskCtx.getImageData).not.toHaveBeenCalled()
expect(mockStore.maskCtx?.getImageData).not.toHaveBeenCalled()
})
it('should apply selection opacity', async () => {
@@ -270,7 +301,7 @@ describe('useCanvasTools', () => {
await tools.colorSelectFill({ x: 50, y: 50 })
expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
})
it('should use LAB color comparison method', async () => {
@@ -280,7 +311,7 @@ describe('useCanvasTools', () => {
await tools.colorSelectFill({ x: 50, y: 50 })
expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
})
it('should respect mask boundary', async () => {
@@ -295,7 +326,7 @@ describe('useCanvasTools', () => {
await tools.colorSelectFill({ x: 50, y: 50 })
expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
})
it('should update last color select point', async () => {
@@ -303,7 +334,7 @@ describe('useCanvasTools', () => {
await tools.colorSelectFill({ x: 30, y: 40 })
expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
})
})
@@ -320,13 +351,13 @@ describe('useCanvasTools', () => {
tools.invertMask()
expect(mockStore.maskCtx.getImageData).toHaveBeenCalledWith(
expect(mockStore.maskCtx!.getImageData).toHaveBeenCalledWith(
0,
0,
100,
100
)
expect(mockStore.maskCtx.putImageData).toHaveBeenCalledWith(
expect(mockStore.maskCtx!.putImageData).toHaveBeenCalledWith(
mockMaskImageData,
0,
0
@@ -369,7 +400,7 @@ describe('useCanvasTools', () => {
tools.invertMask()
expect(mockStore.maskCtx.getImageData).not.toHaveBeenCalled()
expect(mockStore.maskCtx?.getImageData).not.toHaveBeenCalled()
})
it('should return early when context missing', () => {
@@ -389,8 +420,8 @@ describe('useCanvasTools', () => {
tools.clearMask()
expect(mockStore.maskCtx.clearRect).toHaveBeenCalledWith(0, 0, 100, 100)
expect(mockStore.rgbCtx.clearRect).toHaveBeenCalledWith(0, 0, 100, 100)
expect(mockStore.maskCtx!.clearRect).toHaveBeenCalledWith(0, 0, 100, 100)
expect(mockStore.rgbCtx!.clearRect).toHaveBeenCalledWith(0, 0, 100, 100)
expect(mockCanvasHistory.saveState).toHaveBeenCalled()
})
@@ -401,7 +432,7 @@ describe('useCanvasTools', () => {
tools.clearMask()
expect(mockStore.maskCtx.clearRect).not.toHaveBeenCalled()
expect(mockStore.maskCtx?.clearRect).not.toHaveBeenCalled()
expect(mockCanvasHistory.saveState).toHaveBeenCalled()
})
@@ -412,8 +443,8 @@ describe('useCanvasTools', () => {
tools.clearMask()
expect(mockStore.maskCtx.clearRect).toHaveBeenCalledWith(0, 0, 100, 100)
expect(mockStore.rgbCtx.clearRect).not.toHaveBeenCalled()
expect(mockStore.maskCtx?.clearRect).toHaveBeenCalledWith(0, 0, 100, 100)
expect(mockStore.rgbCtx?.clearRect).not.toHaveBeenCalled()
expect(mockCanvasHistory.saveState).toHaveBeenCalled()
})
})
@@ -426,26 +457,26 @@ describe('useCanvasTools', () => {
tools.clearLastColorSelectPoint()
expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
})
})
describe('edge cases', () => {
it('should handle small canvas', () => {
mockStore.maskCanvas.width = 1
mockStore.maskCanvas.height = 1
mockStore.maskCanvas!.width = 1
mockStore.maskCanvas!.height = 1
mockMaskImageData = {
data: new Uint8ClampedArray(1 * 1 * 4),
width: 1,
height: 1
} as ImageData
mockStore.maskCtx.getImageData = vi.fn(() => mockMaskImageData)
mockStore.maskCtx!.getImageData = vi.fn(() => mockMaskImageData)
const tools = useCanvasTools()
tools.paintBucketFill({ x: 0, y: 0 })
expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
})
it('should handle fractional coordinates', () => {
@@ -453,7 +484,7 @@ describe('useCanvasTools', () => {
tools.paintBucketFill({ x: 50.7, y: 50.3 })
expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
})
it('should handle maximum tolerance', () => {
@@ -463,7 +494,7 @@ describe('useCanvasTools', () => {
tools.paintBucketFill({ x: 50, y: 50 })
expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
})
it('should handle zero opacity', () => {

4
src/composables/maskeditor/useCanvasTransform.test.ts
View File

@@ -95,7 +95,7 @@ if (typeof globalThis.ImageData === 'undefined') {
this.data = new Uint8ClampedArray(dataOrWidth * widthOrHeight * 4)
}
}
} as unknown as typeof globalThis.ImageData
} as typeof ImageData
}
// Mock ImageBitmap for test environment using safe type casting
@@ -108,7 +108,7 @@ if (typeof globalThis.ImageBitmap === 'undefined') {
this.height = height
}
close() {}
} as unknown as typeof globalThis.ImageBitmap
} as typeof ImageBitmap
}
describe('useCanvasTransform', () => {

68
src/composables/maskeditor/useImageLoader.test.ts
View File

@@ -2,22 +2,39 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useImageLoader } from '@/composables/maskeditor/useImageLoader'
type MockStore = {
imgCanvas: HTMLCanvasElement | null
maskCanvas: HTMLCanvasElement | null
rgbCanvas: HTMLCanvasElement | null
imgCtx: CanvasRenderingContext2D | null
maskCtx: CanvasRenderingContext2D | null
image: HTMLImageElement | null
}
type MockDataStore = {
inputData: {
baseLayer: { image: HTMLImageElement }
maskLayer: { image: HTMLImageElement }
paintLayer: { image: HTMLImageElement } | null
} | null
}
const mockCanvasManager = {
invalidateCanvas: vi.fn().mockResolvedValue(undefined),
updateMaskColor: vi.fn().mockResolvedValue(undefined)
}
const mockStore = {
imgCanvas: null as any,
maskCanvas: null as any,
rgbCanvas: null as any,
imgCtx: null as any,
maskCtx: null as any,
image: null as any
const mockStore: MockStore = {
imgCanvas: null,
maskCanvas: null,
rgbCanvas: null,
imgCtx: null,
maskCtx: null,
image: null
}
const mockDataStore = {
inputData: null as any
const mockDataStore: MockDataStore = {
inputData: null
}
vi.mock('@/stores/maskEditorStore', () => ({
@@ -33,7 +50,8 @@ vi.mock('@/composables/maskeditor/useCanvasManager', () => ({
}))
vi.mock('@vueuse/core', () => ({
createSharedComposable: (fn: any) => fn
createSharedComposable: <T extends (...args: unknown[]) => unknown>(fn: T) =>
fn
}))
describe('useImageLoader', () => {
@@ -61,26 +79,26 @@ describe('useImageLoader', () => {
mockStore.imgCtx = {
clearRect: vi.fn()
}
} as Partial<CanvasRenderingContext2D> as CanvasRenderingContext2D
mockStore.maskCtx = {
clearRect: vi.fn()
}
} as Partial<CanvasRenderingContext2D> as CanvasRenderingContext2D
mockStore.imgCanvas = {
width: 0,
height: 0
}
} as Partial<HTMLCanvasElement> as HTMLCanvasElement
mockStore.maskCanvas = {
width: 0,
height: 0
}
} as Partial<HTMLCanvasElement> as HTMLCanvasElement
mockStore.rgbCanvas = {
width: 0,
height: 0
}
} as Partial<HTMLCanvasElement> as HTMLCanvasElement
mockDataStore.inputData = {
baseLayer: { image: mockBaseImage },
@@ -104,10 +122,10 @@ describe('useImageLoader', () => {
await loader.loadImages()
expect(mockStore.maskCanvas.width).toBe(512)
expect(mockStore.maskCanvas.height).toBe(512)
expect(mockStore.rgbCanvas.width).toBe(512)
expect(mockStore.rgbCanvas.height).toBe(512)
expect(mockStore.maskCanvas?.width).toBe(512)
expect(mockStore.maskCanvas?.height).toBe(512)
expect(mockStore.rgbCanvas?.width).toBe(512)
expect(mockStore.rgbCanvas?.height).toBe(512)
})
it('should clear canvas contexts', async () => {
@@ -115,8 +133,8 @@ describe('useImageLoader', () => {
await loader.loadImages()
expect(mockStore.imgCtx.clearRect).toHaveBeenCalledWith(0, 0, 0, 0)
expect(mockStore.maskCtx.clearRect).toHaveBeenCalledWith(0, 0, 0, 0)
expect(mockStore.imgCtx?.clearRect).toHaveBeenCalledWith(0, 0, 0, 0)
expect(mockStore.maskCtx?.clearRect).toHaveBeenCalledWith(0, 0, 0, 0)
})
it('should call canvasManager methods', async () => {
@@ -188,10 +206,10 @@ describe('useImageLoader', () => {
await loader.loadImages()
expect(mockStore.maskCanvas.width).toBe(1024)
expect(mockStore.maskCanvas.height).toBe(768)
expect(mockStore.rgbCanvas.width).toBe(1024)
expect(mockStore.rgbCanvas.height).toBe(768)
expect(mockStore.maskCanvas?.width).toBe(1024)
expect(mockStore.maskCanvas?.height).toBe(768)
expect(mockStore.rgbCanvas?.width).toBe(1024)
expect(mockStore.rgbCanvas?.height).toBe(768)
})
})
})

160
src/composables/node/useNodePricing.test.ts
View File

@@ -4,6 +4,7 @@ import { CREDITS_PER_USD, formatCredits } from '@/base/credits/comfyCredits'
import { useNodePricing } from '@/composables/node/useNodePricing'
import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
import type { PriceBadge } from '@/schemas/nodeDefSchema'
import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
// -----------------------------------------------------------------------------
// Test Types
@@ -26,13 +27,6 @@ interface MockNodeData {
price_badge?: PriceBadge
}
interface MockNode {
id: string
widgets: MockNodeWidget[]
inputs: MockNodeInput[]
constructor: { nodeData: MockNodeData }
}
// -----------------------------------------------------------------------------
// Test Helpers
// -----------------------------------------------------------------------------
@@ -80,8 +74,8 @@ function createMockNodeWithPriceBadge(
link: connected ? 1 : null
}))
const node: MockNode = {
id: Math.random().toString(),
const baseNode = createMockLGraphNode()
return Object.assign(baseNode, {
widgets: mockWidgets,
inputs: mockInputs,
constructor: {
@@ -91,9 +85,7 @@ function createMockNodeWithPriceBadge(
price_badge: priceBadge
}
}
}
return node as unknown as LGraphNode
})
}
/** Helper to create a price badge with defaults */
@@ -108,6 +100,20 @@ const priceBadge = (
depends_on: { widgets, inputs, input_groups: inputGroups }
})
/** Helper to create a mock node for edge case testing */
function createMockNode(
nodeData: MockNodeData,
widgets: MockNodeWidget[] = [],
inputs: MockNodeInput[] = []
): LGraphNode {
const baseNode = createMockLGraphNode()
return Object.assign(baseNode, {
widgets,
inputs,
constructor: { nodeData }
})
}
// -----------------------------------------------------------------------------
// Tests
// -----------------------------------------------------------------------------
@@ -456,37 +462,23 @@ describe('useNodePricing', () => {
describe('edge cases', () => {
it('should return empty string for non-API nodes', () => {
const { getNodeDisplayPrice } = useNodePricing()
const node: MockNode = {
id: 'test',
widgets: [],
inputs: [],
constructor: {
nodeData: {
name: 'RegularNode',
api_node: false
}
}
}
const node = createMockNode({
name: 'RegularNode',
api_node: false
})
const price = getNodeDisplayPrice(node as unknown as LGraphNode)
const price = getNodeDisplayPrice(node)
expect(price).toBe('')
})
it('should return empty string for nodes without price_badge', () => {
const { getNodeDisplayPrice } = useNodePricing()
const node: MockNode = {
id: 'test',
widgets: [],
inputs: [],
constructor: {
nodeData: {
name: 'ApiNodeNoPricing',
api_node: true
}
}
}
const node = createMockNode({
name: 'ApiNodeNoPricing',
api_node: true
})
const price = getNodeDisplayPrice(node as unknown as LGraphNode)
const price = getNodeDisplayPrice(node)
expect(price).toBe('')
})
@@ -559,37 +551,23 @@ describe('useNodePricing', () => {
it('should return undefined for nodes without price_badge', () => {
const { getNodePricingConfig } = useNodePricing()
const node: MockNode = {
id: 'test',
widgets: [],
inputs: [],
constructor: {
nodeData: {
name: 'NoPricingNode',
api_node: true
}
}
}
const node = createMockNode({
name: 'NoPricingNode',
api_node: true
})
const config = getNodePricingConfig(node as unknown as LGraphNode)
const config = getNodePricingConfig(node)
expect(config).toBeUndefined()
})
it('should return undefined for non-API nodes', () => {
const { getNodePricingConfig } = useNodePricing()
const node: MockNode = {
id: 'test',
widgets: [],
inputs: [],
constructor: {
nodeData: {
name: 'RegularNode',
api_node: false
}
}
}
const node = createMockNode({
name: 'RegularNode',
api_node: false
})
const config = getNodePricingConfig(node as unknown as LGraphNode)
const config = getNodePricingConfig(node)
expect(config).toBeUndefined()
})
})
@@ -642,21 +620,12 @@ describe('useNodePricing', () => {
it('should not throw for non-API nodes', () => {
const { triggerPriceRecalculation } = useNodePricing()
const node: MockNode = {
id: 'test',
widgets: [],
inputs: [],
constructor: {
nodeData: {
name: 'RegularNode',
api_node: false
}
}
}
const node = createMockNode({
name: 'RegularNode',
api_node: false
})
expect(() =>
triggerPriceRecalculation(node as unknown as LGraphNode)
).not.toThrow()
expect(() => triggerPriceRecalculation(node)).not.toThrow()
})
})
@@ -751,35 +720,32 @@ describe('useNodePricing', () => {
const { getNodeDisplayPrice } = useNodePricing()
// Create a node with autogrow-style inputs (group.input1, group.input2, etc.)
const node: MockNode = {
id: Math.random().toString(),
widgets: [],
inputs: [
const node = createMockNode(
{
name: 'TestInputGroupNode',
api_node: true,
price_badge: {
engine: 'jsonata',
expr: '{"type":"usd","usd": inputGroups.videos * 0.05}',
depends_on: {
widgets: [],
inputs: [],
input_groups: ['videos']
}
}
},
[],
[
{ name: 'videos.clip1', link: 1 }, // connected
{ name: 'videos.clip2', link: 2 }, // connected
{ name: 'videos.clip3', link: null }, // disconnected
{ name: 'other_input', link: 3 } // connected but not in group
],
constructor: {
nodeData: {
name: 'TestInputGroupNode',
api_node: true,
price_badge: {
engine: 'jsonata',
expr: '{"type":"usd","usd": inputGroups.videos * 0.05}',
depends_on: {
widgets: [],
inputs: [],
input_groups: ['videos']
}
}
}
}
}
]
)
getNodeDisplayPrice(node as unknown as LGraphNode)
getNodeDisplayPrice(node)
await new Promise((r) => setTimeout(r, 50))
const price = getNodeDisplayPrice(node as unknown as LGraphNode)
const price = getNodeDisplayPrice(node)
// 2 connected inputs in 'videos' group * 0.05 = 0.10
expect(price).toBe(creditsLabel(0.1))
})

36
src/composables/node/useWatchWidget.test.ts
View File

@@ -3,11 +3,12 @@ import { nextTick } from 'vue'
import { useComputedWithWidgetWatch } from '@/composables/node/useWatchWidget'
import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
// Mock useChainCallback
vi.mock('@/composables/functional/useChainCallback', () => ({
useChainCallback: vi.fn((original, newCallback) => {
return function (this: any, ...args: any[]) {
return function (this: unknown, ...args: unknown[]) {
original?.call(this, ...args)
newCallback.call(this, ...args)
}
@@ -18,11 +19,12 @@ describe('useComputedWithWidgetWatch', () => {
const createMockNode = (
widgets: Array<{
name: string
value: any
callback?: (...args: any[]) => void
value: unknown
callback?: (...args: unknown[]) => void
}> = []
) => {
const mockNode = {
): LGraphNode => {
const baseNode = createMockLGraphNode()
return Object.assign(baseNode, {
widgets: widgets.map((widget) => ({
name: widget.name,
value: widget.value,
@@ -31,9 +33,7 @@ describe('useComputedWithWidgetWatch', () => {
graph: {
setDirtyCanvas: vi.fn()
}
} as unknown as LGraphNode
return mockNode
})
}
it('should create a reactive computed that responds to widget changes', async () => {
@@ -59,9 +59,9 @@ describe('useComputedWithWidgetWatch', () => {
// Change widget value and trigger callback
const widthWidget = mockNode.widgets?.find((w) => w.name === 'width')
if (widthWidget) {
if (widthWidget && widthWidget.callback) {
widthWidget.value = 150
;(widthWidget.callback as any)?.()
widthWidget.callback(widthWidget.value)
}
await nextTick()
@@ -89,9 +89,9 @@ describe('useComputedWithWidgetWatch', () => {
// Change observed widget
const widthWidget = mockNode.widgets?.find((w) => w.name === 'width')
if (widthWidget) {
if (widthWidget && widthWidget.callback) {
widthWidget.value = 150
;(widthWidget.callback as any)?.()
widthWidget.callback(widthWidget.value)
}
await nextTick()
@@ -117,9 +117,9 @@ describe('useComputedWithWidgetWatch', () => {
// Change widget value
const widget = mockNode.widgets?.[0]
if (widget) {
if (widget && widget.callback) {
widget.value = 20
;(widget.callback as any)?.()
widget.callback(widget.value)
}
await nextTick()
@@ -139,9 +139,9 @@ describe('useComputedWithWidgetWatch', () => {
// Change widget value
const widget = mockNode.widgets?.[0]
if (widget) {
if (widget && widget.callback) {
widget.value = 20
;(widget.callback as any)?.()
widget.callback(widget.value)
}
await nextTick()
@@ -171,8 +171,8 @@ describe('useComputedWithWidgetWatch', () => {
// Trigger widget callback
const widget = mockNode.widgets?.[0]
if (widget) {
;(widget.callback as any)?.()
if (widget && widget.callback) {
widget.callback(widget.value)
}
await nextTick()

74
src/composables/queue/useJobMenu.test.ts
View File

@@ -11,13 +11,18 @@ vi.mock('@/platform/distribution/types', () => ({
const downloadFileMock = vi.fn()
vi.mock('@/base/common/downloadUtil', () => ({
downloadFile: (...args: any[]) => downloadFileMock(...args)
downloadFile: (url: string, filename?: string) => {
if (filename === undefined) {
return downloadFileMock(url)
}
return downloadFileMock(url, filename)
}
}))
const copyToClipboardMock = vi.fn()
vi.mock('@/composables/useCopyToClipboard', () => ({
useCopyToClipboard: () => ({
copyToClipboard: (...args: any[]) => copyToClipboardMock(...args)
copyToClipboard: (text: string) => copyToClipboardMock(text)
})
}))
@@ -30,8 +35,8 @@ vi.mock('@/i18n', () => ({
const mapTaskOutputToAssetItemMock = vi.fn()
vi.mock('@/platform/assets/composables/media/assetMappers', () => ({
mapTaskOutputToAssetItem: (...args: any[]) =>
mapTaskOutputToAssetItemMock(...args)
mapTaskOutputToAssetItem: (taskItem: TaskItemImpl, output: ResultItemImpl) =>
mapTaskOutputToAssetItemMock(taskItem, output)
}))
const mediaAssetActionsMock = {
@@ -67,14 +72,16 @@ const interruptMock = vi.fn()
const deleteItemMock = vi.fn()
vi.mock('@/scripts/api', () => ({
api: {
interrupt: (...args: any[]) => interruptMock(...args),
deleteItem: (...args: any[]) => deleteItemMock(...args)
interrupt: (runningPromptId: string | null) =>
interruptMock(runningPromptId),
deleteItem: (type: string, id: string) => deleteItemMock(type, id)
}
}))
const downloadBlobMock = vi.fn()
vi.mock('@/scripts/utils', () => ({
downloadBlob: (...args: any[]) => downloadBlobMock(...args)
downloadBlob: (filename: string, blob: Blob) =>
downloadBlobMock(filename, blob)
}))
const dialogServiceMock = {
@@ -94,11 +101,14 @@ vi.mock('@/services/litegraphService', () => ({
useLitegraphService: () => litegraphServiceMock
}))
const nodeDefStoreMock = {
nodeDefsByName: {} as Record<string, any>
const nodeDefStoreMock: {
nodeDefsByName: Record<string, Partial<ComfyNodeDefImpl>>
} = {
nodeDefsByName: {}
}
vi.mock('@/stores/nodeDefStore', () => ({
useNodeDefStore: () => nodeDefStoreMock
useNodeDefStore: () => nodeDefStoreMock,
ComfyNodeDefImpl: class {}
}))
const queueStoreMock = {
@@ -118,12 +128,13 @@ vi.mock('@/stores/executionStore', () => ({
const getJobWorkflowMock = vi.fn()
vi.mock('@/services/jobOutputCache', () => ({
getJobWorkflow: (...args: any[]) => getJobWorkflowMock(...args)
getJobWorkflow: (jobId: string) => getJobWorkflowMock(jobId)
}))
const createAnnotatedPathMock = vi.fn()
vi.mock('@/utils/createAnnotatedPath', () => ({
createAnnotatedPath: (...args: any[]) => createAnnotatedPathMock(...args)
createAnnotatedPath: (filename: string, subfolder: string, type: string) =>
createAnnotatedPathMock(filename, subfolder, type)
}))
const appendJsonExtMock = vi.fn((value: string) =>
@@ -135,7 +146,8 @@ vi.mock('@/utils/formatUtil', () => ({
}))
import { useJobMenu } from '@/composables/queue/useJobMenu'
import type { TaskItemImpl } from '@/stores/queueStore'
import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
import type { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
type MockTaskRef = Record<string, unknown>
@@ -193,9 +205,9 @@ describe('useJobMenu', () => {
}))
createAnnotatedPathMock.mockReturnValue('annotated-path')
nodeDefStoreMock.nodeDefsByName = {
LoadImage: { id: 'LoadImage' },
LoadVideo: { id: 'LoadVideo' },
LoadAudio: { id: 'LoadAudio' }
LoadImage: { name: 'LoadImage' },
LoadVideo: { name: 'LoadVideo' },
LoadAudio: { name: 'LoadAudio' }
}
// Default: no workflow available via lazy loading
getJobWorkflowMock.mockResolvedValue(undefined)
@@ -257,7 +269,7 @@ describe('useJobMenu', () => {
['initialization', interruptMock, deleteItemMock]
])('cancels %s job via interrupt', async (state) => {
const { cancelJob } = mountJobMenu()
setCurrentItem(createJobItem({ state: state as any }))
setCurrentItem(createJobItem({ state: state as JobListItem['state'] }))
await cancelJob()
@@ -292,7 +304,9 @@ describe('useJobMenu', () => {
setCurrentItem(
createJobItem({
state: 'failed',
taskRef: { errorMessage: 'Something went wrong' } as any
taskRef: {
errorMessage: 'Something went wrong'
} as Partial<TaskItemImpl>
})
)
@@ -324,7 +338,7 @@ describe('useJobMenu', () => {
errorMessage: 'CUDA out of memory',
executionError,
createTime: 12345
} as any
} as Partial<TaskItemImpl>
})
)
@@ -344,7 +358,9 @@ describe('useJobMenu', () => {
setCurrentItem(
createJobItem({
state: 'failed',
taskRef: { errorMessage: 'Job failed with error' } as any
taskRef: {
errorMessage: 'Job failed with error'
} as Partial<TaskItemImpl>
})
)
@@ -366,7 +382,7 @@ describe('useJobMenu', () => {
setCurrentItem(
createJobItem({
state: 'failed',
taskRef: { errorMessage: undefined } as any
taskRef: { errorMessage: undefined } as Partial<TaskItemImpl>
})
)
@@ -514,7 +530,12 @@ describe('useJobMenu', () => {
it('ignores add-to-current entry when preview missing entirely', async () => {
const { jobMenuEntries } = mountJobMenu()
setCurrentItem(createJobItem({ state: 'completed', taskRef: {} as any }))
setCurrentItem(
createJobItem({
state: 'completed',
taskRef: {} as Partial<TaskItemImpl>
})
)
await nextTick()
const entry = findActionEntry(jobMenuEntries.value, 'add-to-current')
@@ -543,7 +564,12 @@ describe('useJobMenu', () => {
it('ignores download request when preview missing', async () => {
const { jobMenuEntries } = mountJobMenu()
setCurrentItem(createJobItem({ state: 'completed', taskRef: {} as any }))
setCurrentItem(
createJobItem({
state: 'completed',
taskRef: {} as Partial<TaskItemImpl>
})
)
await nextTick()
const entry = findActionEntry(jobMenuEntries.value, 'download')
@@ -751,7 +777,7 @@ describe('useJobMenu', () => {
setCurrentItem(
createJobItem({
state: 'failed',
taskRef: { errorMessage: 'Some error' } as any
taskRef: { errorMessage: 'Some error' } as Partial<TaskItemImpl>
})
)

49
src/composables/useBrowserTabTitle.test.ts
View File

@@ -11,13 +11,28 @@ vi.mock('@/i18n', () => ({
}))
// Mock the execution store
const executionStore = reactive({
const executionStore = reactive<{
isIdle: boolean
executionProgress: number
executingNode: unknown
executingNodeProgress: number
nodeProgressStates: Record<string, unknown>
activePrompt: {
workflow: {
changeTracker: {
activeState: {
nodes: { id: number; type: string }[]
}
}
}
} | null
}>({
isIdle: true,
executionProgress: 0,
executingNode: null as any,
executingNode: null,
executingNodeProgress: 0,
nodeProgressStates: {} as any,
activePrompt: null as any
nodeProgressStates: {},
activePrompt: null
})
vi.mock('@/stores/executionStore', () => ({
useExecutionStore: () => executionStore
@@ -25,15 +40,21 @@ vi.mock('@/stores/executionStore', () => ({
// Mock the setting store
const settingStore = reactive({
get: vi.fn(() => 'Enabled')
get: vi.fn((_key: string) => 'Enabled')
})
vi.mock('@/platform/settings/settingStore', () => ({
useSettingStore: () => settingStore
}))
// Mock the workflow store
const workflowStore = reactive({
activeWorkflow: null as any
const workflowStore = reactive<{
activeWorkflow: {
filename: string
isModified: boolean
isPersisted: boolean
} | null
}>({
activeWorkflow: null
})
vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
useWorkflowStore: () => workflowStore
@@ -52,13 +73,13 @@ describe('useBrowserTabTitle', () => {
// reset execution store
executionStore.isIdle = true
executionStore.executionProgress = 0
executionStore.executingNode = null as any
executionStore.executingNode = null
executionStore.executingNodeProgress = 0
executionStore.nodeProgressStates = {}
executionStore.activePrompt = null
// reset setting and workflow stores
;(settingStore.get as any).mockReturnValue('Enabled')
vi.mocked(settingStore.get).mockReturnValue('Enabled')
workflowStore.activeWorkflow = null
workspaceStore.shiftDown = false
@@ -74,7 +95,7 @@ describe('useBrowserTabTitle', () => {
})
it('sets workflow name as title when workflow exists and menu enabled', async () => {
;(settingStore.get as any).mockReturnValue('Enabled')
vi.mocked(settingStore.get).mockReturnValue('Enabled')
workflowStore.activeWorkflow = {
filename: 'myFlow',
isModified: false,
@@ -88,7 +109,7 @@ describe('useBrowserTabTitle', () => {
})
it('adds asterisk for unsaved workflow', async () => {
;(settingStore.get as any).mockReturnValue('Enabled')
vi.mocked(settingStore.get).mockReturnValue('Enabled')
workflowStore.activeWorkflow = {
filename: 'myFlow',
isModified: true,
@@ -102,7 +123,7 @@ describe('useBrowserTabTitle', () => {
})
it('hides asterisk when autosave is enabled', async () => {
;(settingStore.get as any).mockImplementation((key: string) => {
vi.mocked(settingStore.get).mockImplementation((key: string) => {
if (key === 'Comfy.Workflow.AutoSave') return 'after delay'
if (key === 'Comfy.UseNewMenu') return 'Enabled'
return 'Enabled'
@@ -118,7 +139,7 @@ describe('useBrowserTabTitle', () => {
})
it('hides asterisk while Shift key is held', async () => {
;(settingStore.get as any).mockImplementation((key: string) => {
vi.mocked(settingStore.get).mockImplementation((key: string) => {
if (key === 'Comfy.Workflow.AutoSave') return 'off'
if (key === 'Comfy.UseNewMenu') return 'Enabled'
return 'Enabled'
@@ -137,7 +158,7 @@ describe('useBrowserTabTitle', () => {
// Fails when run together with other tests. Suspect to be caused by leaked
// state from previous tests.
it.skip('disables workflow title when menu disabled', async () => {
;(settingStore.get as any).mockReturnValue('Disabled')
vi.mocked(settingStore.get).mockReturnValue('Disabled')
workflowStore.activeWorkflow = {
filename: 'myFlow',
isModified: false,

16
src/composables/useCachedRequest.test.ts
View File

@@ -4,7 +4,7 @@ import { useCachedRequest } from '@/composables/useCachedRequest'
describe('useCachedRequest', () => {
let mockRequestFn: (
params: any,
params: unknown,
signal?: AbortSignal
) => Promise<unknown | null>
let abortSpy: () => void
@@ -25,7 +25,7 @@ describe('useCachedRequest', () => {
)
// Create a mock request function that returns different results based on params
mockRequestFn = vi.fn(async (params: any) => {
mockRequestFn = vi.fn(async (params: unknown) => {
// Simulate a request that takes some time
await new Promise((resolve) => setTimeout(resolve, 8))
@@ -138,12 +138,18 @@ describe('useCachedRequest', () => {
it('should use custom cache key function if provided', async () => {
// Create a cache key function that sorts object keys
const cacheKeyFn = (params: any) => {
const cacheKeyFn = (params: unknown) => {
if (typeof params !== 'object' || params === null) return String(params)
return JSON.stringify(
Object.keys(params)
Object.keys(params as Record<string, unknown>)
.sort()
.reduce((acc, key) => ({ ...acc, [key]: params[key] }), {})
.reduce(
(acc, key) => ({
...acc,
[key]: (params as Record<string, unknown>)[key]
}),
{}
)
)
}

127
src/composables/useCoreCommands.test.ts
View File

@@ -3,9 +3,11 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { ref } from 'vue'
import { useCoreCommands } from '@/composables/useCoreCommands'
import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
import { useSettingStore } from '@/platform/settings/settingStore'
import { api } from '@/scripts/api'
import { app } from '@/scripts/app'
import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
// Mock vue-i18n for useExternalLink
const mockLocale = ref('en')
@@ -106,30 +108,84 @@ vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
}))
describe('useCoreCommands', () => {
const mockSubgraph = {
nodes: [
// Mock input node
{
constructor: { comfyClass: 'SubgraphInputNode' },
id: 'input1'
},
// Mock output node
{
constructor: { comfyClass: 'SubgraphOutputNode' },
id: 'output1'
},
// Mock user node
{
constructor: { comfyClass: 'SomeUserNode' },
id: 'user1'
},
// Another mock user node
{
constructor: { comfyClass: 'AnotherUserNode' },
id: 'user2'
const createMockNode = (id: number, comfyClass: string): LGraphNode => {
const baseNode = createMockLGraphNode({ id })
return Object.assign(baseNode, {
constructor: {
...baseNode.constructor,
comfyClass
}
],
remove: vi.fn()
})
}
const createMockSubgraph = () => {
const mockNodes = [
// Mock input node
createMockNode(1, 'SubgraphInputNode'),
// Mock output node
createMockNode(2, 'SubgraphOutputNode'),
// Mock user node
createMockNode(3, 'SomeUserNode'),
// Another mock user node
createMockNode(4, 'AnotherUserNode')
]
return {
nodes: mockNodes,
remove: vi.fn(),
events: {
dispatch: vi.fn(),
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
dispatchEvent: vi.fn()
},
name: 'test-subgraph',
inputNode: undefined,
outputNode: undefined,
add: vi.fn(),
clear: vi.fn(),
serialize: vi.fn(),
configure: vi.fn(),
start: vi.fn(),
stop: vi.fn(),
runStep: vi.fn(),
findNodeByTitle: vi.fn(),
findNodesByTitle: vi.fn(),
findNodesByType: vi.fn(),
findNodeById: vi.fn(),
getNodeById: vi.fn(),
setDirtyCanvas: vi.fn(),
sendActionToCanvas: vi.fn()
} as Partial<typeof app.canvas.subgraph> as typeof app.canvas.subgraph
}
const mockSubgraph = createMockSubgraph()
function createMockSettingStore(
getReturnValue: boolean
): ReturnType<typeof useSettingStore> {
return {
get: vi.fn().mockReturnValue(getReturnValue),
addSetting: vi.fn(),
loadSettingValues: vi.fn(),
set: vi.fn(),
exists: vi.fn(),
getDefaultValue: vi.fn(),
settingValues: {},
settingsById: {},
$id: 'setting',
$state: {
settingValues: {},
settingsById: {}
},
$patch: vi.fn(),
$reset: vi.fn(),
$subscribe: vi.fn(),
$onAction: vi.fn(),
$dispose: vi.fn(),
_customProperties: new Set(),
_p: {}
} as ReturnType<typeof useSettingStore>
}
beforeEach(() => {
@@ -142,9 +198,7 @@ describe('useCoreCommands', () => {
app.canvas.subgraph = undefined
// Mock settings store
vi.mocked(useSettingStore).mockReturnValue({
get: vi.fn().mockReturnValue(false) // Skip confirmation dialog
} as any)
vi.mocked(useSettingStore).mockReturnValue(createMockSettingStore(false))
// Mock global confirm
global.confirm = vi.fn().mockReturnValue(true)
@@ -167,7 +221,7 @@ describe('useCoreCommands', () => {
it('should preserve input/output nodes when clearing subgraph', async () => {
// Set up subgraph context
app.canvas.subgraph = mockSubgraph as any
app.canvas.subgraph = mockSubgraph
const commands = useCoreCommands()
const clearCommand = commands.find(
@@ -181,24 +235,19 @@ describe('useCoreCommands', () => {
expect(app.rootGraph.clear).not.toHaveBeenCalled()
// Should only remove user nodes, not input/output nodes
expect(mockSubgraph.remove).toHaveBeenCalledTimes(2)
expect(mockSubgraph.remove).toHaveBeenCalledWith(mockSubgraph.nodes[2]) // user1
expect(mockSubgraph.remove).toHaveBeenCalledWith(mockSubgraph.nodes[3]) // user2
expect(mockSubgraph.remove).not.toHaveBeenCalledWith(
mockSubgraph.nodes[0]
) // input1
expect(mockSubgraph.remove).not.toHaveBeenCalledWith(
mockSubgraph.nodes[1]
) // output1
const subgraph = app.canvas.subgraph!
expect(subgraph.remove).toHaveBeenCalledTimes(2)
expect(subgraph.remove).toHaveBeenCalledWith(subgraph.nodes[2]) // user1
expect(subgraph.remove).toHaveBeenCalledWith(subgraph.nodes[3]) // user2
expect(subgraph.remove).not.toHaveBeenCalledWith(subgraph.nodes[0]) // input1
expect(subgraph.remove).not.toHaveBeenCalledWith(subgraph.nodes[1]) // output1
expect(api.dispatchCustomEvent).toHaveBeenCalledWith('graphCleared')
})
it('should respect confirmation setting', async () => {
// Mock confirmation required
vi.mocked(useSettingStore).mockReturnValue({
get: vi.fn().mockReturnValue(true) // Require confirmation
} as any)
vi.mocked(useSettingStore).mockReturnValue(createMockSettingStore(true))
global.confirm = vi.fn().mockReturnValue(false) // User cancels

14
src/extensions/core/widgetInputs.ts
View File

@@ -1,7 +1,4 @@
import {
type CallbackParams,
useChainCallback
} from '@/composables/functional/useChainCallback'
import { useChainCallback } from '@/composables/functional/useChainCallback'
import { LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
import type {
INodeInputSlot,
@@ -11,7 +8,10 @@ import type {
} from '@/lib/litegraph/src/litegraph'
import { NodeSlot } from '@/lib/litegraph/src/node/NodeSlot'
import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
import type {
IBaseWidget,
TWidgetValue
} from '@/lib/litegraph/src/types/widgets'
import type { InputSpec } from '@/schemas/nodeDefSchema'
import { app } from '@/scripts/app'
import {
@@ -26,7 +26,7 @@ import { isPrimitiveNode } from '@/renderer/utils/nodeTypeGuards'
const replacePropertyName = 'Run widget replace on values'
export class PrimitiveNode extends LGraphNode {
controlValues?: any[]
controlValues?: TWidgetValue[]
lastType?: string
static override category: string
constructor(title: string) {
@@ -561,7 +561,7 @@ app.registerExtension({
const origOnInputDblClick = nodeType.prototype.onInputDblClick
nodeType.prototype.onInputDblClick = function (
this: LGraphNode,
...[slot, ...args]: CallbackParams<typeof origOnInputDblClick>
...[slot, ...args]: Parameters<NonNullable<typeof origOnInputDblClick>>
) {
const r = origOnInputDblClick?.apply(this, [slot, ...args])

2
src/scripts/app.ts
View File

@@ -162,7 +162,7 @@ export class ComfyApp {
// TODO: Migrate internal usage to the
/** @deprecated Use {@link rootGraph} instead */
get graph(): LGraph | undefined {
get graph() {
return this.rootGraphInternal!
}

86
src/utils/__tests__/litegraphTestUtils.ts Normal file
View File

@@ -0,0 +1,86 @@
import type { Positionable } from '@/lib/litegraph/src/interfaces'
import { Rectangle } from '@/lib/litegraph/src/infrastructure/Rectangle'
import type {
LGraphCanvas,
LGraphGroup,
LGraphNode
} from '@/lib/litegraph/src/litegraph'
import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
import { vi } from 'vitest'
/**
* Creates a mock LGraphNode with minimal required properties
*/
export function createMockLGraphNode(
overrides: Partial<LGraphNode> | Record<string, unknown> = {}
): LGraphNode {
const partial: Partial<LGraphNode> = {
id: 1,
pos: [0, 0],
size: [100, 100],
title: 'Test Node',
mode: LGraphEventMode.ALWAYS,
...(overrides as Partial<LGraphNode>)
}
return partial as Partial<LGraphNode> as LGraphNode
}
/**
* Creates a mock Positionable object
*/
export function createMockPositionable(
overrides: Partial<Positionable> = {}
): Positionable {
const partial: Partial<Positionable> = {
id: 1,
pos: [0, 0],
...overrides
}
return partial as Partial<Positionable> as Positionable
}
/**
* Creates a mock LGraphGroup with minimal required properties
*/
export function createMockLGraphGroup(
overrides: Partial<LGraphGroup> = {}
): LGraphGroup {
const partial: Partial<LGraphGroup> = {
id: 1,
pos: [0, 0],
boundingRect: new Rectangle(0, 0, 100, 100),
...overrides
}
return partial as Partial<LGraphGroup> as LGraphGroup
}
/**
* Creates a mock SubgraphNode with sub-nodes
*/
export function createMockSubgraphNode(
subNodes: LGraphNode[],
overrides: Partial<LGraphNode> | Record<string, unknown> = {}
): LGraphNode {
const baseNode = createMockLGraphNode(overrides)
return Object.assign(baseNode, {
isSubgraphNode: () => true,
subgraph: {
nodes: subNodes
}
})
}
/**
* Creates a mock LGraphCanvas with minimal required properties for testing
*/
export function createMockCanvas(
overrides: Partial<LGraphCanvas> = {}
): LGraphCanvas {
return {
setDirty: vi.fn(),
state: {
selectionChanged: false
},
...overrides
} as LGraphCanvas
}