listeners option on mount, better v-model support

[mHooshdar]

Hello
I read the documenation but I couldn't find the listeners attribute in the mount option.
It was on v1 but we I couldn't find it for v2.
Do we have an alternative way to listen for the emitted events on the mounted component?

[lmiller1990]

Hi! $listeners is deprecated in Vue 3.

Generally you use emitted to listen for emitted events. Does this work for your use case?

[mHooshdar]

Thanks for your help
I wanted to test some side effects of the update:modelValue event.
I tried this and it fixed my problem:
mount(Component, { props, attrs: { 'onUpdate:modelValue' (value) { // something }, }, });

I think this should be added to the migration section of the documentation and add a link to this section.

[afontcu]

Hi! Could you share your use case (component / test)?

[lmiller1990]

Yes, please share your component/test, please! I normally do something like expect(wrapper.emitted()['onUpdate:modelValue'][0]).toBe(...) for example.

I think some better features to test v-model would be good. You could add your ideas to this discussion.

[mHooshdar]

I have a component that opens a dropdown on the pill title click.
After clicking on one of the dropdown items, it will be selected and then the dropdown is closed.
I wanted to write a test for checking the call of the dropdown close function.

This is some part of my component code:

export default defineComponent({
    props: {
        modelValue: {
            type: String,
            default: undefined,
        },
    },

    emits: ['update:modelValue'],

    setup (props, { emit }) {
        const dropdown = ref(null);
        const localValue = useVModel(props, 'modelValue', emit);

        watch(localValue, () => {
            // I wanted to test this function  when the localValue is changed 👇
            dropdown.value.close();
        });

        return {
            localValue,
            dropdown,
        };
    },
});
</script>

And this is some part of my test:

test('should change pill title when click on a menu item', async () => {
    const wrapper = factory();
    wrapper.vm.$refs.dropdown.close = jest.fn();

    expect(pillElement.props('title')).toBe('title');
    expect(pillElement.props('active')).toBe(false);

    // open dropdown
    pillElement.trigger('click');
    await wrapper.vm.$nextTick();
    const menuElement = wrapper.findComponent(Menu);

    // select one item from menu and close dropdown
    expect(wrapper.vm.$refs.dropdown.close).not.toBeCalled();
    // select the menu item in this section
    await menuElement.vm.$emit('update:modelValue', 'value1');

    expect(wrapper.emitted('update:modelValue')).toEqual([['value1']]);
    // I wanted to test this part 👇
    expect(wrapper.vm.$refs.dropdown.close).toBeCalled();

    // pill has new title
    expect(pillElement.props('title')).toBe('text1');
    expect(pillElement.props('active')).toBe(true);
});

Because the localValue is a computed variable, the watch function will not be called, so we need to change the modelValue prop and after that, the watch will be called.
So I need to call setProps on update:localValue event and test the functionality of the watch section.

As I said above, I mount the component with the onUpdate:modelValue event listener:

const wrapper = mount(Component, {
    props,
    attrs: {
        'onUpdate:modelValue' (value) {
            wrapper.setProps({ modelValue: value });
        },
    },
})

I think testing the local computed value on changing v-model is a regular use case.
So it's better to add something in the documentation for it or create a better way for testing it (like the link you sent about v-model)

[lmiller1990]

Ongoing discussion: #279

I proposed we implement one of the proposals. I can do it when I have a chance, but if you (or someone reading this) wants this badly, feel free to make a proof-of-concept. I think some discussion is still needed on the API.

[mHooshdar]

Ongoing discussion: #279

I proposed we implement one of the proposals. I can do it when I have a chance, but if you (or someone reading this) wants this badly, feel free to make a proof-of-concept. I think some discussion is still needed on the API.

I'll implement one of the proposals and create a pull request for it.

[lmiller1990]

Sure, thanks. I cannot guarantee said PR will be accepted as-is, some discussion is needed, but this is a good start.

[lmiller1990]

Probably won't be doing this at this point. We can re-open if it comes up again. For now, the focus is stability and maintainability of the existing API.

[dospunk]

I would petition for this to be reopened, it seems like a significant blind spot not to be able to test such a central feature of Vue without workarounds.

[lmiller1990]

Happy to reopen if we have something more to discuss - we need a better proposal/API, so far what's been suggested is far from ideal.

Any ideas? I'd recommend a fresh issue at this point that links back to this one to keep the discussion clear. I'd really like to see an API proposal though - without one, an issue is likely just to get stale and closed.