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.

Answer 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.