CoffeeScript 使用 Jasmine 測(cè)試

2022-06-29 17:17 更新

使用 Jasmine 測(cè)試

問(wèn)題

假如你正在使用CoffeeScript寫一個(gè)簡(jiǎn)單地計(jì)算器，并且想要驗(yàn)證其功能是否與預(yù)期一致。可以使用Jasmine測(cè)試框架。

討論

在使用Jasmine測(cè)試框架時(shí)，你要在一個(gè)參數(shù)（spec）文檔中寫測(cè)試，文檔描述的是代碼需要測(cè)試的預(yù)期功能。

例如，我們希望計(jì)算器可以實(shí)現(xiàn)加法和減法的功能，并且可以正確進(jìn)行正數(shù)和負(fù)數(shù)的運(yùn)算。我們的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

在你運(yùn)行測(cè)試之前，必須要先下載并配置Jasmine。包括：1.下載最新的Jasmine壓縮文件；2.在你的項(xiàng)目工程中創(chuàng)建一個(gè)spec以及一個(gè)spec/jasmine目錄；3.將下載的Jasmine文件解壓到spec/jasmine目錄中；4.創(chuàng)建一個(gè)測(cè)試流

創(chuàng)建測(cè)試流

Jasmine可以使用spec runner的HTML文檔在web瀏覽器中運(yùn)行你的測(cè)試。 spec runner是一個(gè)簡(jiǎn)單地HTML頁(yè)面，連接著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="https://atts.w3cschool.cn/attachments/image/wk/coffeescript/jquery.min.js"></script>
 9   <script src="https://atts.w3cschool.cn/attachments/image/wk/coffeescript/jasmine.js"></script>
10   <script src="https://atts.w3cschool.cn/attachments/image/wk/coffeescript/jasmine-html.js"></script>
11   <script src="https://atts.w3cschool.cn/attachments/image/wk/coffeescript/jasmine-jquery-1.3.1.js"></script>
12 
13   <!-- include source files here... -->
14   <script src="https://atts.w3cschool.cn/attachments/image/wk/coffeescript/calculator.js"></script>
15 
16   <!-- include spec files here... -->
17   <script src="https://atts.w3cschool.cn/attachments/image/wk/coffeescript/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 ，只是簡(jiǎn)單地參考你編譯后的JavaScript文件，并且在jasmine.js以及其依賴項(xiàng)后編譯的測(cè)試文件。

在上述示例中，我們?cè)诘?4行包含了尚待開(kāi)發(fā)的calculator.js文件，在第17行編譯了calculatorSpec.js文件。

運(yùn)行測(cè)試

要運(yùn)行我們的測(cè)試，只需要簡(jiǎn)單地在web瀏覽器中打開(kāi)SpecRunner.html頁(yè)面。在我們的示例中可以看到4個(gè)失敗的specs共8個(gè)失敗情況（如下）。

Alt text

看來(lái)我們的測(cè)試是失敗的，因?yàn)閖asmine無(wú)法找到Calculator變量。那是因?yàn)樗€沒(méi)有被創(chuàng)建。現(xiàn)在讓我們來(lái)創(chuàng)建一個(gè)新文件命名為js/calculator.coffee。

# calculator.coffee

window.Calculator = class Calculator

編譯calculator.coffee并刷新瀏覽器來(lái)重新運(yùn)行測(cè)試組。

Alt text

現(xiàn)在我們還有4個(gè)失敗而不是原來(lái)的8個(gè)了，只用一行代碼便做出了50%的改進(jìn)。

測(cè)試通過(guò)

實(shí)現(xiàn)我們的方法來(lái)看是否可以通過(guò)測(cè)試。

# calculator.coffee

window.Calculator = class Calculator
    add: (a, b) ->
        a + b

    subtract: (a, b) ->
        a - b

當(dāng)我們刷新頁(yè)面時(shí)可以看到全部通過(guò)。

Alt text

重構(gòu)測(cè)試

既然測(cè)試全部通過(guò)了，我們應(yīng)看一看我們的代碼或測(cè)試是否可以被重構(gòu)。

在我們的spec文件中，每個(gè)測(cè)試都創(chuàng)建了自己的calculator實(shí)例。這會(huì)使我們的測(cè)試相當(dāng)?shù)闹貜?fù)，特別是對(duì)于大型的測(cè)試套件。理想情況下，我們應(yīng)該考慮將初始化代碼移動(dòng)到每次測(cè)試之前運(yùn)行。

幸運(yùn)的是Jasmine擁有一個(gè)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然后刷新瀏覽器，可以看到測(cè)試仍然全部通過(guò)。

Alt text

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)