ngMock is throwing template load error because of ngRoute's $routeProvider...?

Question

I just included ngMock into my project because I need it for $httpBackend. I have a bunch of karma/jasmine tests setup, and after including ngMock, everything is breaking because of an error it causes:

PhantomJS 1.9.7 (Windows 7): Executed 0 of 41 SUCCESS (0 secs / 0 secs)
PhantomJS 1.9.7 (Windows 7) ERROR
  Error: Unexpected request: GET home/home.html
  No more request expected
  at C:/dev/app/bower_components/angular-mocks/angular-mocks.js:1181

Seems that it doesn't like ngRoute/$routeProvider. Specifically it breaks on the otherwise/redirectTo statement. If I comment-out that section, the karma/jasmine tests work without error.

  $routeProvider
    .when('/home', angularAMD.route({
      templateUrl: 'home/home.html',
      controller: ''
    }))
    .otherwise({
      redirectTo: '/home'
    });

Notice, I am using angularAMD (for lazy loading), but even when I rewrite that section to use just {} without the angularAMD.route(), it still throws the same error. ie:

  $routeProvider
    .when('/home', {
      templateUrl: 'home/home.html',
      controller: ''
    })
    .otherwise({
      redirectTo: '/home'
    });

Any idea why ngMock doesn't like ngRoute? For now I've created a workaround where I skip the $routeProvider section while running karma/jasmine tests. But I'm trying to understand what is going on, am I not supposed to be setting $routeProvider during unit-testing at all (is that bad practice)?

[Edit:] Issues seem to appear in other segments as well. I'm running a test that includes a service which is loading a template, and it also throws an error:

Error: Unexpected request: GET components/modal/modal.html
No more request expected
    at $httpBackend (C:/dev/app/bower_components/angular-mocks/angular-mocks.js:1181)

[Edit:] Seems to throw the error when I call $httpBackend.flush();

[Edit:] Great, found posts related to issue. Can't believe Google didn't show any relevant results when I searched. Solution: If you found yourself here from Google Results, take a look at these: post 1, post 2.

[Edit:] Couldn't get any of those solutions working with angularAMD. Any suggestions?

Have you found a solution yet? Having the exact same problem! — stianlp, Feb 23 '15 at 17:06
@stianlip yeah, you need to setup a catch-all to funnel all unresolved templates: `$httpBackend.whenGET(/\.html$/g).respond("");` And in my tests, I use a separate `app.js` file to bootstrap the app, which doesn't declare any $routeProvider config. — BuildTester1, Feb 26 '15 at 18:05

score 0 · Answer 1 · answered Mar 17 '15 at 14:09

My issue was that I wasn't loading the complete module for the app (which is what I was associating ngRoute with).

In my User.tests.js file, I had

 beforeEach(module('App.services'));

In my app.js file I had:

  App = angular.module("App", [
    "ngRoute"
    "App.templates"
    "App.filters"
    "App.services"
    "App.controllers"
    "App.directives"
    "ui.bootstrap"
  ]);

In my User.js service, I was actually utilizing the $route. The solution for me was to switch my User.tests.js to use the mock module "App" - beforeEach(module("App")); this way the tests are loading all the correct dependencies.

ngMock is throwing template load error because of ngRoute's $routeProvider...?

1 Answers1