前端测试简述及使用Karma/Mocha实现的集成测试栗子(Travis CI/Coverage)
前端测试
开发类型
- TDD (Test Driven Development),测试驱动开发
- BDD (Behavior Driven Development),行为驱动开发
// add.js function add(x, y){return x + y; }module.exports = add;// test.js let add = require('./add.js'); // TDD assert.equal(add(1, 2), '3');// BDD expect(add(1, 2)).to.equal('3');
测试类型
unit test
:应用仔细拆分为一个一个组件(JavaScript中的一个函数/模块/类等),方法,然后针对这些方法进行单个单个的测试e2e test
:ClickButton测试,牵扯到用户行为,需要用浏览器环境
测试管理工具/框架/库
- 测试管理工具:用来组织和运行整个测试的工具,它能够将测试框架、断言库、测试浏览器、测试代码和被测试代码组织起来,并运行被测试代码进行测试。(Selenium、Karma)
- 测试框架:Mocha、Jasmine等等,测试主要提供了清晰简明的语法来描述测试用例,以及对测试用例分组,测试框架会抓取到代码抛出的AssertionError,并增加一大堆附加信息,比如那个用例挂了,为什么挂等等。测试框架通常提供TDD(测试驱动开发)或BDD(行为驱动开发)的测试语法来编写测试用例,关于TDD和BDD的对比可以看一篇比较知名的文章The Difference Between TDD and BDD。不同的测试框架支持不同的测试语法,比如Mocha既支持TDD也支持BDD,而Jasmine只支持BDD。这里后续以Mocha的BDD语法为例
- 断言库:Should.js、chai、expect.js等等,断言库提供了很多语义化的方法来对值做各种各样的判断。当然也可以不用断言库,Node.js中也可以直接使用原生assert库。
- 代码覆盖率:istanbul等等为代码在语法级分支上打点,运行了打点后的代码,根据运行结束后收集到的信息和打点时的信息来统计出当前测试用例的对源码的覆盖情况。
- 测试浏览器:前端代码是运行在浏览器中的,要对其进行单元测试,只能将其运行在浏览器上。目前大部分测试工具都支持调用和运行本地浏览器来进行测试,但如果你的测试仅仅是针对函数和模块的单元测试,则完全可以使用一款无界面的浏览器:PhantomJs
测试框架共性
- 提供TDD/BDD的测试语法来编写测试用例
- 提供断言语法
- 提供测试用例对源码的覆盖情况
karma项目实例
按照以下配置完成的项目实例
karma使用
安装
npm install better-npm-run --save-dev
:npm script配置增强npm install karma --save-dev
npm install chai karma-chai mocha karma-mocha --save-dev
:安装mocha以及断言chai,配置测试框架npm install babel-core babel-loader babel-preset-env webpack karma-webpack --save-dev
:安装webpack和babel,配置es6/7环境npm install phantomjs@2.1.1 babel-plugin-istanbul karma-phantomjs-launcher --save-dev
:使用虚拟浏览器跑测试npm install karma-coverage --save-dev
:添加代码覆盖率插件
运行
node ./node_modules/karma/bin/karma start
全局安装cli后,可以直接karma start,省去前面长段字符串
npm install -g karma-cli
配置
karma.config.js
以及webpack.config.js
文件
搭建Travis-CI/Coveralls自动化部署环境
Travis-ci
- Travis-ci官网登录,绑定github账号。
- 点击头像进入个人资料界面,勾选你所需要自动构建的项目前的按钮
- 点击build图标,选择md格式的Status Image复制到md文件中即可
- 在项目根目录新建.travis.yml文件,参考仓库中的代码片段
Coveralls
- Coveralls官网登录
- 点击左侧ADD REPOS,勾选你需要的项目
- 如果没有你要的项目可点击右下角REFRESH PRIVATE REPOS
- 如果你的项目不是Travis Pro就可以直接点击项目,找到EMBED下拉选择框,选择md格式的README BADGES复制到md文件中即可
- 如果是Travis Pro,你就按照官网说明添加.coveralls.yml文件,填写相关token
避坑指南
理解测试管理工具/框架/库之间的联系与区别
在
karma
中选择不同的测试环境(Chrome/PhantomJS...),需要配置相应的plugin
,选择PhantomJS
时,需下载指定的2.1.1
版本,下载最新版phantomjs-prebuilt@2.1.14
时,不仅下载易报错(网络问题),而且出现没有PATH
的问题,这样同karma-phantomjs-launcher
插件便无法关联起来,导致虚拟浏览器测试环境无法搭建配置代码覆盖率时,采用
karma-coverage
,而我们使用webpack及babel
对源码进行了编译,导致代码覆盖率出现不完整的问题,因此需要引入webpack的babel-plugin-istanbul
插件,在配置文件中加入即可配置持续集成
.travis.yml
文件,给 Coveralls 上传的测试报告需要有统一的 lcov 格式,因此在karma.conf.js
文件中配置生成报告类型karma-coverage详细配置
coverageReporter: {dir: 'coverage',reporters: [{type: 'json',subdir: '.',file: 'coverage.json', // ./coverage目录下生成此文件}, {type: 'lcov', // lcov 格式subdir: '.' // ./coverage目录下生成 lcov.info文件}, {type: 'text-summary' // 终端输出文字总结}] }
参考
- 聊一聊前端自动化测试
- 前端开源项目持续集成三剑客
- Web应用E2E测试框架
- 理解前端开发中的unit test 和 e2e test
- 前端自动化单元测试初探
前端测试简述及使用Karma/Mocha实现的集成测试栗子(Travis CI/Coverage)相关推荐
- 【前端测试与集成】使用mocha和sinon进行单元测试
目录 简介 编写测试 Spy Mock Stub Test a Promise xhr Hooks Coverage 简介 Mocha是流行的JavaScript测试框架之一,通过它添加和运行测试,从 ...
- 前端测试 karma mocha should 都是什么鬼?
测试TDD和BDD的区别 TDD是测试驱动开发,通过用测试用例来规范约束开发者,编写出质量更高的代码 BDD是行为驱动开发,描述行为路径,就像描述故事,产品和前线业务人员可参与到开发流程中,减轻测试和 ...
- 大前端的自动化工厂(5)—— 基于Karma+Mocha+Chai的单元测试和接口测试
一. 前端自动化测试 大多数前端开发者对测试相关的知识是比较缺乏的,一来是开发节奏很快,来不及写,另一方面团队里也配备了"人肉测试机",完全没必要自己来.但随着项目体量的增大,许多 ...
- 前端单元测试-karma+mocha+chai
一.概念普及 1.单元测试运行环境: 运行环境是集成一系列功能的工具,我们可以通过它来选择"测试框架".自动打开浏览器.查看测试结果等功能.我们可以把它近似的理解为vue的vue- ...
- 使用karma + mocha + sinon 测试 Ajax 请求
使用karma + mocha + sinon 测试 Ajax 请求 在用 karma + mocha 进行 JS 代码测试的时候,难免会遇到要测试 Ajax 发请求的情况.然后查找一下网上的资料,发 ...
- vue-cli自动化测试karma + mocha + chai
最近再为团队团队选择可行的测试方案.前端目前是vue-cli技术栈.试着在vue项目添加测试.把测试完整的方案记录下来. vue官网给的例子用的是karma + mocha + chai. karma ...
- 【node测试系列】几款前端测试断言库(Assertions lib)的选型总结
参考文章 http://blog.lvscar.info/post/... 在编写前端测试代码的过程中, 几乎所有的测试框架都提供了根据功能.模块(module ,spec )来切分测试用例的设计, ...
- 搭建 vue2 单元测试环境(karma+mocha+webpack3)
从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一 ...
- 介绍Node assert, should.js, mocha, Karma, Travis CI
是什么? [Node assert] (http://nodejs.cn/api/assert.html) 官方说明:assert 模块提供了断言测试的函数,用于测试不变式. 有严格模式(strict ...
最新文章
- MM模块部分名词解释
- VS网站开发的发布部署的不同情况说明
- Node — 第五天
- .net WebApi 开发中某些注意事项
- 黎明之路服务器正在维护,黎明之路进不去怎么办_黎明之路更新失败怎么办_玩游戏网...
- 需要符合互联网时代需求的《飞秋》
- AndroidStudio_使用NanoHTTPD搭建HTTP服务_把android设置当成一个http服务器来使用---Android原生开发工作笔记225
- 《交互式程序设计 第2版》一第2章 编程基础
- C#|RBG图像转灰度图像与图像灰度反转
- Linux系统面试常问问题,Linux面试常见问题集锦
- django常见面试题
- js 判断数组的4种方法
- iPhone屏幕数据
- 计算机炫酷功能,【实用】上班族必备!10个实用电脑炫酷小技巧~
- Dell笔记本电脑如何升级win10、如何恢复原装win8.1
- 一键帝国CMS快速重置管理员密码工具
- axure树形表格_表格 树形菜单/excel 如何实现分级显示,也就是树形的菜单
- x86架构学习笔记实模式
- Goroutines和线程对比
- 请描述定时器初值的计算方式_51波特率发生器定时器初值计算方法[转载]