Vue.js (2) actions coverage incomplete after unit test

130 views Asked by At

using Vue.js 2 , with vue-resource

after running correctly this unit test, the coverage is incomplete as I can see in lcov-report/src/vuex/actions.js.html .., only

return api.addNewShoppingList(shoppinglist) 

is executed (1x), not the code inside the .then() block

thanks to anyone who can give me some feedback on this issue? ( if it's an issue.. or normal behavior )

actions.spec.js

    import actions from '@/vuex/actions'
    import * as types from '@/vuex/mutation_types'

    describe('actions.js', () => {
      var server, store, lists, successPost

      successPost = {'post': true}

      beforeEach(() => {
        // mock shopping lists
        lists = [{
          id: '1',
          title: 'Groceries'
        }, {
          id: '2',
          title: 'Clothes'
        }]

        // mock store commit and dispatch methods
        store = {
          commit: (method, data) => {},
          dispatch: () => {
            return Promise.resolve() // static method
          },
          state: {
            shoppinglists: lists
          }
        }
        sinon.stub(store, 'commit')
        // mock server
        server = sinon.fakeServer.create()
        server.respondWith('POST', /shoppinglists/, xhr => {
          xhr.respond(200, {'Content-Type': 'application/json'}, JSON.stringify(successPost))
        })
        server.autoRespond = true
      })

      afterEach(() => {
        store.commit.restore()
        server.restore()
      })

      describe('createShoppingList', () => {
        it('should return successful POST response', () => {
          let newList = { title: 'new list', id: '3' }
          actions.createShoppingList(store, newList).then((resp) => {
            expect(resp.body).to.eql(successPost)
          })
        })
      })
    })

actions.js

    import * as types from './mutation_types'
    import api from '../api'
    import getters from './getters'

    export default {
      populateShoppingLists: ({ commit }) => {
        return api.fetchShoppingLists().then(response => {
          commit(types.POPULATE_SHOPPING_LISTS, response.data)
        })
      },
      createShoppingList: (store, shoppinglist) => {
        return api.addNewShoppingList(shoppinglist)
        .then(() => {
          store.commit(types.ADD_SHOPPING_LIST, shoppinglist)
          store.dispatch('populateShoppingLists')
        })
      },
    }

api/index.js

    import Vue from 'vue'
    import VueResource from 'vue-resource'

    Vue.use(VueResource)

    const ShoppingListsResource = Vue.resource('http://localhost:3000/' + 'shoppinglists{/id}')

    export default {
      addNewShoppingList: (data) => {
        return ShoppingListsResource.save(data)
      }
    }

mutations.js

    import * as types from './mutation_types'
    import getters from './getters'
    import _ from 'underscore'

    export default {
      [types.POPULATE_SHOPPING_LISTS] (state, lists) {
        state.shoppinglists = lists
      },
      [types.ADD_SHOPPING_LIST] (state, newList) {
        if (_.isObject(newList)) {
          state.shoppinglists.push(newList)
        }
      }
    }

mutations.types

    export const POPULATE_SHOPPING_LISTS = 'POPULATE_SHOPPING_LISTS'
    export const ADD_SHOPPING_LIST = 'ADD_SHOPPING_LIST'

getters.js

    import _ from 'underscore'

    export default {
      getLists: state => state.shoppinglists,
    }

console

    mymac:lcov-report yves$ npm run unit

    > [email protected] unit /Users/yves/Developments/shopping-list
    > cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

    [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
    [launcher]: Launching browser PhantomJS with unlimited concurrency
    launcher]: Starting browser PhantomJS
    [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket -XTe5WWPBnSfAtg_AAAA with id 73492961

      actions.js
        ...
        createShoppingList
          ✓ should return successful POST response

    PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 13 of 13 SUCCESS (0.086 secs / 0.034 secs)
    TOTAL: 13 SUCCESS

    =============================== Coverage summary ==================
    Statements   : 64.44% ( 29/45 )
    Branches     : 50% ( 2/4 )
    Functions    : 81.25% ( 13/16 )
    Lines        : 64.44% ( 29/45 )
    ================================================================

lcov-report/src/vuex/actions.js.html

      import * as types from './mutation_types'
      import api from '../api'
      import getters from './getters'

      export default {

        createShoppingList: (store, shoppinglist) => {
    **1×    return api.addNewShoppingList(shoppinglist)**
          .then(() => {
            store.commit(types.ADD_SHOPPING_LIST, shoppinglist)
            store.dispatch('populateShoppingLists')
          })
        },
      }
0

There are 0 answers