loadStyleFixtures doesn't load css in jasmine tests

Question

Background is that I'm trying to create a very basic thermostat in javascript and then test it, using jasmine.

I want to be able to test that the page loads with certain css (i.e. that the thermostat is the right colour) and then updates it. Tests which check whether the colour is updated pass fine, but the first test to check whether the initial colour is correct does not pass.

After stopping the tests in the console, I realised that the css stylesheet isn't being applied on the tests - though it does work on a normal local server. This makes me think that there is some problem with me using loadStyleFixtures to put the css in jasmine.

The test looks like this:

describe('Display', function(){

beforeEach(function(){
  thermostat = new Thermostat();
  jasmine.getFixtures().fixturesPath = '.';
  loadFixtures('temperature_change.html');
  jasmine.getStyleFixtures().fixturesPath = './public/css';
  loadStyleFixtures('stylesheet.css');
});

...

it('can start as yellow', function(){
  expect($('#temperature').css('color')).toEqual('rgb(255, 255, 0)');
});

The stylesheet looks like this:

body {
  background-color: navy;
  color: white;
}

#temperature { 
  color: yellow;
}

setStyleFixtures('#temperature { color: yellow; }') also doesn't work if added to the beforeEach function. My patch was to use jquery to add css in the beforeEach block instead of requiring the css stylesheet.

Any help much appreciated!

Edit: The test passes intermittently - not sure what to make of that apart from that perhaps the problem is with my server setup or something.

Answer 1

In the end, the problem was that I was adding Fixtures and styleFixtures in the wrong order in the beforeEach block of my tests.

So this code would pass my tests:

beforeEach(function(){
    thermostat = new Thermostat();
    jasmine.getStyleFixtures().fixturesPath = './public/css';
    loadStyleFixtures('stylesheet.css');
    jasmine.getFixtures().fixturesPath = '.';
    loadFixtures('temperature_change.html');
  });

But this (my original code) would not:

beforeEach(function(){
    thermostat = new Thermostat();
    jasmine.getFixtures().fixturesPath = '.';
    loadFixtures('temperature_change.html');
    jasmine.getStyleFixtures().fixturesPath = './public/css';
    loadStyleFixtures('stylesheet.css');
  });

My idea as to why the order matters is that the fixtures were adding in the stylesheet themselves, and then adding the sheet again. I think that this confused Jasmine, and that it needs the stylesheet to load first.

I think the intermittent passing was because the fixtures would occasionally load slowly, giving the stylesheet time to load first, but I am not certain of this.