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. spring-jms

    http://haohaoxuexi.iteye.com/blog/1893038 理解PooledConnectionFactory.CachingConnectionFactory和SingleC ...

  2. java的property

    System.currentTimeMillis() 返回以毫秒为单位的当前时间.System.gc() 垃圾回收System.getProperties().返回当前的系统属性System.getP ...

  3. C#统计网站访问总人数和当前在线人数

    一.打开vitualstudio2010,新建一个网站,然后添加新项,新建一个login.aspx和index.aspx页面.再添加新项,选择全局应用程序类,该页面为Global.asax. 第一步: ...

  4. SD卡读写扇区注意事项（转）

    源:http://blog.163.com/zhaojun_xf/blog/static/30050580201151410635516/ 在调试SD卡时,大家都喜欢使用扇区进行验证.也就是说,一般都 ...

  5. idx_rebuild_diff_idx_l.sql

    1. set echo on feedback on set timing on set time on set pagesize 1000 set linesize 150 spool 02_do_ ...

  6. css盒子

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  7. IOS 9人机界面指南（1）

    http://www.uisdc.com/ios9-interface-guideline-ui

  8. Fragment和Activity(转)

    Android Fragment和Activity Fragment和Activity Fragment和Activity的交互 一个Fragment的实例总是和包含它的Activity直接相关. f ...

  9. copy ,abs,includes 3个函数

    copy:  Copy函数原型:标头: <algorithm> OutputIterator copy( InputIterator begin, InputIterator end, o ...

  10. 简单三段式状态机实验3-Sequence Detect(序列检测)

    1.序列检测器的逻辑功能描述:序列检测指的就是将一个指定的序列从数字码流中识别出来.本例中,我们将设计一个"10010”序列的检测器.设x_in为数字码流输入,z_out为检出标记输出,高电 ...