JasmineJS - 測試的構建塊

在本章中，我們將討論 Jasmine 測試的構建塊。

套件塊

Jasmine 是一個 JavaScript 測試框架。套件是 Jasmine 框架的基本構建塊。為特定檔案或函式編寫的類似型別的測試用例的集合稱為一個套件。它包含另外兩個塊，一個是“Describe()”，另一個是“It()”。

一個套件塊只能有兩個引數，一個是“套件的名稱”，另一個是“函式宣告”，它實際上呼叫了要測試的單元功能。

在下面的示例中，我們將建立一個套件來單元測試add.js 檔案中的 add 函式。在這個示例中，我們有一個名為“calculator.js”的 JS 檔案，它將透過 Jasmine 進行測試，相應的 Jasmine 規範檔案是“CalCulatorSpec.js”。

Calculator.js

window.Calculator = { 
   
   currentVal:0,  
   varAfterEachExmaple:0, 
   
   add:function (num1) { 
      this.currentVal += num1; 
      return this.currentVal;    
   },     
   
   addAny:function () {    
      var sum = this.currentVal; 
		
      for(var i = 0; i < arguments.length; i++) { 
         sum += arguments[i]; 
      } 
      
      this.currentVal = sum; 
      Return  this.currentVal; 
   }, 
};

CalCulatorSpec.js

describe("calculator",function() { 
   
   //test case: 1  
   it("Should retain the current value of all time", function () {
      expect(Calculator.currentVal).toBeDefined();
      expect(Calculator.currentVal).toEqual(0);  
   }); 
   
   //test case: 2  
   it("should add numbers",function() {
      expect(Calculator.add(5)).toEqual(5); 
      expect(Calculator.add(5)).toEqual(10);  
   });         
    
   //test case :3   
   it("Should add any number of numbers",function () {
      expect(Calculator.addAny(1,2,3)).toEqual(6); 
   }); 
});

在上面的函式中，我們聲明瞭兩個函式。函式add將新增作為引數傳遞給該函式的兩個數字，另一個函式addAny應該新增作為引數傳遞的任何數字。

建立此檔案後，我們需要在“SpecRunner.html”的頭部部分新增此檔案。成功編譯後，這將生成以下輸出作為結果。

巢狀套件塊

套件塊可以在另一個套件塊內包含多個套件塊。下面的示例將向您展示如何在另一個套件塊內建立不同的套件塊。我們將建立兩個 JavaScript 檔案，一個名為“NestedSpec.js”，另一個名為“nested.js”。

NestedSpec.js

describe("nested",function() { 
   
   // Starting of first suite block  
   // First block    
	
   describe("Retaining values ",function () {
   
      //test case:1    
      it ("Should retain the current value of all time", function () { 
         expect(nested.currentVal).toBeDefined();   
         expect(nested.currentVal).toEqual(0);   
      });    
   }); //end of the suite block   

   //second suite block 
   describe("Adding single number ",function () {     
   
      //test case:2 
      it("should add numbers",function() { 
         expect(nested.add(5)).toEqual(5); 
         expect(nested.add(5)).toEqual(10); 
      });         
   }); //end of the suite block  

   //third suite block 
   describe("Adding Different Numbers",function () {  
   
      //test case:3 
      it("Should add any number of numbers",function() {  
         expect(nested.addAny(1,2,3)).toEqual(6);  
      });    
   }); //end of the suite block 
});

Nested.js

window.nested = { 
   
   currentVal: 0,
	
   add:function (num1) {  
      this.currentVal += num1;     
      return this.currentVal;    
   },
   
   addAny:function () { 
      Var sum = this.currentVal; 
		
      for(var i = 0;i < arguments.length; i++) { 
         sum += arguments[i]; 
      } 
		
      this.currentVal = sum; 
      return this.currentVal;    
   }  
};

上面的程式碼片段將在新增此檔案到頭部部分後，執行specRunner.html檔案的結果中生成以下輸出。

Describe 塊

如前所述，describe 塊是套件塊的一部分。與套件塊類似，它包含兩個引數，一個是“describe 塊的名稱”，另一個是“函式宣告”。在我們即將到來的示例中，我們將遍歷許多 describe 塊以瞭解 Jasmine 套件塊的工作流程。下面是一個完整的 describe 塊示例。

describe("Adding single number ",function () { 
   
   it("should add numbers",function() { 
      expect(nested.add(5)).toEqual(5); 
      expect(nested.add(5)).toEqual(10); 
   });     
}

IT 塊

就像我們已經介紹過的 describe 塊一樣，我們也介紹了 IT 塊。它位於 describe 塊內。這實際上是包含每個單元測試用例的塊。在下面的程式碼中，在一個describe塊內有多個IT塊。

describe("Adding single number ",function () { 
   
   // test case : 1   
   it("should add numbers",function() {  
      expect(nested.add(5)).toEqual(5); 
      expect(nested.add(5)).toEqual(10); 
   });         
    
   //test case : 2 
   it("should add numbers",function() { 
      expect(nested.addAny(1,2,3)).toEqual(6); 
   });     
}

Expect 塊

Jasmine Expect 允許您編寫對所需函式或 JavaScript 檔案的期望。它位於IT塊內。一個 IT 塊可以有多個 Expect 塊。

下面是一個 Expect 塊的示例。此 expect 塊提供了各種方法來單元測試您的 JavaScript 函式或 JavaScript 檔案。每個 Expect 塊也稱為匹配器。匹配器有兩種型別，一種是內建匹配器，另一種是使用者定義的匹配器。

describe("Adding single number ",function () {   
   
   // test case : 1 
   it("should add numbers",function() {
      expect(nested.add(5)).toEqual(5); 
      expect(nested.add(5)).toEqual(10);
   });          
   
   //test case : 2 
   it("should add numbers",function() {
      expect(nested.addAny(1,2,3)).toEqual(6); 
   });     
}

在接下來的章節中，我們將討論 Expect 塊中各種內建方法的各種用途。

列印頁面