Mocha.js 101同步异步与 Promise

Posted 2020-06-24 LiteCodes | 轻码

前情提要

在上一篇文章《【Mocha.js 101】Mocha 入门指南》中，我们提到了如何用 Mocha.js 进行前端自动化测试，并做了几个简单的例子来体验 Mocha.js 给我们带来的便利。

在本篇文章中，我们将了解到 Mocha.js 的同步/异步测试，以及如何测试 Promise。

同步代码测试

在上一篇文章中，其实我们已经学会了如何测试同步代码。今天，我们 BDD 风格编写一个测试：

var should     = require( ‘should‘ );
var Calculator = require( ‘../../src/chapter0/Calculator‘ );


// 描述 Calculator 的行为
describe( ‘Calculator‘, function () {

    // 描述 Calculator.add 方法的行为
    describe( ‘#add‘, function () {

        // 1 + 2 = 3 的行为
        it( ‘1 + 2 = 3‘, function () {
            Calculator.add( 1, 2 ).should.equal( 3 );
        } );

        // 2 - 1 = 1 的行为
        it( ‘2 - 1 = 1‘, function () {
            Calculator.minus( 2, 1 ).should.equal( 1 );
        } );
    } );
} );

在上一篇文章中，我们已经介绍过常用的断言库，Should.js 就是其中之一。上述代码中，便使用 Should.js 实现了 BDD 风格的断言。

接下来，我们执行测试：

$ mocha test/chapter1/synchronous.js

我们将会看到如下输出：

  Calculator
    #add
      ? 1 + 2 = 3
      ? 2 - 1 = 1


  2 passing (9ms)

异步代码（回调）测试

说道 javascript，必然少不了回调函数。从前端 Ajax 通信，到 Node.js 异步数据访问，回调函数贯穿了整个 JavaScript 生命周期。

那么，我们如何对回调式的方法进行测试呢？首先，我们先编写一个模拟业务逻辑类。创建 src/chapter1/Ajax.js ，并填入一些桩代码：

var Ajax = {
    load: function ( url, callback ) {
        callback.call( this, url );
    }
};

module.exports = Ajax;

上述代码模拟了 Ajax 异步调用。调用 load 函数，传入请求 URL 和成功回调函数，来模拟 Ajax 的异步请求。

接下来，我们来为上面的代码编写测试。Mocha.js 能够很轻松的实现异步方法的测试，我们只需要在 it  方法中加上 done 形参即可。

我们创建 test/chapter1/asynchronous.js 文件，并加入测试代码：

var should = require( ‘should‘ );
var Ajax   = require( ‘../../src/chapter1/Ajax‘ );

// 描述 ‘Ajax‘ 的行为
describe( ‘Ajax‘, function () {

    // 描述 ‘Ajax.load()‘ 方法的行为.
    describe( ‘#load()‘, function () {

        // 加载成功后执行回调函数, 获取结果.
        it( ‘should return the load result.‘, function ( done ) {
            Ajax.load( ‘url‘, function ( result ) {
                result.should.equal( ‘url‘ );
                done();
            } );
        } );
    } )
} );

代码 11 行定义了形式参数 done ，Mocha.js 将会检测是否定义了形参，如果定义了形参，则将会等待形参调用。

代码 14 行调用了 done() ，即表示测试执行成功，Mocha.js 将会输出成功结果。

下面，我们执行这个测试来看看：

mocha test/chapter1/asynchronous.js

将会得到如下输出结果：

  Ajax
    #load()
      ? should return the load result.


  1 passing (9ms)

Promise 测试

由于 ES 2015 的推行，Promise 成为了各大框架不可或缺的一部分。Promise 的出现让一个个嵌套的回调函数变得竟然有序，为 JavaScript 扛起了异步处理的新旗帜。（本文并不主要介绍 Promise，所以相关内容可以去查看阅读扩展部分）

就像回调函数测试一样，Mocha.js 对 Promise 测试支持非常简单：只需要返回一个 Promise 对象即可。

同样，我们先来创建业务逻辑代码：

var DB = {
    save: function ( object ) {
        return new Promise( function ( resolve, reject ) {
            resolve();
        } );
    }
};

module.exports = DB;

上述代码模拟了数据库操作，在保存方法中，返回一个 Promise，来实现异步存储。

接下来，我们创建 test/chapter1/promise.js 文件，来编写测试代码：

var should = require( ‘should‘ );
var DB     = require( ‘../../src/chapter1/DB‘ );

// 描述 ‘DB‘ 的行为
describe( ‘DB‘, function () {

    // 描述 ‘DB.save()‘ 方法的行为.
    describe( ‘#save()‘, function () {

        //  保存成功后执行 Promise.then
        it( ‘save without error.‘, function () {
            return DB.save( ‘test‘ );
        } );
    } )
} );

12 行直接将 save 方法返回的 Promise 对象返回给 Mocha.js。Mocha.js 将会根据 Promise 的结果，来裁决测试是否成功。

如果 Promise resolve：

  DB
    #save()
      ? save without error.


  1 passing (8ms)

如果 Promise reject：

  DB
    #save()
      1) save without error.


  0 passing (10ms)
  1 failing

  1) DB #save() save without error.:
     Error: Promise rejected with no or falsy reason

总结

本文介绍了 Mocha.js 同步、异步，以及 Promise 的测试方法。Mocha.js 是一个非常优秀的框架，其对回调函数、Promise 的支持，让我们能够很轻松的实现异步代码的自动化测试。

下一篇文章中，我们将会对 Mocha.js 的 Hooks（钩子） 进行介绍，欢迎大家继续关注~

---

本文以 CC BY-NC-SA 3.0 CN 协议共享，转载、共享及二次创作时请保留原文出处及链接，请勿用于商业用途。

本文链接：http://litecodes.com/dev/frontend/mocha-101-sync-async-and-promise/

Cnblogs 同步更新我的原始博客。