JS单元测试，我工作时主要以mocha + chai 下面时具体的文档：

mocha：

　　https://mochajs.org/#asynchronous-code

Chai：

　　http://chaijs.com/api/bdd/#method_ownproperty

还是比较简单的所以可以自己查看文档：

例子基于requirejs,并且配置需基于你自己文件目录，红色代码请留意下

要测试的一个排序函数，对对象数组进行升、降序排序

define(['underscore'], function(_) {

  function util() {};

    //对象数组，根据item中某字段排序

    util.sortBy = function () {

    var obj = arguments[0],  key = arguments[1];

    if(!_.isArray(obj) || !key) {

      return obj;

    }

    var sort = arguments[2], j = 1, temp = {};

    //交换函数

    function swap (obj, index) {

      temp = obj[index];

      obj[index] = obj[index+1];

      obj[index+1] = temp;

    }

    //sort 默认从小到大 （采用冒泡）

    obj.forEach(function() {

      for(var i = 0, length = obj.length-j; i < length; i++) {

        if (sort && sort.toLowerCase() ==="desc") {  //降序

          if (!obj[i][key]) {

            if (obj[i+1][key]) {

              swap(obj, i);

            }

          } else if (obj[i+1][key] && obj[i+1][key] > obj[i][key]) {

            swap(obj, i);

          }

        } else { //默认升序

          if (obj[i][key]) {

            if (obj[i+1][key]) {

              if(obj[i][key] > obj[i+1][key]){

                swap(obj, i);

              }

            } else {

              swap(obj, i);

            }

          }

        }

      }

      j++;

    });

    return obj;

  }

  return util;

})

测试页面代码，具体的配置需要根据你自己的环境去配置

<!DOCTYPE html>

<html>

    <head>

        <title>H5 test</title>

        <link rel="stylesheet" type="text/css" href="../../node_modules/mocha/mocha.css">

        <script src="../asset/src/h5/vendor/require.js">

        </script>

    </head>

    <body>

        <div id="mocha"></div>

    </body>

    <script type="text/javascript">

        (function(){

            function nodePath(path) {

                return '../../node_modules/' + path + '/' + path;

            };

            function modulePath(path) {

                return './lib/' + path;

            };

             function vendorPath(path) {

                 return '../asset/src/h5/vendor/' +path;

             };

            function widgetPath(path) {

                return '../asset/src/widget/' + path;

            };

            requirejs.config({

                urlArgs: Date.now(),

                baseUrl: './',

                shim: {

                    mocha: {

                exports: 'mocha'

              }

                },

                paths: {

                    'underscore': vendorPath('underscore'),

                    'mocha': nodePath('mocha'),

                    'chai': nodePath('chai'),

                    'testUtil': modulePath('testUtil'),

                    'util': widgetPath('util')

                }

            });

            requirejs(['mocha', 'chai'], function(mocha, chai) {

                mocha.setup('bdd');

                window.expect = chai.expect;

                //加载测试模块

                require(['testUtil'], function() {    

                    if(window.mochaPhantomJS) {

                        window.mochaPhantomJS.run();

                    } else {

                        mocha.run();

                    }

                })

            });

        })();

    </script>

</html>

具体的测试代码：

describe('util', function(util) {

  var util;

  before(function(done){

    require(['util'], function(one) {

      util = one;

      done();

    });

  })

  describe('#sortBy', function() {

    it('obj类型数组asc排序', function() {

      //expect(util.sortBy([{a:1, b: 1}, {a:4, b:5}, {a:3}, {a:2}, {b:2}, {a:5}], 'a') == [{b:2}, {a:1, b:1}, {a:2}, {a:3}, {a:4, b:5}, {a:5}]).to.be.true;;

      var str='';

      util.sortBy([{a:1, b: 1}, {a:4, b:5}, {a:3}, {a:2}, {b:2}, {a:5}], 'a').forEach(function(item) {

        str = str + item.a +",";

      })

      expect(str === "undefined,1,2,3,4,5,").to.be.true;

    })

    it('obj类型数组desc排序', function() {

      var str='';

      util.sortBy([{a:1, b: 1}, {a:4, b:5}, {a:3}, {a:2}, {b:2}, {a:5}], 'a', 'desc').forEach(function(item) {

        str = str + item.a +",";

      })

      expect(str ==="5,4,3,2,1,undefined,").to.true;

    });

    it('ddd', function() {

      expect(1==2).to.true;

    })

  });

});

