Импортировать угловой компонент в PhantomJS с жасмином / кармой

Question

Следующий модульный тест работает в 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']
  });
};

Компонент / так 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

После того, как я в течение одного дня ударился головой об этом, оказалось, что решение было довольно простым.

Мы можем заставить jasmine ожидать завершения импорта, выполнив следующий блок перед выполнением любых тестов, основанных на импорте HTML.

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

Я поместил это в отдельный файл, на который есть ссылки в karma.conf.js прежде чем все мои другие spec.js файлы.

Тем не менее, он может быть помещен в один describe блок или один spec.js если это не требуется где-либо еще.