【Mocha.js 101】Mocha 入门指南

Mocha.js

序

说到质量控制，不得不提起测试驱动开发（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 并没有对断言进行约束，我们可以选用各种断言类库以满足我们在项目中的各种不同需求。

工程结构

通常，我们将源代码放在 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/

 

posted @ 2016-03-14 21:37  Rainisic  阅读(1384)  评论(0)    收藏  举报