标记档案: Qunit

如何: 配置单元测试和测试覆盖率与 QUnit.js 和 Blanket.js 办公室 365 SharePoint 应用程序

发表评论

简介

我都一直在探索单元测试和测试覆盖率的 JavaScript 作为我为 SharePoint 在线在办公室工作一个新的 SharePoint 应用程序 365 套房。  明显的研究路径带我去 Qunit.js 在那之后的权利, 自 Blanket.js.

QUnit 让我设置了单元测试，并将其组合为模块。  一个模块只是简单方式组织相关的测试. (我用它作为不肯定, 但它为我工作到目前为止与迄今定义了的测试的小集).

Blanket.js 与 Qunit 集成，它将显示我的实际行的 JavaScript 是 — — 和更重要的是 — — 不实际执行过程中运行测试。  这是"覆盖"— — 执行的行测试覆盖的，有些则不.

设置好的测试用例和查看覆盖范围之间, 我们可以减少我们的代码已隐藏缺陷的风险。  好的时候.

Qunit

假设你有你的 Visual Studio 项目设置, 通过下载从 JavaScript 包开始 http://qunitjs.com.  向解决方案中添加的 JavaScript 和 CSS 相应。  我的看起来像这样:

image

图 1

如您所见, 我正在使用 1.13.0 当时我写了这篇博客. 别忘了下载和添加的 CSS 文件.

这让开, 下一步是创建某些种类的测试工具和参考的 Qunit 位。  我在一个叫"QuizUtil.js"，所以，创造了一个叫"QuizUtil_test.html"，如图所示的 HTML 页面的脚本文件中测试一堆函数:

image 图 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 类 =&quot;此处将有机可乘&quot;&gt;一些文本&这是;/div&gt;", "更复杂的测试字符串。");
        });

        模块("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>

有几个这里发生的事:

  1. 引用我的代码 (QuizUtil.js)
  2. 引用 Qunity.js
  3. 定义某些模块 (getIDFromLookup, 饼干, 和其他人)
  4. 放置 <div> 其 ID 是"qunit".

然后, 我只是把这页和你这样的东西:

image

图 3

如果你看的顶部, 你有几个选项, 其中两个是有趣:

  • 隐藏通过的测试: 很明显。  可以帮助您的眼睛只看到问题的范围和不多的杂波.
  • 模块: (下拉列表): 这将筛选到测试你想要的只是那些组测试.

至于测试本身 — — 几个评论:

  • 不用说您需要编写代码，它是可测试的放在第一位。  使用该工具可以帮助执行的纪律. 例如, 我有一个称为"getTodayAsCaml 函数()”.  这并不是非常可测试因为它需要没有输入的参数，并测试是否相等, 我们将需要不断更新的测试代码，以反映当前的日期。  我重构它通过添加数据输入的参数，然后传递时我想今天的日期加枫格式的当前日期.
  • 它看起来非常坚固和 Qunit 框架文件自行测试。  它可以做简单的事情，像相等性测试，并还提供了对支持 ajax 样式调用 ("真正"或嘲笑使用您最喜爱的亵).
  • 经历过程也会迫使你想通过边缘情况 — — 发生了什么"未定义"或 null 传递到一个函数。  它使死了简单的测试了这些方案。  好的东西.

覆盖面 Blanket.js

Blanket.js 是 Qunit 补充通过跟踪代码的执行过程中运行测试的实际行数。  它集成右 Qunit 即使它是整个单独的应用程序, 它很好地扮演 — — 它看起来真的像它是一个无缝的应用程序.

这是 blanket.js 在行动:

image 图 4

image

图 5

(你实际上必须单击顶部的"启用覆盖范围"复选框 [见图 3] 要启用此功能。)

在图中突出显示的行 5 我的测试中的任何没有执行过, 所以我需要设计一种测试不会导致他们能够执行如果我想要全覆盖.

获取 blanket.js 工作按照下面的步骤:

  1. 它从下载 http://blanketjs.org/.
  2. 将它添加到您的项目
  3. 更新您的测试线束页 (在我的案子中 QuizUtil_test.html) 如下所示:
    1. 引用的代码
    2. 装饰你 <脚本> 像这样的引用: 
    <脚本 类型="文本/javascript" src="QuizUtil.js" 数据覆盖></脚本>

Blanket.js 拾取"的数据覆盖"属性并不会它的魔力。  它的挂接 Qunit, 更新的用户界面，若要添加"启用覆盖范围"选项和瞧!

摘要 (TL; 博士)

使用 Qunit 来编写测试用例.

  • 下载
  • 将它添加到您的项目
  • 写测试线束页
  • 创建您的测试
    • 重构您的代码可测试的一些
    • 有创意!  疯狂的想, 不可能的情况下，无论如何进行测试.

使用 blanket.js，以确保覆盖范围

  • 确保工作 Qunit
  • 下载 blanket.js 并将其添加到您的项目
  • 将它添加到您的测试线束页:
    • 将引用添加到 blanket.js
    • "数据-盖"将属性添加到您 <脚本> 标记
  • 运行 Qunit 测试.

我从来没有做之前，有一些基本的东西，在少数几个小时的工作。 

幸福测试!

</结束>

undefined订阅我的博客.

跟我在 Twitter 上 http://www.twitter.com/pagalvin