[test] Add component tests for some Vue Widget components #5409
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dosubot
bot
added
the
size:XL
🎭 Playwright Test Results✅ All tests passed across all browsers! ⏰ Completed at: 09/07/2025, 06:04:55 AM UTC 📊 Test Reports by Browser🎉 Your tests are passing across all browsers! |
benceruleanlu
previously approved these changes
Sep 6, 2025
DrJKL
previously approved these changes
Sep 7, 2025
There was a problem hiding this comment.
The tests in here look pretty good, but it's kind of hard to see what differentiates one from another when there's so much similarity in the arrange/act sections
You already have a convenience setup function for the widget data, what about one for the wrapper too?
There was a problem hiding this comment.
You could probably have a similar utility to batch the operations like finding the child element, setting value, then blurring. If that's the standard, anything that deviates will stand out as interesting.
| }) | ||
|
|
||
| const input = wrapper.find('input[type="text"]') | ||
| expect((input.element as HTMLInputElement).disabled).toBe(true) |
There was a problem hiding this comment.
This could be inside an instanceof gate
There was a problem hiding this comment.
Done in 77b0207
| callback | ||
| }) | ||
|
|
||
| const mountComponent = ( |
Comment on lines
115
to
116
| const input = wrapper.find('input[type="number"]') | ||
| expect((input.element as HTMLInputElement).value).toBe('42') |
There was a problem hiding this comment.
If you moved these into an assertion utility, you could explicitly check that input.element instanceof HTMLInputElement and throw otherwise.
There was a problem hiding this comment.
Done in 77b0207
…@DrJKL's review feedback - Add mountComponent utility function for consistent test setup - Add setInputValueAndTrigger helper to batch common test operations - Replace type assertions with proper instanceof checks for type safety - Remove duplicate test setup code to improve test readability - Fix TypeScript errors in WidgetSlider tests These changes address all review comments by making tests easier to read and understand while ensuring proper type checking.
christian-byrne
dismissed stale reviews from DrJKL and benceruleanlu
via
77b0207
christian-byrne
commented
Sep 7, 2025
Comment on lines
90
to
116
| it('disables components in readonly mode', () => { | ||
| const widget = createMockWidget(5) | ||
| const wrapper = mountComponent(widget, 5, true) | ||
|
|
||
| const slider = wrapper.findComponent({ name: 'Slider' }) | ||
| expect(slider.props('disabled')).toBe(true) | ||
|
|
||
| const input = wrapper.find('input[type="number"]') | ||
| expect((input.element as HTMLInputElement).disabled).toBe(true) | ||
| }) | ||
| }) | ||
|
|
||
| describe('Component Rendering', () => { | ||
| it('renders slider and input components', () => { | ||
| const widget = createMockWidget(5) | ||
| const wrapper = mountComponent(widget, 5) | ||
|
|
||
| expect(wrapper.findComponent({ name: 'Slider' }).exists()).toBe(true) | ||
| expect(wrapper.find('input[type="number"]').exists()).toBe(true) | ||
| }) | ||
|
|
||
| it('displays initial value in input field', () => { | ||
| const widget = createMockWidget(42) | ||
| const wrapper = mountComponent(widget, 42) | ||
|
|
||
| const input = wrapper.find('input[type="number"]') | ||
| expect((input.element as HTMLInputElement).value).toBe('42') |
There was a problem hiding this comment.
Removed duplicate tests
- Add mountComponent utility function for consistent test setup - Add setSelectValueAndEmit helper to batch select operations - Remove repetitive mount boilerplate code throughout tests - Maintain existing test coverage while improving readability This ensures all widget component tests follow the same patterns established in WidgetInputText and WidgetSlider tests.
Merged
snomiao
pushed a commit
that referenced
this pull request
Sep 12, 2025
* add component tests for vue widgets * [refactor] improve widget test readability and type safety - addresses @DrJKL's review feedback - Add mountComponent utility function for consistent test setup - Add setInputValueAndTrigger helper to batch common test operations - Replace type assertions with proper instanceof checks for type safety - Remove duplicate test setup code to improve test readability - Fix TypeScript errors in WidgetSlider tests These changes address all review comments by making tests easier to read and understand while ensuring proper type checking. * [refactor] apply consistent test patterns to WidgetSelect.test.ts - Add mountComponent utility function for consistent test setup - Add setSelectValueAndEmit helper to batch select operations - Remove repetitive mount boilerplate code throughout tests - Maintain existing test coverage while improving readability This ensures all widget component tests follow the same patterns established in WidgetInputText and WidgetSlider tests.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds component tests for some Vue Widget components.
Changes
Review Focus
┆Issue is synchronized with this Notion page by Unito