说到质量控制,不得不提起测试驱动开发(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:

  1. $ npm install -g mocha

断言库

Mocha.js 并没有对断言进行约束,我们可以选用各种断言类库以满足我们在项目中的各种不同需求。

工程结构

通常,我们将源代码放在 src 目录,将测试代码放在 test 目录。

一个最简单的例子

首先,我们来创建一个  src/chapter0/example1.js  ,包含如下内容:

  1. // 引入 assert 断言库
  2. var assert = require( 'assert' );
  3.  
  4. // 定义对 String 类的测试
  5. describe( 'String', function () {
  6.  
  7. // 定义对 String.length 方法的测试
  8. describe( '#length', function () {
  9.  
  10. // 定义测试行为
  11. it( 'should return the string length.', function () {
  12. assert.equal( 10, '0123456789'.length );
  13. } );
  14. } );
  15. } );

由于上述代码引用了一个 assert 断言库,所以我们需要安装它:

  1. $ npm install --save-dev assert

下面,我们就可以使用 mocha 执行我们的测试用例了:

  1. $ mocha test/chapter0/example1.js

我们可以看到如下输出:

  1. String
  2. #length
  3. should return the string length.
  4.  
  5. 1 passing (7ms)

得到上述输出,则证明我们的测试用例已经全部通过,可以放心的用在生产环境啦~

初级应用实战

模拟场景:创建一个计算器工具类,提供基本数字计算功能。

首先,我们创建  src/chapter0/Calculator.js  文件,并在其中实现计算器的业务逻辑代码。内容如下:

  1. /**
  2. * 定义 Calculator 工具类, 用于数字计算
  3. * @constructor
  4. */
  5. function Calculator() {
  6. }
  7.  
  8. /**
  9. * 计算 a + b 结果
  10. * @param a 被加数
  11. * @param b 加数
  12. * @returns {number}
  13. */
  14. Calculator.add = function ( a, b ) {
  15. return a + b;
  16. };
  17.  
  18. /**
  19. * 计算 a - b 结果
  20. * @param a 被减数
  21. * @param b 减数
  22. * @returns {number}
  23. */
  24. Calculator.minus = function ( a, b ) {
  25. return a - b;
  26. };
  27.  
  28. // Export the calculator class.
  29. module.exports = Calculator;

针对上述业务逻辑代码,我们创建  test/chapter0/CalculatorTest.js  文件,并在其中添加测试代码:

  1. var assert = require( 'assert' );
  2. var Calculator = require( '../../src/chapter0/Calculator' );
  3.  
  4. // 定义对 Calculator 的测试
  5. describe( 'Calculator', function () {
  6.  
  7. // 定义对 Calculator.add 方法的测试
  8. describe( '#add', function () {
  9.  
  10. // 测试 1 + 2 = 3
  11. it( '1 + 2 = 3', function () {
  12. assert.equal( 3, Calculator.add( 1, 2 ) );
  13. } );
  14.  
  15. // 测试 2 - 1 = 1
  16. it( '2 - 1 = 1', function () {
  17. assert.equal( 1, Calculator.minus( 2, 1 ) );
  18. } );
  19. } );
  20. } );

接下来,让我们使用 mocha 执行测试:

  1. $ mocha test/chapter0/CalculatorTest.js

我们将会得到如下输出:

  1. Calculator
  2. #add
  3. 1 + 2 = 3
  4. 2 - 1 = 1
  5.  
  6. 2 passing (7ms)

OK!大功告成!我们的代码已经经过测试,可以用在生产环境啦~

验证重构正确性

不了解 BDD 的人或许会疑惑:单元测试代码有什么用呢?我们完全可以把项目运行起来,并执行一遍自己的测试用例,来确保正确性,那么为什么要花时间去编写单元测试代码呢?

那么我们来看看下面这个场景:现在,Calculator 类需要允许输入字符串,并计算出数值计算的结果。如:"1" + "2" 需要得到 3。(如果只是之前的实现方式,我们将会得到 "12")

那么,我们先来重构一下自己的代码:

  1. Calculator.add = function ( a, b ) {
  2. return parseInt( a ) + parseInt( b );
  3. };
  4.  
  5. Calculator.minus = function ( a, b ) {
  6. return parseInt( a ) - parseInt( b );
  7. };

接下来,我们只需要在测试代码中添加如下内容:

  1. // 测试 "1" + "2" = 3
  2. it( '"1" + "2" = 3', function () {
  3. assert.equal( 3, Calculator.add( '1', '2' ) );
  4. } );
  5.  
  6. // 测试 "2" - "1" = 1
  7. it( '"2" - "1" = 1', function () {
  8. assert.equal( 1, Calculator.minus( '2', '1' ) );
  9. } );

接下来,执行测试:

  1. $ mocha test/chapter0/CalculatorTest.js

得到输出结果:

  1. Calculator
  2. #add
  3. 1 + 2 = 3
  4. 2 - 1 = 1
  5. "1" + "2" = 3
  6. "2" - "1" = 1
  7.  
  8. 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 入门指南的更多相关文章

  1. 【Mocha.js 101】同步、异步与 Promise

    前情提要 在上一篇文章<[Mocha.js 101]Mocha 入门指南>中,我们提到了如何用 Mocha.js 进行前端自动化测试,并做了几个简单的例子来体验 Mocha.js 给我们带 ...

  2. 【Mocha.js 101】钩子函数

    前情提要 在上一篇文章<[Mocha.js 101]同步.异步与 Promise>中,我们学会了如何对同步方法.异步回调方法以及 Promise 进行测试. 在本篇文章中,我们将了解到 M ...

  3. 测试驱动开发(TDD)及测试框架Mocha.js入门学习

    组里马上要转变开发模式,由传统的开发模式(Developer开发,QA测试),转变为尝试TDD(Test-driven development,测试驱动开发)的开发模型.由此将不存在QA的角色,或者仅 ...

  4. Vue.js 入门指南之“前传”(含sublime text 3 配置)

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  5. Vue 入门指南 JS

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...

  6. 《Gulp 入门指南》 : 使用 gulp 压缩 JS

    <Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...

  7. Ext JS 6学习文档–第1章–ExtJS入门指南

    Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...

  8. 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.一种 ...

  9. node.js Web应用框架Express入门指南

    node.js Web应用框架Express入门指南 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-28 我要评论 这篇文章主要介绍了node.js Web应用框架Express入门 ...

随机推荐

  1. NoSQL生态系统——类似Bigtable列存储,或者Dynamo的key存储(kv存储如BDB,结构化存储如redis,文档存储如mongoDB)

    摘自:http://www.ituring.com.cn/article/4002# NoSQL系统的数据操作接口应该是非SQL类型的.但在NoSQL社区,NoSQL被赋予了更具有包容性的含义,其意为 ...

  2. python3练习-杨辉三角/帕斯卡三角形

    杨辉三角形式如下: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 # 期待输出: # [1] # [1, 1] # [1, 2, 1] # [1, 3, 3, ...

  3. PDF 补丁丁 0.5.0.2657 发布

    新版本修正了导出图片时由于路径存在空白导致出错.在 Windows 10 和高分辨率显示屏上显示字体模糊.控件尺寸错位等各种问题. 默认显示工具栏.

  4. 2015年最好的PHP框架调查统计

    2015年最流行的框架,Laravel框架获得赢家! 正如预期的那样,Laravel这次又一次高出了一大截. 有一些人可能会担心,部分框架分裂版本可能影响Laravel的调查结果,并给它一个不公平的优 ...

  5. 临界区 TRTLCriticalSection 和 TCriticalSection

    临界区对象TCriticalSection(Delphi) 与 TRtlCriticalSection 的区别 TRtlCriticalSection 是一个结构体,在windows单元中定义: 是I ...

  6. php 的txt操作,加入类容

    <?php $fr=fopen("./data/test.txt",'a'); //fopen(位置,打开方式) if(!$fr) { echo " error&q ...

  7. unity代码加密for Android,mono编译

    uinty3d加密推荐几篇比较好的博客链接: http://www.cppcourse.com/u3d-encryption.html http://www.xuanyusong.com/archiv ...

  8. 011-Scala中的apply实战详解

    011-Scala中的apply实战详解 object中的apply方法 class中的apply方法 使用方法 apply方法可以应用在类或者Object对象中 class类 必须要创建实例化的类对 ...

  9. Tyvj 题目1463 智商问题(分块)

    P1463 智商问题 时间: 1500ms / 空间: 131072KiB / Java类名: Main 背景 各种数据结构帝~各种小姊妹帝~各种一遍AC帝~ 来吧! 描述 某个同学又有很多小姊妹了他 ...

  10. linux下系统编程C环境搭建

    一.系统安装 我使用的是VMware8下的ubuntu12.04,这是培训老师说的,12.04相对来说,比较新,而且是5年长期支持版,不容易过时.对于系统的安装,我不想说很多,只是希望大家主义这几点: ...