開發的環境是採用 Vue.js 官方提供的 vue-cli 所產生的 template project，
可以參考 https://vuejs.org/v2/guide/installation.html
這篇主要做某個 Component 內含有 axios 呼叫，Mock web api 的單元測試，
第一次寫 Vue 的單元測試，若內容有誤請留言給我，謝謝。
本文開始
下列是一個畫面中，初始化會呼叫 web api 取得會員名稱的功能
src\api\memberApi.js (存放呼叫 web api 的方法)
import axios from 'axios'
export default {
getUserData() {
return axios.get('/api/Member/GetUserData').then(_ => _.data)
}
}
src\components\Member.vue (會員維護，初始化 ajax 取得會員名稱顯示在畫面中)
<template>
<div>{{ userData.name }}</div>
</template>
<script>
import memberApi from '../api/memberApi'
export default {
name: 'Member',
data() {
return {
userData: {}
}
},
created() {
this.getUserData()
},
methods: {
async getUserData() {
this.userData = await memberApi.getUserData()
}
}
}
</script>
比較特別是這裡使用 ES7 的 aysnc/await 取得非同步的資料，設定到 userData，
如同C#一樣，很多個非同步方法要按照順序呼叫時，代碼可以很輕鬆撰寫，閱讀性也高。
撰寫Member.vue測試，Mock 掉 axios request web api 的部分
test\unit\specs\Member.spec.js
import Vue from 'vue'
import nextTick from 'p-immediate'
const MemberInjector = require('!!vue-loader?inject!@/components/Member')
const MemberWithMocks = MemberInjector({
// mock ajax 回傳固定內容
'../api/memberApi': {
getUserData() {
return { name: 'jgame' }
}
}
})
describe('Member.vue', () => {
it('[會員維護]初始化ajax取得會員名稱', async () => {
const vm = new Vue(MemberWithMocks).$mount()
await nextTick()
expect(vm.$el.textContent).to.equal('jgame')
})
})
因為 Member.vue 是用 async/await，所以這裡使用 p-immediate 等待 Component 初始化完成，在取得會員名稱做斷言.
參考連結
