Adding method to set data object

[shortdiv]

What problem does this feature solve?

Currently, setData only works with setting single data values, but it doesn't allow for setting objects. For example, given { text : { message: 'null' } }, I can't set the data with setData without mutating the entire object; i.e. setData({ text: { message: 'hello' } }).

This is problematic because I might want to append a k/v pair to an object while still preserving existing k/v pairs. While this functionality is available via "vanilla vue" through wrapper.vm.$set(obj, key, value), it feels like an inconsistency given that you can set data using setData otherwise.

What does the proposed API look like?

The proposed API adds a setDataObj method to vue-test-utils thereby allowing you to set data if updating an object rather than a value. It would be very similar to Vue.set or vm.$set but be more consistent with how data is currently set in tests.

setDataObj(obj, key, value)

[shortdiv]

I implemented a proof of concept, to make sure this could work -> shortdiv@ca44136

[eddyerburgh]

This is a good idea.

Instead of adding a new method, I think we should change the behavior of setData to not overwrite objects.

[shortdiv]

Sweet! I'll update my code and submit a PR for this

[johnyluyte]

Hello,

Using 1.0.0-beta.16, I'm having similar problem with setData(), not with Object, but with Arrays.

My Component:

data() {
  return {
    items: [
      { id: 1, name: "Apple" },
      { id: 2, name: "Banana" }
    ]
  }
}

Testing:

wrapper.setData({
  items: []
})
// What's wrong: Does not clear the items array
// wrapper.vm.items
// { id: 1, name: "Apple" },
// { id: 2, name: "Banana" }

wrapper.setData({
  items: [
    { id: 1, name: "SuperWatermelon" }
  ]
})
// What's wrong: Modified the 1st item, but didn't remove the 2nd item.
// wrapper.vm.items
// { id: 1, name: "SuperWatermelon" },
// { id: 2, name: "Banana" }

wrapper.setData({
  items: [
    { id: 1, name: "Dog" }
    { id: 2, name: "Cat" }
  ]
})
// What's wrong: Nothing, this one is successful
// wrapper.vm.itees
// { id: 1, name: "Dog" },
// { id: 2, name: "Cat" }

wrapper.setData({
  items: [
    { id: 1, name: "Dog" }
    { id: 2, name: "Cat" },
    { id: 3, name: "Mouse" },
    { id: 4, name: "Horse" },
  ]
})
// What's wrong: The 1st and 2nd items are modified, but didn't add 3rd and 4th items
// wrapper.vm.items
// { id: 1, name: "Dog" },
// { id: 2, name: "Cat" }

If I move the items variable from data() to props, and use setProps() instead of setData(). Then everything will work as expected.

So I suppose this has something to do with Vue Component Reactivity.

Has this been fixed in #565 ? or should I open another issue? or is this an intended behavior? Thanks you.

[lchanmann]

@johnyluyte, I observed the same. A probable fix is on the way #604.