1 / 50

高效 JavaScript 单元测试

高效 JavaScript 单元测试. Hazem Saleh. 议 题. 不实施单元测试情况下开发人员的状况。. 不实施单元测试情况下开发人员的状况。. 什么是单元测试？为什么要进行单元测试？. 当前测试 JavaScript 代码所面临的复杂性。. 良好 的 JavaScript 单元测试工具的 必要条件 。. 什么是 JsTestDriver 。. JsTestDriver 架构和配置. JsTestDriver Eclipse 插件。. 编写 JavaScript 测试用例 。. JsTestDriver 通用结构。.

rana-langley
Download Presentation

高效 JavaScript 单元测试

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 高效JavaScript单元测试 Hazem Saleh

  2. 议题 不实施单元测试情况下开发人员的状况。 不实施单元测试情况下开发人员的状况。 什么是单元测试？为什么要进行单元测试？ 当前测试 JavaScript 代码所面临的复杂性。 良好的JavaScript 单元测试工具的必要条件。 什么是 JsTestDriver。 JsTestDriver 架构和配置 JsTestDriver Eclipse 插件。 编写 JavaScript 测试用例。 JsTestDriver 通用结构。 编写异步 JavaScript 测试用例。 JsTestDriver 兼容性 从测试用例生成报告。

  3. 不实施单元测试情况下开发人员的状况。 系统组件间的复杂集成。

  4. 不实施单元测试情况下开发人员的状况。 许多新的/回归缺陷无法管理，尤其是系统复杂性提高时。

  5. 不实施单元测试情况下开发人员的状况。 应用程序质量低。 测试周期更长。

  6. 议题 不实施单元测试情况下开发人员的状况。 什么是单元测试？为什么要进行单元测试？ 什么是单元测试？为什么要进行单元测试？ 当前测试 JavaScript 代码所面临的复杂性。 良好的JavaScript 单元测试工具的必要条件。 什么是 JsTestDriver。 JsTestDriver 架构和配置 JsTestDriver Eclipse 插件。 编写 JavaScript 测试用例。 JsTestDriver 通用结构。 编写异步 JavaScript 测试用例。 JsTestDriver 兼容性 从测试用例生成报告。

  7. 什么是单元测试？为什么要进行单元测试？ 单元测试就是一段代码（通常是一个方法）调用另外一段代码，并于稍后检查某些假设的正确性 单元测试有助于在项目早期阶段发现有bug的组件。 测试套件是一组测试用例，而每个测试用例则是一组 对系统组件进行验证的测试。

  8. 良好单元测试的特征 自动化 可重复 快速 易于运行。 增量式 易于理解

  9. 什么是单元测试？为什么要进行单元测试？ 集成性得到显著简化。 缺陷得到管理。如果通过创建新的测试用例解决了缺陷问题，则不会再发生回归缺陷。 测试用例可以成为系统文档的良好参考。 测试用例可改进系统设计，并成为代码重构的基础。 应用程序质量提高。 测试周期缩减。

  10. 议题 不实施单元测试情况下开发人员的状况。 什么是单元测试？为什么要进行单元测试？ 当前测试 JavaScript 代码所面临的复杂性。 当前测试 JavaScript 代码所面临的复杂性。 良好的JavaScript 单元测试工具的必要条件。 什么是 JsTestDriver。 JsTestDriver 架构和配置 JsTestDriver Eclipse 插件。 编写 JavaScript 测试用例。 JsTestDriver 通用结构。 编写异步 JavaScript 测试用例。 JsTestDriver 兼容性 从测试用例生成报告。

  11. 慢 当前测试 JavaScript 代码所面临的复杂性 不灵活 需要大量时间对所有浏览器进行测试。 在特定浏览器上运行的 JavaScript 代码并不一定意味着能在其他浏览器上运行。 如果要支持新浏览器，则意味着，需要为在新浏览器上再次测试系统及新/回归缺陷修复分配新预算。

  12. 议题 不实施单元测试情况下开发人员的状况。 什么是单元测试？为什么要进行单元测试？ 当前测试 JavaScript 代码所面临的复杂性。 良好 JavaScript 单元测试工具的要求。 良好的JavaScript 单元测试工具的必要条件。 什么是 JsTestDriver。 JsTestDriver 架构和配置 JsTestDriver Eclipse 插件。 编写 JavaScript 测试用例。 JsTestDriver 通用结构。 编写异步 JavaScript 测试用例。 JsTestDriver 兼容性 从测试用例生成报告。

  13. 良好的JavaScript 单元测试工具的必要条件 JavaScript 单元测试工具 可以跨所有平台在所有浏览器上执行。 快速执行测试用例。 易于安装。 与 IDE 集成。 易于配置。 与构建管理工具集成。

  14. 议题 不实施单元测试情况下开发人员的状况。 什么是单元测试？为什么要进行单元测试？ 当前测试 JavaScript 代码所面临的复杂性。 良好的JavaScript 单元测试工具的必要条件。 什么是 JsTestDriver。 什么是 JsTestDriver。 JsTestDriver 架构和配置 JsTestDriver Eclipse 插件。 编写 JavaScript 测试用例。 JsTestDriver 通用结构。 编写异步 JavaScript 测试用例。 JsTestDriver 兼容性 从测试用例生成报告。

  15. 什么是 JsTestDriver 最佳开源 JavaScript 测试工具之一。 满足之前的所有要求及更多要求： • 支持所有浏览器/所有平台。 ✓ • 易于安装和配置。 ✓ • 快速执行测试案例。 ✓ • 与 IDE 和构建管理工具集成。 ✓

  16. 议题 不实施单元测试情况下开发人员的状况。 什么是单元测试？为什么要进行单元测试？ 当前测试 JavaScript 代码所面临的复杂性。 良好的JavaScript 单元测试工具的必要条件。 什么是 JsTestDriver。 JsTestDriver 架构和配置 JsTestDriver 架构和配置。 JsTestDriver Eclipse 插件。 编写 JavaScript 测试用例。 JsTestDriver 通用结构。 编写异步 JavaScript 测试用例。 JsTestDriver 兼容性 从测试用例生成报告。

  17. JsTestDriver 架构

  18. JsTestDriver 配置 1 在web应用中，为 JavaScript 测试代码和应用代码建两个单独的文件夹

  19. JsTestDriver 配置 1 2 从以下网址下载 jsTestDriver 最新 Jar 文件 http://code.google.com/p/js-test-driver/downloads/list

  20. JsTestDriver 配置 1 2 3 使用如下初始内容创建 jsTestDriver.conf 文件（在 JS 文件夹下）： server:http://localhost:9876 load: - js-src/*.js - js-test/*.js

  21. JsTestDriver 配置 1 2 3 4 使用以下命令行启动服务器 • java -jar JsTestDriver-1.3.2.jar • 可选参数 • [--port 9876] • [--browser “{PATH}\firefox.exe","{PATH}\iexplore.exe","{PATH}\Safari.exe"]

  22. JsTestDriver 配置 1 2 3 4 5 使用以下命令行运行测试用例 • java -jar JsTestDriver-1.3.2.jar --tests all • ......... • Total 9 tests (Passed:9; Fails:0; Errors:0) (16.00 ms) • Firefox 9.0.1 Windows:Run 3 tests (Passed:3; Fails:0; Errors 0) (3.00 ms) • Safari 534.52.7 Windows:Run 3 tests (Passed:3; Fails:0; Errors 0) (4.00 ms) • Microsoft Internet Explorer 7.0 Windows:Run 3 tests (Passed:3; Fails:0; Errors 0) (16.00 ms)

  23. 议题 不实施单元测试情况下开发人员的状况。 什么是单元测试？为什么要进行单元测试？ 当前测试 JavaScript 代码所面临的复杂性。 良好的JavaScript 单元测试工具的必要条件。 什么是 JsTestDriver。 JsTestDriver 架构和配置 JsTestDriver Eclipse 插件。 JsTestDriver Eclipse 插件。 编写 JavaScript 测试用例。 JsTestDriver 通用结构。 编写异步 JavaScript 测试用例。 JsTestDriver 兼容性 从测试用例生成报告。

  24. JsTestDriver Eclipse 插件 您可以直接使用 jsTestDriver Eclipse 插件启动服务器和运行测试用例，而不使用命令行。 • 要安装 JsTestDriver Eclipse 插件，请从以下 URL 安装该插件： http://js-test-driver.googlecode.com/svn/update/

  25. JsTestDriver Eclipse 插件

  26. JsTestDriver Eclipse 插件

  27. 议题 不实施单元测试情况下开发人员的状况。 什么是单元测试？为什么要进行单元测试？ 当前测试 JavaScript 代码所面临的复杂性。 良好的JavaScript 单元测试工具的必要条件。 什么是 JsTestDriver。 JsTestDriver 架构和配置 JsTestDriver Eclipse 插件。 编写 JavaScript TestCase。 编写 JavaScript 测试用例。 JsTestDriver 通用结构。 编写异步 JavaScript 测试用例。 JsTestDriver 兼容性 从测试用例生成报告。

  28. 编写 JavaScript 测试用例 ApplicationUtilTest = TestCase("ApplicationUtilTest"); ApplicationUtilTest.prototype.setUp = function () { /*:DOC += ...HTML fragment code goes here (single root) ...*/ }; ApplicationUtilTest.prototype.testMethod1 = function () { … validate using the jsTestDriver constructs … } ApplicationUtilTest.prototype.testMethod2 = function () { … validate using the jsTestDriver constructs … } ...

  29. 议题 不实施单元测试情况下开发人员的状况。 什么是单元测试？为什么要进行单元测试？ 当前测试 JavaScript 代码所面临的复杂性。 良好的JavaScript 单元测试工具的必要条件。 什么是 JsTestDriver。 JsTestDriver 架构和配置 JsTestDriver Eclipse 插件。 编写 JavaScript 测试用例。 JsTestDriver 通用结构。 JsTestDriver 通用结构。 编写异步 JavaScript 测试用例。 JsTestDriver 兼容性 从测试用例生成报告。

  30. JsTestDriver 通用结构 fail("msg") assertTrue("msg", actual) assertFalse("msg", actual) assertSame("msg", expected, actual) assertNotSame("msg", expected, actual) assertNull("msg", actual) assertNotNull("msg", actual)

  31. 演示让我们来编写同步 JS 测试用例……

  32. 议题 不实施单元测试情况下开发人员的状况。 什么是单元测试？为什么要进行单元测试？ 当前测试 JavaScript 代码所面临的复杂性。 良好的JavaScript 单元测试工具的必要条件。 什么是 JsTestDriver。 JsTestDriver 架构和配置 JsTestDriver Eclipse 插件。 编写 JavaScript 测试用例。 JsTestDriver 通用结构。 编写异步 JavaScript TestCase。 编写异步 JavaScript 测试用例。 JsTestDriver 兼容性 从测试用例生成报告。

  33. 编写异步 JavaScript 测试用例 • AsyncTest = AsyncTestCase("AsynchronousTesting"); • AsyncTest.prototype.setUp = function () { • /*:DOC += <!-- Initialization code -->*/ • }; • AsyncTest.prototype.testOperationOne = function(queue) { • queue.call('Step1', function(callbacks) { • var asyncObject = new AsyncObject (); • var successCallBack = callbacks.add(function(successData) { • // validate (successData) if possible .... • }); • var failureCallBack = callbacks.addErrback('Error Message'); • // call asynchronous API • asyncObject.operationOne(inputData, • successCallBack, • failureCallBack); • }); • };

  34. 编写异步 JavaScript TestCase • 每个内联函数为测试 Ajax API 提供一个回调参数。有两种类型的回调： • 成功回调：代表成功路径。必须对其进行调用才能通过测试。 • 错误回调： 代表错误路径。如果对其进行调用，则测试失败。 测试运行器不会移到下一个队列，直到 当前队列执行了它的所有成功回调。如果 一个特定的成功回调在特定的时间段内（30 秒）没有被调用，则测试失败。

  35. 演示让我们编写异步 JS 测试 用例……

  36. 议题 不实施单元测试情况下开发人员的状况。 什么是单元测试？为什么要进行单元测试？ 当前测试 JavaScript 代码所面临的复杂性。 良好的JavaScript 单元测试工具的必要条件。 什么是 JsTestDriver。 JsTestDriver 架构和配置 JsTestDriver Eclipse 插件。 编写 JavaScript 测试用例。 JsTestDriver 通用结构。 编写异步 JavaScript 测试用例。 JsTestDriver 兼容性 JsTestDriver 兼容性 从测试用例生成报告。

  37. JsTestDriver 兼容性 JsTestDriver 不只是一个JavaScript 单元测试框架，对许多其他 JavaScript 单元测试框架而言，它还是一个测试运行器。 • 通过适配器，JsTestDriver 与以下 JavaScript 单元测试框架兼容： • Jasmine • YUI Test • QUnit

  38. JsTestDriver 兼容性 为了在 JSTD 测试运行器之上运行前述的单元测试框架，您需要按照如下方式在测试文件之前配置框架适配器和源： • server:http://localhost:9876 • load: • - jasmine/lib/jasmine-1.1.0/jasmine.js • - jasmine/lib/adapter/JasmineAdapter.js • - js-src/Basics.js • - js-test/BasicsSpec.js

  39. 演示 在 JSTD 上运行 Jasmine 测试用例

  40. 议题 不实施单元测试情况下开发人员的状况。 什么是单元测试？为什么要进行单元测试？ 当前测试 JavaScript 代码所面临的复杂性。 良好的JavaScript 单元测试工具的必要条件。 什么是 JsTestDriver。 JsTestDriver 架构和配置 JsTestDriver Eclipse 插件。 编写 JavaScript 测试用例。 JsTestDriver 通用结构。 编写异步 JavaScript 测试用例。 JsTestDriver 兼容性 从测试案例生成报告。 从测试用例生成报告。

  41. 从测试用例生成报告 JSTD 可生成代码覆盖文件。 代码覆盖描述有多少源代码进行了测试。 覆盖标准： • 函数覆盖 • 语句覆盖 • 分支覆盖

  42. JsTestDriver 可以使用代码覆盖插件为您的 JavaScript 代码生成代码覆盖。

  43. Configuring the plugin: 从测试用例生成报告 Specify the --testOutput <<output_folder>> flag in the test running command. Download the “coverage.jar”. Add the coverage plugin declaration to the configuration file: plugin: - name: "coverage" jar: "plugins/coverage.jar" module:"com.google.jstestdriver.coverage.CoverageModule"

  44. 从测试用例生成报告 遗憾的是 JsTestDriver 不能直接生成 HTML 报告， JsTestDriver 以 LCOV 和 XML 格式生成测试覆盖文件。 您可以使用 LCOV 可视化工具生成 HTML 测试报告： http://ltp.sourceforge.net/coverage/lcov.php

  45. 从测试用例生成报告 JsTestDriver LCOV 文件名通常是： • <config filename>-coverage.dat (jsTestDriver.conf-coverage.dat) 使用 LCOV 可视化工具从 LCOV 文件生成报告： • genhtmljsTestDriver.conf-coverage.dat

  46. 结论

  47. 结论 若要提高应用程序质量，加快修复缺陷，最小化回归缺陷数量，测试 JavaScript 代码至关重要。 好的 JavaScript 工具应该是可配置的，易于使用，并且适用于所有浏览器。 JsTestDriver 是最强大的 JavaScript 单元测试工具之一，可以用于在所有浏览器上测试同步和异步 JavaScript 代码。

  48. 专题讲座问答（免费书籍） <script> (function() { var x = 10, y = 20, z = x+++y; alert(x); //? alert(y); //? alert(z); //? })(); </script> http://www.amazon.com/dp/1782160620/ JavaScript 单元测试书籍

  49. ?

  50. 联系我 Twitter： http://www.twitter.com/hazems LinkedIn： http://eg.linkedin.com/in/hazemsaleh 博客： http://www.technicaladvices.com 电子邮件： hazems@apache.org

More Related