How would you trigger a select element?

[ay13]

<select @change="onSelect($event.target.value)">
  <option v-for="option in options" :value="option.value" :key="option.value">{{option.label}}</option>
</select>

I am passing in the options through propsData just fine in my first test.

Next, I want to trigger a change on the select and choose the second one in the list which will trigger the change event and pass the value to a method I have. I cant find an example of how to do that.

[eddyerburgh]

wrapper.findAll('option').at(1).trigger('change')

Further questions like this should be asked at StackOverflow.

[ariera]

For me this works fine when running it on Chrome, but with PhantomJS the event doesn't seem to get emitted. In other words, wrapper.emitted().input[0] would be undefined.

My work around was to do things manually with raw JavaScript:

const select = wrapper.find('select').element
select.value = 'myValue'
select.dispatchEvent(new Event('change'))

Could this be a bug?

[eddyerburgh]

Potentially, would you be able to add a failing test and a fix?

[ariera]

"Potentially" is a very broad word :)
Let me start with something smaller, to see if this makes sense, and then maybe you can guide me into converting it into a real PR. Check this proof of concept, that tries to replicate my original scenario.

ariera@8e7d524

Does that make sense to you? Am I doing something obviously wrong (in terms of using the library)? Is this a bug on vue-test-utils or rather an issue on PhantomJS?

By the way, running tests with PhantomJS breaks one more test: https://github.com/vuejs/vue-test-utils/blob/dev/test/unit/specs/mount/options/listeners.spec.js#L14

[eddyerburgh]

Thanks for this. It looks like a difference between how Chrome and phantom propagate events.

I'm not sure it's a bug, as I believe you can solve your issue by calling .trigger on the select wrapper.

Maybe we should reintroduce phantom as a test runner to avoid broken tests in phantom 🤔

[gsccheng]

I'm having the same problem using the mocha-webpack testrunner and require('jsdom-global')() as described in the docs.