Birim Testi templateUrl Direktifine AngularJS
templateUrl
tanımlanmış olan AngularJS bir Direktif var. Yasemin ile birim test etmeye çalışıyorum.
Yasemin benim JavaScript this önerisi başına aşağıdaki gibi görünür:
describe('module: my.module', function () {
beforeEach(module('my.module'));
describe('my-directive directive', function () {
var scope, $compile;
beforeEach(inject(function (_$rootScope_, _$compile_, $injector) {
scope = _$rootScope_;
$compile = _$compile_;
$httpBackend = $injector.get('$httpBackend');
$httpBackend.whenGET('path/to/template.html').passThrough();
}));
describe('test', function () {
var element;
beforeEach(function () {
element = $compile(
'<my-directive></my-directive>')(scope);
angular.element(document.body).append(element);
});
afterEach(function () {
element.remove();
});
it('test', function () {
expect(element.html()).toBe('asdf');
});
});
});
});
Ben Yasemin spec benim hata bu çalıştırdığınızda, aşağıdaki hata iletisini alabilirsiniz:
TypeError: Object #<Object> has no method 'passThrough'
Tek istediğim templateUrl olarak yüklenecek - respond
kullanmak istemiyorum. Bu ngMockE2E yerine ngMock kullanarak ilgili olabileceğini düşünüyorum. Eğer suçlu bu nasıl eski yerine ikinci kullanırım?
Şimdiden teşekkürler!
CEVAP
NgMock ile ilgili olan bu doğru. NgMock modül otomatik olarak her Açısal test için yüklenir ve $httpBackend
alay şablon getiriliyor içeren $http
hizmeti, herhangi bir kullanımı işlemek için başlatır. Şablon sistemi $http
ile şablon yüklemek için çalışır ve bir "istek" alay. beklenmedik olur
Açısal zaten mevcut. yani ön yük $templateCache
içine şablonları için bir yol gerekir ne $http
kullanmadan onlara sorar.
Tercih Edilen Çözüm: Karma
Eğer Karma testlerinizi (ve olmalıdır) çalıştırmak için kullanıyorsanız, ng-html2js ön işlemci ile sizin için bir şablon yüklemek yapılandırabilirsiniz. Ng-html2js HTML belirttiğiniz dosya ve yükler önceden bu Açısal bir modüle dönüştürür okur $templateCache
.
1 . Adım: karma.conf.js
Senin. bu kadar basit gönderebilirler
// karma.conf.js
preprocessors: {
"path/to/templates/**/*.html": ["ng-html2js"]
},
ngHtml2JsPreprocessor: {
// If your build process changes the path to your templates,
// use stripPrefix and prependPrefix to adjust it.
stripPrefix: "source/path/to/templates/.*/",
prependPrefix: "web/path/to/templates/",
// the name of the Angular module to create
moduleName: "my.templates"
},
Eğer Yeoman app iskele için kullanıyorsanız, bu config çalışacak
plugins: [
'karma-phantomjs-launcher',
'karma-jasmine',
'karma-ng-html2js-preprocessor'
],
preprocessors: {
'app/views/*.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
stripPrefix: 'app/',
moduleName: 'my.templates'
},
Adım 2: testlerinizde modülünü Kullanın
// my-test.js
beforeEach(module("my.templates")); // load new module containing templates
Tam bir örnek için, canonical example from Angular test guru Vojta Jina şuna bak. Bütün bir kurulum içerir: karma config, şablonlar ve testleri.
Olmayan Karma Bir Çözüm
Eğer kullanım Karma her ne sebepten olursa olsun (tembellik, aptallık, katı inşa sürecinde eski uygulama, vs.) ve sadece test bir tarayıcı buldum kullanabilirsin etrafında ngMock devralma $httpBackend
kullanarak bir ham XHR almaya şablon için gerçek ve içine yerleştirin $templateCache
. Bu çözüm çok daha az esnektir, ama işi şimdilik bitmiş olur.
// my-test.js
// Make template available to unit tests without Karma
//
// Disclaimer: Not using Karma may result in bad karma.
beforeEach(inject(function($templateCache) {
var directiveTemplate = null;
var req = new XMLHttpRequest();
req.onload = function() {
directiveTemplate = this.responseText;
};
// Note that the relative path may be different from your unit test HTML file.
// Using `false` as the third parameter to open() makes the operation synchronous.
// Gentle reminder that boolean parameters are not the best API choice.
req.open("get", "../../partials/directiveTemplate.html", false);
req.send();
$templateCache.put("partials/directiveTemplate.html", directiveTemplate);
}));
Cidden ama. Karma kullanın.
Birim test, Entegrasyon Testi, Duman t...
Kötü uygulama Birim testi Yansıma kull...
Nasıl alay Angularjs söz veren bir ser...
Nasıl Perl ile birim testi yapabilir m...
Birim Testi bash betikleri...