Unexpected GET when using ui-router and directive in Karma unit test

Question

I've just switched over to using ui-router. I've got a simple navbar directive that calls a templateURL but in Karma unit testing it's causing an exception

Error: Unexpected request: GET /directives/nav-bar/nav-bar.html No more request expected

navbar directive:

'use strict';

angular.module('kitchenapp')
  .directive('navBar', function () {
    return {
      restrict: 'E',
      templateUrl: '/directives/nav-bar/nav-bar.html'
    };
  });

navbar spec:

'use strict';

describe('Directive: nav-bar', function () {

  beforeEach(module('kitchenapp', 'templates'));

  var element, scope;

  beforeEach(inject(function ($compile, $rootScope, $httpBackend) {
    scope = $rootScope.$new();
    element = angular.element('<nav-bar></nav-bar>');
    element = $compile(element)(scope);
    scope.$apply();
    //$httpBackend.expectGET("/directives/nav-bar/nav-bar.html");
    $urlRouterProvider.otherwise(function(){return false;});
  }));

  it('\'s brand link should be titled \'KitchenApp\' and should       navigate to the root address when clicked', function () {
       console.log('Element', element);

  });
});

As you can see in the spec, I've tried lots of methods in the beforeEach and it never seems to make a difference.

Any help greatly appreciated.

EDIT Karma.conf.js

'use strict';

module.exports = function (config) {
  config.set({

    basePath: 'client',

    frameworks: ['jasmine'],

    preprocessors: {
      '**/*.html': ['ng-html2js']
    },

    ngHtml2JsPreprocessor: {
      stripPrefix: 'client/',
      moduleName: 'templates'
    },

    plugins: [
      'karma-phantomjs-launcher',
      'karma-jasmine',
      'karma-ng-html2js-preprocessor'
    ],

    files: [
      'bower_components/angular/angular.js',
      'bower_components/angular-ui-router/release/angular-ui-router.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
      'bower_components/angular-ui-grid/ui-grid.js',
      'bower_components/angular-ui-calendar/src/calendar.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-socket-io/socket.min.js',
      'app.js',
      'views/**/*.js',
      'services/**/*.js',
      'directives/**/*.js',
      'directives/**/*.html',
      'filters/**/*.js'
    ],

    exclude: [
      'views/**/*.e2e.js',
      'services/socket/socket.service.js'
    ],

    reporters: ['progress'],

    port: 9876,

    colors: true,

    // possible values:
    // config.LOG_DISABLE
    // config.LOG_ERROR
    // config.LOG_WARN
    // config.LOG_INFO
    // config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    autoWatch: false,

    browsers: ['PhantomJS'],

    singleRun: true
  });
};

Read the beginning of this bug report and then read my answer: https://github.com/angular-ui/ui-router/issues/212#issuecomment-69974072 — Chris T, Apr 20 '15 at 14:53
@ChrisT Thanks Chris, I'd looked through that but it had taken me a while to understand. I'm having difficulty getting it to work because I can't get '$urlRouterProvider' into the beforeEach. If I add it in the arguments to be injected by the inject function then it still comes up as an unknown provider, even though I have ui.router included in the karma.conf file. I've only recently moved from BB to ng, so perhaps it's something obvious I'm doing wrong? — user1775718, Apr 20 '15 at 16:17
Could you run the test in debug mode, and check `/directives/nav-bar/nav-bar.html.js` exists? If it does, could you tell us the module id (the stuff after `angular.module(`, `angular.module('mymodule', ...` has an id of `mymodule`, for example.) — tcooc, Apr 22 '15 at 22:36
Hi @tcooc, I've opened it in chrome (I was doing it in phantom and didn't know you could do it in chrome with debug mode! :D ). At the top of the file you get '(function(module) { try { module = angular.module('templates'); } catch (e) { module = angular.module('templates', []); }' but it says it's failing to load the module and responding with a 404? Any clues?? — user1775718, Apr 23 '15 at 13:12
To be clear: /directives/nav-bar/nav-bar.html.js does exist and it's the top of that file that I've referred to above... — user1775718, Apr 23 '15 at 13:56
Also, try taking out `moduleName: 'templates'` from your config, it doesn't need to be there, I think. — tcooc, Apr 23 '15 at 17:32
@tcooc it's mentioned https://github.com/karma-runner/karma-ng-html2js-preprocessor. If you remove it then it just stops the templates being injected as a single module. I can't go any further with this until I fix http://stackoverflow.com/questions/29809436/cannot-inject-providers-into-karma-test, as the two are inter-related, but I'll get back to this as soon as it's done... — user1775718, Apr 26 '15 at 14:50

score 0 · Accepted Answer · edited May 23 '17 at 11:43

Right!! Got it!!

OK, so I was using karma-ng-html2js-preprocessor to transform my files from .html to .html.js files, for injection into the page. If you specify a moduleName then you don't have to call them all in individually.

The issue here, in the main, was paths. I'd used bangular and somehow I'd added preceding slashes to the templates directives, but not in views. Make sure you get that right...

When using ui-router you'll need access to the $urlRouterProvider - you have to do that with a module, the inject service cannot find it. If you include it in a series of arguments then the injector will fail completely and none will be supplied (see here for more)...

The link @ChrisT provides above will help you out further as you unit test, although I couldn't get '$urlRouterProvider.deferIntercept();' to work in any meaningful way...

Unexpected GET when using ui-router and directive in Karma unit test

1 Answers1