快捷導(dǎo)航

詳解Vue單元測(cè)試case寫(xiě)法

更新時(shí)間：2018年05月24日 10:25:52 作者：MarxJiao

這篇文章主要介紹了詳解Vue單元測(cè)試case寫(xiě)法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

書(shū)接上文，karma+webpack搭建vue單元測(cè)試環(huán)境介紹了vue單元測(cè)試環(huán)境搭建及查看源文件的測(cè)試覆蓋覆蓋率。今天來(lái)說(shuō)一下vue單元測(cè)試思路和case的寫(xiě)法。測(cè)試框架使用jasmine，語(yǔ)法參考。

代碼地址：https://github.com/MarxJiao/vue-karma-test/tree/spec-demo

測(cè)試關(guān)注點(diǎn)

對(duì)于vue組件，單元測(cè)試測(cè)試主要關(guān)注以下幾點(diǎn)：

vue組件加載后，各數(shù)據(jù)模型是否符合預(yù)期
定義的方法是否可用
filter是否可用
帶有props的組件，數(shù)據(jù)能否正常傳遞
異步更新DOM的情況

組件加載后的狀態(tài)

要測(cè)試組件加載后的狀態(tài)，首先我們需要將vue組件生成實(shí)例。并檢測(cè)掛載后實(shí)例的數(shù)據(jù)狀態(tài)。下面是個(gè)示例：

我們來(lái)看下src/app.vue組件的代碼：

<template>
 <div>
  <h1>{{title}}</h1>
  <vc-message :message="message"></vc-message>
 </div>
</template>

<script>
 import child from './components/child.vue'
 export default {
  data() {
   return {
    title: '標(biāo)題',
    message: '這是子組件'
   }
  },
  components: {
   'vc-message': child
  },
  mounted() {
   this.title = 'Hello world'
  },
  methods: {
   setMessage(msg) {
    this.message = msg;
   }
  }
 }
</script>

組件加載后title的值應(yīng)該變成'Hello world'，所以我們這樣來(lái)寫(xiě)測(cè)試代碼

// 引用vue
import Vue from 'vue';

// 引用要測(cè)試的組件
import app from '../../src/app.vue';

// 描述要測(cè)試的內(nèi)容
describe('test app.vue', () => {
 
 // 描述要測(cè)試的最小單元
 it('組件加載后，title應(yīng)該是Holle world', () => {

  // 這里將app生成vue實(shí)例，并使用 $mount() 模擬掛載狀態(tài)
  let vm = new Vue(app).$mount();

  // 斷言組件的title是否變?yōu)榱?Hello world'
  expect(vm.title).toEqual('Hello world');
 });
});

執(zhí)行karma start我們能看到測(cè)試通過(guò)。

測(cè)試組件里面的方法

我們知道vue將data和methods都掛在了vue實(shí)例的根節(jié)點(diǎn)下，所以測(cè)試vue組件中的方法也和上面測(cè)試狀態(tài)一樣，直接調(diào)用vm的方法就行了。我們來(lái)測(cè)試以下setMessage方法：

// 引用vue
import Vue from 'vue';

// 引用要測(cè)試的組件
import app from '../../src/app.vue';

// 描述要測(cè)試的內(nèi)容
describe('test app.vue', () => {
 
 // 描述要測(cè)試的最小單元
 it('設(shè)置message為『你好世界』', () => {

  // 這里將app生成vue實(shí)例，并使用 $mount() 模擬掛載狀態(tài)
  let vm = new Vue(app).$mount();

  // 執(zhí)行setMessage方法
  vm.setMessage('你好世界');

  // 斷言組件的message是否變?yōu)榱?你好世界'
  expect(vm.message).toEqual('你好世界');
 });
});

執(zhí)行karma start，就會(huì)看到測(cè)試成功。如果剛才沒(méi)有關(guān)閉karma的話(huà)，在watch模式下，測(cè)試會(huì)自動(dòng)進(jìn)行。

怎么樣？有沒(méi)有感覺(jué)vue單元測(cè)試非常簡(jiǎn)單，趕緊做起來(lái)吧。

