siesta-lite/tests/recorder/012_wheel.t.js

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

describe('Wheel event recording', function (t) {
    t.it('should record deltaX, deltaY, deltaZ properties of wheel event', function (t) {
        document.body.innerHTML = '<div class="foo bar" style="background:#aaa;position:absolute;top:30px;left:30px;height:50px;width:50px"></div>';

        var rec = new Siesta.Recorder.Recorder({
            window                   : t.global,
            ignoreSynthetic          : false,
            recordOffsets            : false,
            recordMouseMoveOnIdle    : false,
            shouldIgnoreDomElementId : function (id, target) {
                return Boolean(id.match('^ext-'));
            }
        })

        rec.start();

        t.chain(
            { wheel : '.foo', options : { ctrlKey : true, deltaX : 10 } },
            {
                waitFor : function () {
                    return rec.getRecordedActions().length === 1;
                }
            },
            { wheel : '.foo', options : { ctrlKey : true, deltaY : 11 } },
            {
                waitFor : function () {
                    return rec.getRecordedActions().length === 2;
                }
            },
            { wheel : '.foo', options : { ctrlKey : true, deltaZ : 12 } },
            {
                waitFor : function () {
                    return rec.getRecordedActions().length === 3;
                }
            },

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

                t.is(actions.length, 3);
                t.is(actions[0].action, 'wheel');
                t.is(actions[1].action, 'wheel');
                t.is(actions[2].action, 'wheel');
                t.isDeeply(actions[0].options, { ctrlKey : true, deltaX : 10, deltaY : 0, deltaZ : 0, deltaMode : 0 });
                t.isDeeply(actions[1].options, { ctrlKey : true, deltaX : 0, deltaY : 11, deltaZ : 0, deltaMode : 0 });
                t.isDeeply(actions[2].options, { ctrlKey : true, deltaX : 0, deltaY : 0, deltaZ : 12, deltaMode : 0 });
                t.isDeeply(actions[0].getTarget(), { type : 'css', target : '.foo' });
                t.isDeeply(actions[1].getTarget(), { type : 'css', target : '.foo' });
                t.isDeeply(actions[2].getTarget(), { type : 'css', target : '.foo' });

                t.isDeeply(actions[0].asStep(), {
                    action  : 'wheel',
                    target  : '.foo',
                    options : { ctrlKey : true, deltaX : 10, deltaY : 0, deltaZ : 0, deltaMode : 0 }
                })

                rec.stop();
            }
        )
    });

    t.it('should record a new wheel action if direction changes', function (t) {

        document.body.innerHTML = '<div class="foo bar" style="background:#aaa;position:absolute;top:30px;left:30px;height:50px;width:50px"></div>';

        var rec = new Siesta.Recorder.Recorder({
            window                   : t.global,
            ignoreSynthetic          : false,
            recordOffsets            : false,
            shouldIgnoreDomElementId : function (id, target) {
                return Boolean(id.match('^ext-'));
            }
        })

        rec.start();

        t.chain(
            { wheel : '.foo', options : { ctrlKey : true, deltaX : 10 } },
            { wheel : '.foo', options : { ctrlKey : true, deltaX : 10 } },
            { wheel : '.foo', options : { ctrlKey : true, deltaX : -20 } },
            { wheel : '.foo', options : { ctrlKey : true, deltaX : -20 } },
            { wheel : '.foo', options : { ctrlKey : true, deltaX : -30 } },
            {
                waitFor : function () {
                    return rec.getRecordedActions().length === 2 && rec.getRecordedActions()[1].options.deltaX === -70;
                }
            },

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

                t.is(actions[0].action, 'wheel');
                t.isDeeply(actions[0].options, { ctrlKey : true, deltaX : 20, deltaY : 0, deltaZ : 0, deltaMode : 0 });
                t.isDeeply(actions[0].getTarget(), { type : 'css', target : '.foo' });

                t.is(actions[1].action, 'wheel');
                t.isDeeply(actions[1].options, { ctrlKey : true, deltaX : -70, deltaY : 0, deltaZ : 0, deltaMode : 0 });
                t.isDeeply(actions[1].getTarget(), { type : 'css', target : '.foo' });

                rec.stop();
            }
        )
    });

    t.it('should throttle wheel events as the are fired in large quantities', function (t) {

        document.body.innerHTML = '<div class="foo bar" style="background:#aaa;position:absolute;top:30px;left:30px;height:50px;width:50px"></div>';

        var rec = new Siesta.Recorder.Recorder({
            window                   : t.global,
            ignoreSynthetic          : false,
            recordOffsets            : false,
            shouldIgnoreDomElementId : function (id, target) {
                return Boolean(id.match('^ext-'));
            }
        })

        rec.start();

        t.chain(
            { wheel : '.foo', options : { ctrlKey : true, deltaX : 10 } },
            { wheel : '.foo', options : { ctrlKey : true, deltaX : 10 } },
            { wheel : '.foo', options : { ctrlKey : true, deltaX : 10 } },
            { wheel : '.foo', options : { ctrlKey : true, deltaX : 10 } },
            { wheel : '.foo', options : { ctrlKey : true, deltaX : 10 } },

            { waitFor : 500 },

            { wheel : '.foo', options : { ctrlKey : true, deltaY : -10 } },
            { wheel : '.foo', options : { ctrlKey : true, deltaY : -20 } },
            { wheel : '.foo', options : { ctrlKey : true, deltaY : -10 } },
            { wheel : '.foo', options : { ctrlKey : true, deltaY : -20 } },
            { wheel : '.foo', options : { ctrlKey : true, deltaY : -10 } },
            {
                waitFor : function () {
                    return rec.getRecordedActions().length === 2 && rec.getRecordedActions()[1].options.deltaY === -70;
                },
                desc : 'After 500ms pause a new action is recorded'
            },

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

                t.is(actions[0].action, 'wheel');
                t.isDeeply(actions[0].options, { ctrlKey : true, deltaX : 50, deltaY : 0, deltaZ : 0, deltaMode : 0 });
                t.isDeeply(actions[0].getTarget(), { type : 'css', target : '.foo' });

                t.is(actions[1].action, 'wheel');
                t.isDeeply(actions[1].options, { ctrlKey : true, deltaX : 0, deltaY : -70, deltaZ : 0, deltaMode : 0 });
                t.isDeeply(actions[1].getTarget(), { type : 'css', target : '.foo' });

                rec.stop();
            }
        )
    });


});