Merge pull request #1380 from vvanpo/set-selected

fix: Ensure setChecked() and setSelected() only trigger DOM events when state is changed (fix #1339)

Author: lmiller1990

packages/test-utils/src/wrapper.js

@@ -375,6 +375,10 @@ export default class Wrapper implements BaseWrapper {
         )
       }
 
+      if (this.element.checked === checked) {
+        return
+      }
+
       if (event !== 'click' || isPhantomJS) {
         // $FlowIgnore
         this.element.selected = true
@@ -400,6 +404,10 @@ export default class Wrapper implements BaseWrapper {
     }
 
     if (tagName === 'OPTION') {
+      if (this.element.selected) {
+        return
+      }
+
       // $FlowIgnore
       this.element.selected = true
       // $FlowIgnore

test/specs/wrapper/setChecked.spec.js

@@ -55,6 +55,43 @@ describeWithShallowAndMount('setChecked', mountingMethod => {
     expect(wrapper.find('.counter').text()).to.equal('4')
   })
 
+  it('triggers a change event when called on a checkbox', () => {
+    const listener = sinon.spy()
+
+    mountingMethod({
+      // For compatibility with earlier versions of Vue that use the `click`
+      // event for updating `v-model`.
+      template: `
+        <input
+          type="checkbox"
+          @change="listener"
+          @click="listener"
+        >
+      `,
+      methods: { listener }
+    }).setChecked()
+
+    expect(listener).to.have.been.called
+  })
+
+  it('does not trigger a change event if the checkbox is already checked', () => {
+    const listener = sinon.spy()
+
+    mountingMethod({
+      template: `
+        <input
+          type="checkbox"
+          checked
+          @change="listener"
+          @click="listener"
+        >
+      `,
+      methods: { listener }
+    }).setChecked()
+
+    expect(listener).not.to.have.been.called
+  })
+
   it('updates dom with radio v-model', async () => {
     const wrapper = mountingMethod(ComponentWithInput)
 
@@ -67,7 +104,7 @@ describeWithShallowAndMount('setChecked', mountingMethod => {
     expect(wrapper.text()).to.contain('radioFooResult')
   })
 
-  it('changes state the right amount of times with checkbox v-model', async () => {
+  it('changes state the right amount of times with radio v-model', async () => {
     const wrapper = mountingMethod(ComponentWithInput)
     const radioBar = wrapper.find('#radioBar')
     const radioFoo = wrapper.find('#radioFoo')
@@ -89,6 +126,41 @@ describeWithShallowAndMount('setChecked', mountingMethod => {
     expect(wrapper.find('.counter').text()).to.equal('4')
   })
 
+  it('triggers a change event when called on a radio button', () => {
+    const listener = sinon.spy()
+
+    mountingMethod({
+      template: `
+        <input
+          type="radio"
+          @change="listener"
+          @click="listener"
+        >
+      `,
+      methods: { listener }
+    }).setChecked()
+
+    expect(listener).to.have.been.called
+  })
+
+  it('does not trigger a change event if the radio button is already checked', () => {
+    const listener = sinon.spy()
+
+    mountingMethod({
+      template: `
+        <input
+          type="radio"
+          checked
+          @change="listener"
+          @click="listener"
+        >
+      `,
+      methods: { listener }
+    }).setChecked()
+
+    expect(listener).not.to.have.been.called
+  })
+
   it('throws error if checked param is not boolean', () => {
     const message = 'wrapper.setChecked() must be passed a boolean'
     const wrapper = mountingMethod(ComponentWithInput)

test/specs/wrapper/setSelected.spec.js

@@ -39,6 +39,44 @@ describeWithShallowAndMount('setSelected', mountingMethod => {
     expect(wrapper.text()).to.contain('selectA')
   })
 
+  it('triggers a change event on the parent select', () => {
+    const change = sinon.spy()
+
+    mountingMethod({
+      template: `
+        <select @change="change">
+          <option />
+          <option value="foo" />
+        </select>
+      `,
+      methods: { change }
+    })
+      .findAll('option')
+      .at(1)
+      .setSelected()
+
+    expect(change).to.have.been.called
+  })
+
+  it('does not trigger an event if called on already selected option', () => {
+    const change = sinon.spy()
+
+    mountingMethod({
+      template: `
+        <select @change="change">
+          <option />
+          <option selected value="foo" />
+        </select>
+      `,
+      methods: { change }
+    })
+      .findAll('option')
+      .at(1)
+      .setSelected()
+
+    expect(change).not.to.have.been.called
+  })
+
   it('throws error if element is not valid', () => {
     const message = 'wrapper.setSelected() cannot be called on this element'