mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-26 17:54:14 +00:00
## Summary Fixes the case where a value is updated in the graph but the result doesn't reflect on the widget representation on the relevant node. ## Changes - **What**: Uses vanilla Vue utilities instead of a special utility - **What**: Fewer places where state could be desynced. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6741-Fix-WIP-Simplify-the-widget-state-logic-2af6d73d36508160b729db50608a2ea9) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
import { createTestingPinia } from '@pinia/testing'
|
|
import { flushPromises, mount } from '@vue/test-utils'
|
|
import PrimeVue from 'primevue/config'
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
|
|
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
|
|
|
|
import WidgetSelect from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue'
|
|
|
|
// Mock modules
|
|
vi.mock('@/platform/distribution/types', () => ({
|
|
isCloud: true
|
|
}))
|
|
|
|
vi.mock('@/platform/assets/services/assetService', () => ({
|
|
assetService: {
|
|
isAssetBrowserEligible: vi.fn(() => true)
|
|
}
|
|
}))
|
|
|
|
const mockSettingStoreGet = vi.fn()
|
|
|
|
vi.mock('@/platform/settings/settingStore', () => ({
|
|
useSettingStore: vi.fn(() => ({
|
|
get: mockSettingStoreGet
|
|
}))
|
|
}))
|
|
|
|
// Import after mocks are defined
|
|
import { assetService } from '@/platform/assets/services/assetService'
|
|
const mockAssetServiceEligible = vi.mocked(assetService.isAssetBrowserEligible)
|
|
|
|
describe('WidgetSelect asset mode', () => {
|
|
const createWidget = (): SimplifiedWidget<string | undefined> => ({
|
|
name: 'ckpt_name',
|
|
type: 'combo',
|
|
value: undefined,
|
|
options: {
|
|
values: []
|
|
}
|
|
})
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks()
|
|
mockAssetServiceEligible.mockReturnValue(true)
|
|
mockSettingStoreGet.mockReturnValue(true) // Default to true for UseAssetAPI
|
|
})
|
|
|
|
// Helper to mount with common setup
|
|
const mountWidget = () => {
|
|
return mount(WidgetSelect, {
|
|
props: {
|
|
widget: createWidget(),
|
|
modelValue: undefined,
|
|
nodeType: 'CheckpointLoaderSimple'
|
|
},
|
|
global: {
|
|
plugins: [PrimeVue, createTestingPinia()]
|
|
}
|
|
})
|
|
}
|
|
|
|
it('uses dropdown when isCloud && UseAssetAPI && isEligible', async () => {
|
|
const wrapper = mountWidget()
|
|
await flushPromises()
|
|
|
|
expect(
|
|
wrapper.findComponent({ name: 'WidgetSelectDropdown' }).exists()
|
|
).toBe(true)
|
|
})
|
|
|
|
it('uses default widget when UseAssetAPI setting is false', () => {
|
|
mockSettingStoreGet.mockReturnValue(false)
|
|
const wrapper = mountWidget()
|
|
|
|
expect(
|
|
wrapper.findComponent({ name: 'WidgetSelectDefault' }).exists()
|
|
).toBe(true)
|
|
})
|
|
|
|
it('uses default widget when node is not eligible', () => {
|
|
mockAssetServiceEligible.mockReturnValue(false)
|
|
const wrapper = mountWidget()
|
|
|
|
expect(
|
|
wrapper.findComponent({ name: 'WidgetSelectDefault' }).exists()
|
|
).toBe(true)
|
|
})
|
|
})
|