测试元素是否可点击

时间:2016-09-03 08:48:32

标签: javascript jasmine

在我的"西蒙说" 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);
        });

    });

0 个答案:

没有答案