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

});

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

（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，您可以动态地将“display”元素添加到页面，然后执行press和execute函数，并根据display元素的内容进行断言。这是一些测试。

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类中，你应该有私有变量来存储第一个数字和第二个数字，然后只需对它们进行数学运算而不必执行字符串。

希望这有帮助。

安迪

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

1 个答案: