假如你正在使用 CoffeeScript 寫一個簡單地計算器,并且想要驗證其功能是否與預(yù)期一致??梢允褂?Jasmine 測試框架。
在使用 Jasmine 測試框架時,你要在一個參數(shù)(spec)文檔中寫測試,文檔描述的是代碼需要測試的預(yù)期功能。
例如,我們希望計算器可以實現(xiàn)加法和減法的功能,并且可以正確進行正數(shù)和負數(shù)的運算。我們的 spec 文檔如下列所示。
# calculatorSpec.coffee
describe 'Calculator', ->
it 'can add two positive numbers', ->
calculator = new Calculator()
result = calculator.add 2, 3
expect(result).toBe 5
it 'can handle negative number addition', ->
calculator = new Calculator()
result = calculator.add -10, 5
expect(result).toBe -5
it 'can subtract two positive numbers', ->
calculator = new Calculator()
result = calculator.subtract 10, 6
expect(result).toBe 4
it 'can handle negative number subtraction', ->
calculator = new Calculator()
result = calculator.subtract 4, -6
expect(result).toBe 10
在你運行測試之前,必須要先下載并配置 Jasmine。包括:1.下載最新的 Jasmine 壓縮文件;2.在你的項目工程中創(chuàng)建一個 spec 以及一個 spec/jasmine 目錄;3.將下載的 Jasmine 文件解壓到 spec/jasmine 目錄中;4.創(chuàng)建一個測試流
Jasmine 可以使用 spec runner 的 HTML 文檔在 web 瀏覽器中運行你的測試。 spec runner 是一個簡單地 HTML 頁面,連接著 Jasmine 以及你的代碼所需要的必要的 JavaScript 和 CSS 文件。示例如下。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <title>Jasmine Spec Runner</title>
6 <link rel="shortcut icon" type="image/png" href="spec/jasmine/jasmine_favicon.png">
7 <link rel="stylesheet" type="text/css" href="spec/jasmine/jasmine.css">
8 <script src="http://code.jquery.com/jquery.min.js"></script>
9 <script src="spec/jasmine/jasmine.js"></script>
10 <script src="spec/jasmine/jasmine-html.js"></script>
11 <script src="spec/jasmine/jasmine-jquery-1.3.1.js"></script>
12
13 <!-- include source files here... -->
14 <script src="js/calculator.js"></script>
15
16 <!-- include spec files here... -->
17 <script src="spec/calculatorSpec.js"></script>
18
19 </head>
20
21 <body>
22 <script type="text/javascript">
23 (function() {
24 var jasmineEnv = jasmine.getEnv();
25 jasmineEnv.updateInterval = 1000;
26
27 var trivialReporter = new jasmine.TrivialReporter();
28
29 jasmineEnv.addReporter(trivialReporter);
30
31 jasmineEnv.specFilter = function(spec) {
32 return trivialReporter.specFilter(spec);
33 };
34
35 var currentWindowOnload = window.onload;
36
37 window.onload = function() {
38 if (currentWindowOnload) {
39 currentWindowOnload();
40 }
41 execJasmine();
42 };
43
44 function execJasmine() {
45 jasmineEnv.execute();
46 }
47
48 })();
49 </script>
50 </body>
51 </html>
此 spec runner 可以在 GitHub gist 上下載。
使用 SpecRunner.html ,只是簡單地參考你編譯后的 JavaScript 文件,并且在 jasmine.js 以及其依賴項后編譯的測試文件。
在上述示例中,我們在第 14 行包含了尚待開發(fā)的 calculator.js 文件,在第17行編譯了 calculatorSpec.js 文件。
要運行我們的測試,只需要簡單地在 web 瀏覽器中打開 SpecRunner.html 頁面。在我們的示例中可以看到 4 個失敗的 specs 共 8 個失敗情況(如下)。
http://wiki.jikexueyuan.com/project/coffeescript/images/jasmine_failing_all.jpg" alt="Alt text" />
看來我們的測試是失敗的,因為 jasmine 無法找到 Calculator 變量。那是因為它還沒有被創(chuàng)建?,F(xiàn)在讓我們來創(chuàng)建一個新文件命名為 js/calculator.coffee 。
# calculator.coffee
window.Calculator = class Calculator
編譯 calculator.coffee 并刷新瀏覽器來重新運行測試組。
http://wiki.jikexueyuan.com/project/coffeescript/images/jasmine_failing_better.jpg" alt="Alt text" />
現(xiàn)在我們還有4個失敗而不是原來的8個了,只用一行代碼便做出了50%的改進。
實現(xiàn)我們的方法來看是否可以通過測試。
# calculator.coffee
window.Calculator = class Calculator
add: (a, b) ->
a + b
subtract: (a, b) ->
a - b
當(dāng)我們刷新頁面時可以看到全部通過。
http://wiki.jikexueyuan.com/project/coffeescript/images/jasmine_passing.jpg" alt="Alt text" />
既然測試全部通過了,我們應(yīng)看一看我們的代碼或測試是否可以被重構(gòu)。
在我們的 spec 文件中,每個測試都創(chuàng)建了自己的 calculator 實例。這會使我們的測試相當(dāng)?shù)闹貜?fù),特別是對于大型的測試套件。理想情況下,我們應(yīng)該考慮將初始化代碼移動到每次測試之前運行。
幸運的是 Jasmine 擁有一個 beforeEach 函數(shù),就是為了這一目的設(shè)置的。
describe 'Calculator', ->
calculator = null
beforeEach ->
calculator = new Calculator()
it 'can add two positive numbers', ->
result = calculator.add 2, 3
expect(result).toBe 5
it 'can handle negative number addition', ->
result = calculator.add -10, 5
expect(result).toBe -5
it 'can subtract two positive numbers', ->
result = calculator.subtract 10, 6
expect(result).toBe 4
it 'can handle negative number subtraction', ->
result = calculator.subtract 4, -6
expect(result).toBe 10
當(dāng)我們重新編譯我們的 spec 然后刷新瀏覽器,可以看到測試仍然全部通過。
http://wiki.jikexueyuan.com/project/coffeescript/images/jasmine_passing2.jpg" alt="Alt text" />