Vue-test-utils: Add setComputed method

[eddyerburgh]

We should add a setComputed method to set the value of a computed value.

[blocka]

A computed property should be something you test...not an invariant

On Sep 29, 2017 9:19 AM, "Edd Yerburgh" [e-mail] wrote:

We should add a setComputed method to set the value of a computed value.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-test-utils/issues/55, or mute the thread
https://github.com/notifications/unsubscribe-auth/AACounMb_7NTE8-W5Wj4tn5y5Me20M7Xks5snIwFgaJpZM4PoPjH
.

[eddyerburgh]

I agree, most of the time you should test it, but if there's a use case for setting a computed property I think we should add it.

I think @jackmellis described a use case well:

There have been times when a method relies on a computed property that is so complicated it's taken me far outside the purpose of my unit test just to get the right computed value!

[jonnyparris]

Only just saw this after creating a similar issue on the Avoriaz repo. A setComputed method is exactly what I need.

[Austio]

I can see a pragmatism to this.

I do agree with @blocka though and think that the downside with setComputed is that it is encouraging the use of computed properties in the same way you would use something like props or data. You could end up in a situation where you are unit tested 100% by setting computed and have a component that does not work. Guess it is a black box vs white box test thing.

I'm interested in the scenario/thoughts for needing this and if it would be better to create a separate component that you pass the computed property to as a prop and then test that component?

[jonnyparris]

@Austio why not make both options available and let people decide for themselves?
Ideally I could have unit level tests for all my computed and method functions (which encourages smaller single-purpose functions) _and_ have a 'component integration test' that checks all of those unit tests playing well together.

[Austio]

@jonnyparris that is a fair point, i think with the feature we should add something to documentation with some potential gotchas with it.

[eddyerburgh]

I made a PR — https://github.com/vuejs/vue-test-utils/pull/84

[lusarz]

What do you think about adding something like computedMock mounting option:
mount(Component, { computedMock: { someVariable () {return 'mocked value'}}
and use extends inside mount:

const ExtendedComponent = {
  extends: Component,
  computed: params.computed
}
return mount(ExtendedComponent);

It's only skeleton of idea, I'm not sure if it's even possible.

[eddyerburgh]

I think we should add setComputed, because we already have setData, setMethods, and setProps

[kleinjm]

Can you please add this method to docs? Thank you

[eddyerburgh]

Thanks for reminding me. I'll add it to my list.

If you are able make a PR it would be very helpful!

[jorySsense]

any hope on bringing back this feature,

What if my computed value was set by getters from vuex and im mocking the getters?

And then i want to test a watcher that is listening for changes on that value?

I would want a way to force update the computed value

[blocka]

Can't you just mock vuex in that case? Or at least mapGetters?

On Apr 17, 2018 2:36 AM, "jorySsense" [e-mail] wrote:

any hope on bringing back this feature,

What if my computed value was set by getters from vuex and im mocking the
getters?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-test-utils/issues/55#issuecomment-381782711,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AACouiwNquto6fztzBR8ghkGvBi8Xrk5ks5tpSr7gaJpZM4PoPjH
.

[jorySsense]

Sure the works for mounting but you can't trigger the watcher on mount. You need to update the reactive data that the watcher is observing. If it's a computed value, or a getter thats mocked from the store you can't force the computed value to update.

[nathan-kansu]

Whilst I agree a 'setComputed' method should be added, you actually don't need it.
Just add a 'computed' property along with your other mounting options, like so...

const wrapper = mount(Component, {
  ...
  computed: {
    foo() {
      return 'bar'
    },
  },
})

[jorySsense]

@nath-codes thats great for mounting, the issue is further explained #331