运行结果图

JS 单元测试的更多相关文章

  1. 啥时候js单元测试变的重要起来？

    作为一个菜鸟,开这个专栏其实不合适,但又突然发现这个比以往任何时候都重要,所以还是写写我的感受 首先,在传统的pc上也有大量的web站点和各种项目都有复杂的js,但是基本不做单元测试,为啥呢?因为传统 ...

  2. 玩转Node.js单元测试

    代码部署之前,进行一定的单元测试是十分必要的,这样能够有效并且持续保证代码质量.而实践表明,高质量的单元测试还可以帮助我们完善自己的代码.这篇博客将通过一些简单的测试案例,介绍几款Node.js测试模 ...

  3. 前端测试框架对比(js单元测试框架对比)

    前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Function ...

  4. 【JS单元测试】Qunit 和 jsCoverage使用方法

          近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的人来说,很难明白其中的意思,特此整理这篇文章,希望 ...

  5. js单元测试框架

    js单元测试框架 前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试 ...

  6. Qunit 和 jsCoverage使用方法（js单元测试）

    Qunit 和 jsCoverage使用方法(js单元测试) 近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的 ...

  7. JS单元测试框架：QUnit

    QUnit:jQuery的单元测试框架,但不仅限于jQuery(从这个工具不需要引用jquery.js可以看出) index.html <!-- 官网 http://qunitjs.com/ - ...

  8. js单元测试

    最近研究了js的单元测试,分享一下心得. 说起单元测试以前还真是不太了解,这次索性了解一番,测试有很多包含单元测试,性能测试,安全测试和功能测试等几方面,本次只介绍一下单元测试. 前端进行单元测试主要 ...

  9. Vue.js—单元测试

    Vue.js--测试 这里采用的是Vue官方工具(Vue-CLI)搭建出来的项目,在这个搭建工具中推荐的两种测试分别是 端到端的测试 E2E 单元测试 Unit Test 端到端的测试(E2E) E2 ...

随机推荐

  1. java Arrays.asList()和Collections.addAll()

    java中的方法Arrays.asList(arg1,arg2,arg3...),经常用在将多个元素或数组转化为List中的元素,但是在使用的时候,应该注意: arg1决定返回list的元素类型(即第 ...

  2. SASS、COMPASS 安装指南

    如果你还不知道 SASS 和 COMPASS 是什么,可以参看http://sass-lang.com 和http://compass-style.org,近期可能会更新一篇介绍性的入门教程,但 是本 ...

  3. python参考手册--第10、11章执行环境、调试

    1.解释器选项和环境 python [options] [-c cmd | filename | - ] [args] 例如:python -m pdb test.py 以脚本的形式运行库模块pdb ...

  4. MVC中——Layout和ViewStart以及页面Index之间的关系

    1._ViewStart.cshtml页面是整个MVC中,必定会加载的,它是在一般普通页面,如Index.cshtml页面之前加载. 2._ViewStart.cshtml初始加载页面中,页首一般会包 ...

  5. configure脚本参数介绍

    configure脚本有大量的命令行选项. 下面对每一个选项进行简略的介绍: --cache-file=FILE'configure' 会在你的系统上测试存在的特性(或者bug!).为了加速随后进行的 ...

  6. Altium Designer学习： 原理图和PCB元件对应查找

    画PCB的时候,需要经常的去查看原理图上对应的元件,元件数目少还好找,数目多了找起来就比较扯淡.还要Altium Designer提供了不错的交叉查找功能. 这里我建议使用两个显示器,一个显示器放原理 ...

  7. Postman(API & HTTP请求调试插件)和Apizza fiddler

    http://blog.csdn.net/u011012932/article/details/51456263#comments

  8. JavaScript功能一览

    // 10) throw "太大"; if(x0) { c_start=document.cookie.indexOf(c_name + "=") if (c_ ...

  9. WordPress Kernel Theme ‘upload-handler.php’任意文件上传漏洞

    漏洞名称: WordPress Kernel Theme ‘upload-handler.php’任意文件上传漏洞 CNNVD编号: CNNVD-201311-127 发布时间: 2013-11-12 ...

  10. 【转】JNI学习积累之一 ---- 常用函数大全

    原文网址:http://blog.csdn.net/qinjuning/article/details/7595104 本文原创,转载请注明出处:http://blog.csdn.net/qinjun ...