Testing a loader in angular js

Question

This is a test for a $resource with a loader

describe('Service: MultiCalculationsLoader', function(){

  beforeEach(module('clientApp'));

  var MultiCalculationLoader,
    mockBackend,
    calculation;

  beforeEach(inject(function (_$httpBackend_, Calculation, _MultiCalculationLoader_) {
    MultiCalculationLoader = _MultiCalculationLoader_;
    mockBackend = _$httpBackend_;
    calculation = Calculation;
  }));

  it('should load a list of calculation from a user', function(){
    mockBackend.expectGET('/api/user/600/calculation').respond([{id:5}]);

     var calculations;
     var mockStateParams = {
       userId: 600
     };
    var promise = new MultiCalculationLoader(mockStateParams);

    promise.then(function(res){
      calculations = res
    });

    expect(calculations).toBeUndefined();

    mockBackend.flush();

    expect(calculations).toEqual([{id:5}]);
  });

});

When I run the test I get the following error:

Expected [ { id : 5 } ] to equal [ { id : 5 } ].
Error: Expected [ { id : 5 } ] to equal [ { id : 5 } ].
    at null.<anonymous>

I don't get it. The two arrays are the same to me. Ideas anyone?

Update Here's the implementation:

 .factory('Calculation', function ($resource) {
    return $resource('/api/user/:userId/calculation/:calcId', {'calcId': '@calcId'});
  })
  .factory('MultiCalculationLoader', function (Calculation, $q) {
    return function ($stateParams) {
      var delay = $q.defer();
      Calculation.query( {userId: $stateParams.userId},function (calcs) {
        delay.resolve(calcs);
      }, function () {
        delay.reject('Unable to fetch calculations');
      });
      return delay.promise;
    };
  })

it seems to work: http://plnkr.co/edit/DLUaEEzBnyWOUudsaooG?p=preview — Khanh TO, Aug 24 '14 at 12:24
Can you show how your `MultiCalculationLoader` is implemented? — Khanh TO, Aug 24 '14 at 12:46
The implementation works. It's just my test that does not work. — Joe, Aug 24 '14 at 13:12
I just suspect that there is an issue in your `MultiCalculationLoader` that causes the test to fail — Khanh TO, Aug 24 '14 at 13:17
The url that you expect is different from the actual url: `expectGET('/api/user/600/calculations')` and `/api/user/:userId/calculation/:calcId'` (even when replaced with parameters) — Khanh TO, Aug 24 '14 at 13:23
@KhanhTO Sorry! I had updated my test since I posted. I have now updated the question so there is no s. So it is something else. — Joe, Aug 24 '14 at 14:42
you have to call `MultiCalculationLoader({userId:600});` instead of `MultiCalculationLoader()`, see my answer. — Khanh TO, Aug 25 '14 at 02:18
you have to remove the `new`, just call `MultiCalculationLoader({userId:600});` — Khanh TO, Aug 25 '14 at 13:45
I set up a plunk to try your case, it turns out that angular automatically adds 2 properties to your response. See my updated answer with picture and demo — Khanh TO, Aug 26 '14 at 13:13

score 2 · Accepted Answer · edited May 23 '17 at 12:33

The url you expect is different from the actual url. I guess you need something like this:

it('should load a list of calculation from a user', function(){
    //remove the 's' from 'calculations'
    mockBackend.expectGET('/api/user/600/calculation').respond([{id:5}]);

    var calculations;
    var promise = MultiCalculationLoader({userId:600}); //userId = 600
    promise.then(function(res){
      calculations = res
    });

    expect(calculations).toBeUndefined();

    mockBackend.flush();

    expect(calculations).toEqual([{id:5}]);
  });

There is another problem that angular automatically adds 2 properties to the response:

enter image description here

http://plnkr.co/edit/gIHolGd85SLswzv5VZ1E?p=preview

It's kind of the same problem as: AngularJS + Jasmine: Comparing objects

This is really a problem with angular $resource when angular convert the response to resource objects. In order to verify responses from $resource, you could try angular.equals

expect(angular.equals(calculations,[{id:5},{id:6}])).toBe(true);

http://plnkr.co/edit/PrZhk2hkvER2XTBIW7yv?p=preview

You could also write a custom matcher:

beforeEach(function() {
    jasmine.addMatchers({
      toEqualData: function() {
        return {
          compare: function(actual, expected) {
            return {
              pass: angular.equals(actual, expected)
            };
          }
        };
      }
    });
  });

And use it:

expect(calculations).toEqualData([{id:5},{id:6}]);

http://plnkr.co/edit/vNfRmc6R1G69kg0DyjZf?p=preview

Isn't it a bit messy? Maybe I'm totally off here but how about using angular.toJson? I think that removes the "junk" from the array? — Joe, Aug 27 '14 at 18:06
@user1572526: I found out that we could use `angular.equals` for that. `angular.equals` will strip out functions and internal implementation details of angular (like hashkey) when testing — Khanh TO, Aug 28 '14 at 11:01
@user1572526: you could also write a custom matcher. See updated answer — Khanh TO, Aug 29 '14 at 13:29

Sten Muchow · Answer 2 · 2014-05-09T06:20:18.023

Jasmine equality selectors can be too specfic sometimes when you just wanna check for equaity.

I have never seen it with the toEqual() method when comparing objects or arrays, but def with the toBe() method.

Try to replace toEqual() with toMatch().

Also in the unit test I recommend using a constant value that you can pass in the response and the matchers/equal/toBe's.

describe('Service: MultiCalculationsLoader', function(){

  beforeEach(module('clientApp'));

  var MultiCalculationLoader,
    mockBackend,
    calculation,
    VALUE = [{id:5}];

  beforeEach(inject(function (_$httpBackend_, Calculation, _MultiCalculationLoader_) {
    MultiCalculationLoader = _MultiCalculationLoader_;
    mockBackend = _$httpBackend_;
    calculation = Calculation;
  }));

  it('should load a list of calculation from a user', function(){
    mockBackend.expectGET('/api/user/600/calculations').respond(VALUE);

    var calculations;
    var promise = MultiCalculationLoader();
    promise.then(function(res){
      calculations = res
    });

    expect(calculations).toBeUndefined();

    mockBackend.flush();

    expect(calculations).toEqual(VALUE);
  });

});

Using this approach I think the .toEqual will actually work.

Our approach:

Before Block:

httpBackend.when('JSONP', PATH.url + 'products?callback=JSON_CALLBACK&category=123').respond(CATEGORIES[0]);

Test:

describe('Category Method', function () {

        it('Should return the first category when the method category is called', function () {
            var result = '';

            service.category(123).then(function(response) {
                result = response;
            });

            httpBackend.flush();
            expect(result).toEqual(CATEGORIES[0]);

        });
    });

Didn't work with constant value. But it did work with toMatch(). Thx! — Joe, May 08 '14 at 20:22
hmmm weird - its the exact approach we have in our unit tests... Try maybe returning VALUE[0] and testing for equality on that as well. — Sten Muchow, May 09 '14 at 06:18
Maybe something to do with the expectGET vs when methods and how they return data.... — Sten Muchow, May 09 '14 at 06:21
"toMatch" seems to accept anything. So it did not work. Back to square one. Any other idea? — Joe, Aug 07 '14 at 07:19

score 0 · Answer 3 · answered Jul 14 '14 at 16:28

0

you can try change toEqual() with toEqualData()

expect(calculations).toEqualData([{id:5}]);

answered Jul 14 '14 at 16:28

ikhsannetwork

103
2
6

Could not find the "toEqualData" function? – Joe Aug 07 '14 at 07:17

Testing a loader in angular js

3 Answers3