Angle-Komponente in PhantomJS mit Jasmine/Karma importieren

Der folgende Komponententest funktioniert in Chrome (aufgrund seiner nativen Unterstützung für HTML-Imports), aber ich habe Mühe, es mit PhantomJS (und anderen Browsern für die Angelegenheit) zu arbeiten).Angle-Komponente in PhantomJS mit Jasmine/Karma importieren

Ich versuche, den Import ('webcomponents.js/HTMLImports.min.js') zu füllen, aber es hat keine Auswirkungen.

karma.conf.js

module.exports = function(config) { 
    config.set({ 
    frameworks: ['jasmine'], 
    plugins: [ 
     'karma-phantomjs-launcher', 
     'karma-chrome-launcher', 
     'karma-jasmine' 
    ], 
    files: [ 
     'node_modules/angular/angular.js', 
     'node_modules/angular-mocks/angular-mocks.js', 
     'node_modules/webcomponents.js/HTMLImports.min.js', 

     'component/so-example.html', 

     'test/test.spec.js' 
    ], 
    port: 9876, 
    browsers: ['Chrome', 'PhantomJS'] 
    }); 
};

Komponente/so-example.html

<script> 
(function() { 
    var soExampleComponent = { 
    transclude: true, 
    bindings: { 
     number: '@' 
    }, 
    template: '<span class="compiled">{{$ctrl.number}}</span>' 
    }; 

    angular.module('so.components.example', []).component('soExample', soExampleComponent); 
})(); 
</script>

test/test.spec.js

describe('<so-example>', function() { 
    var $scope, el; 

    beforeEach(module('so.components.example')); 

    beforeEach(inject(function ($compile, $rootScope) { 
    $scope = $rootScope.$new(); 
    el = $compile('<so-example number="{{ 3 }}"></so-example>')($scope)[0]; 
    $scope.$digest(); 
    })); 

    it('should import and compile', function() { 
    expect(el.querySelector('.compiled').textContent).toBe('3'); 
    }); 
});

den Fehler von PhantomJS

[email protected]:/Temp/so-example/node_modules/angular/angular.js:322:24 
[email protected]:/Temp/so-example/node_modules/angular/angular.js:4591:12 
[email protected]:/Temp/so-example/node_modules/angular/angular.js:4513:30 
[email protected]:/Temp/so-example/node_modules/angular-mocks/angular-mocks.js:3060:60 
C:/Temp/so-example/node_modules/angular/angular.js:4631:53 
TypeError: undefined is not an object (evaluating 'el.querySelector') in C:/Temp/so-example/test/test.spec.js (line 14) 
C:/Temp/so-example/test/test.spec.js:14:14

Quelle

2016-05-29 Joshua Webb

Warum ist Ihre Komponente in einer HTML-Datei? – Phil

Es ermöglicht mir, meine Stile und Skripts zu einer übersichtlichen Komponente (a la web-components) zusammenzufügen, ohne einen unnötigen Build-Schritt (Verkettung) einzuführen, ich habe keine Stile eingeschlossen, da ich es nicht relevant fand zum Beispiel. Obwohl, wie Sie vielleicht erwarten, wenn ich es in seine eigene .js Datei ziehe, funktioniert es wie normal. –

Nachdem ich meinen Kopf für etwa einen Tag dagegen geschlagen hatte, stellte sich heraus, dass die Lösung ziemlich einfach war.

Wir können jasmine zwingen, zu warten, bis der Import beendet ist, indem der folgende Block vor allen Tests ausgeführt wird, die auf einem HTML-Import beruhen.

// Wait for the HTML Imports polyfill to finish before running anything else 
beforeAll(function(done) { 
    window.addEventListener('HTMLImportsLoaded', done); 
});

Ich habe eine separate Datei setzen diese in die in karma.conf.js vor allen meinen anderen spec.js Dateien verwiesen wird.

Es kann jedoch in einem einzigen describe Block oder einem einzelnen spec.js platziert werden, wenn es nicht anderswo erforderlich ist.

Quelle

2016-05-30 11:17:23

Angle-Komponente in PhantomJS mit Jasmine/Karma importieren

Antwort

Verwandte Themen