vue学习—单元测试

参考1111

karma 单元测试

# 1, 初始化时，需要选择打开test功能，然后选择karma测试
vue init  webpack  testtodo 

# 2, 运行测试，test目录会出现coverage--icov-report--index.html 
# 浏览器打开这个index.html，可以查看所有的测试地方
npm run unit

# 3, 安装vue.js 官方的单元测试实用工具库
npm  install  --save-dev    @vue/test-utils@1.0.0-beta.12

mocha 是个测试框架，本身不带断言层，所以需要引进Chai 断言库实现单元测试

笔记总结

• Util.js 方法包含了大多数Vue组件化的测试需求。

• vm.$elvm.$nextTick 和 vm.$ref都是在测试过程中比较常用的一些Vue语法糖。需要注意：vm.$nextTick 方法是异步的，所以需要在里面使用done方法。

• 异步断言，方法参数需要是 _ 或者 done

• 大多数时候查询元素通过 querySelector 方法查询class获得
  vm.$el.querySelector(’.el-breadcrumb’).innerText

• 大多数情况下查询是否存在某个Class通过 classList.contains 方法获得，查找的结果为 true 或 false

vm.$el .classList.contains(‘el-button–primary’)

• 异步测试必须以 done() 方法结尾。setTimeout 和 vm.$nextTick 是常用的异步测试。

由于 Vue 进行异步更新 DOM 的情况，一些依赖 DOM 更新结果的断言必须在 vm.$nextTick() resolve 之后进行：

// 引用vue
import Vue from 'vue';
// 引用要测试的组件
import app from '../../src/app.vue';
// 描述要测试的内容
describe('test app.vue', () => {
    // 异步数据更新
    it('数据更新后，视图应该改变', done => {
        // 这里将app生成vue实例，并使用 $mount() 模拟挂载状态
        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();
        })
    });
});

describe 的钩子（生命周期）

describe('hooks', function() {
  before(function() {
    // 在本区块的所有测试用例之前执行
  });
  after(function() {
    // 在本区块的所有测试用例之后执行
  });
  beforeEach(function() {
    // 在本区块的每个测试用例之前执行
  });
  afterEach(function() {
    // 在本区块的每个测试用例之后执行
  });
  // test cases
});

官方Demo的HelloWorld.spec.js代码

import Vue from 'vue' // 导入Vue用于生成Vue实例
import Hello from '@/components/Hello' // 导入组件
// 测试脚本里面应该包括一个或多个describe块，称为测试套件（test suite）
describe('Hello.vue', () => {
  // 每个describe块应该包括一个或多个it块，称为测试用例（test case）
  it('should render correct contents', () => {
    const Constructor = Vue.extend(Hello) // 获得Hello组件实例
    const vm = new Constructor().$mount() // 将组件挂在到DOM上
    //断言：DOM中class为hello的元素中的h1元素的文本内容为Welcome to Your Vue.js App
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')  
  })
})

单元测试实例Demo代码

学习vue单元测试–视频

<template>
    <div>
        <section class="todoapp">
            <header class="header">
                <h1>todos</h1>
                <input  v-model="newtodo"  @keyup.enter="addtodo"  class="newtodo" autofocus autocomplete="off"
                placeholder="what needs to be done?" >
            </header>
            <section class="main" >
                <ul class="todo-list">
                    <li  v-for="todo in todos"   :key="todo.id"    class="todo"   >
                        <div class="view">
                            <label>{{todo.text}}</label>
                            <button  @click="deltodo(todo)"    class="destroy">删除</button>
                        </div>
                        <input  v-model="todo.text"   class="edit"  type="text"/>
                    </li>
                </ul>
            </section>
        </section>
    </div>                        
</template>

<script>
export default {
  name: 'todoMVC',
  data () {
    return {
      todos:[
          {    id:Math.random(),  text:"CSS"   },
          {    id:Math.random(),  text:"html"  }
      ],
      newtodo:''
    }
  },
  methods:{
    addtodo:function(){
      this.todos.push(
        {
        id: Math.random(),   
        text:this.newtodo
       }
      )
      this.newtodo=''
    },
    deltodo:function(todo){
      let index = this.todos.indexOf(todo);
      this.todos.splice(index,1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,body{
  margin: 0;
  padding: 0;
}
button {
  margin: 10px  30px;
  padding: 5px;
  border: 1px;
  background: rgb(126, 167, 126);
  font-size: 100%;
}
body{
  line-height: 1.4em;
}
</style>

todoMVC.spec.js 文件—测试用例

import {mount}  from '@vue/test-utils'
import todoMVC from '@/components/todoMVC'

// 创建测试套件
describe('HelloWorld.vue', () => {

  // 创建-- 查看 --测试用例
  it('测试查看功能', () => {
    // 通过mount 将组件渲染出来
    const wrapper = mount(todoMVC);
    // 寻找制定的dom元素
    console.log(wrapper.find('.todo-list'))   
    // 通过vm查看data中的某个数据
    console.log(wrapper.vm.todos)  
    // 断言
    expect(wrapper.vm.todos.length).to.be.equal(2)
  })

  // 创建-- 增加 --测试用例
  it('测试增加功能', () => {
    // 通过mount 将组件渲染出来
    const wrapper = mount(todoMVC);
    // 1, 对newtodo进行赋值
    wrapper.setData({newtodo: 'test-word'})   
    // 2，对new-todo触发回车事件
    wrapper.find('.newtodo').trigger('keyup.enter')  
    // 3，断言，检查todos中是否有数据增加
    expect(wrapper.vm.todos.length).to.be.equal(3)
    expect(wrapper.vm.todos[2].text).to.be.equal("test-word")
    console.log(wrapper.vm.todos)
  })

  // 创建-- 删除 --测试用例
  it('测试删除功能', () => {
    // 通过mount 将组件渲染出来
    const wrapper = mount(todoMVC);
    wrapper.find('.destroy').trigger('click')
    expect(wrapper.vm.todos.length).to.be.equal(1)
  })
})