[Vue.js] 撰寫含有 Ajax 的 Component 單元測試

開發的環境是採用 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 初始化完成,在取得會員名稱做斷言.

 

參考連結

Testing with Mocks 

Testing Single-File Vue Components in Node