Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-26 01:09:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix unit tests

Browse Source
This commit is contained in:
Austin Mroz
2025-12-02 11:55:10 -08:00
parent 948320137e
commit a07097e25d
10 changed files with 164 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/extensions/vueNodes/widgets/components/WidgetButton.test.ts
View File

@@ -199,11 +199,7 @@ describe('WidgetButton Interactions', () => {
const widget = createMockWidget({}, mockCallback)
const wrapper = mountComponent(widget)
// Simulate rapid clicks
const clickPromises = Array.from({ length: 16 }, () =>
clickButton(wrapper)
)
await Promise.all(clickPromises)
for (let i = 0; i < 16; i++) await clickButton(wrapper)
expect(mockCallback).toHaveBeenCalledTimes(16)
})

7
src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
View File

@@ -16,7 +16,7 @@
<script setup lang="ts">
import Button from 'primevue/button'
import { computed, triggerRef } from 'vue'
import { computed } from 'vue'
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
import {
@@ -37,7 +37,8 @@ const filteredProps = computed(() =>
)
const handleClick = () => {
//FIXME: Will do nothing since backing value is unchanged
triggerRef(props.widget.value())
const ref = props.widget.value()
//@ts-expect-error - need to actually assign value, can't use triggerRef :(
ref.value = !ref.value
}
</script>

11
src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.test.ts
View File

@@ -15,7 +15,7 @@ function createMockWidget(
callback?: (value: number) => void
): SimplifiedWidget<number> {
const valueRef = ref(value)
if (callback) watch(valueRef, callback)
if (callback) watch(valueRef, (v) => callback(v))
return {
name: 'test_input_number',
type,
@@ -52,15 +52,14 @@ describe('WidgetInputNumberInput Value Binding', () => {
})
it('emits update:modelValue when value changes', async () => {
const widget = createMockWidget(10, 'int')
const callback = vi.fn()
const widget = createMockWidget(10, 'int', {}, callback)
const wrapper = mountComponent(widget, 10)
const inputNumber = wrapper.findComponent(InputNumber)
await inputNumber.vm.$emit('update:modelValue', 20)
await inputNumber.setValue(20)
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![0]).toContain(20)
expect(callback).toHaveBeenCalledExactlyOnceWith(20)
})
it('handles negative values', () => {

90
src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.test.ts
View File

@@ -17,7 +17,7 @@ describe('WidgetInputText Value Binding', () => {
callback?: (value: string) => void
): SimplifiedWidget<string> => {
const valueRef = ref(value)
if (callback) watch(valueRef, callback)
if (callback) watch(valueRef, (v) => callback(v))
return {
name: 'test_input',
type: 'string',
@@ -58,86 +58,26 @@ describe('WidgetInputText Value Binding', () => {
return input
}
describe('Vue Event Emission', () => {
it('emits Vue event when input value changes on blur', async () => {
const widget = createMockWidget('hello')
const wrapper = mountComponent(widget, 'hello')
await setInputValueAndTrigger(wrapper, 'world', 'blur')
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![0]).toContain('world')
})
it('emits Vue event when enter key is pressed', async () => {
const widget = createMockWidget('initial')
const wrapper = mountComponent(widget, 'initial')
await setInputValueAndTrigger(wrapper, 'new value', 'keydown.enter')
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![0]).toContain('new value')
})
describe('Widget Value Callbacks', () => {
it('handles empty string values', async () => {
const widget = createMockWidget('something')
const callback = vi.fn()
const widget = createMockWidget('something', {}, callback)
const wrapper = mountComponent(widget, 'something')
await setInputValueAndTrigger(wrapper, '')
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![0]).toContain('')
expect(callback).toHaveBeenCalledExactlyOnceWith('')
})
it('handles special characters correctly', async () => {
const widget = createMockWidget('normal')
const callback = vi.fn()
const widget = createMockWidget('normal', {}, callback)
const wrapper = mountComponent(widget, 'normal')
const specialText = 'special @#$%^&*()[]{}|\\:";\'<>?,./'
await setInputValueAndTrigger(wrapper, specialText)
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![0]).toContain(specialText)
})
it('handles missing callback gracefully', async () => {
const widget = createMockWidget('test', {}, undefined)
const wrapper = mountComponent(widget, 'test')
await setInputValueAndTrigger(wrapper, 'new value')
// Should still emit Vue event
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![0]).toContain('new value')
})
})
describe('User Interactions', () => {
it('emits update:modelValue on blur', async () => {
const widget = createMockWidget('original')
const wrapper = mountComponent(widget, 'original')
await setInputValueAndTrigger(wrapper, 'updated')
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![0]).toContain('updated')
})
it('emits update:modelValue on enter key', async () => {
const widget = createMockWidget('start')
const wrapper = mountComponent(widget, 'start')
await setInputValueAndTrigger(wrapper, 'finish', 'keydown.enter')
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![0]).toContain('finish')
expect(callback).toHaveBeenCalledExactlyOnceWith(specialText)
})
})
@@ -158,27 +98,25 @@ describe('WidgetInputText Value Binding', () => {
describe('Edge Cases', () => {
it('handles very long strings', async () => {
const widget = createMockWidget('short')
const callback = vi.fn()
const widget = createMockWidget('short', {}, callback)
const wrapper = mountComponent(widget, 'short')
const longString = 'a'.repeat(10000)
await setInputValueAndTrigger(wrapper, longString)
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![0]).toContain(longString)
expect(callback).toHaveBeenCalledExactlyOnceWith(longString)
})
it('handles unicode characters', async () => {
const widget = createMockWidget('ascii')
const callback = vi.fn()
const widget = createMockWidget('ascii', {}, callback)
const wrapper = mountComponent(widget, 'ascii')
const unicodeText = '🎨 Unicode: αβγ 中文 العربية 🚀'
await setInputValueAndTrigger(wrapper, unicodeText)
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![0]).toContain(unicodeText)
expect(callback).toHaveBeenCalledExactlyOnceWith(unicodeText)
})
})
})

48
src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
View File

@@ -30,7 +30,7 @@ describe('WidgetMarkdown Dual Mode Display', () => {
callback?: (value: string) => void
): SimplifiedWidget<string> => {
const valueRef = ref(value)
if (callback) watch(valueRef, callback)
if (callback) watch(valueRef, (v) => callback(v))
return {
name: 'test_markdown',
type: 'string',
@@ -213,7 +213,8 @@ describe('WidgetMarkdown Dual Mode Display', () => {
describe('Value Updates', () => {
it('emits update:modelValue when textarea content changes', async () => {
const widget = createMockWidget('# Original')
const callback = vi.fn()
const widget = createMockWidget('# Original', {}, callback)
const wrapper = mountComponent(widget, '# Original')
await clickToEdit(wrapper)
@@ -222,9 +223,7 @@ describe('WidgetMarkdown Dual Mode Display', () => {
await textarea.setValue('# Updated Content')
await textarea.trigger('input')
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![emitted!.length - 1]).toEqual(['# Updated Content'])
expect(callback).toHaveBeenLastCalledWith('# Updated Content')
})
it('renders updated HTML after value change and blur', async () => {
@@ -242,38 +241,6 @@ describe('WidgetMarkdown Dual Mode Display', () => {
expect(displayDiv.html()).toContain('<h2>New Heading</h2>')
expect(displayDiv.html()).toContain('<strong>bold</strong>')
})
it('emits update:modelValue for callback handling at parent level', async () => {
const widget = createMockWidget('# Test', {})
const wrapper = mountComponent(widget, '# Test')
await clickToEdit(wrapper)
const textarea = wrapper.find('textarea')
await textarea.setValue('# Changed')
await textarea.trigger('input')
// The widget should emit the change for parent (NodeWidgets) to handle callbacks
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![emitted!.length - 1]).toEqual(['# Changed'])
})
it('handles missing callback gracefully', async () => {
const widget = createMockWidget('# Test', {}, undefined)
const wrapper = mountComponent(widget, '# Test')
await clickToEdit(wrapper)
const textarea = wrapper.find('textarea')
await textarea.setValue('# Changed')
// Should not throw error and should still emit Vue event
await expect(textarea.trigger('input')).resolves.not.toThrow()
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
})
})
describe('Complex Markdown Rendering', () => {
@@ -340,8 +307,9 @@ Another line with more content.`
})
it('handles unicode characters', async () => {
const callback = vi.fn()
const unicode = '# Unicode: 🎨 αβγ 中文 العربية 🚀'
const widget = createMockWidget(unicode)
const widget = createMockWidget(unicode, {}, callback)
const wrapper = mountComponent(widget, unicode)
await clickToEdit(wrapper)
@@ -351,9 +319,7 @@ Another line with more content.`
await textarea.setValue(unicode + ' more unicode')
await textarea.trigger('input')
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![emitted!.length - 1]).toEqual([unicode + ' more unicode'])
expect(callback).toHaveBeenLastCalledWith(unicode + ' more unicode')
})
it('handles rapid edit mode toggling', async () => {

100
src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts
View File

@@ -14,7 +14,7 @@ function createMockWidget(
callback?: (value: string) => void
): SimplifiedWidget<string> {
const valueRef = ref(value)
if (callback) watch(valueRef, callback)
if (callback) watch(valueRef, (v) => callback(v))
return {
name: 'test_textarea',
type: 'string',
@@ -60,98 +60,47 @@ async function setTextareaValueAndTrigger(
}
describe('WidgetTextarea Value Binding', () => {
describe('Vue Event Emission', () => {
it('emits Vue event when textarea value changes on blur', async () => {
const widget = createMockWidget('hello')
const wrapper = mountComponent(widget, 'hello')
await setTextareaValueAndTrigger(wrapper, 'world', 'blur')
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted?.[0]).toContain('world')
})
describe('Widget Value Callbacks', () => {
it('emits Vue event when textarea value changes on input', async () => {
const widget = createMockWidget('initial')
const callback = vi.fn()
const widget = createMockWidget('initial', {}, callback)
const wrapper = mountComponent(widget, 'initial')
await setTextareaValueAndTrigger(wrapper, 'new content', 'input')
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted?.[0]).toContain('new content')
expect(callback).toHaveBeenCalledExactlyOnceWith('new content')
})
it('handles empty string values', async () => {
const widget = createMockWidget('something')
const callback = vi.fn()
const widget = createMockWidget('something', {}, callback)
const wrapper = mountComponent(widget, 'something')
await setTextareaValueAndTrigger(wrapper, '')
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted?.[0]).toContain('')
expect(callback).toHaveBeenCalledExactlyOnceWith('')
})
it('handles multiline text correctly', async () => {
const widget = createMockWidget('single line')
const callback = vi.fn()
const widget = createMockWidget('single line', {}, callback)
const wrapper = mountComponent(widget, 'single line')
const multilineText = 'Line 1\nLine 2\nLine 3'
await setTextareaValueAndTrigger(wrapper, multilineText)
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted?.[0]).toContain(multilineText)
expect(callback).toHaveBeenCalledExactlyOnceWith(multilineText)
})
it('handles special characters correctly', async () => {
const widget = createMockWidget('normal')
const callback = vi.fn()
const widget = createMockWidget('normal', {}, callback)
const wrapper = mountComponent(widget, 'normal')
const specialText = 'special @#$%^&*()[]{}|\\:";\'<>?,./'
await setTextareaValueAndTrigger(wrapper, specialText)
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted?.[0]).toContain(specialText)
})
it('handles missing callback gracefully', async () => {
const widget = createMockWidget('test', {}, undefined)
const wrapper = mountComponent(widget, 'test')
await setTextareaValueAndTrigger(wrapper, 'new value')
// Should still emit Vue event
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted?.[0]).toContain('new value')
})
})
describe('User Interactions', () => {
it('emits update:modelValue on blur', async () => {
const widget = createMockWidget('original')
const wrapper = mountComponent(widget, 'original')
await setTextareaValueAndTrigger(wrapper, 'updated')
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted?.[0]).toContain('updated')
})
it('emits update:modelValue on input', async () => {
const widget = createMockWidget('start')
const wrapper = mountComponent(widget, 'start')
await setTextareaValueAndTrigger(wrapper, 'finish', 'input')
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted?.[0]).toContain('finish')
expect(callback).toHaveBeenCalledExactlyOnceWith(specialText)
})
})
@@ -201,39 +150,36 @@ describe('WidgetTextarea Value Binding', () => {
describe('Edge Cases', () => {
it('handles very long text', async () => {
const widget = createMockWidget('short')
const callback = vi.fn()
const widget = createMockWidget('short', {}, callback)
const wrapper = mountComponent(widget, 'short')
const longText = 'a'.repeat(10000)
await setTextareaValueAndTrigger(wrapper, longText)
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted?.[0]).toContain(longText)
expect(callback).toHaveBeenCalledExactlyOnceWith(longText)
})
it('handles unicode characters', async () => {
const widget = createMockWidget('ascii')
const callback = vi.fn()
const widget = createMockWidget('ascii', {}, callback)
const wrapper = mountComponent(widget, 'ascii')
const unicodeText = '🎨 Unicode: αβγ 中文 العربية 🚀'
await setTextareaValueAndTrigger(wrapper, unicodeText)
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted?.[0]).toContain(unicodeText)
expect(callback).toHaveBeenCalledExactlyOnceWith(unicodeText)
})
it('handles text with tabs and spaces', async () => {
const widget = createMockWidget('normal')
const callback = vi.fn()
const widget = createMockWidget('normal', {}, callback)
const wrapper = mountComponent(widget, 'normal')
const formattedText = '\tIndented line\n Spaced line\n\t\tDouble indent'
await setTextareaValueAndTrigger(wrapper, formattedText)
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted?.[0]).toContain(formattedText)
expect(callback).toHaveBeenCalledExactlyOnceWith(formattedText)
})
})
})

77
src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts
View File

@@ -16,7 +16,7 @@ describe('WidgetToggleSwitch Value Binding', () => {
callback?: (value: boolean) => void
): SimplifiedWidget<boolean> => {
const valueRef = ref(value)
if (callback) watch(valueRef, callback)
if (callback) watch(valueRef, (v) => callback(v))
return {
name: 'test_toggle',
type: 'boolean',
@@ -43,48 +43,6 @@ describe('WidgetToggleSwitch Value Binding', () => {
})
}
describe('Vue Event Emission', () => {
it('emits Vue event when toggled from false to true', async () => {
const widget = createMockWidget(false)
const wrapper = mountComponent(widget, false)
const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
await toggle.setValue(true)
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![0]).toContain(true)
})
it('emits Vue event when toggled from true to false', async () => {
const widget = createMockWidget(true)
const wrapper = mountComponent(widget, true)
const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
await toggle.setValue(false)
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toBeDefined()
expect(emitted![0]).toContain(false)
})
it('handles value changes gracefully', async () => {
const widget = createMockWidget(false)
const wrapper = mountComponent(widget, false)
// Should not throw when changing values
const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
await toggle.setValue(true)
await toggle.setValue(false)
// Should emit events for all changes
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toHaveLength(2)
expect(emitted![0]).toContain(true)
expect(emitted![1]).toContain(false)
})
})
describe('Component Rendering', () => {
it('renders toggle switch component', () => {
const widget = createMockWidget(false)
@@ -113,27 +71,9 @@ describe('WidgetToggleSwitch Value Binding', () => {
})
describe('Multiple Value Changes', () => {
it('handles rapid toggling correctly', async () => {
const widget = createMockWidget(false)
const wrapper = mountComponent(widget, false)
const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
// Rapid toggle sequence
await toggle.setValue(true)
await toggle.setValue(false)
await toggle.setValue(true)
// Should have emitted 3 Vue events with correct values
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toHaveLength(3)
expect(emitted![0]).toContain(true)
expect(emitted![1]).toContain(false)
expect(emitted![2]).toContain(true)
})
it('maintains state consistency during multiple changes', async () => {
const widget = createMockWidget(false)
const callback = vi.fn()
const widget = createMockWidget(false, {}, callback)
const wrapper = mountComponent(widget, false)
const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
@@ -144,13 +84,12 @@ describe('WidgetToggleSwitch Value Binding', () => {
await toggle.setValue(true)
await toggle.setValue(false)
const emitted = wrapper.emitted('update:modelValue')
expect(emitted).toHaveLength(4)
expect(callback).toHaveBeenCalledTimes(4)
// Verify alternating pattern
expect(emitted![0]).toContain(true)
expect(emitted![1]).toContain(false)
expect(emitted![2]).toContain(true)
expect(emitted![3]).toContain(false)
expect(callback).toHaveBeenNthCalledWith(1, true)
expect(callback).toHaveBeenNthCalledWith(2, false)
expect(callback).toHaveBeenNthCalledWith(3, true)
expect(callback).toHaveBeenNthCalledWith(4, false)
})
})
})