vmodel integration

[pikax]

The other day I came across a situation that I wanted to check if my input was updating the vmodel, couldn't find a way to do it on vtu, so I created this method:

// https://github.com/pikax/vue-dx-porto/blob/ae8db668599c450696774fd14376612b968067e7/src/__tests__/utils.ts#L16-L41
/**
 * Mocks the vmodel as a `ref`
 * @param wrapper 
 * @param prop 
 */
export function mockVModel<VueComponent extends ComponentPublicInstance<{ value: any }>>(wrapper: VueWrapper<VueComponent>): Ref<VueComponent['$props']['value']>;
export function mockVModel<VueComponent extends ComponentPublicInstance, P extends keyof VueComponent['$props']>(wrapper: VueWrapper<VueComponent>, prop?: P): Ref<VueComponent['$props'][P]>;
export function mockVModel<VueComponent extends ComponentPublicInstance>(wrapper: VueWrapper<VueComponent>, prop = "value") {
  const name: keyof keyof VueComponent['$props'] = prop || 'value' as any
  const vmodel = ref(wrapper.vm.$props[name])

  const e = wrapper.vm.$.emit;
  // wrapper.trigger()
  wrapper.vm.$.emit = (event, ...args) => {
    e(event, ...args)
    if (event === "update:" + name || (name.toString() === 'value' && event === "update:modelValue")) {
      wrapper.setProps({
        [name]: args[0]
      })

      vmodel.value = args[0]
    }
  }

  return vmodel;
}


//https://github.com/pikax/vue-dx-porto/blob/ae8db668599c450696774fd14376612b968067e7/src/__tests__/components/composition/Increment.spec.ts
  it('should update on button click', async () => {
    const wrapper = mount(Increment, {
      props: {
        value: 11
      },
    })

    const value = mockVModel(wrapper, 'value')
    expect(wrapper.text()).toBe("Value: 11Increment")
    wrapper.find('button').element.click()

    expect(value.value).toBe(12)

    await nextTick()

    expect(wrapper.text()).toMatch("Value: 12")
  })

It would be nice to have a way to do this automatically on vtu, I've a few proposes that I can think of.

Propose 1

We can handle the vmodel updates automatically, this would setProps automatically on the component and it would need to be disabled if not needed.

mount({
  props: {
    value: Number
  }
}, {
 props: {
   value: 0
 },

 // noVmodel: true // disables automatically updating props on `update:${prop}` event
})

Propose 2

If the user passes a ref as a prop we could start listening for vmodel

mount({
  props: {
    value: Number
  }
}, {
 props: {
   value: ref(0)
 }
})

Propose 3

Adding a new mounting prop vmodel

// listens to model value
mount({
  props: {
    modelValue: Number
  }
}, {
 vmodel: ref(0)
})


// listens to `update:${prop}`
mount({
  props: {
    value: Number,
    foo: String,
    modelValue: Number
  }
}, {
 vmodel: {
   value: ref(0),
   foo: ref('foo'),
   modelValue: ref(0)
  }
})

[lmiller1990]

I like the first one - I also think the default would be vvodel: on, which is what anyone would expect. In fact, I think this should not even be an option - why would you not want this behavior?

I am personally not a fan of adding another mounting options (like vmodel) in option (3) - more complexity for no clear trade-off.

Not entirely clear on the merits of (2), so (1) is my favorite.

[lmiller1990]

In the first proposal, how would the test look? Using the mockVModel method?

I am thinking a vModel mounting option might not be so bad, now. We should get some feedback. What do you think @pikax ?

[mHooshdar]

I read the proposals and I preferred the first one too. Calling setProps in the wrapper is exactly like the vue functionality, so we can be more confident about our tests without any extra code.

[lmiller1990]

I'd like to see a proof of concept implementation. Is this something you would like to try and implement?

[lmiller1990]

Seems this is solved here? https://github.com/vuejs/vue-test-utils-next/pull/393/files

