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. Brain Network (easy)

    Brain Network (easy) One particularly well-known fact about zombies is that they move and think terr ...

  2. 深入浅出Ajax（二）

    <script type="text/javascript"> window.onload = initPage; function initPage() { var ...

  3. Android提高第十二篇之蓝牙传感应用

        请问淘宝上买的单片机蓝牙模块与安卓/android手机通讯的时候需要设置UUID吗? 2013-02-15 09:39 在世张辽 | 浏览 2769 次 想用安卓手机和单片机通过蓝牙模块通讯, ...

  4. git版本控制（一）

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  5. UITextField和UIViewConteoller

    UITextField控件 UITextFiled常用属性和方法   UITextField是常用的文本输入控件,比如我们用的QQ的登录界面,词典输入要查询的单词都使用了文本框控件,如下图所示.之前介 ...

  6. FatMouse and Cheese 动态化搜索

    FatMouse and Cheese Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  7. Java虚拟机中的内存分配

    java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途以及创建和销毁的时间. 栈:存放的是局部变量,包括:1.用来保存基本数据类型的值:2.保存类 ...

  8. Visual C++ 6.0 解决win 8.1不兼容的问题。--技术宅从来不妥协

    因为目标院校复试上机需要使用这一个软件,所以在成功的路上的遇到的问题记录,避免二次犯错,在网站上下载并且安装Visual C++ 6.0,运行时会提示不兼容的问题,怎么办呢?当然不是下载他们所推荐的V ...

  9. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  10. CSS-学习笔记六

    1. 自适应,响应式布局 2. pure 3. Animate