-
Notifications
You must be signed in to change notification settings - Fork 374
[test] Add component test for TreeSelect
Vue widget
#5551
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
🎭 Playwright Test Results✅ All tests passed! ⏰ Completed at: 09/16/2025, 09:33:17 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
502da31
to
cac6599
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same concern as in the other one, but it's probably fine to just prune later.
type TreeNode = { | ||
key: string | ||
label?: string | ||
data?: unknown | ||
children?: TreeNode[] | ||
leaf?: boolean | ||
selectable?: boolean | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same question as in the imagecompare PR, is this type available from within the component code?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Exported TreeNode type from component in 45dfb55
const createMockWidget = ( | ||
value: WidgetValue = null, | ||
options: Partial<TreeSelectProps> = {}, | ||
callback?: (value: WidgetValue) => void | ||
): SimplifiedWidget<WidgetValue> => ({ | ||
name: 'test_treeselect', | ||
type: 'object', | ||
value, | ||
options, | ||
callback | ||
}) | ||
|
||
const mountComponent = ( | ||
widget: SimplifiedWidget<WidgetValue>, | ||
modelValue: WidgetValue, | ||
readonly = false | ||
) => { | ||
return mount(WidgetTreeSelect, { | ||
global: { | ||
plugins: [PrimeVue], | ||
components: { TreeSelect } | ||
}, | ||
props: { | ||
widget, | ||
modelValue, | ||
readonly | ||
} | ||
}) | ||
} | ||
|
||
const setTreeSelectValueAndEmit = async ( | ||
wrapper: ReturnType<typeof mount>, | ||
value: unknown | ||
) => { | ||
const treeSelect = wrapper.findComponent({ name: 'TreeSelect' }) | ||
await treeSelect.vm.$emit('update:modelValue', value) | ||
return treeSelect | ||
} | ||
|
||
const createTreeData = (): TreeNode[] => [ | ||
{ | ||
key: '0', | ||
label: 'Documents', | ||
data: 'Documents Folder', | ||
children: [ | ||
{ | ||
key: '0-0', | ||
label: 'Work', | ||
data: 'Work Folder', | ||
children: [ | ||
{ | ||
key: '0-0-0', | ||
label: 'Expenses.doc', | ||
data: 'Expenses Document', | ||
leaf: true | ||
}, | ||
{ | ||
key: '0-0-1', | ||
label: 'Resume.doc', | ||
data: 'Resume Document', | ||
leaf: true | ||
} | ||
] | ||
}, | ||
{ | ||
key: '0-1', | ||
label: 'Home', | ||
data: 'Home Folder', | ||
children: [ | ||
{ | ||
key: '0-1-0', | ||
label: 'Invoices.txt', | ||
data: 'Invoices for this month', | ||
leaf: true | ||
} | ||
] | ||
} | ||
] | ||
}, | ||
{ | ||
key: '1', | ||
label: 'Events', | ||
data: 'Events Folder', | ||
children: [ | ||
{ key: '1-0', label: 'Meeting', data: 'Meeting', leaf: true }, | ||
{ | ||
key: '1-1', | ||
label: 'Product Launch', | ||
data: 'Product Launch', | ||
leaf: true | ||
}, | ||
{ | ||
key: '1-2', | ||
label: 'Report Review', | ||
data: 'Report Review', | ||
leaf: true | ||
} | ||
] | ||
} | ||
] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: Please move to module scope.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moved to module scope in 4674a7d
…dback Co-authored-by: DrJKL <[email protected]>
…dback Co-authored-by: DrJKL <[email protected]>
Summary
Added comprehensive test suite for WidgetTreeSelect component with 32 test cases covering tree navigation, selection modes, and edge cases.
Changes
Review Focus
Test coverage for deeply nested tree structures, special character handling, and proper Vue event emission patterns. Verify mock widget creation follows existing patterns.
┆Issue is synchronized with this Notion page by Unito