vue小知识12.单元组件测试和示例

本文是利用vue单元测试进行组件测试用例的编写。

一 构建编程环境。

1.首先安装git命令行

2.然后按照node.js

3.配置Node环境，详细操作：https://www.geek-share.com/detail/2699359942.html

4.安装vue-cli环境：nmp install -g vue-cli 

5.新建vue项目：vue init webpack 项目名称

   接着按照提示选取需要的安装的内容。我是在 Use ESLint to lint your code 选中no，其余都是选yes

6.运行项目：

    在项目新建之后，按照提示进行运行，当显示vue界面，证明运行成功。

到此为止，用来写测试用例的环境构建完成，然后可以开始写测试用例代码

二 代码编写

  本文是结合Element的代码进行改变编写

[code]import {createVue} from '../setup'
import RegionRadio from '../components/regionRadio.vue'

describe('初始时候触发change事件', () => {
it('serviceCode=redis,并且初始regionId为空或者传参错误时，触发change事件', done => {
const vm = createVue({ //利用createVue创建一个简易版vue用例
template: `
<region-radio      //RegionRadio是我们要进行测试的组件，通过将参数传入组件之中进行测试
v-model="regionId"
@change="regionChange"
>
</region-radio>
`,
components: {   //声明组件
RegionRadio
},
data() {
return {
regionId: '',
}
},
methods: {
regionChange(val) {   //通过使用method实现change或者click等事件
this.regionId = val
}
}
});

radio.click();            //进行change事件触发
setTimeout(_ => {         //在触发事件时候进行异步操作。可以使用setTimeout或者nextTick
expect(vm.regionId).to.equal('cn-north-1');
done();                 //由于使用异步操作，必须使用done进行标识
}, 10);
})

setup.js 放入公用的代码，提高代码可读性

[code]//进行环境声明
import Vue from 'vue'

let id = 0

//进行元素构建，通过createElm可以实现vue文件构建
const createElm = function() {
const elm = document.createElement('div')

elm.id = 'app' + ++id
document.body.appendChild(elm)

return elm
}

// 创建一个 Vue 的实例对象
// @param  {Object|String}  Component   组件配置，可直接传 template
// @return {Object} vm
exports.createVue = function(Component) {
if (Object.prototype.toString.call(Component) === '[object String]') {
Component = { template: Component }
}
return new Vue(Component).$mount(createElm())
}