Protractor - Returning pending promise when functioned out

Question

I am trying to create a function that will comb through an array of elements and return the first instance of one that meets the criteria.

This is what I have inside my test that does work :

element.all(by.css('_cssSelector_')).filter(function(elms, index) {
        return elms.getAttribute('height').then(function(height) {
            return parseInt(height) > 0;
        });
    }).then(function(validElms) {
         browser.actions().mouseMove(validElms[0]).perform();
    }

...but if I function this out, it does NOT work :

getValidElm = function() {
    var validElm = element.all(by.css('_cssSelector_')).filter(function (elms, index) {
        return elms.getAttribute('height').then(function (height) {
            return parseInt(height) > 0;
        });
    }).then(function (validElms) {
        return validElms[0];
        });

    return validElm;
}

If I then run:

var validElmFromPage = getValidElm();
console.log(validElmFromPage);

I get: Promise::2046 {[[PromiseStatus]]: "pending"}

Which points to an issue of something inside the function not resolving before the var outside the function is being used. After reading (extensively) through posts here, and even this wonderful blog post ( http://spin.atomicobject.com/2014/12/17/asynchronous-testing-protractor-angular/ ), I still can't figure out what the deal is. I know it's something simple, most likely controlFlow related?

Thanks for your help.

Answer 1

Let the function return a promise. Since filter() returns an ElementArrayFinder , you should be able to use first() :

getValidElm = function() {
    return element.all(by.css('_cssSelector_')).filter(function (elms, index) {
        return elms.getAttribute('height').then(function (height) {
            return parseInt(height) > 0;
        });
    }).first();
}

first() would return an ElementFinder which you can pass to mouseMove() :

var elm = getValidElm();
browser.actions().mouseMove(elm).perform();