QUnit 实践一
项目准备启用Qunit, 先来尝试一下。 不说废话,上代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>QUint</title>
<link rel="stylesheet" href="qunit.css">
<script src="qunit.js"></script>
<script type="text/javascript"> myfunc = function(a){
return a^3;
}
function Foo( x, y, z ) {
this.x = x;
this.y = y;
this.z = z;
} test("Simple", function(assert) {
assert.ok(function(){return "world1"}, "world");
assert.notOk(1 === "1", "=== failed!");
ok(1 == "1", "== pass!");
equal('1',1,"1==1 equal");
assert.ok(myfunc(1) == 2,"calc pass"+(1^3));
}); var a = new Foo(1,2,3);
var b = a;
test("object",function(){
propEqual(a,b,"a is same as b");
strictEqual(a,b,"a is strict same as b");
a.x =8;
propEqual(a,b,"a is same as b");
a = {x:8,y:2,z:3};
propEqual(a,b,"a is same as b");
notStrictEqual(a,b,"a is not strict same as b");
a = new Foo(1,2,3);
notPropEqual(a,b,"a is not same as b");
b = new Foo(1,2,3);
notEqual(a,b,"a is not same as b");
notStrictEqual(a,b,"a is not strict same as b for different object");
deepEqual(a,b,"a b DeepEqual");
}); test( "async", function( assert ) {
assert.expect( 2 ); var done1 = assert.async();
var done2 = assert.async();
setTimeout(function() {
assert.ok( true, "test resumed from async operation 1" );
done1();
}, 500 );
setTimeout(function() {
assert.ok( true, "test resumed from async operation 2" );
done2();
}, 150);
}); QUnit.test( "expect test", function( assert ) {
assert.expect( 1 ); function calc( x, operation ) {
return operation( x );
} var result = calc( 2, function( x ) {
assert.ok( true, "calc() calls operation function" );
return x * x;
}); assert.equal( result, 4, "2 squared equals 4" );
});
</script>
</head> <body>
<h1 id="qunit-header">QUnit Report</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>
看报告:

看起来不错, 有equal, deepEqual, strictEqual要区别下。
在看看dom的操作:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo1</title>
<link rel="stylesheet" href="../../qunit.css">
<script src="../../qunit.js"></script>
<script type="text/javascript">
function submit (argument) {
// body...
var Str = document.getElementById("userName").value + document.getElementById("password").value;
document.getElementById("result").innerText = Str;
}
function reset (argument) {
// body...
document.getElementById("userName").value = document.getElementById("password").value = "";
document.getElementById("result").innerText = "";
} test("Simple", function(assert) {
document.getElementById("userName").value = "username";
document.getElementById("password").value = "password";
submit();
assert.equal(document.getElementById("result").innerText,"username" + "password","test input");
reset();
assert.equal(document.getElementById("password").value,document.getElementById("userName").value,"reset");
});
</script>
</head>
<body>
<!-- <form > -->
<div>
<div>
<label for="userName">UserName:</label>
<input type="text" id="userName" name="userName">
</div>
<div>
<label for="password">password:</label>
<input type="text" id="password" name="password">
</div>
<div>
<input type="button" value="submit" onclick="submit()">
</div>
</div>
<!-- </form> -->
<div id="result"> </div> <div id="test">
<h1 id="qunit-header">QUnit Report</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol>
</div>
</body>
</html>
图:

