loadStyleFixtures не загружает CSS в тестах жасмина

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

Я хочу иметь возможность проверить, что страница загружается с определенным CSS (т.е. что термостат имеет правильный цвет), а затем обновляет его. Тесты, которые проверяют, обновлен ли цвет, проходят нормально, но первый тест для проверки правильности исходного цвета не проходит.

Остановив тесты в консоли, я понял, что таблица стилей css не применяется к тестам, хотя она работает на обычном локальном сервере. Это заставляет меня думать, что у меня есть проблема с использованием loadStyleFixtures для помещения css в jasmine.

Тест выглядит так:

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)');
});

Таблица стилей выглядит так:

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

#temperature { 
  color: yellow;
}

setStyleFixtures ('# temperature {color: yellow;}') также не работает, если он добавлен в функцию beforeEach. Мой патч заключался в использовании jquery для добавления css в блок beforeEach вместо требования таблицы стилей css.

Любая помощь очень ценится!

Изменить: тест проходит с перерывами - не уверен, что с этим делать, кроме того, возможно, проблема связана с настройкой моего сервера или чем-то еще.


javascript css jasmine jasmine-jquery
person George McG    schedule 16.04.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

В конце концов, проблема заключалась в том, что я добавлял Fixture и 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');
  });

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

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

person George McG    schedule 17.04.2015
comment
Казалось бы, это правильно, я вернулся, чтобы обновить свой ответ, так как у меня был # в идентификаторе, lol, который испортил мои тесты. При пошаговом прохождении кода jasmine-jquery добавление стиля добавляет его в заголовок, а добавление html добавляет его в тело. Поэтому я считаю, что если они расположены в неправильном порядке, стиль не будет применяться к недавно добавленному элементу html. - person Nicholas Murray; 17.04.2015