简介
我都一直在探索单元测试和测试覆盖率的 JavaScript 作为我为 SharePoint 在线在办公室工作一个新的 SharePoint 应用程序 365 套房。 明显的研究路径带我去 Qunit.js 在那之后的权利, 自 Blanket.js.
QUnit 让我设置了单元测试，并将其组合为模块。 一个模块只是简单方式组织相关的测试. (我用它作为不肯定, 但它为我工作到目前为止与迄今定义了的测试的小集).
Blanket.js 与 Qunit 集成，它将显示我的实际行的 JavaScript 是 — — 和更重要的是 — — 不实际执行过程中运行测试。 这是"覆盖"— — 执行的行测试覆盖的，有些则不.
设置好的测试用例和查看覆盖范围之间, 我们可以减少我们的代码已隐藏缺陷的风险。 好的时候.
Qunit
假设你有你的 Visual Studio 项目设置, 通过下载从 JavaScript 包开始 http://qunitjs.com. 向解决方案中添加的 JavaScript 和 CSS 相应。 我的看起来像这样:
图 1
如您所见, 我正在使用 1.13.0 当时我写了这篇博客. 别忘了下载和添加的 CSS 文件.
这让开, 下一步是创建某些种类的测试工具和参考的 Qunit 位。 我在一个叫"QuizUtil.js"，所以，创造了一个叫"QuizUtil_test.html"，如图所示的 HTML 页面的脚本文件中测试一堆函数:
图 2
下面是代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/ 1999/xhtml">
<头>
<标题>QuizUtil 试验与 Qunit</标题>
<链接 区域快线="样式表" href="../CSS/qunit-1.13.0.css" />
<脚本 类型="文本/javascript" src="QuizUtil.js" 数据覆盖></脚本>
<脚本类型 ="文本/javascript" src ="qunit 1.13.0.js"></脚本>
<脚本类型 ="文本/javascript" src ="blanket.min.js"></脚本>
<脚本>
模块("getIDFromLookup");
测试("QuizUtil getIDFromLookupField", 功能 () {
var goodValue = "1;#保罗 · 高尔文";
平等(getIDFromLookupField(goodValue) + 1, 2), "ID 的 [" + goodValue + "] + 1 应该是 2";
平等(getIDFromLookupField(未定义), 未定义, "未定义输入的参数应返回未定义的结果。");
平等(getIDFromLookupField(""), 未定义, "空输入的参数应返回未定义的值。");
平等(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), 未定义,"应始终返回结果可转换为整数");
平等(getIDFromLookupField("2;#一些其他人"), "2", "检查 [2;#一些其他人].");
平等(getIDFromLookupField("9834524;#长整型值"), "9834524", "大值测试。");
notEqual(getIDFromLookupField("5;#任何人", 6), 6, "测试 notEqual (5 不等于 6 对于此示例: [5;#任何人]");
});
模块("htmlEscape");
测试("QuizUtil htmlEscape()", 功能 () {
平等(htmlEscape("<"), "&这是;", "逃离小于运算符 ('<')");
平等(htmlEscape("<div 类 = "someclass">一些文本</div>"), "&这是;div 类 ="此处将有机可乘">一些文本&这是;/div>", "更复杂的测试字符串。");
});
模块("getDateAsCaml");
测试("QuizUtil getDateAsCaml()", 功能 () {
平等(getDateAsCaml(新增功能 日期("2013/12/31")), "2013年-12-31T:00:00:00", "测试硬编码的日期: [12/31/2013]");
平等(getDateAsCaml(新增功能 日期("01/05/2014")), "2014年-01-05T:00:00:00", "测试硬编码的日期: [01/05/2014]");
平等(getDateAsCaml(新增功能 日期("01/31/2014")), "2014年-01-31T:00:00:00", "测试硬编码的日期: [01/31/2014]");
平等(getTodayAsCaml(), getDateAsCaml(新增功能 日期()), "getTodayAsCaml() 应等于 getDateAsCaml(新的日期())");
平等(getDateAsCaml("一派胡言价值"), 未定义, "尝试获取一个废话值的日期。");
平等(getDateAsCaml(未定义), 未定义, "尝试获取的日期 [未定义] 日期。");
});
模块("getParameterByName");
测试("QuizUtil getParameterByName (从查询字符串)", 功能 () {
平等(getParameterByName(未定义), 未定义, "尝试获取未定义的参数应返回未定义。");
平等(getParameterByName("不存在"), 未定义, "尝试获取参数值，当我们知道该参数不存在。");
});
模块("Cookie");
测试("QuizUtil 各种 cookie 功能。", 功能 () {
平等(setCookie("测试", "1", -1), getCookieValue("测试"), "让我设置一个 cookie 应该工作。");
平等(setCookie("anycookie", "1", -1), true, "设置有效的烹饪应返回 '真正的'。");
平等(setCookie("疯狂的 cookie 名称 !@#$%"%\^&*(()?/><.,", "1", -1), true, "设置坏 cookie 的名称应返回 false。");
平等(setCookie(未定义, "1", -1), 未定义, "传递作为该 cookie 的名称未定义。");
平等(getCookieValue("不存在"), "", "Cookie 不存在测试。");
});
</脚本>
</头>
<正文>
<div id="qunit"></div>
<div id="qunit 夹具"></div>
</正文>
</html>
有几个这里发生的事:
- 引用我的代码 (QuizUtil.js)
- 引用 Qunity.js
- 定义某些模块 (getIDFromLookup, 饼干, 和其他人)
- 放置 <div> 其 ID 是"qunit".
然后, 我只是把这页和你这样的东西:
图 3
如果你看的顶部, 你有几个选项, 其中两个是有趣:
- 隐藏通过的测试: 很明显。 可以帮助您的眼睛只看到问题的范围和不多的杂波.
- 模块: (下拉列表): 这将筛选到测试你想要的只是那些组测试.
至于测试本身 — — 几个评论:
- 不用说您需要编写代码，它是可测试的放在第一位。 使用该工具可以帮助执行的纪律. 例如, 我有一个称为"getTodayAsCaml 函数()”. 这并不是非常可测试因为它需要没有输入的参数，并测试是否相等, 我们将需要不断更新的测试代码，以反映当前的日期。 我重构它通过添加数据输入的参数，然后传递时我想今天的日期加枫格式的当前日期.
- 它看起来非常坚固和 Qunit 框架文件自行测试。 它可以做简单的事情，像相等性测试，并还提供了对支持 ajax 样式调用 ("真正"或嘲笑使用您最喜爱的亵).
- 经历过程也会迫使你想通过边缘情况 — — 发生了什么"未定义"或 null 传递到一个函数。 它使死了简单的测试了这些方案。 好的东西.
覆盖面 Blanket.js
Blanket.js 是 Qunit 补充通过跟踪代码的执行过程中运行测试的实际行数。 它集成右 Qunit 即使它是整个单独的应用程序, 它很好地扮演 — — 它看起来真的像它是一个无缝的应用程序.
这是 blanket.js 在行动:
图 4
图 5
(你实际上必须单击顶部的"启用覆盖范围"复选框 [见图 3] 要启用此功能。)
在图中突出显示的行 5 我的测试中的任何没有执行过, 所以我需要设计一种测试不会导致他们能够执行如果我想要全覆盖.
获取 blanket.js 工作按照下面的步骤:
- 它从下载 http://blanketjs.org/.
- 将它添加到您的项目
- 更新您的测试线束页 (在我的案子中 QuizUtil_test.html) 如下所示:
- 引用的代码
- 装饰你 <脚本> 像这样的引用:
<脚本 类型="文本/javascript" src="QuizUtil.js" 数据覆盖></脚本>
Blanket.js 拾取"的数据覆盖"属性并不会它的魔力。 它的挂接 Qunit, 更新的用户界面，若要添加"启用覆盖范围"选项和瞧!
摘要 (TL; 博士)
使用 Qunit 来编写测试用例.
- 下载
- 将它添加到您的项目
- 写测试线束页
- 创建您的测试
- 重构您的代码可测试的一些
- 有创意! 疯狂的想, 不可能的情况下，无论如何进行测试.
使用 blanket.js，以确保覆盖范围
- 确保工作 Qunit
- 下载 blanket.js 并将其添加到您的项目
- 将它添加到您的测试线束页:
- 将引用添加到 blanket.js
- "数据-盖"将属性添加到您 <脚本> 标记
- 运行 Qunit 测试.
我从来没有做之前，有一些基本的东西，在少数几个小时的工作。
幸福测试!
</结束>
订阅我的博客.
跟我在 Twitter 上 http://www.twitter.com/pagalvin
