背景是我试图在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感到困惑,并且需要先加载样式表。
我认为间歇性传递是因为灯具偶尔会缓慢加载,使样式表有时间先加载,但是我不确定。