运行还可以啊。
问题来了: 怎么把测试报告也页面分离,这样太丑了? 继续研究。。。
QUnit 实践一的更多相关文章
- 使用Node.js完成的第一个项目的实践总结
http://blog.csdn.net/yanghua_kobe/article/details/17199417 项目简介 这是一个资产管理项目,主要的目的就是实现对资产的无纸化管理.通过为每个资 ...
- 测试工具使用-Qunit单元测试使用过程
031302620 应课程要求写一篇单元测试工具的博客,但是暂时没用到java,所以不想使用junit(对各种类都不熟悉的也不好谈什么测试),原计划是要用phpunit,但是安装经历了三个小时,查阅各 ...
- [转]使用Node.js完成的第一个项目的实践总结
本文转自:http://blog.csdn.net/yanghua_kobe/article/details/17199417 https://github.com/yanghua/FixedAsse ...
- 互联网研发效能之去哪儿网(Qunar)核心领域DevOps落地实践
本文从业务目标角度出发,确定了开源+自建模式搭建 Qunar 研发工具链整体生态:通过 APPCODE 打通工具链,流程规范化自动化:多种手段+发布门禁助力质量提升:建立应用画像确定运维最小单元,可发 ...
- webp图片实践之路
最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...
- Hangfire项目实践分享
Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...
- TDD在Unity3D游戏项目开发中的实践
0x00 前言 关于TDD测试驱动开发的文章已经有很多了,但是在游戏开发尤其是使用Unity3D开发游戏时,却听不到特别多关于TDD的声音.那么本文就来简单聊一聊TDD如何在U3D项目中使用以及如何使 ...
- Logstash实践: 分布式系统的日志监控
文/赵杰 2015.11.04 1. 前言 服务端日志你有多重视? 我们没有日志 有日志,但基本不去控制需要输出的内容 经常微调日志,只输出我们想看和有用的 经常监控日志,一方面帮助日志微调,一方面及 ...
- 【大型网站技术实践】初级篇:借助Nginx搭建反向代理服务器
一.反向代理:Web服务器的“经纪人” 1.1 反向代理初印象 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从 ...
随机推荐
- 【NOI 2018】冒泡排序(组合数学)
题意大概是给定一个长度为$n$的排列$p$,求有多少长度为$n$的排列满足冒泡排序的交换次数为$\frac{1}{2} \sum\limits_{i = 1}^{n}|i - p_{i}|$. 可以发 ...
- 洛谷 P1972 [SDOI2009]HH的项链 解题报告
P1972 [SDOI2009]HH的项链 题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断 ...
- [HAOI2011]防线修建
题目描述 近来A国和B国的矛盾激化,为了预防不测,A国准备修建一条长长的防线,当然修建防线的话,肯定要把需要保护的城市修在防线内部了.可是A国上层现在还犹豫不决,到底该把哪些城市作为保护对象呢?又由于 ...
- HDU 4825 tire树
Xor Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 132768/132768 K (Java/Others)Total S ...
- 题解【bzoj2002 [Hnoi2010]Bounce 弹飞绵羊】
Description 给 \(n\) 个点以及它们的弹力系数 \(k_i\) ,含义为 可以弹到 \(i + k_i\) 的位置. 支持两个东西,修改一个点的弹力系数:求一个点要弹多少次弹出 \(n ...
- sqlalchemy外键关联
一.创建两张表,并关联外键 导入ForenginKey模块 # -*- coding: UTF-8 -*- from sqlalchemy import create_engine from sqla ...
- C++ 注册表编程
原文 C++ 注册表编程 1.基础知识 注册表的组织方式跟文件目录比较相似,主要分为根键.子键和键值项三部分,与文件目录对应的话就是根目录.子目录和文件.分别介绍一下这三部分: (1)根键.分为5个, ...
- asp.net webapi http请求生命周期
先附上webapi http生命周期图. 原始的图片地址为:https://www.asp.net/media/4071077/aspnet-web-api-poster.pdf
- HDU 2841 容斥 或 反演
$n,m <= 1e5$ ,$i<=n$,$j<=m$,求$(i⊥j)$对数 /** @Date : 2017-09-26 23:01:05 * @FileName: HDU 284 ...
- Element-UI 表格 列过多内容换行问题
本文地址:http://www.cnblogs.com/veinyin/p/8487098.html 一般表格不会有很多列,所以在使用时会很方便,但是如果有25+个列时,就会发现宽度完全不够用,只有 ...