fix: wrapper.setSelected() to work on select with optgroups (#715)

Author: martynling

packages/test-utils/src/wrapper.js

@@ -642,7 +642,13 @@ export default class Wrapper implements BaseWrapper {
       // $FlowIgnore
       el.selected = true
       // $FlowIgnore
-      createWrapper(el.parentElement, this.options).trigger(event)
+      if (el.parentElement.tagName === 'OPTGROUP') {
+        // $FlowIgnore
+        createWrapper(el.parentElement.parentElement, this.options).trigger(event)
+      } else {
+        // $FlowIgnore
+        createWrapper(el.parentElement, this.options).trigger(event)
+      }
     } else if (tag === 'SELECT') {
       throwError('wrapper.setSelected() cannot be called on select. Call it on one of its options')
     } else if (tag === 'INPUT' && type === 'checkbox') {

test/resources/components/component-with-input.vue

@@ -9,6 +9,15 @@
       <option value="selectB"></option>
       <option value="selectC"></option>
     </select>
+    <select v-model="selectVal" class="with-optgroups">
+      <optgroup label="Group1">
+        <option value="selectA"></option>
+        <option value="selectB"></option>
+      </optgroup>
+      <optgroup label="Group2">
+        <option value="selectC"></option>
+      </optgroup>
+    </select>
     <label id="label-el"></label>
 
     <span class="checkboxResult" v-if="checkboxVal">checkbox checked</span>

test/specs/wrapper/setSelected.spec.js

@@ -22,6 +22,17 @@ describeWithShallowAndMount('setSelected', (mountingMethod) => {
     expect(wrapper.text()).to.contain('selectA')
   })
 
+  it('updates dom with select v-model for select with optgroups', () => {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const options = wrapper.find('select.with-optgroups').findAll('option')
+
+    options.at(1).setSelected()
+    expect(wrapper.text()).to.contain('selectB')
+
+    options.at(0).setSelected()
+    expect(wrapper.text()).to.contain('selectA')
+  })
+
   it('throws error if wrapper does not contain element', () => {
     const wrapper = mountingMethod({ render: (h) => h('div') })
     const div = wrapper.find('div')