setData

[lmiller1990]

Ref: #52

We should implement setData to minimize breaking changes from v1 -> v2.

[afontcu]

I'd like to tackle that :) It's been a while since I've added some lines here! 🚀

[lmiller1990]

First in first served 🚀

I'll go ahead and assign you anyway :D

[afontcu]

Quick question – is this the expected behavior of setData when ran against a Composition API-based component?

const Component = defineComponent({
  template: `<div>Count is: {{ count }}</div>`,
  setup: () => ({ count: ref(1) })
})
const wrapper = mount(Component)

expect(wrapper.html()).toContain('Count is: 1')

await wrapper.setData({ count: 2 })

expect(wrapper.html()).toContain('Count is: 2')

[kerryboyko]

This issue is probably the main thing preventing our adoption of the Vue Composition API at my workplace. Please keep me updated on this.

I will say that the way that the way you've described setData working in the comment above is how I would expect it to work, yes.

[lmiller1990]

I personally don't expect this behavior to work - setData sets data in the data option (thus the name). Test Utils was really designed for the Options API - maybe we need to think about this a bit.

I see two problems to solve:

1. Implement setData in a backwards-compatible style - things that worked in V1 should work here, too. I think this is pretty easy, or, at least, it's obvious what needs to be implemented and how it should work. This is what the prompted the original issue - back compat is more important the new features (but we can have new features, too).
2. Figure out how best to support Composition API users:

• Extend setData to work like this for composition API?
• If this is the case, I think we will also need to update the data mounting option to work like this too, for consistency?
• Also, should setData only work for ref and reactive? Setting a computed property doesn't sound good.
• How does this API look? It would be nice to brainstorm some examples.

Some other ideas would be:

• setRef and setReactive. Explicit, but a larger API surface (but I like this better, setData sets data, setRef sets a ref etc...

[pikax]

2. Figure out how best to support Composition API users:

For the composition-api you probably want to batch changes and await for the render.

function setSetupState(vm, state){
  merge(vm.$setupState, state)
  return Promise.resolve();
}

• setRef and setReactive. Explicit, but a larger API surface (but I like this better, setData sets data, setRef sets a ref etc...

I would stay away from such APIs, this looks like when people try to mock ref/reactive.

---

Other way would be introducing a general method to change the vm properties and return a render promise. This method would update $data and setup

[lmiller1990]

Haven't seen $setupState, thanks. I wonder if there is any technical blockers, or is it as as simple as updating values on $setupState? Also, how about the data mounting option - that needs to work the same as setData to be consistent, which might be difficult since the dataMixin will not be applied until after setup is processed.

I am still unsure of the best approach here. Feels like this is outside the scope of setData (to me). I wonder what everyone else thinks. setSetupData would be an alternative.

Regardless, we can still implement the basic setData from v1 and continue thinking about this, exploring limitations, etc.

[afontcu]

Thanks all for your thoughts! Given the fact that setData is being ported here mostly to minimize breaking changes, here's a proposal (based on Lachlan's last comment suggestions):

- Implement setData to update data() as it happens in Vue 2.
- Make sure it does not update anything setup-related. It doesn't make much sense – starting with the method name.

We can then discuss about the fit for setSetup or any similar method, which is beyond the scope.

[kerryboyko]

Ultimately, whether it's setData, setReactive, setRef, setSetupState, or whatever, this really is key functionality, that... well, I just don't know how to do. That's the main thing - without a clear way to access (read & set) what's returned from setup() in the test suite, it's going to be hard to test things going forward.

I think that what the Vue and the Test-Utils/Vue team need to coordinate on is documenting exactly how to upgrade tests based on the Options API to the composition API.

[ddzy]

Any progress?

[lmiller1990]

setData exists and works the same as in Vue Test Utils v1.

Are you asking for progress on the class components? Please open a new issue with your minimal reproduction if you think you found a bug. No need to bump up old issues - don't be afraid to open a new one if you think there's a problem in the library.