【Mocha.js 101】Mocha 入门指南
序
说到质量控制,不得不提起测试驱动开发(TDD)和行为驱动开发(BDD)。随着敏捷软件开发的推行,软件质量控制的重担也逐渐从测试工程师转向了研发工程师。测试驱动也随之悄然而生,成为了敏捷开发中重要的一环。
在 Java 项目开发中,有很多好用的测试框架可供选用:Spring Test、JUnit、PowerMock…Maven也提供了mvn test构建来鼓励大家构建测试。
然而,在前端开发的领域里,测试驱动以及自动化测试仍然不像 Java 中那样被重视。本系列文章给大家介绍一个常用的 JavaScript 测试框架——Mocha.js,希望能够引起大家对前端自动化测试的关注。
本系列文章所涉及的相关代码均会提交到我的 GitHub 上。
笔者使用的环境是:
操作系统:OS X El Capitan version 10.11.3
Node.js:v5.1.0
浏览器:Chrome 48.0.2564.116(64-bit)
准备工作
Mocha.js
使用 NPM 安装 Mocha.js:
$ npm install -g mocha
断言库
Mocha.js 并没有对断言进行约束,我们可以选用各种断言类库以满足我们在项目中的各种不同需求。
- should.js,BDD 风格断言
- expect.js,expect() 风格断言
- chai,expect(), assert() 风格断言
- better-assert,C 风格断言
- unexpected,一个可扩展的 BDD 风格断言库
- unit.js
工程结构
通常,我们将源代码放在 src 目录,将测试代码放在 test 目录。
一个最简单的例子
首先,我们来创建一个 src/chapter0/example1.js ,包含如下内容:
// 引入 assert 断言库
var assert = require( 'assert' ); // 定义对 String 类的测试
describe( 'String', function () { // 定义对 String.length 方法的测试
describe( '#length', function () { // 定义测试行为
it( 'should return the string length.', function () {
assert.equal( 10, '0123456789'.length );
} );
} );
} );
由于上述代码引用了一个 assert 断言库,所以我们需要安装它:
$ npm install --save-dev assert
下面,我们就可以使用 mocha 执行我们的测试用例了:
$ mocha test/chapter0/example1.js
我们可以看到如下输出:
String
#length
✓ should return the string length. 1 passing (7ms)
得到上述输出,则证明我们的测试用例已经全部通过,可以放心的用在生产环境啦~
初级应用实战
模拟场景:创建一个计算器工具类,提供基本数字计算功能。
首先,我们创建 src/chapter0/Calculator.js 文件,并在其中实现计算器的业务逻辑代码。内容如下:
/**
* 定义 Calculator 工具类, 用于数字计算
* @constructor
*/
function Calculator() {
} /**
* 计算 a + b 结果
* @param a 被加数
* @param b 加数
* @returns {number}
*/
Calculator.add = function ( a, b ) {
return a + b;
}; /**
* 计算 a - b 结果
* @param a 被减数
* @param b 减数
* @returns {number}
*/
Calculator.minus = function ( a, b ) {
return a - b;
}; // Export the calculator class.
module.exports = Calculator;
针对上述业务逻辑代码,我们创建 test/chapter0/CalculatorTest.js 文件,并在其中添加测试代码:
var assert = require( 'assert' );
var Calculator = require( '../../src/chapter0/Calculator' ); // 定义对 Calculator 的测试
describe( 'Calculator', function () { // 定义对 Calculator.add 方法的测试
describe( '#add', function () { // 测试 1 + 2 = 3
it( '1 + 2 = 3', function () {
assert.equal( 3, Calculator.add( 1, 2 ) );
} ); // 测试 2 - 1 = 1
it( '2 - 1 = 1', function () {
assert.equal( 1, Calculator.minus( 2, 1 ) );
} );
} );
} );
接下来,让我们使用 mocha 执行测试:
$ mocha test/chapter0/CalculatorTest.js
我们将会得到如下输出:
Calculator
#add
✓ 1 + 2 = 3
✓ 2 - 1 = 1 2 passing (7ms)
OK!大功告成!我们的代码已经经过测试,可以用在生产环境啦~
验证重构正确性
不了解 BDD 的人或许会疑惑:单元测试代码有什么用呢?我们完全可以把项目运行起来,并执行一遍自己的测试用例,来确保正确性,那么为什么要花时间去编写单元测试代码呢?
那么我们来看看下面这个场景:现在,Calculator 类需要允许输入字符串,并计算出数值计算的结果。如:"1" + "2" 需要得到 3。(如果只是之前的实现方式,我们将会得到 "12")
那么,我们先来重构一下自己的代码:
Calculator.add = function ( a, b ) {
return parseInt( a ) + parseInt( b );
};
Calculator.minus = function ( a, b ) {
return parseInt( a ) - parseInt( b );
};
接下来,我们只需要在测试代码中添加如下内容:
// 测试 "1" + "2" = 3
it( '"1" + "2" = 3', function () {
assert.equal( 3, Calculator.add( '1', '2' ) );
} ); // 测试 "2" - "1" = 1
it( '"2" - "1" = 1', function () {
assert.equal( 1, Calculator.minus( '2', '1' ) );
} );
接下来,执行测试:
$ mocha test/chapter0/CalculatorTest.js
得到输出结果:
Calculator
#add
✓ 1 + 2 = 3
✓ 2 - 1 = 1
✓ "1" + "2" = 3
✓ "2" - "1" = 1 4 passing (7ms)
上述结果证明,重构后的代码在字符串形式数字计算上没有问题,并且也能完美兼容之前的数字计算。
Pretty cool 哈?我们只需要执行一句测试指令,就可以确保重构的正确性,以及确认对其他业务逻辑代码是否产生了影响。
接下来,让我们享受测试驱动带来的快乐吧~
本文以 CC BY-NC-SA 3.0 CN 协议共享,转载、共享及二次创作时请保留原文出处及链接,请勿用于商业用途。
本文链接:http://litecodes.com/dev/frontend/mochas-101-getting-started/
【Mocha.js 101】Mocha 入门指南的更多相关文章
- 【Mocha.js 101】同步、异步与 Promise
前情提要 在上一篇文章<[Mocha.js 101]Mocha 入门指南>中,我们提到了如何用 Mocha.js 进行前端自动化测试,并做了几个简单的例子来体验 Mocha.js 给我们带 ...
- 【Mocha.js 101】钩子函数
前情提要 在上一篇文章<[Mocha.js 101]同步.异步与 Promise>中,我们学会了如何对同步方法.异步回调方法以及 Promise 进行测试. 在本篇文章中,我们将了解到 M ...
- 测试驱动开发(TDD)及测试框架Mocha.js入门学习
组里马上要转变开发模式,由传统的开发模式(Developer开发,QA测试),转变为尝试TDD(Test-driven development,测试驱动开发)的开发模型.由此将不存在QA的角色,或者仅 ...
- Vue.js 入门指南之“前传”(含sublime text 3 配置)
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
- Vue 入门指南 JS
Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...
- 《Gulp 入门指南》 : 使用 gulp 压缩 JS
<Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...
- Ext JS 6学习文档–第1章–ExtJS入门指南
Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...
- Practical Node.js (2018版) 第3章:测试/Mocha.js, Chai.js, Expect.js
TDD and BDD for Node.js with Mocha TDD测试驱动开发.自动测试代码. BDD: behavior-driven development行为驱动开发,基于TDD.一种 ...
- node.js Web应用框架Express入门指南
node.js Web应用框架Express入门指南 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-28 我要评论 这篇文章主要介绍了node.js Web应用框架Express入门 ...
随机推荐
- localStorage存的值如果有true,false,需要注意了。
把一个全局变量存到localStorage里面 isSupport是 true false; window.localStorage && window.localStorage.s ...
- box-sizing 属性、min-width属性、max-width属性
1.box-sizing 这个属性是CSS3新增的属性.IE8开始兼容.box-sizing: border-box; border-box,就是边框的这个小盒.这个属性命令,width数值指的是b ...
- 搭建一个分布式MongoDB鉴权集群
今天休假在家,测试并搭建了一个replica set shard MongoDB鉴权集群.replica set shard 鉴权集群中文资料比较少,本文是个人笔记,同时也希望对后来者有所帮助.本文仅 ...
- 14071702(SkeletalControl_Limb)
[目标] SkeletalControl_Limb [思路] HumanIK的15 个节点 CCDIK [步骤] 1 先编译[!BuildAll] [注]先把SYSTEM文件夹该为非只读属性,编译生成 ...
- JVM 平台上的各种语言的开发指南
JVM 平台上的各种语言的开发指南 为什么我们需要如此多的JVM语言? 在2013年你可以有50中JVM语言的选择来用于你的下一个项目.尽管你可以说出一大打的名字,你会准备为你的下一个项目选择一种新的 ...
- Proxy Pattern(Java动态代理和cglib的实现)
代理模式:给某一个对象提供代理对象,由代理对象控制具体对象的引用. 代理,指的就是一个角色对表另一个角色采取行动,就生活中,一个红酒厂商,是不会直接把红酒零销给客户的,都是通过代理完成他的销售业务.而 ...
- 基于UDP协议模拟的一个TCP协议传输系统
TCP协议以可靠性出名,这其中包括三次握手建立连接,流控制和拥塞控制等技术.详细介绍如下: 1. TCP协议将需要发送的数据分割成数据块.数据块大小是通过MSS(maximum segment siz ...
- 【 2013 Multi-University Training Contest 4 】
HDU 4632 Palindrome subsequence dp[x][y]表示区间[x,y]构成回文串的方案数. 若str[x]==str[y],dp[x][y]=dp[x+1][y]+dp[x ...
- Ubuntu 使用Gparted工具扩大第一分区方法步骤
Ubuntu 使用Gparted工具扩大第一分区方法步骤 环境:vmware9.01 .ubuntu12.04 需要的工具: 1.U盘,Universal-USB-Installer-1.9.6.4. ...
- (1)WCF少废话系列之 _Hello WCF!
本节旨在通过实例的方式让初学者对WCF有一个感性的认识,坚持由特殊到普遍再由普遍到特殊的认知规律. WCF(Windows Communication Fundation),微软分布式通信架构的集合, ...
