AngularJS test direktifleri Karma, Jasmine ve ngHtml2JsPreprocessor ile: şablon yüklenmedi

Question

Yönergelerime yönlendirmek için Karma + Jasmine ve ngHtml2JsPreprocessor eklentisini kullanarak özel bir AngularJS yönergesini test ediyorum, ancak yönergemin neden göründüğünü anlamıyorum şablona erişememek için (derlenmiş öğe boştur).

 basePath: '../../main/webapp/static/', 
     files: [ 
      {pattern: 'libs/angular/angular.js', watch: false}, 
      {pattern: 'libs/angular-resource/angular-resource.js', watch: false}, 
      {pattern: 'libs/angular-mocks/angular-mocks.js', watch: false}, 
      {pattern: 'libs/angular-ngkit/js/ngkit.js', watch: false}, 
      {pattern: 'libs/jquery/dist/jquery.js', watch: false}, 
      'templates/angular/*.html', 
      'js/angular/**/*.js', 
      '../../../test/js/spec/angular/*.js' 
     ], 
     preprocessors: { 
      'templates/angular/*.html': ['ng-html2js'] 
     }, 
     ngHtml2JsPreprocessor: { 
      moduleName: 'templates' 
     }, 
     browsers: [ 
      'PhantomJS' 
     ], 
     plugins: [ 
      'karma-phantomjs-launcher', 
      'karma-jasmine', 
      'karma-ng-html2js-preprocessor' 
     ], 

ve benim testinde:

beforeEach(module('templates')); 
beforeEach(module('ngResource')); 
beforeEach(module('mywidget')); 

templateUrl: 'templates/angular/mywidget.html' 

benim Karma yapılandırma aşağıdaki (bunun ilgili kısmı) 'dir: Ben yönergede templateUrl bu şekilde tanımlanmış

"komik" bölümü, şablon önbelleğini test edersem şablonlar yüklenip derlenir:

beforeEach(inject(function(_$templateCache_) { 
    var template = _$templateCache_.get('templates/angular/mywidget.html'); 
})); 

template var! Direktifim neden kullanamaz? (tarayıcıda mükemmel çalışır). templateUrl, yönergemdeki bir template satır içi ile değiştirirsem, sınamada düzgün bir şekilde işlenir ... ancak harici bir şablon kullanmam gerekiyor, satır içi olarak kabul edilemez ... Takılıyorum !! Akıllı bir fikir mi?

(Ben şimdiye kadar ne denedim)

GÜNCELLEME:

1. hiçbir mantıkla yeni bir yönerge sadece, (sorun uygulamada olduğunu dışlamak için):

   angular.module('modulename', []). directive('foo', function() { return { templateUrl: 'path/to/template.html' } });

   :

2. şablon içeriği basitleştirmek

3. değişiklik şablon yolu

4. değişim şablonu adı

5. değişiklik benzer

6. "ngResource" gibi fazla bağımlılıkları kaldırır karma yapılandırma dosyasının konumu ve

7. tüm bower bağımlılıklarını yeniden yükleme (ve önbelleği temizleme)

Tüm npm paketleri küfürlere bir Fibonacci dizileri atma sırasında masanın karşı benim yumruklarını Pounding

8. (Karma'nın eklentisi kullanarak Intellij Idea testi koşuyordu) komut satırından

9. çalıştırma testleri yeniden

10. Eğer dinlemiş olsaydı papayı öldürürdü!

(En sonuncusu genellikle beni çözüme götürür ...ama bu sefer)

GÜNCELLEME 2:

ben bu şekilde benim yönergesini tanımlayarak sorunu atlanır:

directive('mywidget', function($templateCache) { 
     var config = {}; // directive definition (where you define "link", "restrict"...) 
     var templateUrl = 'templates/angular/mywidget.html'; 
     var cachedTemplate = $templateCache.get(templateUrl); 
     if (cache) { 
      config.template = cachedTemplate; 
     } 
     else { 
      config.templateUrl = templateUrl; 
     } 
     return config; 
}); 

Bu hileyi kullanarak, benim yönergesi testlerinde düzgün hale olsun. Bu nokta AngularJS'de bir hata gibi görünüyor ... şablonu bir şekilde önbellekten yüklemek başarısız oluyor. Gerçekten

Answer 1

YEAAAAAAAAAAH !!! Sonunda bu çılgın meseleyi çözdüm! Sorun şu ki, açısal bağımlıların farklı versiyonlarını kullandım (açısal-alaylar, açısal kaynaklar ...). Eğer kullandıysanız, açısal 1.2.27 , sonra da açısal-alay 1.2.27, açısal kaynak 1.2.27 ve benzeri kullandığınızdan emin olun, aksi takdirde karşılaştığım gibi çatışmalar olabilir. Tabii ki farklı versiyonları kullanmak niyetim değildi, fakat bir şekilde bağımlılıklarımı bower yoluyla kurarak bu kütüphaneleri "hizalanmamış" hale getiriyorum.

Answer 2

deneyin

angular.element(document.body).append(element); 

ile doküman gövdesine derlenmiş eleman ekleme Bir beforeEach bloğunda koyabilirsiniz :(hayal kırıklığına uğrattın:

beforeEach(function() { 
    inject(function(_$compile_, _$rootScope_) { 
    var compile, element, rootScope, scope; 
    compile = _$compile_; 
    rootScope = _$rootScope_; 
    scope = rootScope; 
    element = angular.element('<hello-directive></hello-directive>'); 
    compile(element)(scope); 
    angular.element(document.body).append(element); 
    scope.$apply(); 
    }); 
});