Protractor - ngFor loop

Question

I'm using latest Angular and latest Protractor version and I'm wondering how to work with ngFor loop in my tests.

In past in my AngularJS app it was simple. I just used something like by.repeater and magic was done behind.

However now in Angular 4 APP I'm not that lucky. Based on this ticket it is not supported yet. At another hand I saw a stackoverflow ticket when somone is already working with it.

Anyway my HTML is:

<div *ngFor="let org of userOrgList; count as count">
   <button class="btn btn-default btn-lg col-xs-12" type="submit"  (click)="selectOrg(org.id)">{{org.name}}</button>
</div>

And my test looks like:

var organizations = element.all(by.repeater('org of userOrgList'));

it('should have an org with specific name', function() {
    expect(organizations.get(0).getText()).toEqual('myOrgName');
});

And I get an error:

Failed: Index out of bound. Trying to access element at index: 0, but there are only 0 elements that match locator by.rep eater("let org of userOrgList; count as count")

My question is: How to work with ngFor inside my protractor test

Answer 1

Solution I found that works for me but still not as clean as it was with repeater

// HTML FILE: Added id to DIV 
<div *ngFor="let org of userOrgList; count as count" id="organizations">
    <button class="btn btn-default btn-lg col-xs-12" type="submit"  (click)="selectOrg(org.id)">{{org.name}}</button>
</div>

//TEST FILE:
var organizations = element.all(by.id('organizations')).all(by.css('button'));
var firstOrg = organizations.get(0);
it('should have an org with specific name', function() {
    expect(firstOrg.getText()).toEqual('Name you expect');
});

With a standard table repeater it may looks like:

var data = element.all(by.css('table[name='' + TableName + '']')).all(by.css('tr td'));
expect(data.get(0).getText()).toEqual('0');