VUE 单元测试

官网上推荐的是karma和jasmine,这里我写的是我们自己的手动单元测试.
我们都知道,一个项目在完成之后会进入后期的更新迭代和维护.而单元测试虽然在前期写起来会相对麻烦,但是在后期的维护过程中会简单很多,可以明显的看出是后台端口的问题还是前端自己的问题.
我们现在工程目录里建立一个测试的文件夹

这里我们建立的是apitest测试文件夹,而用户中心的测试每个人一个模块是放在UCenter下的

这里我简单的举个例子,org是组织机构的单元测试,我们在ucenter文件夹下面建立一个org.vue.我们之前曾在api的文件夹下面根据不同的模块封装了api接口,这里我们需要直接调用方法.
我们需要在页面上跑起来,所以需要创造一个组件

这里我们为了简单化,所以每个p标签里面的内容是要测试的接口和测试这个接口成功之后返回的值.我们还需要把我们要测试的api引进来

引入api之后,重点就是如何让我们的测试运行跑起来,我们现在data里面声明我们绑定的数据,初始状态为false

接下来我们就要在methods里面写测试的方法.

在这里我们写请求接口方法的时候,封装里面的方法我们返回的是所有的数据(response),所以
orgAdd.post(orgAdd.inputValue).then(function (rep) {
if(rep.data.code == 200){
this.testOrgAddParam = true;
}
}.bind(this));

then后面的req也是全部返回的数据.如果返回数据码是200的话,我们之前定义的testOrgAddParam就为true.后面的bind(this)必须写,代表指向,如果不写的话容易出现问题,当然大家也可以尝试试验一下,我这也只是按照我们的经验而谈的.最后我们需要让这个方法执行起来才能看到是否有问题.所以需要在created里面让他们在页面加载前运行起来.

你需要把你写的这个文件写在主页面和路径当中,让它可以在页面展示出来,展示的效果如下

这样效果就会直观很多.

这是就其中一个方法和接口的测试.当然如果你负责的模块有很多端口的话,你需要把所有的测试写在这一个文件当中,简单清晰.方便后期的维护.