编写可测试的JavaScript代码
作者:网络转载 发布时间:[ 2016/6/2 15:03:04 ] 推荐标签:Javascript web测试
这里是不可测试的 URL rewriter 示例:
JavaScript
function redirectTo(url) {
if (url.charAt(0) === "#") {
window.location.hash = url;
} else if (url.charAt(0) === "/") {
window.location.pathname = url;
} else {
window.location.href = url;
}
}
function redirectTo(url) {
if (url.charAt(0) === "#") {
window.location.hash = url;
} else if (url.charAt(0) === "/") {
window.location.pathname = url;
} else {
window.location.href = url;
}
}
虽然示例中的逻辑很简单,但我们也能设想到情况更复杂的 redirecter 。随着复杂度的上升,我们不能在不触发 window 重定向的情况下测试这个方法,而这样会完全离开测试套件。
这里是可测试版本:
JavaScript
function _getRedirectPart(url) {
if (url.charAt(0) === "#") {
return "hash";
} else if (url.charAt(0) === "/") {
return "pathname";
} else {
return "href";
}
}
function redirectTo(url) {
window.location[_getRedirectPart(url)] = url;
}
function _getRedirectPart(url) {
if (url.charAt(0) === "#") {
return "hash";
} else if (url.charAt(0) === "/") {
return "pathname";
} else {
return "href";
}
}
function redirectTo(url) {
window.location[_getRedirectPart(url)] = url;
}
而现在我们可以为 _getRedirectPart 编写一个简单的测试套件:
JavaScript
test("_getRedirectPart", function() {
equal(_getRedirectPart("#foo"), "hash");
equal(_getRedirectPart("/foo"), "pathname");
equal(_getRedirectPart("http://foo.com"), "href");
});
test("_getRedirectPart", function() {
equal(_getRedirectPart("#foo"), "hash");
equal(_getRedirectPart("/foo"), "pathname");
equal(_getRedirectPart("http://foo.com"), "href");
});
现在重要的 redirectTo 已经通过测试,我们不必担心会意外地跳转到测试套件之外了。
注意:有一种备选解决方案是创建 performRedirect 函数做地址跳转,但是在测试套件中隔离此函数。这是许多人的常用实践,但是我会尽量避免方法隔离。我发现在我目前的所有情形中 QUnit 基本上工作得很好,并且更倾向于像上面那样,不用在测试中隔离函数,但是你的情形可能会不太一样。
编写大量测试
这是明摆着的事情,但是仍然要记住它。许多程序员写的测试太少,因为写测试很难,或者很费事。我一直都被这个问题所困扰,所以我写出了一个 QUnit 助手让写大量的测试更简单。这是一个叫 testCases 的函数,你在 test 块中可以调用,可以传进一个函数,调用上下文和输入/输出的数组用来尝试及比对。你可以为你的输入/输出函数快速地构建出健壮缜密的测试。
JavaScript
function testCases(fn, context, tests) {
for (var i = 0; i < tests.length; i++) {
same(fn.apply(context, tests[i][0]), tests[i][1],
tests[i][2] || JSON.stringify(tests[i]));
}
}
function testCases(fn, context, tests) {
for (var i = 0; i < tests.length; i++) {
same(fn.apply(context, tests[i][0]), tests[i][1],
tests[i][2] || JSON.stringify(tests[i]));
}
}
这里是一个简单的使用示例:
JavaScript
test("foo", function() {
testCases(foo, null, [
[["bar", "baz"], "barbaz"],
[["bar", "bar"], "barbar", "a passing test"]
]);
});
test("foo", function() {
testCases(foo, null, [
[["bar", "baz"], "barbaz"],
[["bar", "bar"], "barbar", "a passing test"]
]);
});
总结
关于可测试的JavaScript有很多要写的内容。我确信这类书籍有很多,但是我希望这篇文章能基于我的日常所得,提供一份实用案例的概览。因为我并不是一个测试专家,所以如果我出错了,或者提供了不好的建议,请告诉我。
本文内容不用于商业目的,如涉及知识产权问题,请权利人联系SPASVO小编(021-61079698-8054),我们将立即处理,马上删除。
相关推荐
更新发布
功能测试和接口测试的区别
2023/3/23 14:23:39如何写好测试用例文档
2023/3/22 16:17:39常用的选择回归测试的方式有哪些?
2022/6/14 16:14:27测试流程中需要重点把关几个过程?
2021/10/18 15:37:44性能测试的七种方法
2021/9/17 15:19:29全链路压测优化思路
2021/9/14 15:42:25性能测试流程浅谈
2021/5/28 17:25:47常见的APP性能测试指标
2021/5/8 17:01:11热门文章
常见的移动App Bug??崩溃的测试用例设计如何用Jmeter做压力测试QC使用说明APP压力测试入门教程移动app测试中的主要问题jenkins+testng+ant+webdriver持续集成测试使用JMeter进行HTTP负载测试Selenium 2.0 WebDriver 使用指南