在我的"西蒙说" app 4 div显示。当您开始游戏时,正在播放颜色序列,点亮序列中的每种颜色。序列完成后,您可以点击div来重现"重新创建"序列。
当序列正在播放时,div不应该是可点击的。我该如何测试?
第一个测试(如果序列正在播放时被禁用)通过但第二个测试(如果在序列播放后启用)则失败。该序列需要600毫秒才能完成(1种颜色),所以1000毫秒(时钟滴答)就足够了。
simon.js(摘录)
var playSequence = function(sequence) {
Simon.disableBoard();
var i = 0;
var color;
color = sequence[i];
Simon.showColor(color);
Simon.playSound(color);
var interval = setInterval(function () {
if ( i >= sequence.length - 1 ) {
clearInterval(interval);
Simon.enableBoard();
}
else {
i++;
color = sequence[i];
Simon.showColor(color);
Simon.playSound(color);
}
}, timeDelayColor);
};
var disableBoard = function() {
[
document.getElementById('red'),
document.getElementById('green'),
document.getElementById('blue'),
document.getElementById('yellow')
].forEach(function (color) {
color.removeEventListener('click', colorClickHandler, false);
color.style.pointerEvents = 'none';
});
};
var enableBoard = function() {
[
document.getElementById('red'),
document.getElementById('green'),
document.getElementById('blue'),
document.getElementById('yellow')
].forEach(function (color) {
color.addEventListener('click', colorClickHandler, false);
color.style.pointerEvents = 'all';
});
};
simonSpec.js(摘录)
describe('enable / disable board', function() {
var btnBlue,
sequence,
audioOrig, audioMock;
beforeEach(function () {
loadFixtures('fix-board.html');
sequence = ['red'];
jasmine.clock().install();
btnBlue = $('#blue');
// mock Audio (PhantomJS does not know this)
audioOrig = window.Audio;
audioMock = {};
window.Audio = function () {
return audioMock;
};
});
afterEach(function() {
jasmine.clock().uninstall();
sequence = [];
});
it('when sequence plays board should be disabled', function() {
// arrange
Simon.playSequence(sequence);
// act
btnBlue.trigger('click');
// assert
var actual = btnBlue.css("background-color");
var expected = tinycolor("blue").lighten(30).toRgbString();
expect(actual).toBe(expected);
});
it('when sequence stops board should be enabled', function() {
// arrange
Simon.playSequence(sequence);
jasmine.clock().tick(1000);
// act
btnBlue.trigger('click');
// assert
var actual = btnBlue.css("background-color");
var expected = tinycolor("blue").toRgbString();
expect(actual).toBe(expected);
});
});