karma – angular unittesting directive with a templateUrl fails, even with ng-html2js with “unexpected request”

Question

Now I'm getting:

INFO [karma]: Karma v0.10.2 server started at `http://localhost:9876/`
INFO [launcher]: Starting browser Chrome
INFO [Chrome 30.0.1599(Linux)]: Connected on socket Q8d9RLBQDqi7wJ8iaKNw Chrome 30.0.1599 (Linux)
directives Mydirective  directive should render Roi element  correctly FAILED
Error: Unexpected request: GET partials/directives/Mydirective.html
No more request expected
    at Error (<anonymous>)
    at $httpBackend (/home/user/Documents/Projects/angularproject/test/lib/angular/angular-mocks.js:1006:9)

I'm trying to unittest a simple directives

.directive('Mydirective', function(){
    return {
        restrict:'E',
        replace:true,
        transclude:false,
        templateUrl:'partials/directives/Mydirective .html'

    };
})

this is karma.conf

module.exports = function(config){
    config.set({
    basePath : '../',

    files : [
        //libs, not sure I need all of them
        'app/lib/angular/angular.js',
        'app/lib/angular-file-upload/**/*.js',
        'app/lib/restangular/restangular.js',
        'app/lib/jquery/jquery.js',
        'app/lib/angular/**/*.js',
        'app/lib/lodash/**/*.js',
        'app/lib/Underscore.js',
        'app/lib/bootstrap.min.js',
        'app/lib/ui-bootstrap-0.6.0.js',
        'app/lib/angular/angular-resource.js',
        'app/lib/angular/angular-cookies.min.js',
        'app/lib/angular-translate/**/*.js',
        'app/lib/angular-translate-loader-static-files/**/*.js',
        'app/lib/angular-translate-storage-cookie/**/*.js',
        'app/lib/angulartestfile-translate-storage-local/**/*.js',
        'app/lib/bootstrap-gh-pages/assets/rainbow.js',
        'app/lib/fbAngular.js',
        'app/lib/moment.js',
        // test libs
        'test/lib/angular/**/*.js',
        'test/lib/**/*.js',
        // my js to test
        'app/js/**/*.js',
        //test unit
        'test/unit/**/*.js',

        //directive templates
        'app/partials/directives/**/*.html'
    ],
    exclude: ['test/lib/angular/angular-scenario.js'],

    autoWatch : true,

testfile

    frameworks: ['jasmine'],

    browsers : ['Chrome'],


    plugins : [
            'karma-junit-reporter',
            'karma-chrome-launcher',
            'karma-firehttp://localhost:9876/fox-launcher',
            'karma-jasmine',
            'karma-coverage',
            //'karma-html2js-preprocessor',
            'karma-ng-html2js-preprocessor'
            ],

    junitReporter : {
      outputFile: 'test_out/unit.xml',
      suite: 'unit'
    },

        reporters:['coverage','progress'],


        preprocessors : {
        '**/js/*.js': 'coverage',
        '**/partials/directives/*.html': 'ng-html2js'// generate js files from html templates

        },
        ngHtml2JsPreprotestfilecessor: {
//            cacheIdFromPath : function(filepath) {
//                return filepath.substr(filepath.indexOf("angular")+8);
//            },
         stripPrefix:'app/',
                // setting this option will create only a single module that contains templates
                // from all the files, so you can load them all with module('templates')
         moduleName: 'st-templates'
        },

This is the test file.

describe('directives', function() {
    var $compile, $rootScope;
  beforeEach(function(){
      module('myModule.directives');
      module(function($provide) {
          $provide.value('version', 'TEST_VER');
          $provide.value('somevalue','value');
      }
      angular.module('st-templates');


  });

    beforeEach(inject(function(_$compile_, _$rootScope_){
        // The injector unwraps the underscores (_) from around the parameter names when matching
        $compile = _$compile_;
        $rootScope = _$rootScope_;

    }));

    describe('app-version directive', function() {
    it('should print current version', function() {
//      module(function($provide) {
//        $provide.value('version', 'TEST_VER');
        var element = $compile('<span app-version></span>')($rootScope);
        $rootScope.$digest();
        expect(element.text()).toEqual('TEST_VER');

    });


    });


    describe('mydirective', function(){

      it('should render Roi element correctly', function(){
              var element = $compile('<st-roi></st-roi>')($rootScope);
              $rootScope.$digest();
              expect(element.text()).toEqual('0.3%');
          });


      });
    });

This is the folder tree:

-app    
--app/js    
--app/partials    
-config/karma.conf    
-test    
--test/unit/specfile.js

Following advice in different SO question I already enabled the nghtml2j preprocessor and configured it (Hopefully correctly). But I still get an annoying error

Any clues? I'll be glad for any help with this

Answer 1

angular.module('st-templates') is not the same as module('st-templates') inside that jasmine test. Change angular.module('st-templates') to module('st-templates') and it should work.