Angularjs 使用jasmine/karma导入PhantomJS中的角度组件

下面的单元测试可以在Chrome中使用（因为它本机支持HTML导入），但我很难让它与PhantomJS（以及其他浏览器）一起使用

我试图对导入进行多边形填充（'webcomponents.js/HTMLImports.min.js'），但没有任何效果

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

component/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>

---

在我的头撞了大约一天之后，结果证明解决方法非常简单

我们可以通过在依赖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

中引用

---

但是，它可以放在一个

descripe

块或一个

spec.js

块中，如果其他地方不需要它的话。

为什么你的组件在一个HTML文件中？它允许我将我的样式和脚本放在一个整洁的组件（一个web组件）中，而不引入不必要的构建步骤（连接它们），我没有包括任何样式，因为我觉得它与示例无关。不过，正如您所料，如果我将其拉入自己的.js文件，它将正常工作。

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

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