Vue Test Utils

Vue Test Utils笔记

test

VUE中的测试

• 端到端的测试（E2E）
  • 黑盒测试 从UI界面的角度进行测试 E2E比较少的一般
• 单元测试（Unit Test）
  • 测试驱动开发 单元测试就是对一个模块,一个函数,或者一个类进行正确性的测试工作
  • Vue中的单元测试主要使用两个工具 分别是（Karma + Mocha）

Karma

• Karma是一个基于Nodejs的js测试管理工具 该工具在vue中主要作用就是将项目运行在各种浏览器web进行测试

Mocha

• Mocha 是一个测试框架 在vue-cli中配合
• Mocha 本身不带断言库 所以必须先引入断言库 Chai断言库实现单元测试

断言库

• 断言 就是判断源代码的实际执行结果是否和预期结果一致 如果不一致就抛出一个错误，

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

• chai是一种断言库 所以测试用例都应该含有一句或者多个断言，他是编写测试用例的关键。断言功能由断言库来实现。

Vue 初始化测试

• npm

• 我们要测试哪个组件就要保证组件名称和测试文件要保持一致

• 后缀要加上 spec.js 的后缀 确保是测试文件

  // 引用vue的需要测试的组件
  import Vue from 'vue'
  import HelloWord from '@/components/HelloWorld'
  // 创建测试套件 一个测试组件写一个测试套件
  describe('测试套件的名称',() => {
      // 测试用例 用来测试不同的方法或者显示不同的内容
      it('should render corrent contents', () => {
          // 通过vue来渲染helloWorld
          const Constructor = Vue.extend(HelloWorld)
          const vm = new Constructor().$mount()
          // 判断页面中是否有 msg 渲染出来的内容
          expect(vm.$el.querySelector('.hello h1').textContent).to.equal('Welcome...')
      })
  })
  
  

• npm run unit 运行项目

Vue使用测试步骤

• 初始化项目
• 测试用例报告
  • 完成了 测试之后 可以查看到 测试用例报告(index.html)

Vue-text-utils

• 页面引用子组件就是 引入加注册组件就可以有效果展示了

查看功能测试

• 下载一个 官方的 测试工具包

  • 新建一个 页面名称.spec.js 的测试文件

  // 只要有引用了 就可以不用再引用 Vue 了 
  // 然后引用 vue 的测试工具就可以了
  import { mount } from '@vue/test-utils'
  
  // 引用 需要测试的组件 页面名称.vue
  import todoMVC from '@/components/todoMVC.vue'
  
  // 创建测试套件
  describe('TodoMVC测试套件',()=>{
      // 创建不同的测试用例
      // 测试查看功能的用例
      it('测试查看功能',()=>{
          // 通过 mount 将组件渲染出来
          const wrapper = mount(todoMVC);
          
          // 寻找指定的 DOM元素  
          // console.log(wrapper.find('.todo-list)) 
          // 如果能找到说明 wrapper 就是我们组件里面的内容
          // 通过VM 寻找 data中的数据
          // console.log(wrapper.vm)    // vm就是 vue在处理data的时候包含的所有元素
          // console.log(wrapper.vm.todos)
          
          // 然后通过 expect 做断言
          expect(wrapper.vm.todos.length).to.be.equal(2);
      })
  })
  
  

删除功能测试

// 创建测试套件
describe('TodoMVC测试套件',()=>{
    // 创建不同的测试用例
    // 测试删除功能的用例
    it('测试查看功能',()=>{
        // 通过mount将组件渲染出来
        const wrapper = mount(todoMVC);
        // 找到删除按钮 做点击事件
        // 删除按钮点击       如果列数变少 就表示删除事件成功了
        console.log(wrapper.find(".destroy"))  // 先打印一下这个button 然后看一下
        // 找到删除按钮
        const delbtn = wrapper.find(".destroy")
        // 删除按钮点击
        delbtn.trigger('click')
        // 验证 todos 中有数据被删除   expect 做断言
        expect(wrapper.vm.todos.length).to.be.equal(1);
    })
})

修改功能测试

@dblclick() 双击修改样式实现方式
双击的时候传递已给 todo的样式值 然后 判断相等进行样式变动 然后另外一个就已经是不相等了然后就不会改变样式

// 创建测试套件
describe('TodoMVC测试套件',()=>{
    // 创建不同的测试用例
    // 测试修改功能的用例
    it('测试修改功能',()=>{
        // 通过mount将组件渲染出来
        const wrapper = mount(todoMVC);
        // 找到li标签 -> 然后找到label标签
        const li = wrapper.find("li")
        const label = li.find("label")
        // 给label标签双击事件
        label.trigger('dblclick');
        // 查看label 标签是否含有 editing 样式
        // console.log(li.classes() === "");
        // 判断这个东西是否存在数组里面include判断包含 然后进行 npm run unit 测试
        expect(li.classes()).to.be.include('editing');
    })
}）