Nonostante alcune persone abbiano gli stessi problemi (come [qui] [1] o [lì] [2]), non riesco a testare la mia direttiva in my Angular (1.2.25) applicazione.Impossibile caricare il file HTML modello nei test Karma per una direttiva angolare
Qui è la mia struttura del progetto:
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
(sì, non è una buona struttura, ma la mia domanda angolare è bloccato in un progetto Java)
La mia configurazione 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...
},
...
});
};
Il mio 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');
});
});
});
E la stessa direttiva:
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: '='
}
};
});
Durante l'esecuzione dei test (grunt karma
), ottengo questo errore:
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
io ancora non capisco che cosa ho fatto di sbagliato nel mio preprocessore. Ho provato molte configurazioni diverse nel ngHtml2JsPreprocessor
, ma l'errore è sempre lo stesso. ho visto nei registri di debug che il processore di pre sta lavorando sul mio file HTML di modello:
DEBUG [preprocessor.html2js]: Processing "d:/dev/my-app/src/main/resources/META-INF/resources/workflow/directives/text-input.html".
Grazie.