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. laravel 报错 mcrypt_decrypt(): Key of size 11 not supported by this algorithm. Only keys of sizes 16, 24 or 32 supported

    修改app/config/app.php文件 将key设置成长度为16,24,32的字符串

  2. Windows修改hosts文件及位置

    文件位置 C:\Windows\System32\drivers\etc 中的hosts文件 修改方式 指定IP 域名 192.168.66.7 www.baidu.com

  3. java网络之tcp

    简单tcp传输 package pack; /* 演示tcp传输. 1,tcp分客户端和服务端. 2,客户端对应的对象是Socket. 服务端对应的对象是ServerSocket. 客户端, 通过查阅 ...

  4. android UI中添加一张图片如何将这张图片中某一部分设为透明的

    可以利用canvas画布类,这个类的具体方法可以参看官方api.http://developer.android.com/reference/android/graphics/Canvas.html ...

  5. 设计一个 iOS 控件

    转载自:http://blog.csdn.net/zhangao0086/article/details/45622875 代码的等级:可编译.可运行.可测试.可读.可维护.可复用 前言 一个控件从外 ...

  6. make[1]: *** [/workopenwrt/trunk/staging_dir/target-mipsel_24kec+dsp_uClibc-0.9.33.2/stamp/.tools_install_nnnnn] Error 2 make[1]: Leaving directory `/work/openwrt/trunk' make: *** [world]

    主要原因是编译时未连上网,编译时需要下载些插件,连接网后,重启下系统再编译下.

  7. PAT (Advanced Level) 1048. Find Coins (25)

    先对序列排序,然后枚举较小值,二分较大值. #include<iostream> #include<cstring> #include<cmath> #includ ...

  8. h2database.com 高级特性

    http://www.h2database.com/html/advanced.html http://www.h2database.com/html/features.html

  9. android4.0 的图库Gallery2代码分析(一)

    最近迫于生存压力,不得不给人兼职打工.故在博文中加了个求点击的链接.麻烦有时间的博友们帮我点击一下.没时间的不用勉强啊.不过请放心,我是做技术的,肯定链接没病毒,就是我打工的淘宝店铺.嘻嘻.http: ...

  10. eclipse proxy

    -Dorg.eclipse.ecf.provider.filetransfer.excludeContributors=org.eclipse.ecf.provider.filetransfer.ht ...