1

以下单元测试在 Chrome 中工作（由于它对 HTML 导入的本机支持），但我正在努力让它与 PhantomJS（以及其他浏览器）一起工作。

我正在尝试填充导入（'webcomponents.js/HTMLImports.min.js'），但它没有任何效果。

业力.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
4

1 回答 1

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

于 2016-05-30T11:17:23.257 回答