siesta-lite/tests/recorder/006_click_target_change.t.js

Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers

describe('Target mutating during click event sequence', function (t) {

    t.it('If mousedown changes the target, the resulting "merged" click action should still target mousedown target', function (t) {

        document.body.innerHTML =
            '<div id="foo" style="width:100px;height:100px;position:absolute;top:0;left:0;background:#777">' +
                '<div id="bar" style="display:none;width:100px;height:100px;position:absolute;top:0;left:0;background: #F00;"></div>' +
            '</div>'

        var rec     = new Siesta.Recorder.ExtJS({
            window          : t.global,
            ignoreSynthetic : false
        })

        rec.start();

        $('#foo')[ 0 ].addEventListener('mousedown', function () {
            $('#bar')[ 0 ].style.display = 'block';
        })

        t.chain(
            { click : '#foo' },

            function () {
                var actions = rec.getRecordedActions();

                // FF 57 does not fire `click`
                if (bowser.gecko && t.simulator.type == 'native') {
                    t.is(actions.length, 2);

                    t.is(actions[ 0 ].action, 'mousedown');
                    t.isDeeply(actions[ 0 ].getTarget(), { type : 'css', target : '#foo', offset : t.any() });

                    t.is(actions[ 1 ].action, 'mouseup');
                    t.isDeeply(actions[ 1 ].getTarget(), { type : 'css', target : '#bar', offset : t.any() });
                } else {
                    t.is(actions.length, 1);

                    t.is(actions[0].action, 'click');
                    // should add an offset because click target has changed during the click
                    t.isDeeply(actions[0].getTarget(), { type : 'css', target : '#foo', offset : t.any() });
                }

                rec.stop();
            }
        )
    })

    t.it('Recorded contextmenu action should use classes/attributes from pointerdown event (in case pointerdown changes the CSS classes)', function (t) {
        document.body.innerHTML =
            '<div class="foo" style="width:100px;height:100px;position:absolute;top:0;left:0;background:#777">' +
            '</div>'

        var rec     = new Siesta.Recorder.ExtJS({
            window          : t.global,
            ignoreSynthetic : false
        })

        rec.start();

        t.query('.foo')[0].addEventListener('mousedown', function (e) {
            e.target.classList.remove('foo');
            e.target.classList.add('added');
        })

        t.chain(
            { contextmenu : '.foo' },

            function () {
                var actions = rec.getRecordedActions();

                // FF 57 does not fire `click`
                if (bowser.gecko && t.simulator.type === 'native') {
                    t.is(actions.length, 2);

                    t.is(actions[ 0 ].action, 'mousedown');
                    t.isDeeply(actions[ 0 ].getTarget(), { type : 'css', target : '.foo', offset : t.any() });
                } else {
                    t.is(actions.length, 1);

                    t.is(actions[0].action, 'contextmenu');
                    t.isDeeply(actions[0].getTarget(), { type : 'css', target : '.foo', offset : t.any() });
                }

                rec.stop();
            }
        )
    })

})