Vue-test-utils: wrapper.setSelected() triggers a change event even if the option is already selected

Created on 2 Nov 2019  路  8Comments  路  Source: vuejs/vue-test-utils

Version

1.0.0-beta.29

Reproduction link

https://codepen.io/vvanpo/pen/MWWroOK

Steps to reproduce

  1. Mount a component with a <select> element.
  2. Call setSelect() multiple times on one of the select element's options.
  3. Observe the <select> element wrapper's emitted('change').length is equal to the number of times setSelect() was called.

What is expected?

A <select> element emits a change event only when the element value has actually changed.

What is actually happening?

setSelected() triggers a change event every time it is called, regardless of whether the underlying value was changed.

Most helpful comment

If there are no objections, I'll open a PR for this.

All 8 comments

I hesitated to open this as a bug, as the documentation _is_ explicit in saying that trigger('change') is called every time: https://github.com/vuejs/vue-test-utils/blob/v1.0.0-beta.29/docs/api/wrapper/setSelected.md

However, I believe setSelected() is generally used to mimic user interaction, not programmatic interaction. So it follows that setSelected() should behave in the same way as a user interacting with a <select> element's <option>s, which I believe will only ever fire a change event if the selection has been modified.

You are correct, it only emits change event if select another option. It shouldnt be hard to see if an option is selected.

@vvanpo as you said and the docs explicitly state it triggers the change event every time I don't think this is a bug. I don't think the test-utils should keep track of data and know if something has changed between two calls. If setSelected() gets called multiple times, it's fair that it does it job multiple times.

@codebryo I am a bit split here. I agree with you on that one, yet I saw that selecting the same option does not trigger an event... Do we want to emulate a user action or explicitly do what the action states.. hmmmm @afontcu @JessicaSachs Opinions here?

If I'm not mistaken, setChecked is not sending the event if the element is already checked https://github.com/vuejs/vue-test-utils/blob/950763fe07eb1eceadd6e37c6e8b07d87b075a14/packages/test-utils/src/wrapper.js#L356-L357

...even though docs say the exact same thing regarding it being an alias of setting the right value and emitting the event.

I'd say all setXXXX methods to behave the exact same way. We could make them emulate the user or not, but in a consistent way. For the record, I'd like them to stay closer to the users.

@afontcu good find, it seems clear to me that emulating user actions is the most intuitive and useful behaviour, here.

Interestingly, that same is not true when calling setChecked() on an <input type="radio" />. It used to be, but was removed in https://github.com/vuejs/vue-test-utils/commit/ef66c261acbb9b6b789d5fd2f843cdde99d600cd#diff-f8b21801dcf5dee76bc9f5f22e227ea8L516, which looks to me like a regression.

If there are no objections, I'll open a PR for this.

Yes please, @vvanpo

Was this page helpful?
0 / 5 - 0 ratings