siesta-lite/tests/050_pointer_events.t.js

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

StartTest({
    alsoPreload : [ '050_mouse_click2.t.css' ]
}, function(t) {

    if (!window.PointerEvent && !window.MSPointerEvent) return

    var syntheticSimulator      = new Siesta.Test.Simulator()

    // need to use own subscribe function, can't use Ext because of bug
    // can't use jquery because it uses different subscription method (see "simulateEventsWith")
    var subscribeToEvent = function (el, event, handler) {
        event   = syntheticSimulator.normalizeEventName(event)

        if (Ext.isIE9 || Ext.getVersion('extjs').isLessThan('4.2.2.1144')) {
            if (el.attachEvent)
                el.attachEvent('on' + event, handler)
            else
                el.addEventListener(event, handler, false)
        } else
            el.addEventListener(event, handler, false)
    }

    var normalizeLogEnrt

    var logHandler  = function (e) {
        var id          = e.target.id
        var type        = e.type

        if (window.MSPointerEvent && !window.PointerEvent) {
            type        = type.replace(/^MS/, '').toLowerCase()
        }

        log.push(type + "/" + id)
    }

    var countHandler    = function (e) {
        var id          = e.target.id
        var type        = e.type

        if (window.MSPointerEvent && !window.PointerEvent) {
            type        = type.replace(/^MS/, '').toLowerCase()
        }

        var perElCounts = counter[ id ] = counter[ id ] || {}

        perElCounts[ type ]   = perElCounts[ type ] || 0
        perElCounts[ type ]++
    }


    var setupBox = function (id) {
        var el              = document.getElementById(id)

        subscribeToEvent(el, 'pointerdown', logHandler)
        subscribeToEvent(el, 'mousedown', logHandler)

        subscribeToEvent(el, 'pointerup', logHandler)
        subscribeToEvent(el, 'mouseup', logHandler)

        subscribeToEvent(el, 'click', logHandler)
        subscribeToEvent(el, 'contextmenu', logHandler)
        subscribeToEvent(el, 'dblclick', logHandler)
        subscribeToEvent(el, 'blur', logHandler)
        subscribeToEvent(el, 'focus', logHandler)

        return el
    }

    var setupBoxForPointerMove = function (id, withMoveCounting) {
        var el              = document.getElementById(id)

        subscribeToEvent(el, 'pointerover', logHandler)
        subscribeToEvent(el, 'mouseover', logHandler)

        subscribeToEvent(el, 'pointerenter', logHandler)
        subscribeToEvent(el, 'mouseenter', logHandler)

        subscribeToEvent(el, 'pointerout', logHandler)
        subscribeToEvent(el, 'mouseout', logHandler)

        subscribeToEvent(el, 'pointerleave', logHandler)
        subscribeToEvent(el, 'mouseleave', logHandler)

        if (withMoveCounting) {
            subscribeToEvent(el, 'pointermove', countHandler)
            subscribeToEvent(el, 'mousemove', countHandler)
        }

        return el
    }

    var log, box1, box2, box3, counter

    var doSetup     = function () {
        document.body.innerHTML =
            '<div class="box" id="box1" style="left: 0px;top:0px"></div>' +
            '<div class="box" id="box2" style="border-color:blue; left: 300px;top:0px"></div>' +
            '<div class="box" id="box3" style="border-color:red; left: 600px;top:0px"></div>'

        box1    = setupBox('box1')
        box2    = setupBox('box2')
        box3    = setupBox('box3')

        log     = []
        counter = {}
    }


    t.testBrowser(function (t) {

        t.it('Should fire pointer events for click', function (t) {
            doSetup()

            t.chain(
                { click : '#box1' },
                function (next) {
                    t.isDeeply(log, [
                        'pointerdown/box1',
                        'mousedown/box1',
                        'pointerup/box1',
                        'mouseup/box1',
                        'click/box1'
                    ])

                    next()
                }
            )
        })

        t.it('Preventing the `pointerdown` should skip `mouse` events from firing', function (t) {
            doSetup()

            subscribeToEvent(box1, 'pointerdown', function (e) {
                e.preventDefault()
            })

            t.chain(
                { click : '#box1' },
                function (next) {
                    t.isDeeply(log, [
                        'pointerdown/box1',
                        'pointerup/box1',
                        'click/box1'
                    ])

                    next()
                }
            )
        })

        t.it('Preventing the `pointerdown` should skip `mouse` events from firing when dragging', function (t) {
            doSetup()

            subscribeToEvent(box1, 'pointerdown', function (e) {
                e.preventDefault()
            })

            t.chain(
                { drag : '#box1', by : [10, 10] },

                function (next) {
                    t.isDeeply(log, [
                        'pointerdown/box1',
                        'pointerup/box1',
                        'click/box1'
                    ])

                    next()
                }
            )
        })

        t.it('Should fire pointer events for mouse movements', function (t) {
            doSetup()

            t.chain(
                { moveCursorTo : '#box1', offset : [ '100%+10', '50%' ] },
                function (next) {
                    setupBoxForPointerMove('box1', true)
                    next()
                },
                // { waitFor : 5000 },
                { moveCursorBy : [ -20, 0 ] },
                { moveCursorBy : [ 20, 0 ] },
                function (next) {

                    if (t.simulator.type == 'synthetic' || t.browser.msie || t.browser.edge)
                        t.isDeeply(log, [
                            "pointerover/box1", "mouseover/box1", "pointerenter/box1", "mouseenter/box1",
                            "pointerout/box1", "mouseout/box1", "pointerleave/box1", "mouseleave/box1"
                        ])
                    else
                        // natively, Chrome simulates first pointer events, then mouse events, grouped,
                        // synthetic and MS groups by event type - pointer over + mouse over, etc
                        t.isDeeply(log, [
                            "pointerover/box1", "pointerenter/box1", "mouseover/box1", "mouseenter/box1",
                            "pointerout/box1", "pointerleave/box1", "mouseout/box1", "mouseleave/box1"
                        ])

                    t.isGreater(counter.box1.pointermove, 0)

                    next()
                }
            )
        })
    });
});