olefrank olefrank - 9 months ago 99
Less Question

How to setup less preprocessing in karma jasmine css testing

I'm making a 'simon says' game in javascript. I'm trying to setup a dev environment using Gulp supporting TDD. I'm using Jasmine run by Karma and am having a hard time getting started using the karma less preprocessor.

Project structure

  • build

    • css

    • app.min.css

    • js

    • app.min.ks

    • index.html

  • src

    • less

    • styles.less

    • js

    • script.js

    • index.html

  • test

    • js

    • scriptSpec.js

In my gulpfile I process less, babel and minify before putting it into the 'build' folder.

My index.html has one element. This element is passed to a 'createDom' js function, which creates all the elements for the game (board, buttons etc). Paths to styles and js is hardcoded like this:


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

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

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

Simon.createDom() creates these elements:

<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>
<h4 class="scoreFld">0</h4>
<h4 class="roundFld">0</h4><button class="btnStart">START</button>

I would like to test background colors of elements. But I cannot find out how to setup karma to be able to write a spec like this:


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

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

sequence = ['red', 'green', 'blue'];

afterEach(function () {
sequence = [];

it('the first color should be red', function () {

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


The element with id 'red' is always undefined.

Can anyone point me to an example of how to set this up. I develop in less and would like to test before processing to css.


Karma executes your tests in the context of a dummy 'HTML' file which simply pulls in your tests as defined by the Karma config (files). That is what included in the Karma files configuration refers to. Hence, document.getElementById() is going to act on that dummy DOM and so it's not going to find your element.

What you need to do instead is load fixtures in your Jasmine tests that define the HTML to work with and then make your Simon game operate on your fixtures when executed through your Jasmine tests. Similarly your document.getElementById() logic should also be modified to operate on the fixtures instead.

Since you are using Jasmine already, consider using the Jasmine JQuery plugin which also adds support for working with fixtures in a convenient way.