SORU
5 Mart 2013, Salı


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
21 AĞUSTOS 2013, ÇARŞAMBA


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.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Glyn Dewis

    Glyn Dewis

    25 AĞUSTOS 2007
  • RomanAtwood

    RomanAtwood

    18 Kasım 2009
  • William Hyde

    William Hyde

    23 HAZİRAN 2008