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')
})
},
}