使用 jasmine/karma 在 PhantomJS 中导入 angular 组件

Question

以下单元测试在 Chrome 中有效（由于其对 HTML-imports 的原生支持），但我正在努力让它与 PhantomJS（以及其他浏览器）一起工作事）。

我正在尝试对导入进行 polyfill ('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>

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

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

我已将其放入一个单独的文件中，该文件在我所有其他 spec.js 文件之前在 karma.conf.js 中引用。

但是，如果其他地方不需要它，它可以放在单个 describe 块或单个 spec.js 中。

使用 jasmine/karma 在 PhantomJS 中导入 angular 组件

Import angular component in PhantomJS with jasmine/karma

jasmine

phantomjs

angularjs

karma-runner

html-imports