LoadStyleFixtures does not load css in jasmine tests

Question

It is assumed that I am trying to create a very simple thermostat in javascript and then test it using jasmine.

I want to check that the page loads with a specific css (i.e. that the thermostat is the correct color) and then updates it. Tests that check whether the color is updated, pass fine, but the first test to verify the correctness of the source color does not pass.

After stopping the tests in the console, I realized that the CSS stylesheet does not apply to tests, although it works on a regular local server. This makes me think there is some problem with me using loadStyleFixtures to put css in jasmine.

The test is as follows:

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 style sheet looks like this:

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

#temperature { 
  color: yellow;
}

setStyleFixtures ('# temperature {color: yellow;}') , beforeEach. jquery css beforeEach CSS.

!

: - , , , , - .

Answer 1

, , Fixtures styleFixtures beforeEach .

, :

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

( ) :

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

, , , , . , .

, , , , .