65.9K
CodeProject 正在变化。 阅读更多。
Home

JavaScript 代码的验收测试驱动开发

jaganmohan206
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2013年9月26日

CPOL

4分钟阅读

viewsIcon

27971

downloadIcon

215

JavaScript 代码的验收测试驱动开发。

引言

随着 JavaScript 在我最近的项目中的作用日益增强，目前我们在基于 SOA 的项目中使用了 Dojo 和 Angular JS。我的经理们正强迫我采用 TDD 风格的开发，包括 JavaScript 代码。我找到了一些有趣的工具来支持 JavaScript 的测试驱动开发（TDD），并且它们与 Visual Studio 2012 很好地集成，我将在本文中与大家分享。

我项目目前使用的工具

  • Jasmine - BDD，框架独立，易于与 Ruby 项目和持续集成集成。
  • Js-test-driver - JsTestDriver 的目标是构建一个 JavaScript 测试运行器，该测试运行器易于与持续集成系统集成，并允许在多个浏览器上快速运行测试，从而简化 TDD 风格的开发。

验收测试驱动开发 (ATDD)

TDD 非常有价值，但你需要更多才能实现出色的单元测试覆盖率，并且仍然未能为客户提供价值。ATDD 专注于完整的功能。

  • ATDD：宏观视图
  • TDD：微观视图

JsTestDriver 是一个用于运行 JavaScript 代码单元测试的强大框架。它的主要优点是它可以从命令行在自动化的持续集成环境中执行，作为你的单元测试框架的一部分。我通常使用 Visual Studio 2012，并且可以使用“外部工具”机制将 JsTestDriver 附加到它。

JsTestDriver 在运行时的工作原理概述

第一部分：如何在没有任何插件的情况下使用 JsTestDriver 运行 JavaScript 测试用例（Visual Studio 和 Eclipse）

与代码文件共享的文件夹名称为 js-test-driver 的文件结构

设置和运行 JavaScript 测试的步骤

步骤 1：从这里下载 JsTestDriver jar 文件并放在你的本地机器上。

步骤 2：对于小型项目，只需创建两个文件夹，分别命名为“src”和“tests”，并包含名为“jsTestDriver.conf”的配置文件。

步骤 3：将你的 JavaScript 代码文件放在名为“src”的文件夹中，并创建 TestCases（使用原型或内联声明），将它们放在“tests”文件夹中。下面提供了有关如何在 JstestDriver 中编写测试用例的详细说明，以及 JsTest Driver 的命令行选项的详细信息。

步骤 4：只需创建名为“run-server.bat”（用于在指定端口启动服务器）和“run-tests.bat”（用于在指定浏览器上运行不同测试）的批处理文件。

步骤 5：运行服务器“run-server.bat“以启动服务器，然后运行包含测试的“run-tests.bat“，并带有指定的命令行开关。或者在自动化的持续集成环境中从命令行调用相同的执行，我们目前为此使用 Team City。

run-server.bat 
java -jar JsTestDriver-1.3.5.jar --port 1234 
run-tests.bat 
java -jar JsTestDriver-1.3.5.jar --tests all --browser "C:\Program Files\Mozilla Firefox\firefox.exe"

如何在 JsTestDriver 中编写测试用例

有两种方法可以在 TestCase 中声明测试。

使用原型

MyTestCase=TesCase(“MyTestCase”);
MyTestCase.prototyp.testA=function( ) {
};
MyTestCase.prototype.testB=function( ) {
};

使用内联声明

TestCase(“MyTestCase”, {
MyTestCase.prototype.testA=function( ) {
};
MyTestCase.prototype.testB=function( ) {
};

我的 JavaScript 测试用例文件的屏幕截图

Click to enlarge image 

TestCase("GreeterTest", {

	testGreet: function(){
		var greeter = new myapp.Greeter();
		assertEquals("Hello Vivek", greeter.greet('Vivek'));
	}
});

使用的配置文件，共享名称为（jsTestDriver.conf）

如下所述，JavaScript 代码和测试文件夹路径使用“load:”开关，并且在配置文件中通过“serve:”开关使用 JavaScript 库中的引用文件路径。简而言之，在“load:”中提及所有 JavaScript 文件的基本路径，包括使用的库，而在“serve:”中提及所有引用的 JavaScript 库路径。

Server: https://:4321
load:
- src/*.js
- tests/*.js
- src \work\dojo\dojo.js
- src \work\openlayers\OpenLayers.js
- src\test\js\mock\mock4js.js
- src\test\js\mock\jsUnitMockTimeout.js
serve:
- src/test/json/*.json

run-server.bat

java -jar JsTestDriver-1.3.5.jar --port 1234

run-tests.bat

java -jar JsTestDriver-1.3.5.jar --tests all

输出窗口

.
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (1.00 ms)
  Safari 528.16: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (1.00 ms)
    ConsoleTest.testGreet passed (1.00 ms)
      [LOG] JsTestDriver Hello World!
      [LOG] Browser Hello World!

第二部分：如何使用 Visual Studio 2012 运行 JsTestDriver

代码文件随本文一起提供，文件夹名称为“JS-TestDriver-VS2012Plugin-Code”。

必备组件

  1. Visual Studio 2012
  2. Java Runtime
  3. JsTestDriver (http://code.google.com/p/js-test-driver/downloads/list)。只需下载并放在本地目录中。在我的机器上，它是D:\builds\js-test-driver\JsTestDriver-1.3.5.jar。

带有 JavaScript 单元测试的示例 ASP.NET 解决方案

为了演示，让我们创建一个小型示例项目，其中包含一些 JavaScript 单元测试。

  1. 打开 Visual Studio 2010 及以上版本。
  2. 在“文件”菜单中，选择“新建网站”。
  3. 在网站根目录中创建“js”文件夹用于客户端脚本。
  4. 在“js”文件夹中创建“production”和“testing”文件夹。第一个用于生产脚本，第二个用于单元测试、测试替身和测试配置文件。

    注意：不要忘记配置构建脚本以从最终发布中删除“testing”文件夹和“jsTestDriver.conf” - 测试代码不应出现在生产环境中。

  5. 将生产脚本放在“production”文件夹中。例如 - “Greeter.js”具有以下内容。
  6. 将测试放在“testing/tests”文件夹中。例如 - “GreeterTest.js”具有以下内容。
  7. 将配置文件“jsTestDriver.conf”放在“testing”文件夹中，内容如下。

完成所有操作后，您将拥有一个具有类似结构（如下所示）的 ASP.NET 解决方案。

配置 JsTestDriver 测试运行器外部应用程序

  1. 打开 Visual Studio。
  2. 在“工具”菜单中，选择“外部工具”。
  3. 在“外部工具”对话框中，选择“添加”，并在“标题”框中输入名称“JsTestDriver Run”。
  4. 在“命令”框中，输入 Java Runtime 的路径。例如“C:\Program Files\Java\jre6\bin\java.exe”。
  5. 在“参数”框中，按以下格式输入参数 -“-jar {在此处输入 Jar 的路径}JsTestDriver-1.3.5.jar --tests all”。例如，在我机器上：-jar d:\builds\js-test-driver\JsTestDriver-1.3.5.jar --port 9876 --browser "C:\Program Files\Mozilla Firefox\firefox.exe" 在“初始目录”中，输入“$(ProjectDir)\js”例如 - "$(ProjectDir)\js"。
  6. 选择“使用输出窗口”，然后选择“确定”。

如果您愿意，现在可以为运行“JsTestDriver Run”分配键盘快捷键（在下面的示例中，它被分配给“Ctrl + F9”）：祝您编码愉快！

© . All rights reserved.