[KaelWD]

const wrapper = mount({
  components: { Increment },
  template: `<increment v-model="value" />`,
  data: () => ({ value: 11 }),
})

expect(wrapper.text()).toBe('Value: 11Increment')
wrapper.find('button').element.click()

expect(wrapper.vm.value).toBe(12)

await nextTick()

expect(wrapper.text()).toMatch('Value: 12')

[lmiller1990]

Is this just an example? Proposal?

[KaelWD]

This is what I've been doing if I want to explicitly test v-model.

[lmiller1990]

Do you like any of the proposals or are you happy with your solution?

I like what you are doing - a bit of extra code but it works just fine. I am still not a huge fan of adding more complexity to test utils. Maybe we just recommend this as the approach to testing v-model.

[nandi95]

I don't think I like this solution. When I test a component I wanna know what's happening on its surface and not have any assumptions of its inner workings, so I would rather not test against wrapper.vm.value. Unless in rare cases when you explicitly set the expose: ['value'] because it's expected to used through a reference

[deleugpn]

Thank you! This works great!!!

[lmiller1990]

Another suggestion: #440 (comment).

Similar to #3 but not using a ref, so it is a little more simple. You'd assert against the DOM or something (where ever you are using the v-model prop).

Thoughts? If we can agree on this, I think we can implement it. Maybe @nekosaur @pikax @KaelWD?

[pikax]

I agree with the array of vmodel as an string array.

[nandi95]

This discussion is over couple of PRs and I'm not sure where it was suggested that currently we could use:
'onUpdate:modelValue': async (modelValue: any) => await wrapper.setProps({ modelValue })
to update our 2 way binding.

However there is an issue with that when an immediate watcher updates the modelValue on mount.

When the mount looks like:

const wrapper = mount(MyComp, {
    props: {
        options,
        modelValue: null,
        'onUpdate:modelValue': async (modelValue: any) => await wrapper.setProps({ modelValue })
        multi: true
    }
});

(the watcher updates the modelValue to [] if the multi is set to true.)

Here the wrapper is not yet accessible and results in:
UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "ReferenceError: Cannot access 'wrapper' before initialization".

[vincerubinetti]

@nandi95 Could the edge case you pointed out be fixed by preceding setProps with an await nextTick() or something like that?

@lmiller1990 Is the only reason you think this isn't a good solution because it's long/complex, or are there other edge cases where this would fail? Because this is the only suggestion in this thread that seems to work for me (using Vue 3, latest VTU, typescript, composition API with setup). Also, I already have my own wrapper function around mount to reduce boilerplate, and I could easily add this solution in just one spot to implement a faux vModel option into mount, so the length doesn't matter to me.

[lmiller1990]

I think it's a good solution in that you can easily implement it in user land. I wonder if we still need something in VTU at all; it seems most people are satisfied with writing a higher order mount function, that does the things the want.

What do you think?

[nandi95]

@nandi95 Could the edge case you pointed out be fixed by preceding setProps with an await nextTick() or something like that?

I'm not sure, can't even find the code anymore where this came up 😬
But you could maybe extend the exported VueWrapper and reimplement this? #393

[vincerubinetti]

Just in case this helps someone (or someone sees a fatal flaw), here is my mount function wrapper based on these discussions:

import { ComponentPublicInstance, nextTick } from "vue";
import {
  MountingOptions,
  VueWrapper,
  mount as vueMount,
} from "@vue/test-utils";
import { cloneDeep } from "lodash";
import components from "@/global/components";
import plugins from "@/global/plugins";

/** generic props type */
type Props = Record<string | number, unknown>;

/** generic vModel type */
type VModel = Record<string | number, unknown>;

