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

Следующий модульный тест работает в Chrome (из-за собственной поддержки HTML-импорта), но я изо всех сил пытаюсь заставить его работать с PhantomJS (и другими браузерами по этому вопросу).Импорт углового компонента в 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

[email protected]:/Temp/so-example/node_modules/angular/angular.js:322:24 
[email protected]:/Temp/so-example/node_modules/angular/angular.js:4591:12 
[email protected]:/Temp/so-example/node_modules/angular/angular.js:4513:30 
[email protected]:/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

источник

2016-05-29 Joshua Webb

Почему ваш компонент в HTML-файле? – Phil

Это позволяет мне совмещать мои стили и скрипты вместе в аккуратный компонент (а-ля веб-компоненты), не вводя ненужный шаг сборки (конкатенирование их), я не включал никаких стилей, поскольку я не чувствовал, что это актуально к примеру. Хотя, как и следовало ожидать, если я вытащил его в свой собственный .js-файл, он работает нормально. –

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

Мы можем заставить 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-30 11:17:23

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

ответ

Смежные вопросы