AngularJS + Jasmine: Comparing objects

Question

I\'m just starting out writing tests for my AngularJS app and am doing so in Jasmine.

Here are the relevant code snippets

ClientController:

\         


        

Answer 1

Short answer:

The existing answers all recommend either stringifying your objects, or creating a custom matcher/comparison function. But, there is an easier way: use angular.equals() in your Jasmine expect call, instead of using Jasmine's built-in toEqual matcher.

angular.equals() will ignore the additional properties added to your objects by Angular, whereas toEqual will fail the comparison for, say, $promise being on one of the objects.

---

Longer explanation:

I ran across this same problem in my AngularJS application. Let's set the scenario:

In my test, I created a local object and a local array, and expected them as responses to two GET requests. Afterwards, I compared the result of the GET's with the original object and array. I tested this using four different methods, and only one gave proper results.

Here's a portion of foobar-controller-spec.js:

var myFooObject = {id: 1, name: "Steve"};
var myBarsArray = [{id: 1, color: "blue"}, {id: 2, color: "green"}, {id: 3, color: "red"}];

...

beforeEach(function () {
    httpBackend.expectGET('/foos/1').respond(myFooObject);
    httpBackend.expectGET('/bars').respond(myBarsArray);
    
    httpBackend.flush();
});

it('should put foo on the scope', function () {
    expect(scope.foo).toEqual(myFooObject);
    //Fails with the error: "Expected { id : 1, name : 'Steve', $promise : { then : Function, catch : Function, finally : Function }, $resolved : true } to equal { id : 1, name : 'Steve' }."
    //Notice that the first object has extra properties...
    
    expect(scope.foo.toString()).toEqual(myFooObject.toString());
    //Passes, but invalid (see below)
    
    expect(JSON.stringify(scope.foo)).toEqual(JSON.stringify(myFooObject));
    //Fails with the error: "Expected '{"id":1,"name":"Steve","$promise":{},"$resolved":true}' to equal '{"id":1,"name":"Steve"}'."
    
    expect(angular.equals(scope.foo, myFooObject)).toBe(true);
    //Works as expected
});

it('should put bars on the scope', function () {
    expect(scope.bars).toEqual(myBarsArray);
    //Fails with the error: "Expected [ { id : 1, color : 'blue' }, { id : 2, color : 'green' }, { id : 3, color : 'red' } ] to equal [ { id : 1, color : 'blue' }, { id : 2, color : 'green' }, { id : 3, color : 'red' } ]."
    //Notice, however, that both arrays seem identical, which was the OP's problem as well.
    
    expect(scope.bars.toString()).toEqual(myBarsArray.toString());
    //Passes, but invalid (see below)
    
    expect(JSON.stringify(scope.bars)).toEqual(JSON.stringify(myBarsArray));
    //Works as expected
    
    expect(angular.equals(scope.bars, myBarsArray)).toBe(true);
    //Works as expected
});

For reference, here's the output from console.log using JSON.stringify() and .toString():

LOG: '***** myFooObject *****'
LOG: 'Stringified:{"id":1,"name":"Steve"}'
LOG: 'ToStringed:[object Object]'

LOG: '***** scope.foo *****'
LOG: 'Stringified:{"id":1,"name":"Steve","$promise":{},"$resolved":true}'
LOG: 'ToStringed:[object Object]'



LOG: '***** myBarsArray *****'
LOG: 'Stringified:[{"id":1,"color":"blue"},{"id":2,"color":"green"},{"id":3,"color":"red"}]'
LOG: 'ToStringed:[object Object],[object Object],[object Object]'

LOG: '***** scope.bars *****'
LOG: 'Stringified:[{"id":1,"color":"blue"},{"id":2,"color":"green"},{"id":3,"color":"red"}]'
LOG: 'ToStringed:[object Object],[object Object],[object Object]'

Notice how the stringified object has extra properties, and how toString yields invalid data which will give a false positive.

From looking at the above, here's a summary of the different methods:

1. expect(scope.foobar).toEqual(foobar) : This fails both ways. When comparing objects, toString reveals that Angular has added extra properties. When comparing arrays, the contents seem identical, but this method still claims they are different.
2. expect(scope.foo.toString()).toEqual(myFooObject.toString()) : This passes both ways. However, this is a false positive, since the objects are not being translated fully. The only assertion this makes is that the two arguments have the same number of objects.
3. expect(JSON.stringify(scope.foo)).toEqual(JSON.stringify(myFooObject)) : This method gives the proper response when comparing arrays, but the object comparison has a similar fault to the raw comparison.
4. expect(angular.equals(scope.foo, myFooObject)).toBe(true) : This is the correct way to make the assertion. By letting Angular do the comparison, it knows to ignore any properties which were added in the backend, and gives the proper result.

If it matters to anyone, I'm using AngularJS 1.2.14 and Karma 0.10.10, and testing on PhantomJS 1.9.7.