5

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.

risposta

2

Ho finalmente trovato una soluzione. Nel mio karma.conf.js, ho impostato un module-name, come quella:

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

poi, nel mio test Jasmine, lo aggiungo:

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

Un'altra soluzione è quella di impostare direttamente il file HTML come modulo senza cambiare il karma.conf.js: una buona soluzione

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

Ma non come io ho dozzina di directives/*.html ...