http://www.tuicool.com/articles/rAnaYvn
 
直奔主题：
一、安装grunt-contrib-qunit
npm install grunt-contrib-qunit --save-dev （前提先安装nodejs和npm）
自动下载grunt-lib-phantomjs库，安装phantomJS
phantomjs实现了一个无界面的webkit浏览器。虽然没有界面，但dom渲染、js运行、网络访问、canvas/svg绘制等功能都很完备，在页面抓取、页面输出、自动化测试广泛应用
二、在Gruntfile.js当中载入grunt-contrib-qunit
grunt.loadNpmTasks('grunt-contrib-qunit');
三、创建测试任务
配置选项：
timeout：超时，默认5000，毫秒为单位，等待qunit的start()有错误失败的任务之前调用。
inject：备注，备注到bridge文件
httpBase：字符串，默认为false。创建在源文件的URL，所有的源文件的前缀。
console：布尔值，默认true。设置隐藏phantomJS 控制台输出。
urls：数组，配置测试地址，允许多个地址访问
force：布尔值，默认为false。有个任务失败后面即停止
初始化配置：
测试相对地址文件：
grunt.initConfig({

  qunit: {

    all: ['test/**/*.html']

  }});
测试http页面地址：
grunt.initConfig({
qunit: {
all: {
options: {
urls: [
'http://localhost:8000/test/foo.html',
'http://localhost:8000/test/bar.html'
]
}
}
},
connect: {
server: {
options: {
port: 8000,
base: '.'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('test', ['connect', 'qunit']);
grunt test

查了一下问题：发现没有测试用例。
汇总：整个单测结构体如下
node_modules
test
-- libs
-- qunit.css
-- qunit.js
-- qunit1.html
-- qunit2.html
-- qunit3.html
-- qunit_noglobal_test.js
-- qunit_test.js
-- qunit_test_error.js
Gruntfile.js
package.json
接下来开始详细分解各个文件：
grunt配置json文件：package.json




grunt执行文件Gruntfile.js


测试文件qunit1.html，qunit2.html
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>基本测试页面</title>

<!-- 载入本地测试套件. -->

<link rel="stylesheet" href="test/libs/qunit.css" media="screen">

<script src="test/libs/qunit.js"></script>

<!-- 载入本地测试用例 -->

<script src="test/qunit_test.js"></script>

</head>

<body>

<div id="qunit"></div>

<div id="qunit-fixture">内容很丰富</div>

</body>

</html>
测试文件qunit3.html
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>基本测试页面</title>

<!-- 载入本地测试套件 -->

<link rel="stylesheet" href="libs/qunit.css" media="screen">

<script src="libs/qunit.js"></script>

<!-- 载入本地测试用例 -->

<script src="qunit_noglobal_test.js"></script>

</head>

<body>

<div id="qunit"></div>

<div id="qunit-fixture">非全局检查</div>

</body>

</html>
libs/qunit.css文件（测试框架css文件）
字体模块：


初始化：


头部模块：


测试状态：


测试计数：


通过测试样式：


失败样式：


测试结果：


libs/qunit.js（js单元测试框架）
下载地址：http://download.csdn.net/detail/zqjflash/7981109
测试用例：qunit_test.js
test('basic test', function() {

expect(1);

ok(true, '内容很丰富');

});

test('can access the DOM', function() {

expect(1);

var fixture = document.getElementById('qunit-fixture');

equal(fixture.innerText, '内容很丰富', 'should be able to access the DOM.');

});
测试用例：qunit_test_error.js


测试用例：qunit_noglobal_test.js


各目录详情分布：
node_modules


test目录


libs目录：


页面测试文件：


再次执行grunt test


看到Done，第一个自动化测试demo跑通了。

Grunt实现自动化单元测试的更多相关文章

  1. 使用grunt实现自动化单元测试

    闲话不多说~ 使用步骤 1.安装插件 npm install grunt-contrib-qunit --save-dev 2.加载包含 "qunit" 任务的插件 grunt.l ...

  2. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  3. 搭建Karma+Jasmine的自动化单元测试

    最近在打算将以前的代码进行重构,过程中发现自己不写自动化测试代码,而是手动的写,这样并不好,所以就学了Karma+Jasmine的自动化单元测试,以后写代码尽量要写自动化单元测试,也要测一下istan ...

  4. Karma和Jasmine自动化单元测试

    从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...

  5. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  6. 前端见微知著工具篇：Grunt实现自动化

    转载说明 本篇文章为转载文章,来源为[前端福利]用grunt搭建自动化的web前端开发环境-完整教程,之所以转载,是因为本文写的太详细了,我很想自己来写,但是发现跳不出这篇文章的圈子,因为写的详尽,所 ...

  7. 转：【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...

  8. 用grunt搭建自动化的web前端开发环境-完整教程

    原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...

  9. TestNg JAVA 自动化单元测试框架Demo

    TestNg TestNg 是java的一个自动化单元测试框架 参考:http://testng.org/doc/index.html 环境准备 既然是java 的自动化单元测试框架,就必须要有jav ...

随机推荐

  1. 为图片存储而作——记一次UEditor源码的修改

    本文版权归博客园和作者吴双本人共同所有.  写在前面 这是一个数据爆发的网络时代,大家习惯于浏览图文直观带给我们的快速信息.大图片的存储和浏览经常会成为Web服务器的瓶颈.试想如果你的Web服务器依然 ...

  2. ViewController加载顺序与self.view

    转载自:http://blog.csdn.net/ishaoc/article/details/42172749   ViewController的加载顺序如下   从Stroyboard和xib中加 ...

  3. 读取cc2530节点的设备类型、协调器、路由器、终端。

    建立网络.加入网络流程分析 协调器节点:在1-10  实验8 网络通信实验2 组播通信中 while(MSGpkt) { switch(MSGpkt->hdr.event) { case ZDO ...

  4. CDOJ UESTC 1220 The Battle of Guandu

    The 2015 China Collegiate Programming Contest 2015第一届中国大学生程序设计竞赛 F题 本质就是求单源最短路!注意会爆int 对于每一个村庄i,其实就是 ...

  5. sql server 字符串替换函数REPLACE

    sql server 字符串替换函数REPLACE函数的使用 <pre name="code" class="sql">--参数1:需要替换字符的母 ...

  6. C# devExpress BandedGridView属性 备忘

    BandedGridView属性备忘 StringBuilder sb = new StringBuilder(); DevExpress.XtraGrid.Views.BandedGrid.Band ...

  7. 只有mdf 没有 日志 恢复数据库

    1.先建一个与你要恢复的数据库名称一样的数据库.2.停止sql server,把你的数据库替换这个数据库.3.重启sql server,把数据库设置为紧急状态.  sp_configure 'allo ...

  8. Js中数据类型判断的几种方法

    判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...

  9. CodeForces 616C The Labyrinth

    先预处理出所有连通块,对于每一个*,看他四周的连通块即可 #include<cstdio> #include<cstring> #include<queue> #i ...

  10. iOS AFN向接口端传递JSON数据

    NSDictionary *body = @{@"snippet": @{@"topLevelComment":@{@"snippet":@ ...