Merge pull request #133 from vuejs/feat/set-model-value

feat: add setValue for setting v-model on Vue component form elements

Author: lmiller1990

src/vue-wrapper.ts

@@ -197,6 +197,13 @@ export class VueWrapper<T extends ComponentPublicInstance> {
     return nextTick()
   }
 
+  setValue(value: any, prop?: string): Promise<void> {
+    const propEvent = prop || 'modelValue'
+    // @ts-ignore
+    this.vm.$emit(`update:${propEvent}`, value)
+    return this.vm.$nextTick()
+  }
+
   trigger(eventString: string, options?: TriggerOptions) {
     const rootElementWrapper = new DOMWrapper(this.element)
     return rootElementWrapper.trigger(eventString, options)

tests/setValue.spec.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h } from 'vue'
-import { mount } from '../src'
+import { mount, shallowMount } from '../src'
 import ComponentWithInput from './components/ComponentWithInput.vue'
 
 describe('setValue', () => {
@@ -177,4 +177,64 @@ describe('setValue', () => {
     const fn = () => input.setValue('')
     expect(fn).toThrowError(message)
   })
+
+  describe('on component instance', () => {
+    const PlainInputComponent = defineComponent({
+      props: ['modelValue'],
+      template: '<div>{{ modelValue }}</div>'
+    })
+
+    const MultiInputComponent = defineComponent({
+      props: ['foo', 'bar'],
+      template: '<div>{{ foo }} {{ bar }}</div>'
+    })
+
+    const Component = defineComponent({
+      template:
+        '<PlainInputComponent v-model="plain" /><MultiInputComponent v-model:foo="foo" v-model:bar="bar" />',
+      data() {
+        return {
+          plain: null,
+          foo: null,
+          bar: null
+        }
+      },
+      components: { PlainInputComponent, MultiInputComponent }
+    })
+
+    describe('mount', () => {
+      it('triggers a normal `v-model` on a Vue Component', async () => {
+        const wrapper = mount(Component)
+        const plain = wrapper.findComponent(PlainInputComponent)
+        await plain.setValue('plain-value')
+        expect(wrapper.text()).toContain('plain-value')
+      })
+
+      it('triggers `v-model:parameter` style', async () => {
+        const wrapper = mount(Component)
+        const multiInput = wrapper.findComponent(MultiInputComponent)
+        await multiInput.setValue('fooValue', 'foo')
+        await multiInput.setValue('barValue', 'bar')
+        expect(multiInput.text()).toContain('fooValue')
+        expect(multiInput.text()).toContain('barValue')
+      })
+    })
+    describe('shallowMount', () => {
+      it('triggers a normal `v-model` on a Vue Component', async () => {
+        const wrapper = shallowMount(Component)
+        const plain = wrapper.findComponent(PlainInputComponent)
+        await plain.setValue('plain-value')
+        expect(wrapper.vm.plain).toEqual('plain-value')
+      })
+
+      it('triggers `v-model:parameter` style', async () => {
+        const wrapper = shallowMount(Component)
+        const multiInput = wrapper.findComponent(MultiInputComponent)
+        await multiInput.setValue('fooValue', 'foo')
+        await multiInput.setValue('barValue', 'bar')
+        expect(wrapper.vm.foo).toEqual('fooValue')
+        expect(wrapper.vm.bar).toEqual('barValue')
+      })
+    })
+  })
 })