Protractor map function returning undefined

Question

Given an app with multiple widgets on it, each with their own title and whatnot, I would like to map each widget's elements, to make them easy to handle in tests.

For example, a page:

this.widgets = element.all(by.css('ul.widget-grid')).map(function(widget, index) {
    return {
        index: index,
        title: widget.element(by.css('div.title')).getText()
    };
});

And then in my spec:

expect(page.widgets[0].index).toBe(0);
expect(page.widgets[0].title).toBe('The Title');

Unfortunately, my expects are returning undefined.

What am I doing wrong? I'm using Protractor 2.0.

Answer 1

Protractor's ElementArrayFinder.prototype.map gave me some hard time.
The solution that worked for me was a good old for loop:

 var myElements = element.all(by.css('ul li')) - 1;
 var n = myElements.length - 1;

 for (var i = 0; i < n; i++) {
     var elem = myElements.get(i);
     var open = elem.element(by.css('.some-class'));
     open.click();
     var childElem = filter.element(by.css('[some-attribute]'));
     expect(childElem.isPresent()).toBe(true);
 }

Answer 2

I ran into this problem, and none of these solved this for me. For anyone googling like I was here is the real answer:

element.all(by.css('ul.widget-grid')).map(function(widget, index) {
    return {
        index: index,
        title: widget.element(by.css('div.title')).getText()
    }
}).then(function(map){
      this.widgets = map;
   });

Answer 3

This confused me so I thought I'd add an answer to help others...

While I understood that map() returns a promise, because I was using it in an expect, I thought it would be resolved, and then should act like an array. Nope. It returns an object, that looks like an array, but is not an array.

Answer 4

map() returns a promise that would resolve into an array of objects.

I think you meant to check the first widget's index and title:

var widget = page.widgets[0];

expect(widget.index).toBe(0);
expect(widget.title).toBe('The Title');