Vuejs.org: Add a testing guide

[ameesters]

So, i have been trying to find examples of unit tests and the lack of information i find disturbing...

For example, a couple of versions ago, functions and objects like ready and watch would show up green in the code coverage, and idem for the command-line coverage... now i have updated some projects to make use of mocha and suddenly my coverage dropped significantly! And further more i cannot find how to properly test ready() and watch, even the official examples do not include unit tests! I have tried asking on gitter as well, but it seems unit-testing isn't all that popular... But i really need it, since the company i work for considers Vue for a new big front-end, i need to show them that Vue is up to par with the other frameworks out there.

What i would really really need is a guide on how to properly test a single file component. For example, ready() is called by Vue itself, so should i mock this and spy on it to see if its called?! That seems like such a hassle and i would like to have the behavior that was before where it would just show up as covered... cause if there is a error in ready, stuff would already break, right?

[yyx990803]

The typical way of testing a component is rendering it with a dummy parent that feeds it props, and then asserting its behavior. ready is only called when it's inserted into the document, so make sure to do that if you want it to be covered.

[yyx990803]

Also check out http://www.slideshare.net/coulix/vuejs-testing

[ameesters]

those slides are very valuable thank you, about that ready thing, have my component mounted on a dummy parent like so:

const vm = new Vue({
    template: '<div><app></app></div>',
    components: { App }
  }).$mount()

As per the docs...
Now this is what my ready function looks like:

  ready () {
    // initial data requests:
    this.getSyncData()
    this.getImportData()
    this.getImportInformation()

    let _pollForChanges = () => {
      setTimeout(() => {
        this.checkForChanges()
        // call self:
        _pollForChanges()
      }, settings.defaultInterval)
    }

    // kick-off for the recursive function
    _pollForChanges()
  }

And this is the report output:

Now how do i make sure ready would pass? i have tried a bunch of things now and i am lost.
Cause the funny thing is, this was green before i updated it, with all test passing...

Now, after the upgrade i have run my tests again, still they all pass, but my coverage went way down. Maybe some changes were implemented that made it more strict about what code it considered tested?

[chrisvfritz]

@ameesters We've developed a testing guide for 2.0. Is that the kind of resource you were hoping for?

[chrisvfritz]

Closing this for now, but am happy to reopen pending further discussion.

[adiakritos]

Had issues with this as well. Try the created() function if you're using version 1 and can't get your computed values to get run with $mounted.