zoukankan      html  css  js  c++  java
  • 【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/

  • 相关阅读:
    园 首页 新随笔 联系 管理 订阅 订阅 RTSP协议转换RTMP直播协议
    sequence diagram
    Model Binding
    asp.net mvc
    系统日志和异常的处理①
    随机森林之oob error 估计
    Extjs相关知识点梳理
    Extjs报错处理
    webbrowser在html中写入内容并添加js
    tcpdump一个命令的剖析
  • 原文地址:https://www.cnblogs.com/rainisic/p/mochas-101-getting-started.html
Copyright © 2011-2022 走看看