Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Comments

[Remove Vuetify from Studio] Convert collection modal tests to Vue Testing Library#5694

Open
SheikhZaeem wants to merge 2 commits intolearningequality:unstable from
SheikhZaeem:modal-vtl-test
Open

[Remove Vuetify from Studio] Convert collection modal tests to Vue Testing Library #5694
SheikhZaeem wants to merge 2 commits intolearningequality:unstable from
SheikhZaeem:modal-vtl-test

Conversation

@SheikhZaeem
Copy link

@SheikhZaeem SheikhZaeem commented Feb 8, 2026

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:
Screenshot 2026年02月08日 at 5 21 16 PM

Closes : #5686

Copy link

👋 Thanks for contributing!

We will assign a reviewer within the next two weeks. In the meantime, please ensure that:

  • You ran pre-commit locally
  • All issue requirements are satisfied
  • The contribution is aligned with our Contributing guidelines. Pay extra attention to Using generative AI. Pull requests that don't follow the guidelines will be closed.

We'll be in touch! 😊


expect(wrapper.vm.$route.name).toBe(RouteNames.CHANNEL_SETS);
});
expect(screen.getByText('Field is required')).toBeInTheDocument();
Copy link
Contributor

@vtushar06 vtushar06 Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?'),
Copy link
Contributor

@vtushar06 vtushar06 Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same I wanted to apply here .
expect(screen.getByRole('dialog')).toBeInTheDocument();

Copy link
Member

@AllanOXDi AllanOXDi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 () => {
Copy link
Member

@AllanOXDi AllanOXDi Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 () => {
Copy link
Member

@AllanOXDi AllanOXDi Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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();
Copy link
Member

@AllanOXDi AllanOXDi Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could also test for for channel items

Copy link
Author

Thanks for the reviews, I will make the necessary changes soon

Copy link
Author

@AllanOXDi I made the relevant changes according to your review, can you check and let me know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@AllanOXDi AllanOXDi AllanOXDi left review comments

+1 more reviewer

@vtushar06 vtushar06 vtushar06 left review comments

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Remove Vuetify from Studio] Convert collection modal unit tests to Vue Testing Library

AltStyle によって変換されたページ (->オリジナル) /