Как настроить меньшую предварительную обработку в karma jasmine css testing

Я делаю игру «simon says» в javascript. Я пытаюсь настроить среду dev, используя Gulp, поддерживающий TDD. Я использую Jasmine, которым управляет Karma, и мне трудно начать работу с препроцессором без кармы.Как настроить меньшую предварительную обработку в karma jasmine css testing

Структура проекта

сборки
- CSS
- app.min.css
- JS
- app.min.ks
- index.html
SRC
- менее
- styles.less
- JS
- script.js
- index.html
тест
- JS
- scriptSpec.js

В моей gulpfile обрабатываю меньше, галдеж и преуменьшать, прежде чем положить его в папку 'сборки'.

У меня есть index.html один элемент. Этот элемент передается в функцию 'createDom' js, которая создает все элементы для игры (панель, кнопки и т. Д.). Пути к стилям и JS является жёстко, как это:

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Simon</title> 
    <!-- bower:css --> 
    <!-- endinject --> 
    <link rel="stylesheet" href="css/app.min.css"> 
</head> 
<body> 

<div id="simon"></div> 

<script src="js/app.min.js"></script> 
<script> 
    // DOM Ready 
    document.addEventListener("DOMContentLoaded", function() { 
     var el = document.getElementById('simon'); 
     Simon.createDom(el); 
    }); 
</script> 
<!-- bower:js --> 
<!-- endinject --> 
</body> 
</html>

Simon.createDom() создает эти элементы:

<div id="simon"> 
    <div class="board"> 
     <div class="colorbox red" id="red" style="pointer-events: none;"></div> 
     <div class="colorbox green" id="green" style="pointer-events: none;"></div> 
     <div class="colorbox yellow" id="yellow" style="pointer-events: none;"></div> 
     <div class="colorbox blue" id="blue" style="pointer-events: none;"></div> 
    </div> 
    <h4 class="scoreFld">0</h4> 
    <h4 class="roundFld">0</h4><button class="btnStart">START</button> 
</div>

Я хотел бы проверить цвета фона элементы. Но я не могу узнать, как настройки кармы, чтобы иметь возможность написать спецификацию, как это:

simonSpec.js

describe('playSequence()', function() { 
    var el, 
     sequence; 

    beforeEach(function() { 
     el = document.getElementById('simon'); 
     Simon.createDom(el); 

     jasmine.clock().install(); 
     sequence = ['red', 'green', 'blue']; 
    }); 

    afterEach(function() { 
     jasmine.clock().uninstall(); 
     sequence = []; 
    }); 

    it('the first color should be red', function() { 
     Simon.playSequence(sequence); 

     var actual = document.getElementById('red').style.backgroundColor; 
     var expected = "rgb(255, 0, 0)";-color'); 

     expect(actual).toEqual(expected); 
    }); 
})

элемент с идентификатором «красного» всегда не определено.

Может ли кто-нибудь указать мне пример того, как установить это. Я развиваюсь меньше и хотел бы протестировать перед обработкой css.

источник

2016-08-28 olefrank

Karma выполняет ваши тесты в контексте фиктивного «HTML» файла, который просто тянет ваши тесты, как определено конфигурацией Karma (files). Это то, что included в Карме files Конфигурация относится к. Следовательно, document.getElementById() будет действовать на этот манекен DOM, и поэтому он не найдет ваш элемент.

Что вам нужно сделать вместо этого - это нагрузочные устройства в тестах Jasmine, которые определяют HTML-код для работы, а затем заставляют вашу игру Simon работать на ваших светильниках при выполнении ваших тестов Jasmine. Аналогично, ваша логика document.getElementById() также должна быть изменена для работы на светильниках.

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

источник

2016-08-28 13:46:37 user268396

Благодарим вас за ответ. Светильники - отличная идея. Но как я могу добавить мои файлы, обработанные кармой, меньше, чем css, поэтому я могу проверить его? – olefrank

ОК, я понял. Используя приборы, выход из препроцессора с меньшей кармой автоматически доступен, поэтому я могу его протестировать. Спасибо за помощь. – olefrank

Как настроить меньшую предварительную обработку в karma jasmine css testing

ответ

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