澳门新葡萄京官网首页 1

使用 QUnit 进行 JavaScript 单元测试

简介

QUnit是二个精锐的JavaScript单元测验框架。他可用来jQuery,jQuery
UI和jQuery Mobile项目,以致任何利用JavaScript代码编写的门类的测验。

 简介

运增势况

  • 任何Html和JavaScript编辑器(Visual Studio 2013)
  • 从QUnit官方下载reference js和css文件

  单元测量试验关切的是印证三个模块或一段代码的实践职能是还是不是和策动或预期相似。有个别开拓人士感到,编写测量试验用例浪费时间而宁愿去编写新的模块。然则,在拍卖大型应用程序时,单元测量试验实际上会节省时间;它能协助你跟踪难题并安全地换代代码。

加盟QUnit到单元测验

增加QUnit.js和QUnit.css到你要测量检验的HTML页面中。

<script src="//code.jquery.com/qunit/qunit-1.22.0.js"></script>
<link rel="stylesheet" 
href="https://code.jquery.com/qunit/qunit-1.22.0.css">

  常用缩略语

始建需求开展单元测量检验的JavaScript类

快要举办单元测量试验的代码放到多个独门的js文件中(Calculations.js):

// Create Calculation class.
var Calculation = function () { };

// Add Addition to method to the Calculation class.
Calculation.prototype.Add = function (a, b) {
    return a + b;
};

// Add Subtraction method to the Calculation class.
Calculation.prototype.Substraction = function (a, b) {
    return a - b;
};

// Add Multiplication method to the Calculation class.
Calculation.prototype.Multiplication = function (a, b) {
    return a * b;
};

// Add Division method to the Calculation class.
Calculation.prototype.Division = function (a, b) {
    return a / b;
};

  DOM:文档对象模型

为地点的艺术创设一个单元测量检验用例

澳门新葡萄京官网首页,下边包车型地铁代码正是上边JavaScript方法的单元测量试验用例,大家同样将它内置单独的叁个js文件中(UnitTest.js):

// Instantiate Calculation class.
var c = new Calculation();
// Unit test for addition.
QUnit.test("Addition Test", function (assert) {   
    assert.ok(c.Add(2, 3) == "5", "Passed!");
});

// Unit test for subtraction.
QUnit.test("Substraction Test", function (assert) {
    assert.ok(c.Substraction(3, 2) == "1", "Passed!");
});

// Unit test for division.
QUnit.test("Division Test", function (assert) {
    assert.ok(c.Division(5, 5) == "1", "Passed!");
});

// Unit test for multiplication.
QUnit.test("Multiplication Test", function (assert) {
    assert.ok(c.Multiplication(5, 5) == "25", "Passed!");
});

  HTML:超文本标识语言

在HTML代码中引用全体的js和css文件

在HTML代码中分头创制二个id为qunit、qunit-fixture的div标识。

<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src="~/Scripts/Calculations.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="//code.jquery.com/qunit/qunit-1.22.0.js"></script>
<script src="~/Scripts/UnitTest.js"></script>

  JSTD:JSTestDriver

QUnit测量试验结果窗口

澳门新葡萄京官网首页 1

  YUI:Yahoo! User Interface

  在过去,只对服务器端语言实行单元测量试验。但后边二个组件更加的复杂,使得编写
JavaScript
代码测验用例的必要日益增加。要是你有毛病编写客商端脚本的测量试验,学习进程恐怕特别难。测量试验客户分界面大概需求在思绪上做一些调动。(有个别程序开拓职员不经常半会还不可能相信
JavaScript 是适度的编制程序语言。)

  在本文中,您将学习怎样行使 QUnit、YUI Test 和 JSTestDriver 对
JavaScript 进行单元测量检验。

  下载本文的源代码。

  JavaScript 单元测验

  为了演示 JavaScript 测量试验,这一节将解析 JavaScript
中三个着力函数测验用例。项目清单 1 展现了要测验的函数:将
3增多到传递的变量中。

  清单 1. 源代码 (example1/script.js)

