如何編寫簡單的計算器應用程序測試用例js

Question

我是一位試圖學習測試驅動開發的前端開發人員。我使用jQuery/jasmine構建了一個簡單的js計算器。

從我學到的東西開始寫我的測試用例（茉莉花）。

describe("calculator", function() {   
    it("add correctly", function() {  
    expect(add(2,3)).toEqual(5); 
    }); 

    it("subtract correctly", function() {   
     expect(sub(2,3)).toEqual(-1);  
    });   

    describe("divide", function(){ 
     it("divided correctly", function(){ 
     expect (divide(2,3)).toEqual(0.6666666666666666);  
     }); 

     it("divided by 0 gives infite", function(){   
     expect (divide(2,0)).toEqual(Infinity);   
     }); 

    }); 

describe("toggle sign", function(){ 
    it("toggle to - sign", function() { 
       expect (toggleSign(2)).toEqual(-2);  
     }); 

    it("toggle to + sign", function() { 
      expect (toggleSign(-2)).toEqual(2);   
     }); 
    }); 

}); 

然後用最少的代碼傳遞它們

（功能（窗口，文件，未定義）{ 「使用嚴格」;

window.add =函數（A，B）{返回A + b;};

window.sub =函數（A，b）{返回AB;};

window.divide =函數（A，b）{返回（A/b）;};

window.toggleSign = function（a）{return -a; };

}（window，document））;

我所有的快樂與滿足，直到我真正開始建設應用

這裏是什麼樣子 http://niteshsharma.com/jscalc/

最明智的辦法，我能想出，寫一個計算器，是建立完整的操作簡單的字符串和eval它執行

window.press = function(a){ 
    $("#display").html(function(i, oldHtml){ 
     return oldHtml+a; 
    }); 
}; 

window.execute= function(){ 
    try{ 
     $("#display").html(new Function("return " + $("#display").html())()); 
    } 
    catch(err){ 
     alert("error"); 
    } 
}; 

我怎麼能寫一個測試用例這樣的代碼？ 如果有人能向我解釋做TDD的正確過程（以我的計算器爲例），我將非常感激。

Answer 1

這是你的答案。通過jQuery，您可以動態地將「display」元素添加到頁面中，然後執行您的press和execute函數，並根據顯示元素的內容進行斷言。這是一些測試。

describe("press", function(){ 
     it("add-remove display element", function(){ 
      // Dynamically add a span element with id="display" 
      $('body').append($('<span id="display">').text('0')); 
      expect($('#display').length).toEqual(1); 
      // Clean up after yourself here - tests should be atomic 
      $('#display').remove(); 
      expect($('#display').length).toEqual(0); 
     }); 

     it("add-remove display element", function(){ 
      $('body').append($('<span id="display">').text('0')); 
      // With the display element present, run the press function 
      press('2'); 
      expect($('#display').html()).toEqual('02'); 
      $('#display').remove(); 
     }); 
    }); 

    describe("execute", function(){ 
     it("execute a couple presses and run a calculation", function(){ 
      $('body').append($('<span id="display">').text('0')); 
      // With the display element present, run the press function 
      press('2'); 
      press('+'); 
      press('3'); 
      execute(); 
      expect($('#display').html()).toEqual('5'); 
      $('#display').remove(); 
     }); 
    }); 

如果我也可以建議，將計算器函數添加到窗口對象並不是一個好主意。你可以做這樣的事情也許（未經測試的存根代碼）：

function Calculator(){ 
    // Private members 
    var firstNumber = 0; 
    var secondNumber = 0; 
    function toggleSign(){} 

    // Public members 
    return { 
     press: function(){}, 
     execute: function(){} 
    }; 
} 

// To use it, instatiate a new calculator and call its public methods 
var calc = new Calculator(); 
calc.press('2'); 
calc.press('+'); 
calc.press('3'); 
calc.execute(); 

此外，你應該避免執行字符串就像你在你的execute方法做什麼......裏面的計算器類，你應該有私有變量，以存儲第一個數字和第二個數字，然後對它們進行數學運算而不必執行字符串。

希望這會有所幫助。

Andy