filter測(cè)試

filter的測(cè)試就更簡(jiǎn)單了。filter就是純函數(shù)，有固定的輸入輸出，我們只需要執(zhí)行函數(shù)看預(yù)期結(jié)果就好了。我們?yōu)榻M件添加一個(gè)轉(zhuǎn)換大寫(xiě)的filter:

<template>
...

 <h1>{{title | upperCase}}</h1>

...

</template>

<script>

...

 filters: {
  upperCase(str) {
   return str.toUpperCase();
  }
 }

...
</script>

測(cè)試這個(gè)filter

// 引用要測(cè)試的組件
import app from '../../src/app.vue';

// 描述要測(cè)試的內(nèi)容
describe('test app.vue', () => {

 it('upperCase過(guò)濾器能把a(bǔ)pp轉(zhuǎn)換為APP', () => {

  // vue 組件export出來(lái)的是個(gè)對(duì)象，我們直接用這個(gè)對(duì)象的屬性和方發(fā)就能調(diào)用到要測(cè)試的filter
  let appStr = app.filters.upperCase('app');

  // 斷言組件的appStr是為'APP'
  expect(appStr).toEqual('APP');
 });
})

props測(cè)試

props依賴(lài)父組件，這個(gè)怎么測(cè)試呢。我們來(lái)看下vue官方提供的方法

使用Vue.extend()將組件掛載Vue構(gòu)造器上，用propsData加入props數(shù)據(jù)，之后new一個(gè)Vue實(shí)例，這樣就生成了一個(gè)獨(dú)立的帶props的vm和前面的實(shí)例一樣，可以進(jìn)行各種測(cè)試。

我們的child組件：

<template>
 <div>
  <div>{{message}}</div>
 </div>
</template>

<script>
 export default {
  props: ['message']
 }
</script>

測(cè)試child組件

// 引用vue
import Vue from 'vue';

// 引用要測(cè)試的組件
import child from '../../src/components/child.vue';

/**
 * 獲取生成的vm
 *
 * @param {Object} Component 組件
 * @param {Object} propsData props數(shù)據(jù)
 * @return {Object} vue實(shí)例
 */
function getRenderedVm (Component, propsData) {
 const Ctor = Vue.extend(Component)
 const vm = new Ctor({ propsData }).$mount()
 return vm
}

// 描述要測(cè)試的內(nèi)容
describe('test child.vue', () => {
 
 // 描述要測(cè)試的最小單元
 it('組件加載后，child組件的message應(yīng)該是「這是子組件」', () => {
  let childvm = getRenderedVm(child, {
   message: '這是message'
  });

  // 斷言組件的child組件的props是否生效
  expect(childvm.message).toEqual('這是message');
 });
});

是不是so easy.

異步更新DOM的情況

異步更新DOM的情況，參考vue官網(wǎng)的示例

使用Vue.nextTick來(lái)查看異步數(shù)據(jù)更新后dom是否變化

// 引用vue
import Vue from 'vue';

// 引用要測(cè)試的組件
import app from '../../src/app.vue';

// 描述要測(cè)試的內(nèi)容
describe('test app.vue', () => {
 
 // 異步數(shù)據(jù)更新
 it('數(shù)據(jù)更新后，視圖應(yīng)該改變', done => {

  // 這里將app生成vue實(shí)例，并使用 $mount() 模擬掛載狀態(tài)
  let vm = new Vue(app).$mount();

  // 掛載后改變title
  vm.title = 'APP';

  Vue.nextTick(() => {
   let title = vm.$el.getElementsByTagName('h1')[0]
   expect(title.textContent).toEqual('APP')
   done();
  })
 });
});

以上就是對(duì)vue組件單元測(cè)試的用例編寫(xiě)的介紹，例子舉得比較簡(jiǎn)單，主要是介紹各種情況的測(cè)試方法。

相關(guān)鏈接

karma+webpack搭建vue單元測(cè)試環(huán)境

Vue官網(wǎng)單元測(cè)試介紹

Jasmine introduction

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: