How can one use touch events?

Get help with testing, discuss unit testing strategies etc.


User avatar
klodoma
Posts: 58
Joined: Thu Oct 01, 2015 11:55 am

How can one use touch events?

Post by klodoma »

Hi,

I am trying to get longpress and swipe working but without success.
https://bryntum.com/docs/siesta/#!/api/Siesta.Test.UserAgent.Touch

Is there an example somewhere how to make this work?

I am working with and ExtJs App.

I've tried both the projects but still the same:

Code: Select all

var project = new Siesta.Project.Browser.ExtJS();
//var project = new Siesta.Project.Browser.SenchaTouch();
Any ideas?

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: How can one use touch events?

Post by nickolay »

Hi,

What is your Ext version? How exactly you use the "longpress"?
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
klodoma
Posts: 58
Joined: Thu Oct 01, 2015 11:55 am

Re: How can one use touch events?

Post by klodoma »

I've created a demo use-case here. It seems to me that none of the touch events are working, tap, longpress ... do I need to configure it somehow?

https://gist.github.com/klodoma/500b3aa7f544f0fd0adba64af8867ac7

Ext 6.7 modern is used

User avatar
klodoma
Posts: 58
Joined: Thu Oct 01, 2015 11:55 am

Re: How can one use touch events?

Post by klodoma »

If I increase the time-out and I simulate the actions with the mouse then the test passes.

Code: Select all

    t.chain({
        waitForEvent: [view, 'childtap'],
        trigger: { click: '.x-listitem:contains(Item 2)' }
    },{
        waitForEvent: [view, 'childdoubletap'],
        trigger: { doubleClick: '.x-listitem:contains(Item 2)' }
    },{
        waitForEvent: [view, 'childdoubletap'],
        trigger: { doubleTap: '.x-listitem:contains(Item 2)' },
        timeout: 100000
    },{
        waitForEvent: [view, 'childlongpress'],
        trigger: { longPress: '.x-listitem:contains(Item 2)' },
        timeout: 100000
    });

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: How can one use touch events?

Post by nickolay »

Thanks for the report, I'll check tomorrow, probably something has changed in recent Ext version regarding touch events conversion.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: How can one use touch events?

Post by nickolay »

Try adding `t.simulator.forceTouchEvents = false` at the top of the test file? Its hard to say why currently, but this flag is enabled for Chrome only and it forces Siesta to use the real "touch" events, which are actually superseded by the "pointer" events. Perhaps that was a specific requirement for some of the older Ext versions.

The code below works for me (need to add a pause between the double tap and longress, otherwise longpress is not recognized).

Code: Select all

StartTest(function (t) {

    t.simulator.forceTouchEvents = false

    t.it('Move mouse to select field', function (t) {
        if (!Ext.Viewport) Ext.viewport.Viewport.setup()

        let view = Ext.create({
            xtype : 'list',
            itemTpl : '{title}',
            plugins : [{
                type : 'pullrefresh',
                mergeData : false
            }, {
                type : 'listpaging',
                autoPaging : true
            }, {
                type : 'listswiper',
                defaults : {
                    ui : 'action'
                },

                left : [{
                    iconCls : 'x-fa fa-phone',
                    text : 'Call',
                    commit : 'onCall'
                }],

                right : [{
                    iconCls : 'x-fa fa-envelope',
                    ui : 'alt confirm',
                    text : 'Message',
                    commit : 'onMessage'
                }, {
                    iconCls : 'x-fa fa-gear',
                    text : 'Gear',
                    commit : 'onGear'
                }]
            }],
            data : [
                {title : 'Item 1'},
                {title : 'Item 2'},
                {title : 'Item 3'},
                {title : 'Item 4'}
            ]
        });

        Ext.Viewport.add(view);
        t.pass('View could be rendered');

        t.chain({
            waitForEvent : [view, 'childtap'],
            trigger : {tap : '.x-listitem:contains(Item 2)'}
        }, {
            waitForEvent : [view, 'childdoubletap'],
            trigger : {doubleClick : '.x-listitem:contains(Item 2)'}
        }, {
            waitForEvent : [view, 'childdoubletap'],
            trigger : {doubleTap : '.x-listitem:contains(Item 2)'}
            // ,
            // timeout: 1000
        },
            { waitFor : 300 },
        {
            waitForEvent : [view, 'childlongpress'],
            trigger : {longPress : '.x-listitem:contains(Item 2)'}
            // ,
            // timeout: 1000
        });
    });
})
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
Enzoo
Posts: 6
Joined: Wed Sep 18, 2019 8:23 am

Re: How can one use touch events?

Post by Enzoo »

Hi, I am using var harness = new Siesta.Harness.Browser.SenchaTouch();

i am not able to do tap events since upgrading to to latest siesta from 4.2.1

i am doing something like:

Code: Select all

t.chain(
{
	action: 'tap',
	target: component
});
it fails in siesta-no-ext-all.js
on line 36841: deferer : this.test.originalSetTimeout,
this.test does not exist there is a this.browser.test or a this.bowser.test
can you please fix this thanks.

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: How can one use touch events?

Post by nickolay »

Hi

Our tests for sencha touch are green, can you provide more information how to reproduce this issue?

Also, do you test Sencha Touch application or just needs touch events? The latter are now simulated in regular "Browser" project by default (so called "pointer events")
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
Enzoo
Posts: 6
Joined: Wed Sep 18, 2019 8:23 am

Re: How can one use touch events?

Post by Enzoo »

We are testing a sencha touch application, to reproduce run the tap event on a sencha touch button using the pageUrl option in chrome browser v77.

User avatar
klodoma
Posts: 58
Joined: Thu Oct 01, 2015 11:55 am

Re: How can one use touch events?

Post by klodoma »

nickolay wrote:
Tue Sep 10, 2019 2:09 pm
Try adding `t.simulator.forceTouchEvents = false` at the top of the test file?
I'm replying late. Yes, this seems to solve the problem at least for the provided example.
I'll try to add it to the other cases and I'll provide feedback.

Post Reply