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. shell判断文件是否存在,不存在则创建

    if [ ! -d "/myfolder" ]; then mkdir /myfolder fi 注意[]中的空格,否则会报错

  2. Ubuntu和Redhat(Debian)的差别

    这两个最大的区别在包管理模式上. 都是用的Linux核心构架的. Redhat主要集中在 企业级服务器版的制作 是推动LINUX商业化最成功的公司 Redhat对应的桌面版制作 都是由Fedora社区 ...

  3. make -jN

    今天又一次尝试编译安卓,想测试一下编译的速度如何? 考虑机器是4核8线程,就用上了 make -j8,感觉上上速度是很快,刷屏就下来了,不过错误了,错误的提示大概是某个文件的规则没找到,想想了多线程并 ...

  4. Myeclipse8.5中svn插件安装方法总结

    [转]http://lwcheng1985.iteye.com/blog/696143   有改动 方法一:在线安装 1.打开HELP->MyEclipse Configuration Cent ...

  5. 如何判断js是否加载完全

    var script=document.createElement('script'); if(script.onreadystatechange){ script.onreadystatechang ...

  6. 考分鄙视(exam)

    考分鄙视(exam) 题目描述 Whence这个学期考了n次试,每一次都有一个0-20000之间的整数分数.Whence本来的状态应该是每一次考试都比前一次多一分(除第一次),但由于他很不稳定,偏差可 ...

  7. Paragraph 对象'代表所选内容、范围或文档中的一个段落。Paragraph 对象是 Paragraphs 集合的一个成员。Paragraphs 集合包含所选内容、范围或文档中的所有段落。

    Paragraph 对象'代表所选内容.范围或文档中的一个段落.Paragraph 对象是 Paragraphs 集合的一个成员.Paragraphs 集合包含所选内容.范围或文档中的所有段落. 方法 ...

  8. [算法] trie树实现

    小写字母的字典树 #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAXN 1 ...

  9. The 2014 ACM-ICPC Asia Regional Anshan

    继续复盘下一场Regional! [A]-_-/// [B]模拟(之前每次遇到模拟.暴搜都直接跳了,题目太长也是一个原因...下次是在不行可以尝试一下) [C]数论 互质.容斥? [D]数学推导(方差 ...

  10. php解决微信开发中用户昵称中的特殊字符与emoji表情写入mysql错误的问题

    解决办法:将3个字节的特殊字符与emoji表情替换掉即可. $nickname = preg_replace('/xE0[x80-x9F][x80-xBF]'.'|xED[xA0-xBF][x80-x ...