0

In my "Simon Says" app 4 divs is shown. When you start the game a color sequence is playing, lighting up each color in the sequence. When the sequence is finished you can click on the divs to "recreate" the sequence.

While the sequence is playing the divs should not be clickable. How do I test this?

The first test (if disabled while sequence is playing) passed but the second (if enabled after sequence play) fails. The sequence takes 600 ms to finish (1 color) so 1000 ms (clock ticks) should be sufficient.

simon.js (excerpt)

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 (excerpt)

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

    });
olefrank
  • 6,452
  • 14
  • 65
  • 90
  • 1
    Hmmmm, clickable means its onClick property has assigned callback function, so maybe checking if this property is null will be the answer. BONUS : http://stackoverflow.com/questions/28056716/check-if-an-element-has-event-listener-on-it-no-jquery – Take_Care_ Sep 03 '16 at 08:54
  • No cause onclick is not the way I listen for clicks. I attach an eventlistener on 'click'. That's 2 different things as I understand. So the 'onclick' property always seems to be null... – olefrank Sep 03 '16 at 09:10
  • You're right! It seems to be not possible to test if event listener was added unless assigned to 'onclick'. So instead I create a variable 'enabled' and check its value before/after enabling click event. – olefrank Sep 03 '16 at 09:23

0 Answers0