loadStyleFixtures 在茉莉花测试中不加载 css

Question

背景是我正在尝试在 javascript 中创建一个 very basic thermostat，然后使用 jasmine 对其进行测试。

我希望能够测试页面是否加载了某些 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 在 beforeEach 块中添加 css 而不是需要 css 样式表。

非常感谢任何帮助！

编辑：测试断断续续地通过 - 不知道除此之外还有什么问题可能是我的服务器设置或其他问题。

Answer 1

最后，问题是我在测试的 beforeEach 块中以错误的顺序添加了 Fixtures 和 styleFixtures。

所以这段代码将通过我的测试：

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

关于顺序为何重要，我的想法是固定装置自己添加样式 sheet，然后再次添加 sheet。我认为这让 Jasmine 感到困惑，它需要先加载样式sheet。

我认为间歇性传递是因为 fixture 偶尔会加载缓慢，让样式 sheet 有时间先加载，但我不确定这一点。

loadStyleFixtures 在茉莉花测试中不加载 css

loadStyleFixtures doesn't load css in jasmine tests

javascript

css

jasmine

jasmine-jquery