how to write test cases for simple calculator application in js

Question

I am a front end developer trying to learn Test driven development. I've built a simple js calculator using jQuery/jasmine.

From what I learned I started writing my test cases first (in 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);        
      });   
  });

});

then pass them with minimal code

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

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

}(window, document));

I was all happy and content until I actually started building the app

Here is what it looks like http://niteshsharma.com/jscalc/

The most sensible way I could come up with, to write a calculator, is to create a simple string of the complete operation and eval it on execution

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

How could I write a test case for such code? If some one could explain to me the correct process of doing TDD (with my example of the calculator) I would appreciate it a lot.

Answer 1

Here's your answer. Via jQuery, you can dynamically add your "display" element to the page, and then execute your press and execute functions and do assertions based on the contents of the display element. Here's some tests.

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

If I may suggest as well, it's not a good idea to add your calculator functions to the window object. You could do something like this perhaps (untested stub code):

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

Also, you should avoid executing strings like you're doing in your execute method... Inside your Calculator class, you should have private variables to store the first number and second number, and then just do math on them without having to execute strings.

Hope this helps.

Andy