Vue Test Utils筆記

test

VUE中的測試

• 端到端的測試（E2E）
  • 黑盒測試 從UI界面的角度進(jìn)行測試 E2E比較少的一般
• 單元測試（Unit Test）
  • 測試驅(qū)動開發(fā) 單元測試就是對一個模塊,一個函數(shù),或者一個類進(jìn)行正確性的測試工作
  • Vue中的單元測試主要使用兩個工具 分別是（Karma + Mocha）

Karma

• Karma是一個基于Nodejs的js測試管理工具 該工具在vue中主要作用就是將項(xiàng)目運(yùn)行在各種瀏覽器web進(jìn)行測試

Mocha

• Mocha 是一個測試框架 在vue-cli中配合
• Mocha 本身不帶斷言庫 所以必須先引入斷言庫 Chai斷言庫實(shí)現(xiàn)單元測試

斷言庫

• 斷言 就是判斷源代碼的實(shí)際執(zhí)行結(jié)果是否和預(yù)期結(jié)果一致 如果不一致就拋出一個錯誤暂题，

  var expect = require('chai').expect;
  expect(1+1).to.bt.equal(2);
  

• chai是一種斷言庫 所以測試用例都應(yīng)該含有一句或者多個斷言亿乳，他是編寫測試用例的關(guān)鍵伸辟。斷言功能由斷言庫來實(shí)現(xiàn)熄守。

Vue 初始化測試

• npm

• 我們要測試哪個組件就要保證組件名稱和測試文件要保持一致

• 后綴要加上 spec.js 的后綴 確保是測試文件

  // 引用vue的需要測試的組件
  import Vue from 'vue'
  import HelloWord from '@/components/HelloWorld'
  // 創(chuàng)建測試套件 一個測試組件寫一個測試套件
  describe('測試套件的名稱',() => {
      // 測試用例 用來測試不同的方法或者顯示不同的內(nèi)容
      it('should render corrent contents', () => {
          // 通過vue來渲染helloWorld
          const Constructor = Vue.extend(HelloWorld)
          const vm = new Constructor().$mount()
          // 判斷頁面中是否有 msg 渲染出來的內(nèi)容
          expect(vm.$el.querySelector('.hello h1').textContent).to.equal('Welcome...')
      })
  })
  
  

• npm run unit 運(yùn)行項(xiàng)目

Vue使用測試步驟

• 初始化項(xiàng)目
• 測試用例報(bào)告
  • 完成了 測試之后 可以查看到 測試用例報(bào)告(index.html)

Vue-text-utils

• 頁面引用子組件就是 引入加注冊組件就可以有效果展示了

查看功能測試

• 下載一個 官方的 測試工具包

  • 新建一個 頁面名稱.spec.js 的測試文件

  // 只要有引用了 就可以不用再引用 Vue 了 
  // 然后引用 vue 的測試工具就可以了
  import { mount } from '@vue/test-utils'
  
  // 引用 需要測試的組件 頁面名稱.vue
  import todoMVC from '@/components/todoMVC.vue'
  
  // 創(chuàng)建測試套件
  describe('TodoMVC測試套件',()=>{
      // 創(chuàng)建不同的測試用例
      // 測試查看功能的用例
      it('測試查看功能',()=>{
          // 通過 mount 將組件渲染出來
          const wrapper = mount(todoMVC);
          
          // 尋找指定的 DOM元素  
          // console.log(wrapper.find('.todo-list)) 
          // 如果能找到說明 wrapper 就是我們組件里面的內(nèi)容
          // 通過VM 尋找 data中的數(shù)據(jù)
          // console.log(wrapper.vm)    // vm就是 vue在處理data的時候包含的所有元素
          // console.log(wrapper.vm.todos)
          
          // 然后通過 expect 做斷言
          expect(wrapper.vm.todos.length).to.be.equal(2);
      })
  })
  
  

刪除功能測試

// 創(chuàng)建測試套件
describe('TodoMVC測試套件',()=>{
    // 創(chuàng)建不同的測試用例
    // 測試刪除功能的用例
    it('測試查看功能',()=>{
        // 通過mount將組件渲染出來
        const wrapper = mount(todoMVC);
        // 找到刪除按鈕 做點(diǎn)擊事件
        // 刪除按鈕點(diǎn)擊       如果列數(shù)變少 就表示刪除事件成功了
        console.log(wrapper.find(".destroy"))  // 先打印一下這個button 然后看一下
        // 找到刪除按鈕
        const delbtn = wrapper.find(".destroy")
        // 刪除按鈕點(diǎn)擊
        delbtn.trigger('click')
        // 驗(yàn)證 todos 中有數(shù)據(jù)被刪除   expect 做斷言
        expect(wrapper.vm.todos.length).to.be.equal(1);
    })
})

修改功能測試

@dblclick() 雙擊修改樣式實(shí)現(xiàn)方式
雙擊的時候傳遞已給 todo的樣式值 然后 判斷相等進(jìn)行樣式變動 然后另外一個就已經(jīng)是不相等了然后就不會改變樣式

// 創(chuàng)建測試套件
describe('TodoMVC測試套件',()=>{
    // 創(chuàng)建不同的測試用例
    // 測試修改功能的用例
    it('測試修改功能',()=>{
        // 通過mount將組件渲染出來
        const wrapper = mount(todoMVC);
        // 找到li標(biāo)簽 -> 然后找到label標(biāo)簽
        const li = wrapper.find("li")
        const label = li.find("label")
        // 給label標(biāo)簽雙擊事件
        label.trigger('dblclick');
        // 查看label 標(biāo)簽是否含有 editing 樣式
        // console.log(li.classes() === "");
        // 判斷這個東西是否存在數(shù)組里面include判斷包含 然后進(jìn)行 npm run unit 測試
        expect(li.classes()).to.be.include('editing');
    })
}）