Unit testing AngularJS routes throwing Error: Unexpected request

Question

Below is my Jasmine RoutesSpec.js

describe("Todo Routes", function(){
    var route;
    var rootScope;
    var location;

    beforeEach(function(){
        module('todoApp');

        inject(function($route, $location, $rootScope){
            route = $route;
            location = $location;
            rootScope = $rootScope;
        }); 
    });

    it("should navigate to todo list", function(){
        expect(route.current).toBeUndefined();
        location.path('/todos');
        rootScope.$digest();
        expect(route.current.templateUrl).toBe('app/html/listTodos.html');
    });
});

Below is my app.js

var todoModule = angular.module("todoApp", []);

todoModule.config(function($routeProvider){
    $routeProvider.when('/todos', {
        templateUrl: '../html/listTodos.html',
        controller: 'TodoListController'
    })
    .otherwise({redirectTo: '/todos'});
});

todoModule.controller("TodoListController", function($scope, $log){
    $scope.todos = [{title: "My first task", done: false}];
    $log.log('In list controller');
});

Executing this spec throws me the below error:

Error: Unexpected request: GET ../html/listTodos.html No more request expected at Error () at $httpBackend (C:/Learn/Javascript/todo_app/libs/angular-mocks.js:934:9) at sendReq (C:/Learn/Javascript/todo_app/libs/angular.js:9146:9) at $http (C:/Learn/Javascript/todo_app/libs/angular.js:8937:17) at Function.$http.(anonymous function) (C:/Learn/Javascript/todo_app/libs/angular.js:9080:18) at $q.when.then.then.next.locals (C:/Learn/Javascript/todo_app/libs/angular.js:7440:34) at wrappedCallback (C:/Learn/Javascript/todo_app/libs/angular.js:6846:59) at wrappedCallback (C:/Learn/Javascript/todo_app/libs/angular.js:6846:59) at C:/Learn/Javascript/todo_app/libs/angular.js:6883:26 at Object.Scope.$eval (C:/Learn/Javascript/todo_app/libs/angular.js:8057:28)

Setting the root to /todos in your test triggers the http loading of the partial associated to this route. But since you haven't mocked the httpBackend to tell it what to do when receiving a request for this partial, you get this error. — JB Nizet
– JB Nizet, Commented Jul 28, 2013 at 8:15
Does that mean, the solution provided by Juho here stackoverflow.com/questions/15990102/… would also not work? — Ajay
– Ajay, Commented Jul 28, 2013 at 8:36
Don't know. Not an expert in angular. I'm just analyzing the error you got. — JB Nizet
– JB Nizet, Commented Jul 28, 2013 at 8:40

Alex · Accepted Answer · 2015-02-21 19:16:21Z

2

This means that there is an AJAX call that goes to fetch the template. $httpBackend.expectGET('app/html/listTodos.html').respond(200) can be put before calling path():

describe("Todo Routes", function(){
    var route;
    var rootScope;
    var location;
    var httpBackend;

    beforeEach(function(){
        module('todoApp');

        inject(function($route, $location, $rootScope, $httpBackend){
            route = $route;
            location = $location;
            rootScope = $rootScope;
            httpBackend = $httpBackend;
        }); 
    });

    it("should navigate to todo list", function(){
        httpBackend.expectGET('app/html/listTodos.html').respond(200);//mimicking the AJAX call
        expect(route.current).toBeUndefined();
        location.path('/todos');
        rootScope.$digest();
        expect(route.current.templateUrl).toBe('app/html/listTodos.html');
    });
});

edited Feb 21, 2015 at 19:16

Alex

8551 gold badge7 silver badges21 bronze badges

answered Mar 20, 2014 at 9:20

Nilesh

3576 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Unit testing AngularJS routes throwing Error: Unexpected request

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related