Error: Unexpected request: GET views / partials / * for nested directive even when using html2js in karma / jasmine unit test

Question

I use Karma and Jasmine for unit testing for my angularjs application. I have a directive template (for example, Directive A) in which another directive is created (for example, directive B), although it works fine in the application, but the test case cannot display the template for directive B. The following is the error: -

Error: Unexpected request: GET views/partials/directiveb.html Expected GET https://my-sandbox.app.com/123456 

The following is the directive A: -

 angular.module('myApp') .directive('directiveA', function (myservices, myOtherServices) { return { controller: function(){ /* ... controller function ... */ }, templateUrl: '/views/partials/directivea.html', restrict: 'E', link: function postLink(scope, element, attrs) { /* ...link function... */ } }; }); 

Directive A template: -

 <div> <div class="col-md-12"> <h4>We <strong>Need</strong></h4> <div directive-b some-attribute=="true"></div> </div> <div directive-b some-attribute=="false"></div> </div> 

Directive Test: -

 'use strict'; describe('Directive: directiveA', function () { // load the directive module beforeEach(module('myApp')); beforeEach(module('template-module')); var element, appId, reqResponse, scope, dscope, reqUrl, $httpBackend, $compile; beforeEach(inject(function ($rootScope, _$httpBackend_) { scope = $rootScope.$new(); $httpBackend = _$httpBackend_; appId = "123456"; reqUrl = "https://my-sandbox.app.com/" + appId; reqResponse = {} })); it('should Pass', inject(function (_$compile_) { $httpBackend.expect('GET', reqUrl).respond(reqResponse); $compile = _$compile_; element = angular.element('<directive-a/>'); element = $compile(element)(scope); scope.$digest(); $httpBackend.flush(); dscope = element.scope(); expect(dscope.myVar).toBe(true); })); }); 

Karma configuration file: -

 // Karma configuration // http://karma-runner.imtqy.com/0.12/config/configuration-file.html // generator-karma 0.8.2 module.exports = function(config) { config.set({ autoWatch: true, basePath: '../', frameworks: ['jasmine'], preprocessors: { 'app/views/**/*.html': 'html2js' }, ngHtml2JsPreprocessor: { stripPrefix: "app", moduleName: "template-module" }, // list of files / patterns to load in the browser files: [ 'bower_components/angular/angular.js', 'bower_components/angular-mocks/angular-mocks.js', 'bower_components/angular-animate/angular-animate.js', 'bower_components/angular-cookies/angular-cookies.js', 'bower_components/angular-resource/angular-resource.js', 'bower_components/angular-route/angular-route.js', 'bower_components/angular-sanitize/angular-sanitize.js', 'bower_components/angular-touch/angular-touch.js', 'bower_components/angular-strap/dist/angular-strap.min.js', 'bower_components/angular-strap/dist/angular-strap.tpl.min.js', 'bower_components/ng-file-upload/angular-file-upload-shim.min.js', 'bower_components/ng-file-upload/angular-file-upload.js', 'bower_components/jquery/dist/jquery.js', 'app/scripts/**/*.js', 'test/mock/**/*.js', 'test/spec/**/*.js', 'app/views/**/*.html' ], // list of files / patterns to exclude exclude: ['test/spec/e2e/*'], // web server port port: 8080, browsers: ['PhantomJS'], // Which plugins to enable plugins: [ // 'karma-chrome-launcher', 'karma-phantomjs-launcher', 'karma-jasmine', 'karma-ng-html2js-preprocessor' ], // Continuous Integration mode // if true, it capture browsers, run tests and exit singleRun: false, colors: true, // level of logging // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG logLevel: config.LOG_INFO // Uncomment the following lines if you are using grunt server to run the tests //proxies: { // '/': 'http://localhost:9000/' // }, // URL root prevent conflicts with the site root // urlRoot: '_karma_' }); }; 

NOTE. I already use html2js for $ templateCache, and yet I get this problem.

Answer 1

Template URL Directive /views/partials/directivea.html . This does not result in an HTTP GET, because the template is cached by the preprocessor:

  ngHtml2JsPreprocessor: { stripPrefix: "app", moduleName: "template-module" } 

But there is a GET request for views/partials/directiveb.html . Note the difference with the first URL: it does not have a lead / . The template cache has an entry for partial, but its URL is in the cache /views/partials/directiveb.html , not views/partials/directiveb.html .

Make sure that you use absolute or relative paths sequentially and, depending on your choice, separate the app prefix or app/ prefix in the preprocessor configuration.