refactor(types): fix the type of wrapper.setChecked() (#788)

Author: 38elements

flow/wrapper.flow.js

@@ -37,7 +37,7 @@ declare interface BaseWrapper {
   setComputed(computed: Object): void;
   setMethods(methods: Object): void;
   setValue(value: any): void;
-  setChecked(checked: boolean): void;
+  setChecked(checked?: boolean): void;
   setSelected(): void;
   setProps(data: Object): void;
   trigger(type: string, options: Object): void;

packages/test-utils/src/wrapper-array.js

@@ -225,7 +225,7 @@ export default class WrapperArray implements BaseWrapper {
     this.wrappers.forEach(wrapper => wrapper.setValue(value))
   }
 
-  setChecked (checked: boolean): void {
+  setChecked (checked: boolean = true): void {
     this.throwErrorIfWrappersIsEmpty('setChecked')
 
     this.wrappers.forEach(wrapper => wrapper.setChecked(checked))

packages/test-utils/types/index.d.ts

@@ -74,7 +74,7 @@ interface BaseWrapper {
   setProps (props: object): void
 
   setValue (value: any): void
-  setChecked (checked: boolean): void
+  setChecked (checked?: boolean): void
   setSelected (): void
 
   trigger (eventName: string, options?: object): void

packages/test-utils/types/test/wrapper.ts

@@ -63,6 +63,7 @@ array = wrapper.findAll(ClassComponent)
 array = wrapper.findAll({ ref: 'myButton' })
 array = wrapper.findAll({ name: 'my-button' })
 
+wrapper.setChecked()
 wrapper.setChecked(true)
 wrapper.setValue('some string')
 wrapper.setSelected()

test/specs/error-wrapper.spec.js

@@ -28,6 +28,9 @@ describeWithShallowAndMount('ErrorWrapper', mountingMethod => {
     'setMethods',
     'setData',
     'setProps',
+    'setChecked',
+    'setSelected',
+    'setValue',
     'trigger',
     'destroy'
   ]

test/specs/wrapper-array/setChecked.spec.js

@@ -0,0 +1,28 @@
+import { describeWithShallowAndMount } from '~resources/utils'
+
+describeWithShallowAndMount('setChecked', mountingMethod => {
+  it('sets value to the input elements of type checkbox or radio', () => {
+    const wrapper = mountingMethod({
+      data () {
+        return {
+          t1: false,
+          t2: ''
+        }
+      },
+      template: `
+        <div>
+          <input type="checkbox" name="t1" class="foo" v-model="t1" />
+          <input type="radio" name="t2" class="foo" value="foo" v-model="t2"/>
+          <input type="radio" name="t2" class="bar" value="bar" v-model="t2"/>
+        </div>`
+    })
+    const wrapperArray = wrapper.findAll('.foo')
+    expect(wrapper.vm.t1).to.equal(false)
+    expect(wrapper.vm.t2).to.equal('')
+    wrapperArray.setChecked()
+    expect(wrapper.vm.t1).to.equal(true)
+    expect(wrapper.vm.t2).to.equal('foo')
+    expect(wrapperArray.at(0).element.checked).to.equal(true)
+    expect(wrapperArray.at(1).element.checked).to.equal(true)
+  })
+})

test/specs/wrapper-array/setSelected.spec.js

@@ -0,0 +1,24 @@
+import { describeWithShallowAndMount } from '~resources/utils'
+
+describeWithShallowAndMount('setSelected', mountingMethod => {
+  it('sets value to the option elements', () => {
+    const wrapperArray = mountingMethod({
+      template: `
+        <div>
+          <select>
+            <option/></option>
+            <option class="foo"/>a</option>
+          </select>
+          <select>
+            <option/></option>
+            <option class="foo"/>b</option>
+          </select>
+        </div>`
+    }).findAll('.foo')
+    const fn = () => wrapperArray.setSelected()
+    const message = '[vue-test-utils]: setSelected must be called on a single wrapper, use at(i) to access a wrapper'
+    expect(fn)
+      .to.throw()
+      .with.property('message', message)
+  })
+})

test/specs/wrapper-array/setValue.spec.js

@@ -0,0 +1,27 @@
+import { describeWithShallowAndMount } from '~resources/utils'
+
+describeWithShallowAndMount('setValue', mountingMethod => {
+  it('sets value to the text-control input elements', () => {
+    const wrapper = mountingMethod({
+      data () {
+        return {
+          t1: '',
+          t2: ''
+        }
+      },
+      template: `
+        <div>
+          <input type="text" name="t1" class="foo" v-model="t1" />
+          <input type="text" name="t2" class="foo" v-model="t2"/>
+        </div>`
+    })
+    const wrapperArray = wrapper.findAll('.foo')
+    expect(wrapper.vm.t1).to.equal('')
+    expect(wrapper.vm.t2).to.equal('')
+    wrapperArray.setValue('foo')
+    expect(wrapper.vm.t1).to.equal('foo')
+    expect(wrapper.vm.t2).to.equal('foo')
+    expect(wrapperArray.at(0).element.value).to.equal('foo')
+    expect(wrapperArray.at(1).element.value).to.equal('foo')
+  })
+})