Karma Jasmine testing $resource called from controller

Question

I can't manage to make things work with Karma in order to test some API calls.

Here is the test file :

describe('Requests controller test', function() {
  beforeEach(module('balrogApp.requests'));

  var ctrl, scope;
  var requestData = [
    {id: 1, project: {id: 1, title: 'Project 1'}, description: 'Some description'},
    {id: 2, project: {id: 2, title: 'Project 2'}, description: 'Another description'}
  ];

  beforeEach(inject(function($rootScope, $controller, _$httpBackend_) {
    $httpBackend = _$httpBackend_;

    $httpBackend.expectGET('/users').respond(requestData);
    $httpBackend.expectGET('/requests').respond(requestData);
    $httpBackend.expectGET('/projects').respond(requestData);
    $httpBackend.expectGET('/requestcomments').respond(requestData);
    $httpBackend.expectGET('/costestimations').respond(requestData);
    $httpBackend.expectGET('/regions').respond(requestData);

    scope = $rootScope.$new();
    ctrl = $controller('requestsController', {$scope: scope});
  }));

  afterEach(function() {
    scope.$destroy();
  });

  it('should fill properties from result from xhr requests', function() {
    var unresolvedResponse = [];

    expect(ctrl.usersList).toEqual(unresolvedResponse);
    expect(ctrl.requestsList).toEqual(unresolvedResponse);
    expect(ctrl.projectsList).toEqual(unresolvedResponse);
    expect(ctrl.requestsCommentsList).toEqual(unresolvedResponse);
    expect(ctrl.costEstimationsList).toEqual(unresolvedResponse);
    expect(ctrl.regionsList).toEqual(unresolvedResponse);

    $httpBackend.flush();

    expect(ctrl.usersList).toEqual(requestData);
    expect(ctrl.requestsList).toEqual(requestData);
    expect(ctrl.projectsList).toEqual(requestData);
    expect(ctrl.requestsCommentsList).toEqual(requestData);
    expect(ctrl.costEstimationsList).toEqual(requestData);
    expect(ctrl.regionsList).toEqual(requestData);
  });
});

I also have tried to use toBeUndefined() instead of toEqual(unresolvedResponse) but it didn't change a thing.

Here is the file where the $resource are defined :

angular.module('balrogApp.services', ['balrogApp.config', 'ngResource'])
  .factory('Requests', ['$resource', 'balrogConfig', function($resource, balrogConfig) {
    return $resource(balrogConfig.backend + '/requests/:id', {id: '@id'});
  }])
  .factory('Projects', ['$resource', 'balrogConfig', function($resource, balrogConfig) {
    return $resource(balrogConfig.backend + '/projects/:id', {id: '@id'}, {'update': { method:'PUT' }});
  }])
  /*  Other factories are there */
  .factory('CostEstimations', ['$resource', 'balrogConfig', function($resource, balrogConfig) {
    return $resource(balrogConfig.backend + '/costestimations/:id', {id: '@id'});
  }]);

And finally, a part of the controller file I'm doing the test on :

angular.module('balrogApp.requests', [
  /* Dependancies */
])
  .controller('requestsController', function(Requests, Users, Projects, RequestsComments, CostEstimations,
                                             Regions, growl, $route, $rootScope, $scope, $location) {
    /* ... */

    this.usersList = Users.query();
    this.requestsList = Requests.query();
    this.projectsList = Projects.query();
    this.requestsCommentsList = RequestsComments.query();
    this.costEstimationsList = CostEstimations.query();
    this.regionsList = Regions.query();
  });

So far I'm getting this error :

Expected [ $promise: Promise({ $$state: Object({ status: 0 }) }), $resolved: false ] to equal [ ].

I tried to set unresolvedResponse to this value (with and without a proper syntax) but it didn't fix anything.

Your scope variables (e.g. userList) are not empty arrays at initialisation but instead unresolved promises before calling `$httpBackend.flush()`. I think you can use `$q` service to "simulate" an unresolved promise. — FlorianTopf, Dec 01 '15 at 11:35
Well, the best I found was `$q.defer().promise` but this doesn't seem to be an unresolved response. — Ellone, Dec 01 '15 at 12:08
Yea, I did that too, but nop, this doesn't return an unresolved promise afaik — Ellone, Dec 01 '15 at 12:26
=> `Users.query().$promise`, this would return the promise only. => `$q.defer()` should return an array with `$promise` and `$resolved`, like `query()` would do. What does the expectation say if you compare it with `$q.defer()` ? — FlorianTopf, Dec 01 '15 at 12:29
NOt exactly like the one expected : `Expected [ $promise: Promise({ $$state: Object({ status: 0 }) }), $resolved: false ] to equal Deferred({ promise: Promise({ $$state: Object({ status: 0 }) }), res olve: Function, reject: Function, notify: Function }).` — Ellone, Dec 01 '15 at 12:59

score 1 · Accepted Answer · answered Dec 03 '15 at 15:27

1

I tried it myself and how you can do this, is changing your expectation from

expect(ctrl.usersList).toEqual(unresolvedResponse);

to
expect(ctrl.usersList.$resolved).toBeFalsy();

doing this will verify, that the request is sent, the promise has been constructed but there is no server response yet.

I hope, this will help you.

answered Dec 03 '15 at 15:27

Anke Wenz

425
6
9

Thanks, it looks like this can do it, but I already tried `expect(ctrl.usersList.$resolved).toEqual(false);` and it didn't work, so that's a bit confusing. – Ellone Dec 03 '15 at 17:21

Karma Jasmine testing $resource called from controller

1 Answers1