jantmine/karmaを使ってPhantomJSの角度コンポーネントをインポートする

Question

次の単体テストはHTMLでのインポートがサポートされているためChromeで動作しますが、PhantomJS（およびその他のブラウザでも問題なく動作します） ）。

私は、インポート（ 'webcomponents.js/HTMLImports.min.js'）をpolyfillしようとしていますが、何の効果もありません。

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'] 
    }); 
}; 

成分/ 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.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'); 
    }); 
}); 

PhantomJS

からエラー

forEach@C:/Temp/so-example/node_modules/angular/angular.js:322:24 
loadModules@C:/Temp/so-example/node_modules/angular/angular.js:4591:12 
createInjector@C:/Temp/so-example/node_modules/angular/angular.js:4513:30 
workFn@C:/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 

Answer 1

これに対して私の頭を約1日ぶつけた後、解決策はかなり簡単だったことが分かります。

インポートが完了するまで、HTMLインポートに依存するテストの前に次のブロックを実行させることで、jasmineを強制的に待機させることができます。

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

私は私の他のspec.jsのすべてのファイルの前にkarma.conf.jsで参照されている別のファイルにこれを入れています。

ただし、他の場所では必要ない場合は、describeブロック内に配置するか、spec.jsブロック内に配置することができます。