Protractor+AngularJS+Jasmine - test press and hold item

Question

Very new with AngularJS and Protractor, but I think I am going to the right direction so far.

My site has a list of items when you click and hold the item for X seconds, it opens a modal window.

How can I simulate that behavior in Protractor/Jasmine?

I know there is the "click()" event, but I want the "click and hold" event

I am sure there is someone that knows how to simulate that.

Big thanks in advance!

Answer 1

The idea is to use mouseDown() first:

/**
 * Presses a mouse button. The mouse button will not be released until
 * {@link #mouseUp} is called, regardless of whether that call is made in this
 * sequence or another. The behavior for out-of-order events (e.g. mouseDown,
 * click) is undefined.
 ...
 */

Then, call browser.sleep() for X seconds.

Then, call mouseUp() to release the mouse click:

/**
 * Releases a mouse button. Behavior is undefined for calling this function
 * without a previous call to {@link #mouseDown}.
 ...
 */

Code:

browser.actions().mouseDown(element).perform();
browser.sleep(5000);
browser.actions().mouseUp(element).perform();

where element is a target element for click-and-hold.

---

Working example (based on this jsfiddle):

require('jasmine-expect');

describe('Test Click And Hold', function () {
    beforeEach(function () {
        browser.ignoreSynchronization = true;
        browser.get('http://jsfiddle.net/LysCF/13/embedded/result/');
        browser.sleep(5000);
    });

    it('should show appropriate list elements after click and hold', function () {
        var frame = browser.findElement(by.xpath('//div[@id="result"]/iframe'));
        browser.switchTo().frame(frame);

        var element = browser.findElement(by.css('div.hold_trigger'));
        browser.actions().mouseDown(element).perform();
        browser.sleep(5000);
        browser.actions().mouseUp().perform();

        // check expectations
    });
});