Тесты с CSS-выпуском AngularJS с кармой + Жасмин

Я использую Karma + Jasmine для проверки своих директив AngularJS, я написал более 300 тестов, и я был очень доволен ... пока не нашел проблему, которая привела меня сюда, потому что я «m stuck: некоторые тесты терпят неудачу, потому что им нужен CSS, применяемый к некоторым элементам (часть кода в моей директиве делает вычисление размера на основе этого стиля), и, несмотря на то, что я добавил файл, содержащий реализацию CSS, этот файл кажется проигнорированным во время испытаний. В моей карме конфигурации я добавил файл CSS следующим образом:Тесты с CSS-выпуском AngularJS с кармой + Жасмин

files: [ 
    // .. 
    'styles/foo.css', 
    // .. 
],

вышеуказанные параметры генерирует ссылку тег в body, а не head, поэтому я попытался впрыснуть CSS «вручную» с помощью JS:

angular.element(document).find('head').prepend(
     '<style type="text/css">@charset "UTF-8";' + 
     '/* THE STYLE I NEED FOR MY TESTS HERE */' + 
     '</style>' 
);

, но ни один из этих методов не работает (я тестировал, и тег стиля вводится правильно). Я, наконец, попытался добавить блок стиля среди HTML, который я компилирую с помощью углового $compile:

var element = ng.element('<div>' + 
'<style type="text/css">@charset "UTF-8";' + 
      '/* THE STYLE I NEED FOR MY TESTS HERE */' + 
      '</style>' + 
'<my-directive></my-directive>' + 
+ '</div>'); 
$compile(element)(scope);

... но до сих пор не повезло ... Я также попытался переключить тест бегун из PhantomJS в Chrome, но проблема та же: стили, так или иначе игнорируются (они вводятся, но они не получают применяется к элементам, на самом деле, используя jQuery(targetElement).css('width') возвращает 0) ...

так, мой большой вопрос: как мне импортировать и успешно применять таблицу стилей в тестах кармы ??? :(

источник

2014-09-03 daveoncode

Хорошо, проблема очень простая и глупая ... Интересно, почему я потерял столько времени, чтобы понять это: P Итак ... CSS отлично вписаны кармой, указав их в конфигурационном файле, как я 'сделанный как первый подход (нет необходимости в другом плагине или черной магии), но ... Стили CSS не применяются к элементам, пока они не добавятся в DOM!, и это не проблема, связанная с кармой, угловым, жасмином или что еще ... так работает движок браузера! Браузер анализирует определения CSS и делает элементы страницы в соответствии, но когда в угловом тесте я пишу:

var element = angular.element('<my-directive></my-directive>'); 
$compile(element)(scope);

Я имею дело с в памяти узлов DOM, которые неизвестны все, но мой код JavaScript! Как браузер должен применять CSS к узлу в памяти, находящемуся в переменной js? Это не может быть очевидно ... он может пересекать дерево узлов только на странице, поэтому ... «исправление» очень просто: мне нужно добавить элемент в DOM:

angular.element(document).find('body').append(element);

источник

2014-09-04 08:42:40 daveoncode

Я настоятельно советую для добавления послеEach (функция() { элемент.remove() }) при добавлении элемента к DOM в ваши тесты. Когда у вас тысячи тестов, они будут очень медленными, и у вас также могут быть конфликты с предыдущими тестами. – ValentinH

Из звука вашей ситуации вы хотите проверить, находится ли DOM в определенном состоянии. Я нашел плагин, который выглядит так, как будто он был разработан с учетом этого использования: jasmine-jquery. «повторно с использованием AngularJs для манипулирования DOM, это расширение будет по-прежнему позволяют проверить состояние результирующей DOM в.

в частности, я думаю, вы должны взглянуть на StyleSheet Fixtures, который позволяет вводить CSS в проверке.

Отказ от ответственности: я еще не тестировал это, ответ - результат исследования.

источник

2014-09-04 01:27:06 klyd

Тесты с CSS-выпуском AngularJS с кармой + Жасмин

ответ

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