如何在js中为简单的计算器应用程序编写测试用例

Question

我是一名尝试学习测试驱动开发的前端开发人员。我已经使用 jQuery/jasmine 构建了一个简单的 js 计算器。

根据我学到的知识，我首先开始编写测试用例（在 jasmine 中）。

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);        
      });   
  });

});

然后用最少的代码传递它们

(function(window, document, undefined){ "use strict";

window.add = function(a,b){ return a+b; };

window.sub = function(a,b){ return a-b; };

window.divide =function(a,b){ return (a/b); };

window.toggleSign = function(a){ return -a; };

}（窗口，文档））；

在我真正开始构建应用程序之前，我一直都很开心和满足

这是它的样子 http://niteshsharma.com/jscalc/

我能想到的最明智的方法是编写一个计算器，就是创建一个完整操作的简单字符串并在执行时对其进行评估

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，您可以动态地将“显示”元素添加到页面中，然后根据显示元素的内容执行您的 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();

此外，您应该避免像在执行方法中那样执行字符串...在您的 Calculator 类中，您应该有私有变量来存储第一个数字和第二个数字，然后只需对它们进行数学运算而无需执行字符串。

希望这会有所帮助。

安迪