大前端的自动化工厂(5)——基于业力+咖啡+茶的单元测试和接口测试

一。前端自动化测试

大多数前端开发者对测试相关的知识是比较缺乏的,一来是开发节奏很快,来不及写,另一方面团队里也配备了“人肉测试机”,完全没必要自己来。但随着项目体量的增大,许多人维护同一份代码,经常会出现有些函数莫名其妙地结果不对了,或者某个接口的入参变了,又或者哪位大哥把后端返回的数据结构给改了。每天工作的时间里被拉来拉去帮人定位问题,结果花了很多时间却发现大部分都是别人的锅。每当遇到项目上的线,那就更热闹了,跟着其他“人肉测试机”大家一起点点点…

很多团队都有个通病,凡是出了问题,先往前端身上推,然后前端各种检测排查,到最后是谁的锅,谁呵呵一笑然后领走就完的了,如果你也曾因此心里印下了不计其数的草泥马的马蹄印,那我强烈建议你学习【前端自动化测试】相关的知识,或许你不会经常用到它,但在组内互怼和甩锅的环节绝对能助你一臂之力。当然总有一天,你会发现测试的价值远不止这样。<强>它对大型项目提供的可靠性保障是人力无法比拟的。

　　

前端很流行这样一句话:如果你觉得单元测试没什么用,只能说明你做的项目不够大。

　　 　　

二。工具简介

　　

2.1业力 　　

官方网址:https://karma-runner.github.io/2.0/index.html

　　

<强> 为<代码>业力前端自动化测试提供了跨浏览器测试的能力强,可以自动在<代码> Chrome ,<代码> Firefox ,<代码>即等主流浏览器依次跑完测试用例,同时也支持无头浏览器(入<代码> phantomJs> webpack> 巴别塔> 业力可以为最终的结果提供验证能力。<代码> 的业力配置方式可以阅读《webpack4.0各个击破(9)——业力篇》进行了解。

　　

2.2摩卡

　　

<强> <代码>摩卡> 强,测试框架需要解决<强>兼容不同风格断言库,<强>测试用例分组,<强>同步异步测试架构,<强>生命周期钩子等框架级的能力。

　　

　　<李> <代码>摩卡> 　　

　　

 <代码类=" language-js ">描述(“我现在要测某一个页面的几个功能的,函数(){
　　描述(“现在要测XX功能的,函数(){
　　(“某个变量的值应该是数字”,函数(){//写断言
　　}）
　　}）;
　　描述(“现在要测YY功能的,函数(){
　　(“某个数组长度应该不小于10”,函数(){//写断言
　　}）
　　}）;
　　}) 

　　

　　<李>异步测试语法 　　

　　

 <代码类=" language-js ">描述(“现在要测XX功能的,函数(){
　　(“某个变量的值应该是数字”,函数(){//写断言//手动调用完成()表示异步结束,类似于中承诺的决心
　　}）
　　}); 

　　

　　<李> 　　

不同风格的断言库

　　

支持<代码> should.js ,<代码> expect.js> 断言等。

　　李 　　<李> 　　

生命周期钩子

　　

生命周期钩子一般用来建立和清理环境或全局变量。

　　李 　　

　　

 <代码类=" language-js ">
　　描述(“钩子”,函数(){
　　之前(函数(){//运行在所有测试这一块
　　}）;
　　后(函数(){//运行在所有测试这一块
　　}）;
　　beforeEach(函数(){//运行在每个测试这一块
　　}）;
　　afterEach(函数(){//运行在每个测试这一块
　　}）;//测试用例
　　}); 

　　

2.3茶

　　

<强> <代码>茶> 强,支持<代码>预计,<代码>断言,<代码> 应该断言语法,非专业测试岗位其实没必要深,究了解使用方法就可以了。使用示例:

　　

 <代码类=" language-js ">期待(bar) .to.not.exist;//断言变量杆不存在
　　期望(数据).to.have.ownProperty(长度);//断言数据有长度属性
　　期望(名字).to.be.a(“字符串”);//断言名称是一个字符串
　　assert.equal (value1, value2);//断言value1和value2相等
　　Tim.should.be.an.instanceof(人);//断言蒂姆是人类的实例
大前端的自动化工厂(5)——基于业力+咖啡+茶的单元测试和接口测试