您的位置：首页 > Web前端 > JavaScript

Secret of the JavaScript Ninja 学习笔记 - 1

2013-02-13 06:48 477 查看

第二章 Arming with testing and debugging

两种主要的调试策略：

日志（console.log()，alert()）
断点
示例一使用console.log()

<html>
<head>
<script type="text/javascript">
console.log("strat initialization");
console.log("done");
</script>
</head>
<body>
hello world
</body>

下图是采用Chrome装载该页面时，JavaScript console内现实的信息：

两种主要类型的测试用例

解构性用例
构造性用例
jsbin - http://jsbin.com 这是一个很方便的自己用来测试一些小代码片段，分享示例代码的网站。

四大测试工具

QUnit
YUI Test
JsUnit
Selenium

创建一个简单的测试框架

先实现一个ASSERT方法

<html>
<head>
<title>Test Suite</title>
<script>
function assert(value, desc) {
var li = document.createElement("li");
li.className = value ? "pass" : "fail";
li.appendChild(document.createTextNode(desc));
document.getElementById("results").appendChild(li);
}

window.onload = function() {
assert(true, "The test suite is running.");
assert(false, "Fail!");
}
</script>

<style>
#results li.pass { color: green; }
#results li.fail { color: red; }
</style>
</head>

<body>
<ul id="results"></ul>
</body>
</html>

下面是该网页的运行结果：

接下来，我们在前面程序的基础上开发一个可以操作测试集合的程序。

<html>
<head>
<title>Test Suite</title>
<script>
(function() {
var results;

this.assert = function assert(value, desc) {
var li = document.createElement("li");
li.className = value ? "pass" : "fail";
li.appendChild(document.createTextNode(desc));
results.appendChild(li);
if (!value) {
li.parentNode.parentNode.className = "fail";
}
return li;
};

this.test = function test(name, fn) {
results = document.getElementById("results");
results = assert(true, name).appendChild(document.createElement("ul"));
fn();
};
})();

window.onload = function() {
test("A test.", function() {
assert(true, "1 assert");
assert(true, "2 assert");
});
test("2 test.", function() {
assert(true, "1 assert");
assert(false, "2 assert");
});
}
</script>

<style>
#results li.pass { color: green; }
#results li.fail { color: red; }
</style>
</head>

<body>
<ul id="results"></ul>
</body>
</html>

注 - 此处的this是Window.

下图是运行结果

<html>
<head>
<title>Test Suite</title>
<script>
(function() {
var queue = [], paused = false, results;

this.test = function(name, fn) {
queue.push(function() {
results = document.getElementById("results");
results = assert(true, name).appendChild(document.createElement("ul"));
fn();
});
runTest();
};

this.pause = function() {
paused = true;
}

this.resume = function() {
paused = false;
setTimeout(runTest, 1);
}

function runTest() {
if (!paused && queue.length) {
queue.shift()();
if (!paused) {
resume();
}
}
}

this.assert = function assert(value, desc) {
var li = document.createElement("li");
li.className = value ? "pass" : "fail";
li.appendChild(document.createTextNode(desc));
results.appendChild(li);
if (!value) {
li.parentNode.parentNode.className = "fail";
}
return li;
};

this.test = function test(name, fn) {
results = document.getElementById("results");
results = assert(true, name).appendChild(document.createElement("ul"));
fn();
};
})();

window.onload = function() {
test("A test.", function() {
pause();
setTimeout(function() {
assert(true, "1 assert");
assert(true, "2 assert");
resume();
}, 1000);
});
test("B test.", function() {
pause();
setTimeout(function() {
assert(true, "1 assert");
assert(true, "2 assert");
resume();
}, 1000);
});
}
</script>

<style>
#results li.pass { color: green; }
#results li.fail { color: red; }
</style>
</head>

<body>
<ul id="results"></ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JAVASCRIPT WEB前端编程语言

相关文章推荐

新的分享

章节导航