AngularJS Issues mocking httpGET request

Question

so I'm new to angularjs and its mocking library. I am trying to test that a specific GET request is made, but I always get this error for the 2nd assertion and can't figure out why:

Error: Unsatisfied requests: GET /1.json

Is there anything I messed up with my code below?

App.js

var App = angular.module('App', []).config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  }).when('/Items', {
    templateUrl: 'views/items.html',
    controller: 'Ctrl'
  }).otherwise({
    redirectTo: '/'
  });
}]);

Ctrl.js

function Ctrl($scope, $http, $filter) {
  $scope.items = [];

  $http.get('/1.json').success(function(data) {$scope.items = data.items;});
}

Ctrl.$inject = ["$scope","$http", "$filter"];

Spec/Ctrl.js

describe('Controller: Ctrl', function() {
  var $httpBackend;
  // load the controller's module
  beforeEach(module('App'));
  beforeEach(inject(function($injector) {
    $httpBackend = $injector.get('$httpBackend');

    // backend definition common for all tests
    $httpBackend.whenGET('/1.json').respond('Response!');
  }));

  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  var Ctrl, scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function($rootScope, $controller) {

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

  it('should initialize with 0 items', function() {
    expect(scope.items.length).toBe(0);
    $httpBackend.flush();
  });

  it('should make store request', function(){
    var controller = scope.$new(Ctrl);
    $httpBackend.expectGET('/1.json');
    $httpBackend.flush();
  });
});

EDIT: added app and controller code.

Your code indicates that you expect a "get" request, but I don't see where it's made, which is why you're getting the error. Where are you expecting that request to happen? — Josh David Miller
– Josh David Miller, Commented Feb 8, 2013 at 8:41
Sorry I forgot to include the app and controller code. I've done that, is my error happening perhaps due to the routeProvider? do I need to tell my test to execute a route somehow? — Lucas
– Lucas, Commented Feb 8, 2013 at 12:15

Ondrej Slinták · Accepted Answer · 2014-02-11 09:42:52Z

5

I finally got my unit tests working! Mostly because I restructured my application to make more sense and be more modular.

I'll try to give information to help the next person that runs into this:

first of was I switched to using the $resource instead of $http.

instead of injecting $injector, I injected $httpBackend like so:

beforeEach(inject(function(_$httpBackend_, $rootScope, $route,  $controller){

  $httpBackend = _$httpBackend_;
  $httpBackend.expectGET('/path/to/api').respond([{id:1}]);

instead of referencing 'Ctrl' as a string, I passed in the actual class

Ctrl = $controller('Ctrl', { $scope: scope });

became

var ProductsCtrl = ['$scope', function($scope){ ... }];

Ctrl = $controller(ProductsCtrl, {
  $scope: scope
});`

Make sure you are referencing the angular-resources.js file if you are using $resources

I'm really loving Angularjs; I think it just takes some time to wrap your head around how to test. Best of luck out there!

edited Feb 11, 2014 at 9:42

Ondrej Slinták

32.1k21 gold badges97 silver badges127 bronze badges

answered Feb 25, 2013 at 7:40

Lucas

3,4814 gold badges30 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

allenhwkim Over a year ago

can u take a look at this? i m newbie, and it looks similar to urs. stackoverflow.com/questions/15981583/…

Collectives™ on Stack Overflow

AngularJS Issues mocking httpGET request

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related