mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-03 20:51:58 +00:00
fix prop bindings on Vue nodes' gallery widgets (#5542)
* fix gallery widget navigators binding * [refactor] improve test structure and type organization - addresses @DrJKL's review feedback - Move types comment to reference component file (types already exist there) - Extract helper functions outside describe blocks as pure functions - Convert to function declarations for better clarity - Fix 0-indexed vs 1-indexed consistency in test data generation - Add placeholder for future test constants organization * [test] Add WidgetTextarea component test with improved structure - addresses @DrJKL's review feedback - Move helper functions outside describe blocks as pure function declarations - Fix options type in createMockWidget to use SimplifiedWidget['options'] instead of Partial<TextareaProps> - Replace emitted\![0] with safer emitted?.[0] optional chaining pattern - Add comprehensive test coverage for textarea value binding, events, readonly mode, and edge cases 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Update src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue Co-authored-by: Alexander Brown <drjkl@comfy.org> * [refactor] export types from component and use 0-indexed numbering - addresses @DrJKL's review feedback - Export GalleryImage and GalleryValue types from WidgetGalleria.vue component - Import types in test file instead of redefining them locally - Change image alt text from 1-indexed to 0-indexed (Image 0, Image 1, etc.) - Move helper functions outside describe blocks using function declarations - Add readonly test data constants for better test isolation - Fix type compatibility issues with readonly arrays This addresses DrJKL's review comments about: 1. Types being defined in test suite instead of component 2. Helper functions placement and clarity 3. 1-indexed numbering preference 4. Better test organization with readonly constants * [refactor] implement remaining review feedback - addresses accessibility and factory pattern suggestions - Fix accessibility: Add descriptive alt text with position context for screen readers instead of repetitive "Gallery image" (e.g., "Gallery image 2 of 5") - Implement factory pattern: Add createGalleriaWrapper() function that takes images, creates widget internally, and returns wrapper for cleaner test code - Update tests to use factory pattern for readonly constant test cases - Add proper i18n translations for galleryImage and galleryThumbnail - Use more descriptive alt text following WebAIM accessibility guidelines Addresses review comments about screen reader accessibility and test factory pattern --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
@@ -7,24 +7,26 @@ import type { SimplifiedWidget } from '@/types/simplifiedWidget'
|
||||
|
||||
import WidgetTextarea from './WidgetTextarea.vue'
|
||||
|
||||
const createMockWidget = (
|
||||
function createMockWidget(
|
||||
value: string = 'default text',
|
||||
options: Record<string, any> = {},
|
||||
options: SimplifiedWidget['options'] = {},
|
||||
callback?: (value: string) => void
|
||||
): SimplifiedWidget<string> => ({
|
||||
name: 'test_textarea',
|
||||
type: 'string',
|
||||
value,
|
||||
options,
|
||||
callback
|
||||
})
|
||||
): SimplifiedWidget<string> {
|
||||
return {
|
||||
name: 'test_textarea',
|
||||
type: 'string',
|
||||
value,
|
||||
options,
|
||||
callback
|
||||
}
|
||||
}
|
||||
|
||||
const mountComponent = (
|
||||
function mountComponent(
|
||||
widget: SimplifiedWidget<string>,
|
||||
modelValue: string,
|
||||
readonly = false,
|
||||
placeholder?: string
|
||||
) => {
|
||||
) {
|
||||
return mount(WidgetTextarea, {
|
||||
global: {
|
||||
plugins: [PrimeVue],
|
||||
@@ -39,11 +41,11 @@ const mountComponent = (
|
||||
})
|
||||
}
|
||||
|
||||
const setTextareaValueAndTrigger = async (
|
||||
async function setTextareaValueAndTrigger(
|
||||
wrapper: ReturnType<typeof mount>,
|
||||
value: string,
|
||||
trigger: 'blur' | 'input' = 'blur'
|
||||
) => {
|
||||
) {
|
||||
const textarea = wrapper.find('textarea')
|
||||
if (!(textarea.element instanceof HTMLTextAreaElement)) {
|
||||
throw new Error(
|
||||
|
||||
Reference in New Issue
Block a user