karma angular templateUrl not found

Question

I've some problems when testing angular directives with karma, the problem is that when comes from templateUrl never translate it.

here is my karma.conf.js

'use strict';
var wiredep = require('wiredep');
var bowerFiles = wiredep().js;
var appFiles = [
  'src/modules/**/*-module.js',
  'src/modules/**/**/*.js',
  { pattern: 'src/modules/**/*.mol', watched: true, served: true, included: false },
  'src/modules/**/**/templates/*.html',
  {
    pattern: '../src/assets/images/*.*',
    watched: false,
    included: false,
    served: true
  },
  'src/modules/**/**/templates/*.html'
];
module.exports = function (config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: [
      'mocha',
      'chai',
      'sinon-chai'
    ],
    junitReporter: {
      outputFile: '../reports/test-results/test-results.xml'
    },
    coverageReporter: {
      dir: 'reports/test-coverage/',
      subdir: function (browser) {
        // normalization process to keep a consistent browser name across different OS
        return browser.toLowerCase().split(/[ /-]/)[0];
      },
      check: {
        global: {
          statements: 10,
          branches: 1,
          functions: 10,
          lines: 10
        },
        each: {
          statements: 0,
          branches: 0,
          functions: 0,
          lines: 0
        }
      },
      reporters: [
        { type: 'html', file: 'coverage.html' },
        { type: 'cobertura', file: 'coverage.xml' },
        { type: 'json' },
        { type: 'text-summary' }
      ]
    },
    reporters: ['junit', 'dots', 'coverage'],
    // list of files / patterns to load in the browser
    files: [].concat(bowerFiles, appFiles),
    // list of files to exclude
    exclude: [],
    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'src/modules/**/**/!(*.test).js': 'coverage',
      'src/modules/**/**/templates/*.html': ['ng-html2js']
    },
    ngHtml2JsPreprocessor: {
      stripPrefix: 'src/',
      moduleName: 'templates'
    },
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    // web server port
    port: 9876,
    // enable / disable colors in the output (reporters and logs)
    colors: true,
    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,
    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],
    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  });
};

And the test ...

'use strict';

describe('dra-header-directive', function () {
  var compile;
  var rootScope;
  var templateCache;

  beforeEach(module('dd'));
  beforeEach(module('templates'));

  beforeEach(inject(function ($compile, $rootScope, $templateCache) {
    compile = $compile;
    rootScope = $rootScope;
    templateCache = $templateCache;
  }));

  it('Replace the element with the appropiate element', function () {
    var scope = rootScope.$new();
    var el = angular.element('<testing></testing><dra-header></dra-header><input-bar></input-bar>');
    var element = compile(el)(scope);
    scope.$digest();
    console.log(element);
  });

});

The first tag is translated due to is not defined as templateUrl, but the others don't.

if I get the templates with $templateCache I can read the content, so I asume ng-html2js is doing it's job. any ideas? Thanks for helping!

Answer 1

Its solved, I changed the before each module to avoid importing unnecesary module dependencies, looks like there was something that was modifying my rootScope, I just loaded the module that has the directive, and now works fine

'use strict';

describe('dra-header-directive', function () {
  var compile;
  var scope;
  var templateCache;

  beforeEach(module('dra.components.DRAHeaderModule'));

  beforeEach(function () {
    module('templates');
  });

  beforeEach(inject(function ($compile, $rootScope, $templateCache) {
    compile = $compile;
    templateCache = $templateCache;
    scope = $rootScope.$new();
  }));

  it('Replace the element with the appropiate element', function () {
    var el = angular.element('<dra-header></dra-header>');
    compile(el)(scope);
    scope.$digest();
    expect(el.find('div')[0]).to.not.be.undefined();
  });

});