背景是我试图在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样式表。

任何帮助,不胜感激!

编辑:测试间歇性地通过-不确定问题出在我的服务器设置或其他方面,该怎么做。

最佳答案

最后,问题是我在测试的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');
  });

关于顺序为何重要的我的想法是,这些固定装置本身是在样式表中添加的,然后又添加了该表。我认为这让Jasmine感到困惑,并且需要先加载样式表。

我认为间歇性传递是因为灯具偶尔会缓慢加载,使样式表有时间先加载,但是我不确定。

10-05 20:29
查看更多