JasmineJS - 書寫文字和執行

在本章中，我們將建立一個hello world 應用，它將測試我們的“helloworld.js”檔案。在開發 hello world 應用之前，請返回上一章，並確保您的環境已準備好使用 Jasmine 進行測試。

步驟 1 - 在您的 IDE 中建立一個 Web 應用

這裡我們使用 NetBeans 8.1 在 Jasmine 中開發我們的 hello world 應用。在 NetBeans 中，轉到檔案 → 新建專案 → Html5/JS 應用並建立一個專案。建立專案後，專案目錄應如下面的螢幕截圖所示。我們將專案命名為Jasmine_Demo。

步驟 2 - 將 Jasmine 庫檔案包含到應用中

建立演示專案後，您需要做的就是將 Jasmine 庫的解壓縮資料夾包含到建立的應用的 Unit Tests 資料夾中。將所有庫檔案新增到我們的應用資料夾後，專案的結構將如下面的螢幕截圖所示。

spec 和 src 資料夾下的檔案是 Jasmine 團隊提供的演示檔案。刪除這些檔案，因為我們將建立自己的測試檔案和測試用例。在刪除這些 JavaScript 檔案時，我們需要刪除輸出 html 檔案（即SpecRunner.html）中這些檔案的引用。

以下是 SpecRunner.html 檔案的螢幕截圖，其中將刪除spec 和 src 內不同 JavaScript 檔案的引用。

步驟 3 - 建立一個 JavaScript 檔案

在此步驟中，我們將在src 資料夾下建立一個名為helloworld.js 的 JavaScript 檔案。這是我們將透過 Jasmine 進行測試的檔案。建立 JavaScript 檔案後，在檔案中追加以下程式碼集。

/*         
* This is the JavaScript file that need to be tested through jasmine   
* Below is the helloworld function that will return 'Hello World' 
*            
*/    

var helloworld = function() {   
   return 'Hello World'; 
};

步驟 4 - 建立一個測試用例

在此步驟中，我們將建立另一個 JavaScript 檔案，其中將包含上述 JavaScript 檔案的測試用例。繼續並在“Spec”資料夾下建立一個 JavaScript 檔案，並將其命名為“HelloWorldsSpec.js”。將以下程式碼行新增到此js 檔案中。

/*            
* This is the file which will call our java script file that need to be tested. 
* Each describe block is equivalent to one test case    
*     
*/    

describe("Hello World", function() { 
   
   it("should Return Hello world",function() { 
      expect(helloworld()).toEqual('Hello World'); 
   }); 

});

步驟 5 - 將引用新增到輸出檔案

我們成功建立了自己的待測試檔案和相應的測試用例。我們將其儲存在兩個不同的資料夾中。在此步驟中，我們將修改“SpecRunner.html”以包含這兩個新建立檔案的引用。

<!DOCTYPE html> 
    
<html>    
   <head>    
      <meta charset = "utf-8"> 
    
      <title>Jasmine Spec Runner v2.4.1</title>  
		
      <link rel = "shortcut icon" type = "image/png" href = 
      "lib/jasmine2.4.1/jasmine_favicon.png">  
      <link rel = "stylesheet" href = "lib/jasmine-2.4.1/jasmine.css"> 
		
      <script src = "lib/jasmine-2.4.1/jasmine.js"></script>
      <script src = "lib/jasmine-2.4.1/jasmine-html.js"></script>
      <script src = "lib/jasmine-2.4.1/boot.js"></script> 

      <!--Lines to be deleted  
      <script src = "src/Player.js"></script> 
      <script src = "src/Song.js"></script> 
      <script src = "spec/SpecHelper.js"></script>    
      <script src = "spec/PlayerSpec.js"></script> --> 

      <!--adding the reference of our newly created file ---> 

      <script src = "src/helloworld.js"></script> 
      <script src = "spec/HelloWorldsSpec.js"></script> 
   </head>   

   <body>   
   </body>   

</html>

步驟 6 - 透過執行 SpecRunner.html 執行

這是我們的應用開發的最後一步。在您喜歡的任何瀏覽器中執行 SpecRunner.html。結果將顯示以下螢幕截圖。綠色螢幕表示成功，而紅色表示測試用例失敗。

步驟 7 - 瞭解失敗案例

到目前為止，我們已經看到了 hello world 應用的成功測試用例。現在讓我們看看如果出現問題並且測試失敗會發生什麼。要實現失敗案例，我們需要編寫一個失敗測試用例。為此，我們將使用以下程式碼修改helloworld.js檔案。

var helloworld = function () { 
   return ''; 
};  

// we are not returning any string whereas in the spec file 
//we are expecting a // string as “Hello World”

以上程式碼肯定會失敗，因為我們的規範檔案沒有獲得helloworld()輸出的預期字串。specRunner.html檔案的以下螢幕截圖顯示存在錯誤，並帶有紅色指示器。

列印頁面