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


    前情提要

    在上一篇文章《【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/

  • 相关阅读:
    WordPress后台添加友情链接管理功能
    WordPress评论时一键填入昵称、邮箱和网址
    七牛云存储更新缓存图片的方法
    WordPress文章中插入qq表情
    WordPress文章页添加展开/收缩功能
    WordPress添加显示和隐藏侧边栏按钮开关
    Defraggler磁盘碎片整理工具,让你的电脑读写速度更快
    如何彻底关闭系统还原功能和删除系统还原点
    WordPress博客彻底关闭图片缩略图功能的方法
    WP Super Cache+七牛云配置CDN加速,让你的网站秒开
  • 原文地址:https://www.cnblogs.com/rainisic/p/mocha-101-sync-async-and-promise.html
Copyright © 2020-2023  润新知