0

私はテスト駆動開発を学ぼうとしているフロントエンド開発者です。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){ "厳密な使用";

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

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

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を行う正しいプロセスを（電卓の例で）説明してくれたら、とても感謝しています。

4

1 に答える 1

1

これがあなたの答えです。jQuery を使用すると、「display」要素をページに動的に追加してから、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 メソッドで行っているような文字列の実行を避ける必要があります... Calculator クラス内には、最初の数値と 2 番目の数値を格納するためのプライベート変数が必要であり、文字列を実行することなくそれらに対して計算を行うだけです。 .

お役に立てれば。

アンディ

于 2012-10-24T17:02:45.100 に答える