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. noj [1482] 嘛~付钱吧！(完全背包)

    http://ac.nbutoj.com/Problem/view.xhtml?id=1482 [1482] 嘛~付钱吧! 时间限制: 1000 ms 内存限制: 65535 K 问题描述 大白菜带着 ...

  2. 机器学习算法与Python实践之（四）支持向量机（SVM）实现

    机器学习算法与Python实践之(四)支持向量机(SVM)实现 机器学习算法与Python实践之(四)支持向量机(SVM)实现 zouxy09@qq.com http://blog.csdn.net/ ...

  3. django的url的name参数的意义(转发)

    http://bio.rusaer.com/archives/288   Django一个比较隐含的函数url 阅读量(5010)  |  发表 于 2010-03-09 14:26:18 Djang ...

  4. Loadrunner负载机agent

    记录下来备用,若要一台服务器充当负载机,windows下必须启动magentproc.exe

  5. maven 依赖排除

    在项目中遇到一个问题,项目使用spring 3.x,引用了某些包,这些包又依赖了spring2.x,造成项目无法启动.这种情况就需要用到maven的依赖排除,配置如下: 使用以下代码排除依赖xxxx引 ...

  6. c/c++ 重载 数组 操作符[] operator[ is ambiguous, as 0 also mean a null pointer of const char* type.

    // Note: //int x = a[0].GetInt(); // Error: operator[ is ambiguous, as 0 also mean a null pointer of ...

  7. 使用Mybatis Generator自动生成Mybatis相关代码

    本文将简要介绍怎样利用Mybatis Generator自动生成Mybatis的相关代码: 一.构建一个环境: 1. 首先创建一个表: CREATE TABLE pet (name VARCHAR(2 ...

  8. CPU Benchmarks

    http://www.cpubenchmark.net/high_end_cpus.html 非常清楚~~~

  9. JavaScript中的自调用函数

    自调用函数 自调用函数(self-invoking funciton)就是函数定义完之后会立即运行的函数. 最常见的写法是: (function() { // function body... }() ...

  10. USACO3.22Stringsobits

    DP预处理出来 i位不超过j的个数 然后再进行从小到大找第一个比I大的 然后用I减掉上一个比I小的 剩余的按照之前的方法循环找 知道剩余为0 细节挺繁琐的 对照数据改了又改 最后一组数据还超 了int ...