1234 function addThreeToNumber{return el + 3;}

  清单 2 在自进行的函数中蕴藏了测量检验用例。

  清单 2.测量试验用例 (example1/test.js卡塔尔国

1234567891011 (function testAddThreeToNumber (){var a = 5,valueExpected= 8;if (addThreeToNumber === valueExpected) {console.log("Passed!");} else {console.log("Failed!");}};

  将 5 传递给测验的函数之后,测验检查再次来到值是
8。要是测量试验成功,就能够在二个现存浏览器的调整高雄打字与印刷出
Passed!;不然就能情不自禁Failed!。固然要运营测量检验,必要固守以下步骤进行操作:

  1. 将多个剧本文件导入作为测量试验运路程序的 HTML 页面中,如清单 3 所示。

  2. 在浏览器中张开页面。

  清单 3. HTML 页面 (example1/runner.html)

1234567891011 <!DOCTYPE html><html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Example 1</title><script type="text/javascript" src="js/script.js"></script><script type="text/javascript" src="js/test.js"></script></head><body></body></html>

  您能够不利用浏览器调节台,而是将结果打字与印刷在页面或由 alert(State of Qatar方法生成的弹出窗口中。

  断言是测量检验用例中的大旨要素,用来表明某一标准化是不是满足。比如,在 项目清单2 中,addThreeToNumber === valueExpected 正是八个预知。

  若是您有所超级多用例并含有超级多预知,那么使用框架就能够有利于广大。下边包车型客车开始和结果将会器重介绍部分最流行的
JavaScript 单元测验框架:QUnit、YUI Test和JSTestDriver。

  QUnit 入门

  QUnit 是与 JUnit相像的单元测验框架,jQuery 团队用它来对 jQuery
库进行单元测量试验。要选择 QUnit,供给依据以下办法:

  1. 下载 qunit.css 文件和 qunit.js 文件。

  2. 开立二个 HTML 页面,个中包蕴导入刚下载的 CSS 和 JavaScript
文件的特定标签。

  清单 4 显示了适用于 QUnit 的正规的 HTML 运路程序。

  项目清单 4. HTML 运路程序 (qunit/runner.htmlState of Qatar

123456789101112131415161718 <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>QUnit Test Suite</title><link rel="stylesheet" href="css/qunit.css" type="text/css" media="screen"><script type="text/javascript" src="js/lib/qunit.js"></script></head><body><h1 id="qunit-header">QUnit Test Suite</h1><h2 id="qunit-banner"></h2><div id="qunit-testrunner-toolbar"></div><h2 id="qunit-userAgent"></h2><ol id="qunit-tests"></ol><div id="qunit-fixture">test markup</div></body></html>

  借使您具有多少个函数分别承当将温度从摄氏转变为华氏,并转移回来。清单 5
展现了施行此转变的本子。

  清单 5. 转换 (qunit/js/script.js)

12345678910 function convertFromCelsiusToFahrenheit{var f = c * + 32;return f;}function convertFromFahrenheitToCelsius{var c = * ;return c;}

  清单 6 展现了个别的测量检验用例。

  清单 6. 测量检验用例 (qunit/js/test.js卡塔尔国

123456789101112131415161718 module ("Temperature conversion")test("conversion to F", function(){var actual1 = convertFromCelsiusToFahrenheit;equal(actual1, 68, ?Value not correct?);var actual2 = convertFromCelsiusToFahrenheit;equal(actual2, 86, ?Value not correct?);})test("conversion to C", function(){var actual1 = convertFromFahrenheitToCelsius;equal(actual1, 20, ?Value not correct?);var actual2 = convertFromFahrenheitToCelsius;equal(actual2, 30, ?Value not correct?);})

  QUnit 中的测验用例由 test()方法定义。逻辑是带有在传出函数的第4个参数中。在清单 6
中,五个测验分小名叫 conversion to F和 conversion to
C。各样测量试验富含四个断言。该测量检验中的断言使用了 equal(卡塔尔(قطر‎ 方法。equal(State of Qatar函数能够将预期值与测验函数的莫过于值相比较。equal(卡塔尔(قطر‎方法中的第多个参数是指鹿为马景况下显得的音讯。

  还是能透过 module(State of Qatar 函数将测量试验团队到模块中。在项目清单 6 中,Temperature
conversion 模块含有那多个测验。

  若是要运维测量检验:

  1. 在 HTML 运路程序中带有源代码和测量检验文件,如事项清单 7 所示。

  2. 在浏览器中开辟页面。

  清单 7. 在运维程序中隐含 script.js 和 test.js

1234 ...<script type="text/javascript" src="js/script.js"></script><script type="text/javascript" src="js/test.js"></script>...

  图 1 来得了 QUnit 如何在浏览器 中显示结果。

  图 1. QUnit 结果

澳门新葡萄京官网首页 2

  清单 6 中的断言使用了 equal(State of Qatar 方法,但它不是 QUnit
提供的惟一断言。QUnit 提供的别的断言满含 ok(卡塔尔(قطر‎ 或 strictEqual(State of Qatar。清单 8
彰显了正在施行的不二秘技。

  清单 8. 越来越多的断言

12345678 module ("Other assertion");test("assertions", function(){ok(true);ok;strictEqual("c", "c");equal (3, "3");});

  ok(卡塔尔 函数检查第二个参数为 true;strictEqual(卡塔尔验证第贰个参数严酷等于第二个参数。在这里些代码背后,strictEqual(卡塔尔(قطر‎使用了=== 运算符,equal(卡塔尔国 使用了 == 运算符。

  假如测量试验失利,QUnit 还提供了平价的音信。将项目清单 8 中的代码改成清单 9
中的代码,让上二次断言施行停业。

  清单 9. 上一遍断言现身的大谬不然

12345678 module ("Other assertion");test("assertions", function(){ok(true);ok;strictEqual("c", "c");strictEqual (3, "3");});

  图 2 突显了 QUnit 实施清单 9 代码所重回的结果。

  图 2. QUnit 结出:上次测验失败

澳门新葡萄京官网首页 3

  结果丰硕详细,並且超轻松查到上次断言的预期值与实际值有啥两样。

  QUnit
另一项特征能令你在模块中的全部测量试验施行从前或现在试行命令。module(卡塔尔函数选取 setup(卡塔尔 和 teardown(State of Qatar 回调作为第叁个参数。使用 setup(State of Qatar 函数更新
事项清单 6 ,如清单 10 所示。

  清单 10. setup() (qunit/js/test-setup.js)

1234567891011121314151617181920212223 module ("Temperature conversion", {setup : function() {this.celsius1 = 20;this.celsius2 = 30;this.fahrenheit1 = 68;this.fahrenheit2 = 86;}});test("conversion to F", function(){var actual1 = convertFromCelsiusToFahrenheit(this.celsius1);equal(actual1, this.fahrenheit1);var actual2 = convertFromCelsiusToFahrenheit(this.celsius2);equal(actual2, this.fahrenheit2);});test("conversion to C", function(){var actual1 = convertFromFahrenheitToCelsius(this.fahrenheit1);equal(actual1, this.celsius1);var actual2 = convertFromFahrenheitToCelsius(this.fahrenheit2);equal(actual2, this.celsius2);});

  该示例移动了安装某些的断言所使用的值,以幸免在测验的逻辑中使用那一个值。

  QUnit 还经过 asyncTest(卡塔尔国 函数提供对异步测量检验的支持,假设你使用
Asynchronous JavaScript and XML
,那是老大管用的特色。在此样的条件中,expect(State of Qatar函数能够让您轻轻松松地表明测验中运营的断言数量。

  YUI Test:独立的单元测量试验模块

  YUI Test 是 YUI
库的四个组件,是三个可增加而整机的单元测量检验框架。如若要动用 YUI
Test,须要:

  1. 将 YUI 导入 HTML 运营程序,如下所示。

1 <script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>

  如以上代码所示,此样例使用了 YUI Test 第 3 版本。

  2. 在测验脚本文件中,实例化 YUI 函数。加载所需的模块,test 和
console,如清单 11 所示。

  清单 11.下载 test 和 console YUI 模块

123 YUI().use("test", "console", function {// Test cases go here});

  test 模块分明是用来测量试验的。console
模块并非逼迫性的,但本示例将用它来打字与印刷结果。测量试验用例将会进来回调中,并以全局的
Y实例作为参数。

  YUI Test 使用 Y.Test.Case(卡塔尔(قطر‎ 布局函数实例化新测量试验用例,使用
Y.Test.Suite(卡塔尔国 布局函数来实例化测验套件。测验套件与 JUnit
相像,满含若干个测量检验用例。能够接纳 add(卡塔尔方法将测验用例加多到测量检验套件中。

  大家使用 YUI test 重新测量试验 清单 5 中的源代码。清单 12
显示了哪些制造测量检验用的套件和测量检验用例。

  项目清单 12. 测量检验套件和用例

123456789 YUI().use("test", "console", function {var suite = new Y.Test.Suite("Temperature conversion suite");//add a test casesuite.add(new Y.Test.Case({name:"Temperature conversion?)); });

  项目清单 12 生成了一个名称为 Temperature conversion suite 的套件和二个名为Temperature conversion
的测量检验用例。将来,能够将测量试验方法写入对象文本中,作为参数字传送递给
Y.Test.Case 构造函数,如清单 13 所示。

  事项清单 13. 测量试验用例与测验方法

123456789101112131415161718192021222324252627 suite.add(new Y.Test.Case({name:"Temperature conversion",setUp : function () {this.celsius1 = 20;this.celsius2 = 30;this.fahrenheit1 = 68;this.fahrenheit2 = 86;},testConversionCtoF: function () {Y.Assert.areEqual(this.fahrenheit1, convertFromCelsiusToFahrenheit(this.celsius1));Y.Assert.areEqual(this.fahrenheit2, convertFromCelsiusToFahrenheit(this.celsius2));},testConversionFtoC: function () {Y.Assert.areEqual(this.celsius1,convertFromFahrenheitToCelsius(this.fahrenheit1));Y.Assert.areEqual(this.celsius2, convertFromFahrenheitToCelsius(this.fahrenheit2));}}));

  您恐怕注意到,在项目清单 13 中:

  1. 可利用 setUp(卡塔尔(قطر‎ 方法。YUI Test 在测量试验用例和测验套件层提供了
setUp(卡塔尔国 和 tearDown(卡塔尔(قطر‎ 方法。

  2. 测验方法名以 test 单词开端,它们含有断言。

  3. 本示例使用 Y.Assert.areEqual(卡塔尔(قطر‎ 断言类型,它与 QUnit 中的 equal()函数相符。YUI Test 为断言提供了各个格局,如:

  1卡塔尔国. Y.Assert.areSame(卡塔尔,它好像于 QUnit 中的 strictEqual(State of Qatar。

  2State of Qatar.
数据类型断言(Y.Assert.isArray(卡塔尔国、Y.Assert.isBoolean(卡塔尔国、Y.Assert.isNumber。

  3卡塔尔.
特殊值断言(Y.Assert.isFalse(卡塔尔(قطر‎、Y.Assert.isNaN(卡塔尔(قطر‎、Y.Assert.isNull。

  要开动 YUI 中的测验,要求运用 Y.Test.Runner
对象。还索要将套件或测量检验用例增添到对象中,然后调用 run()方法来运行测试。清单 14 展现了何等运作 清单 13 中成立的测量检验。

  清单 14. 运行 YUI test

123 Y.Test.Runner.add;Y.Test.Runner.run();

  在暗中认可情形下,结果会打字与印刷在浏览器的调控新竹(要是浏览器帮忙调节台的话)。更加好的办法是利用
Yahoo! Console 组件来打字与印刷结果。如若要运用 Yahoo! Console 组件,必要运用
Y.Console 布局函数将调节台绑定到 HTML 运路程序的 DOM 成分中,如清单 15
所示。

  清单 15. Yahoo! Console

12345678 var console = new Y.Console({verbose: true,newestOnTop: false,width:"600px"});console.render('#testLogger');

  清单 15 展现了怎么着使用多少个参数配置调节台。该决定台会在 DOM
成分内部显示,其 id 为 testLogger。

  要求立异 HTML 运路程序。加多该调控台所引用的 DOM 成分,如清单 16
所示。

1234 <body><div id="testLogger"></div> </body>

  本例为 <body> 设置了贰个类,名为yui3-skin-sam。该类担负定义调整台的皮肤。

  图 3 展现了运营测量检验之后的调整台。

  图 3. YUI Test 结果

澳门新葡萄京官网首页 4

  使用 JSTestDriver 轻易测验

  通过应用作用强盛的 JSTestDriver
工具,您能够在两个浏览器中从命令行运转 JavaScript。JSTD 带有叁个 JAGL450文件,它能够让你运维服务器、捕获一或四个浏览器并在这里些浏览器中运营测验。因为具有上述的四个框架,您不需求HTML 运路程序,但你供给一个构造文件。图 17 显示了布署文件。

  清单 17. 布置文件 (jsTestDriver.conf卡塔尔

123456 server: http://localhost:4224load:- js/src/*.jstest:- js/test/*.js

  该配置文件是用 YAML
编写的,那是一种很好的布署文件格式。它包括了要开动的服务器以致源代码和测验文件的职务音信。

  要选用 JSTD 来实施测量试验:

  1. 起动测量试验服务器。从命令行中,步入到保存 jsTestDriver.jar
的文书夹,并施行以下命令:

1 java -jar JsTestDriver-1.3.3d.jar -port 4224

  清单 17 中内定的端口应该与配置文件中钦赐的均等。在暗许景况下,JSTD
会在 JAMurano 文件所在的同三个目录下搜索 jsTestDriver.conf 文件。

  2. 在测量试验中,通过将 UCRUISERL
复制粘贴到测量试验中的浏览器,在服务器上注册七个或八个浏览器。

  测量试验此前示例中所使用的均等代码,但此番使用 JSTD 语法。清单 18
显示了怎么样更改 清单 10 的 QUnit 和 项目清单14 的 YUI Test 中的代码。

  清单 18. JSTD 测试

1234567891011121314151617181920 TestCase("Temperature conversion", {setUp : function () {this.celsius1 = 20;this.celsius2 = 30;this.fahrenheit1 = 68;this.fahrenheit2 = 86;},testConversionCtoF: function () {assertSame(this.fahrenheit1, convertFromCelsiusToFahrenheit(this.celsius1));assertSame(this.fahrenheit2, convertFromCelsiusToFahrenheit(this.celsius2));},testConversionFtoC: function () {assertSame(this.celsius1, convertFromFahrenheitToCelsius(this.fahrenheit1));assertSame(this.celsius2, convertFromFahrenheitToCelsius(this.fahrenheit2));}});

  清单 18 中的代码与 YUI 版本差异比非常小。JSTD 使用 TestCase(卡塔尔(قطر‎函数来定义测量试验用例。您能够运用内联表明来定义测验方法,如项目清单 18
所示,只怕可以扩充 TestCase 实例的原型。每种测量检验用例还足以应用 SetUp(卡塔尔国和 tearDown(卡塔尔国 方法。

  假诺要运营测量试验,运行以下命令:

1 java -jar JsTestDriver-1.3.3d.jar --tests all

  图 4 展现了极点上的输出结果。

  图 4. JSTD 测验的结果

澳门新葡萄京官网首页 5

  测量试验会传出在此以前捕获到的兼具浏览器(Chrome 15、Safari 5 和 Firefox
7)。

  JSTD
仍可以够与您偏心的连接集成系统很好地合一,成为连年版本的一有个别。它还是可以够与 IDE
集成,如 Eclipse或 TextMate。

  结束语

  随着今后对 Web 应用程序顾客端的关心,对 JavaScript
举办单元测验就显得越发需要。有超多框架能够扶植你成功此职分,本文介绍了多个最风靡的框架:QUnit、YUI
Test 和 JSTestDriver。

  QUnit 特轻巧,很切合初大方的框架。

  YUI Test 是个周到的工具,适合熟谙 YUI 库的顾客。

  JSTestDriver 可在两个浏览器中运营测验。

发表评论

电子邮件地址不会被公开。 必填项已用*标注