[Remove Vuetify from Studio] Convert collection modal tests to Vue Testing Library#5694
[Remove Vuetify from Studio] Convert collection modal tests to Vue Testing Library#5694SheikhZaeem wants to merge 1 commit intolearningequality:unstablefrom
Conversation
|
👋 Thanks for contributing! We will assign a reviewer within the next two weeks. In the meantime, please ensure that:
We'll be in touch! 😊 |
|
|
||
| expect(wrapper.vm.$route.name).toBe(RouteNames.CHANNEL_SETS); | ||
| }); | ||
| expect(screen.getByText('Field is required')).toBeInTheDocument(); |
There was a problem hiding this comment.
This assertion depends on the exact validation copy. If the message changes but the validation behavior stays the same, this test will fail unnecessarily.
My suggestion is to assert the validation state instead (for example via a semantic role).
expect(screen.getByRole('alert')).toBeInTheDocument();
| }); | ||
| expect(await screen.findByRole('heading', { name: 'Unsaved changes' })).toBeInTheDocument(); | ||
| expect( | ||
| screen.getByText('You will lose any unsaved changes. Are you sure you want to exit?'), |
There was a problem hiding this comment.
Same I wanted to apply here .
expect(screen.getByRole('dialog')).toBeInTheDocument();
AllanOXDi
left a comment
AllanOXDi
left a comment
There was a problem hiding this comment.
Thanks @SheikhZaeem, I have left some comments.
|
|
||
| it('should prompt user if there are unsaved changes', async () => { | ||
| expect(getUnsavedDialog(wrapper).exists()).toBeFalsy(); | ||
| it('saves valid changes and returns the user to collections', async () => { |
There was a problem hiding this comment.
I think this only checks that the route changes, it never asserts that updateChannelSet or add/removeChannels is invoked with the updated name. Think about where we navigate away without persisting would still pass. Consider asserting the action call, maybe?
| expect(channelItems.at(1).html()).toContain('Channel 2'); | ||
| expect(channelItems.at(1).html()).toContain('Second channel description'); | ||
| expect(channelItems.at(1).find('button').text()).toBe('Remove'); | ||
| it('shows a validation message when user tries to create without a name', async () => { |
There was a problem hiding this comment.
The only create-related check is the “required name” validation, so regressions in commitChannelSet/$router.replace could slip by unnoticed. Adding a success-case test would be ideal as well.
|
|
||
| it("should render channels' names, descriptions and remove buttons", () => { | ||
| const channelItems = wrapper.findAllComponents({ name: 'ChannelItem' }); | ||
| expect(await screen.findByRole('heading', { name: 'Select channels' })).toBeInTheDocument(); |
There was a problem hiding this comment.
We could also test for for channel items
3 participants
Summary
Refactored channelSetModal.spec.js to use Vue Testing Library and focus on user-facing behavior instead of component internals.
Ran
pnpm test -- channelList/views/ChannelSet/tests/channelSetModal.spec.js
Ref:
Closes : #5686