Nie można wczytać pliku HTML szablonu w testach Karmy dla dyrektywy Angular

Question

Mimo że niektóre osoby mają te same problemy (jak [tutaj] [1] lub [tam] [2]), nie udało mi się przetestować mojej dyrektywy w moja aplikacja Angular (1.2.25).

Tu jest mój struktury projektu:

myapp 
    +- src/main/java/resources/META-INF/resources/workflow/directives 
    | +- directives.js 
    | +- *.html (all templates) 
    +- src/test/javascript 
     +- karma.conf.js 
     +- spec/directives 
      +- text-input.spec.js 

(tak, to nie jest dobra struktura, ale mój kątowa aplikacja tkwi w projekcie Java)

Moja konfiguracja karma:

// Karma configuration 
module.exports = function (config) { 

    config.set({ 
     ... 
     // base path, that will be used to resolve files and exclude 
     basePath: '', 
     // testing framework to use (jasmine/mocha/qunit/...) 
     frameworks: ['jasmine'], 
     // list of files/patterns to load in the browser 
     files: [ 
      // Third parties dependencies: jQuery, Angular, Angular modules, Angular mocks 
      '../../main/resources/META-INF/resources/workflow/bower_components/...', 

      // My directives 
      '../../main/resources/META-INF/resources/workflow/directives/*.html', 
      '../../main/resources/META-INF/resources/workflow/directives/*.js', 

      // My application 
      '../../main/resources/META-INF/resources/workflow/scripts/*.js', 
      '../../main/resources/META-INF/resources/workflow/app/**/*.js', 

      // My Test files 
      'spec/directives/*.js' 
     ], 

     // list of files/patterns to exclude 
     exclude: [], 
     // web server port 
     port: 8888, 

     browsers: [ 'Chrome' ], 

     // Which plugins to enable 
     plugins: [ 
      'karma-ng-html2js-preprocessor', 
      'karma-chrome-launcher', 
      'karma-jasmine' 
     ], 

     preprocessors: { 
      '../../main/resources/META-INF/resources/workflow/directives/*.html': [ 'ng-html2js' ] 
     }, 
     ngHtml2JsPreprocessor: { 
      // Not sure what to put here... 
     }, 
     ... 
    }); 
}; 

Mój test:

describe('directive: text-input', function() { 
    var element, scope; 
    beforeEach(module('myApp')); 

    beforeEach(inject(function($rootScope, $compile) { 
     scope = $rootScope.$new(); 
     element = '<div my-input-text data-label="Foo" data-model="bar"></div>'; 
     element = $compile(element)(scope); 
     scope.$digest(); 
    })); 

    describe('basics tests', function() { 
     it('should be editable', function() { 
      expect(element.text()).toBe('Foo'); 
     }); 
    }); 
}); 

i dyrektywa sama:

var myDirs = angular.module('my-directives', []); 

// Text input 
myDirs.directive('myInputText', function() { 
    return { 
     replace: true, 
     templateUrl: 'directives/text-input.html', 
     scope: { 
      label: '=', 
      readOnly: '=', 
      code: '=', 
      model: '=' 
     } 
    }; 
}); 

Podczas uruchamiania testów (grunt karma), otrzymuję ten błąd:

Chrome 31.0.1650 (Windows 7) directive: text-input basics tests should be editable FAILED 
    Error: Unexpected request: GET directives/text-input.html 
    No more request expected 

ja nadal nie rozumiem, co robię źle w moim preprocesora. Próbowałem wielu różnych konfiguracji w ngHtml2JsPreprocessor, ale błąd jest zawsze taki sam. widziałem w dziennikach debugowania że wstępnie procesor pracuje na moich plików HTML szablonu:

DEBUG [preprocessor.html2js]: Processing "d:/dev/my-app/src/main/resources/META-INF/resources/workflow/directives/text-input.html". 

Dzięki.

Answer 1

W końcu znalazłem rozwiązanie. W moim karma.conf.js, ustawić module-name, tak:

ngHtml2JsPreprocessor: { 
     moduleName: 'my-directives' 
    }, 

następnie, w moim teście Jasmine, dodaję go:

beforeEach(module('myApp')); 
beforeEach(module('my-directives')); 

Innym rozwiązaniem jest bezpośrednio ustawić plik HTML jako moduł bez zmiany karma.conf.js:

beforeEach(module('directives/text-input.html')); 

ale nie jest dobre rozwiązanie, jak mam kilkanaście directives/*.html ...