课程表

CoffeeScript 语法

CoffeeScript 类和对象

CoffeeScript 字符串

CoffeeScript 数组

CoffeeScript 日期和时间

CoffeeScript 数学

CoffeeScript 方法

CoffeeScript 元编程

CoffeeScript jQuery

CoffeeScript 正则表达式

CoffeeScript 网络

CoffeeScript 设计模式

CoffeeScript 数据库

CoffeeScript 测试

工具箱
速查手册

使用 Jasmine 测试

当前位置：免费教程 » JS/JS库/框架 » CoffeeScript

问题

假如你正在使用 CoffeeScript 写一个简单地计算器，并且想要验证其功能是否与预期一致。可以使用 Jasmine 测试框架。

讨论

在使用 Jasmine 测试框架时，你要在一个参数（spec）文档中写测试，文档描述的是代码需要测试的预期功能。

例如，我们希望计算器可以实现加法和减法的功能，并且可以正确进行正数和负数的运算。我们的 spec 文档如下列所示。

  1. # calculatorSpec.coffee
  2. describe 'Calculator', ->
  3.     it 'can add two positive numbers', ->
  4.         calculator = new Calculator()
  5.         result = calculator.add 2, 3
  6.         expect(result).toBe 5
  8.     it 'can handle negative number addition', ->
  9.         calculator = new Calculator()
  10.         result = calculator.add -10, 5
  11.         expect(result).toBe -5
  13.     it 'can subtract two positive numbers', ->
  14.         calculator = new Calculator()
  15.         result = calculator.subtract 10, 6
  16.         expect(result).toBe 4
  18.     it 'can handle negative number subtraction', ->
  19.         calculator = new Calculator()
  20.         result = calculator.subtract 4, -6
  21.         expect(result).toBe 10

配置 Jasmine

在你运行测试之前，必须要先下载并配置 Jasmine。包括：1.下载最新的 Jasmine 压缩文件；2.在你的项目工程中创建一个 spec 以及一个 spec/jasmine 目录；3.将下载的 Jasmine 文件解压到 spec/jasmine 目录中；4.创建一个测试流

创建测试流

Jasmine 可以使用 spec runner 的 HTML 文档在 web 浏览器中运行你的测试。 spec runner 是一个简单地 HTML 页面，连接着 Jasmine 以及你的代码所需要的必要的 JavaScript 和 CSS 文件。示例如下。

  1.  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.  2   "http://www.w3.org/TR/html4/loose.dtd">
  3.  3 <html>
  4.  4 <head>
  5.  5   <title>Jasmine Spec Runner</title>
  6.  6   <link rel="shortcut icon" type="image/png" href="spec/jasmine/jasmine_favicon.png">
  7.  7   <link rel="stylesheet" type="text/css" href="spec/jasmine/jasmine.css">
  8.  8   <script src="/img/up/2007-4-28/jquery.min.js"></script>
  9.  9   <script src="/img/up/2007-4-28/jasmine.js"></script>
  10. 10   <script src="/img/up/2007-4-28/jasmine-html.js"></script>
  11. 11   <script src="/img/up/2007-4-28/jasmine-jquery-1.3.1.js"></script>
  12. 12 
  13. 13   <!-- include source files here... -->
  14. 14   <script src="/img/up/2007-4-28/calculator.js"></script>
  15. 15 
  16. 16   <!-- include spec files here... -->
  17. 17   <script src="/img/up/2007-4-28/calculatorSpec.js"></script>
  18. 18 
  19. 19 </head>
  20. 20 
  21. 21 <body>
  22. 22   <script type="text/javascript">
  23. 23     (function() {
  24. 24       var jasmineEnv = jasmine.getEnv();
  25. 25       jasmineEnv.updateInterval = 1000;
  26. 26 
  27. 27       var trivialReporter = new jasmine.TrivialReporter();
  28. 28 
  29. 29       jasmineEnv.addReporter(trivialReporter);
  30. 30 
  31. 31       jasmineEnv.specFilter = function(spec) {
  32. 32         return trivialReporter.specFilter(spec);
  33. 33       };
  34. 34 
  35. 35       var currentWindowOnload = window.onload;
  36. 36 
  37. 37       window.onload = function() {
  38. 38         if (currentWindowOnload) {
  39. 39           currentWindowOnload();
  40. 40         }
  41. 41         execJasmine();
  42. 42       };
  43. 43 
  44. 44       function execJasmine() {
  45. 45         jasmineEnv.execute();
  46. 46       }
  47. 47 
  48. 48     })();
  49. 49   </script>
  50. 50 </body>
  51. 51 </html>

此 spec runner 可以在 GitHub gist 上下载。

使用 SpecRunner.html ，只是简单地参考你编译后的 JavaScript 文件，并且在 jasmine.js 以及其依赖项后编译的测试文件。

在上述示例中，我们在第 14 行包含了尚待开发的 calculator.js 文件，在第17行编译了 calculatorSpec.js 文件。

运行测试

要运行我们的测试，只需要简单地在 web 浏览器中打开 SpecRunner.html 页面。在我们的示例中可以看到 4 个失败的 specs 共 8 个失败情况（如下）。

Alt text

看来我们的测试是失败的，因为 jasmine 无法找到 Calculator 变量。那是因为它还没有被创建。现在让我们来创建一个新文件命名为 js/calculator.coffee 。

  1. # calculator.coffee
  3. window.Calculator = class Calculator

编译 calculator.coffee 并刷新浏览器来重新运行测试组。

Alt text

现在我们还有4个失败而不是原来的8个了，只用一行代码便做出了50%的改进。

测试通过

实现我们的方法来看是否可以通过测试。

  1. # calculator.coffee
  3. window.Calculator = class Calculator
  4.     add: (a, b) ->
  5.         a + b
  7.     subtract: (a, b) ->
  8.         a - b

当我们刷新页面时可以看到全部通过。

Alt text

重构测试

既然测试全部通过了，我们应看一看我们的代码或测试是否可以被重构。

在我们的 spec 文件中，每个测试都创建了自己的 calculator 实例。这会使我们的测试相当的重复，特别是对于大型的测试套件。理想情况下，我们应该考虑将初始化代码移动到每次测试之前运行。

幸运的是 Jasmine 拥有一个 beforeEach 函数,就是为了这一目的设置的。

  1. describe 'Calculator', ->
  2.     calculator = null
  4.     beforeEach ->
  5.         calculator = new Calculator()
  7.     it 'can add two positive numbers', ->
  8.         result = calculator.add 2, 3
  9.         expect(result).toBe 5
  11.     it 'can handle negative number addition', ->
  12.         result = calculator.add -10, 5
  13.         expect(result).toBe -5
  15.     it 'can subtract two positive numbers', ->
  16.         result = calculator.subtract 10, 6
  17.         expect(result).toBe 4
  19.     it 'can handle negative number subtraction', ->
  20.         result = calculator.subtract 4, -6
  21.         expect(result).toBe 10

当我们重新编译我们的 spec 然后刷新浏览器，可以看到测试仍然全部通过。

Alt text

转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号