/** mount wrapper with standard options */
export const mount = <Component>(
  component: Component,
  props: Props = {},
  vModel: VModel = {},
  options: MountingOptions<Props> = {}
) => {
  /** implement v-model */
  for (const [prop, value] of Object.entries(vModel)) {
    props[prop] = value;
    /** https://github.com/vuejs/test-utils/discussions/279 */
    props["onUpdate:" + prop] = async (modelValue: unknown) => {
      await nextTick();
      await wrapper.setProps({ modelValue });
    };
  }

  /** deep clone props so nested objects get new instance every mount */
  options.props = cloneDeep(props);

  /** standard globals */
  options.global = { components, plugins };

  type Wrapper = VueWrapper<ComponentPublicInstance<Component>>;
  // eslint-disable-next-line
  const wrapper: Wrapper = vueMount(component, options as MountingOptions<any>);
  return wrapper;
};

I wouldn't quite call this "easy" to implement in user-land; would certainly still be nice to have this built in.

[lmiller1990]

Types, for one, would be pretty challenging. Ideally it should be type safe. I see a lot of as any and <any> here. Users all need to make the connect that emit('update:xxx') turns into onUpdate:xxx. Finally, it's possible to emit('someRandomEvent', payload) and update the prop in the parent by listening to @someRandomEvent(val => foo = val).

It seems like this will only cover the generic case where people use the update:XXX convention (if that's the goal here, I guess it's fine).

[dvdmlln]

How about this approach?

const wrapper = mount(Increment, {
    propsData: { value: 11 },
})

wrapper.vm.$on('input', (value) => wrapper.setProps({ value }))

expect(wrapper.text()).toBe('Value: 11Increment')
wrapper.find('button').element.click()

expect(wrapper.vm.value).toBe(12)

await nextTick()

expect(wrapper.text()).toMatch('Value: 12')

[IlCallo]

I was trying to understand how to properly test Quasar UI components which rely on v-model with Cypress Component Testing and I found this thread
I created a simple adapter, inspired by the Pikax version, which works with CCT
Hope it will save some time to whoever else gets here with the same need

export function vModelAdapter (modelRef, modelName = 'modelValue') {
  watch(modelRef, (value) => Cypress.vueWrapper.setProps({ [ modelName ]: value }))

  return {
    [ modelName ]: modelRef.value,
    [ `onUpdate:${ modelName }` ]: (emittedValue) => {
      modelRef.value = emittedValue
    }
  }
}

const model = ref(null)
mount(QSelect, {
  props: {
    ...vModelAdapter(model),
    options
  }
})

[sheremet-va]

I also needed this functionality, but I am using Vitest and don't have access to mounted component inside props, so based on the ideas proposed here, I made this:

const render = (cmp: any, options: MountOptions = {}) => {
  const vModelProps: [string, Ref][] = []
  const vModelOptions = Object.entries(options?.vModel || {})

  for (const [prop, propDefault] of vModelOptions) {
    const reactiveValue = ref(propDefault)
    const props = (options.props ?? {}) as Record<string, unknown>
    props[prop] = propDefault
    props[`onUpdate:${prop}`] = (value: unknown) => {
      reactiveValue.value = value
    }

    vModelProps.push([prop, reactiveValue])

    options.props = props
  }
  
  const mounted = mount(cmp, options)
  
  if (vModelProps.length) {
    watchEffect(async () => {
      const propsValues = vModelProps.reduce((acc, [prop, reactiveValue]) => {
        acc[prop] = reactiveValue.value
        return acc
      }, {} as Record<string, unknown>)

      await mounted.setProps(propsValues)
    })
  }
  
  return mounted
}

const view = render(Component, {
  vModel: {
   modelValue: ''
  }
})

await view.find('input').input('test')

It can also be easily rewritten to pass ref instead of default value, but I usually don't need to know about internal implementation, so I didn't bother. 😄

[lmiller1990]

What do you mean by

I am using Vitest and don't have access to mounted component inside props

?

[sheremet-va]

What do you mean by

I am using Vitest and don't have access to mounted component inside props

?

I mean previous solution used global variable, which is not possible with a simple mount