fix(core): setProps validates keys against component options

[ghost]

My team and I discovered that setProps adds all given keys as values on components, whereas the propsData passed to the Vue constructor will only add properties for those that are actually defined. For example if I have this component:

<template>
  <div>{{someprop}}</div>
</template>

<script>
  export default{
    name: 'My Component',
    props: ['someprop']
  }
</script>

If I mount the component for test with options:

var testObj = mount(MyComponent, {
    propsData: {
        somewrongprop: 'value'
    }
})

Vue ignores that somewrongprop entirely. However we found that calling:

testObj.setProps({ somewrongprop: 'value' })

did add that property to the instance. This bit us a little in our TDD since the developer didn't realize they hadn't defined the property in their component because of setProp having that inconsistent behavior. Basically they could use a variable in the template that wasn't defined in data or props because setProps injected it for us.

We started using mount in more tests to avoid this, but it felt bad so here's a PR that seems to resolve the issue by having setProps check the vm.$options._propsKey value that Vue creates. I'm not sure that poking into that _propsKey collection is the best answer since that feels very private to me, but I'm not sure another way to do this check and it seems like this is important behavior for setProps for consistency. If there's another way to approach this or a good reason why setProps shouldn't have this, please let me know.

[eddyerburgh]

Great work, thanks!

I think this is a fine way to validate that props can be accepted by the component. 😀