JS 单元测试
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 单元测试的更多相关文章
- 啥时候js单元测试变的重要起来？
作为一个菜鸟,开这个专栏其实不合适,但又突然发现这个比以往任何时候都重要,所以还是写写我的感受 首先,在传统的pc上也有大量的web站点和各种项目都有复杂的js,但是基本不做单元测试,为啥呢?因为传统 ...
- 玩转Node.js单元测试
代码部署之前,进行一定的单元测试是十分必要的,这样能够有效并且持续保证代码质量.而实践表明,高质量的单元测试还可以帮助我们完善自己的代码.这篇博客将通过一些简单的测试案例,介绍几款Node.js测试模 ...
- 前端测试框架对比(js单元测试框架对比)
前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Function ...
- 【JS单元测试】Qunit 和 jsCoverage使用方法
近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的人来说,很难明白其中的意思,特此整理这篇文章,希望 ...
- js单元测试框架
js单元测试框架 前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试 ...
- Qunit 和 jsCoverage使用方法（js单元测试）
Qunit 和 jsCoverage使用方法(js单元测试) 近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的 ...
- JS单元测试框架：QUnit
QUnit:jQuery的单元测试框架,但不仅限于jQuery(从这个工具不需要引用jquery.js可以看出) index.html <!-- 官网 http://qunitjs.com/ - ...
- js单元测试
最近研究了js的单元测试,分享一下心得. 说起单元测试以前还真是不太了解,这次索性了解一番,测试有很多包含单元测试,性能测试,安全测试和功能测试等几方面,本次只介绍一下单元测试. 前端进行单元测试主要 ...
- Vue.js—单元测试
Vue.js--测试 这里采用的是Vue官方工具(Vue-CLI)搭建出来的项目,在这个搭建工具中推荐的两种测试分别是 端到端的测试 E2E 单元测试 Unit Test 端到端的测试(E2E) E2 ...
随机推荐
- 《javascript高级程序设计》对象图
1.原型链图 2.作用域链图 3.继承
- [转载]C#实现POST提交方式
网页自动登录和提交POST信息的核心就是分析网页的源代码(HTML),在C#中,可以用来提取网页HTML的组件比较多,常用的用WebBrowser.WebClient.HttpWebRequest这三 ...
- Firefly 性能测试 报告
原地址:http://bbs.gameres.com/thread_223724.html Firefly 性能测试 主要考虑点 网络IO的并发 进程间通信压力 数据读写压力 测试机配置: 操作系统 ...
- Windows Phone 8 开发环境搭建
原地址:http://blog.csdn.net/md521/article/details/11015139 Windows Phone 8将采用与Windows 8相同的NT内核,这就意味着WP8 ...
- Type-C设计上的防护
Type C设计上各家芯片公司都提供了很多方案,但在防护方面很多留给了客户自己选择,这方面我可以重点聊聊,说起防护,无非就是过压过流防护. 过压防护,Type C的信号线有很多,都需要做静电防护,US ...
- Altium Designer 常用快捷键总结
原理图:1:按住shift 拖动某个元件,可快速复制.2:按住鼠标滚轮 鼠标上下滑动 放大缩小.3:按住Ctrl 按住鼠标右键 鼠标上下滑动也放大缩小.4:按住Ctrl 拖动某个元件 可以移动位置 ...
- Rails 撤销操作
即使再小心,在开发 Rails 应用程序过程中仍然可能犯错.幸运的是,Rails 提供了一些工具能够帮助你进行复原. 举例来说,一个常见的情况是,你想更改控制器的名字,这时你就要撤销生成的代码.生成控 ...
- 【HDOJ】1018 Big Number
数学题,还是使用log避免大数,但是不要忘记需要+1,因为0也是1位,log(100)= 2,但却是3位. #include <stdio.h> #include <math.h&g ...
- IBM Rational-完整的软件工程解决方案工具集
IBM,即国际商业机器公司,1911年创立于美国,是全球最大的信息技术和业务解决方案公司,其业务遍及全球170多个国家和地区.IBM软件分为五个部分,其中Rational系列是专门针对软件工程的软件工 ...
- Oracle Developer Form中Block的重新查询
Form中某些按钮可能调用了Package对表中某些字段进行更新,但是数据库中字段的修改不会马上反映到form的界面上,所以要进行重新查询,但是用户可能使用了查询窗口进行查询之后然后再点击按钮动作,如 ...