Protractor - ngFor loop

Question

I am using the latest version of Angular and the latest version of Protractor, and I am wondering how to work with the ngFor loop in my tests.

In the past, it was easy in my AngularJS application. I just used something like by.repeater, and the magic was done behind.

However, now in Angular 4 APP I was out of luck. Based on this ticket , it is not yet supported. On the other hand, I saw a ticket overflow https://stackoverflow.com/a/1675023/ ... when someone is already working with him.

Anyway, my HTML:

<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 this:

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 the error message:

: . : 0, 0 , by.rep eater ( "let org of userOrgList; " )

: ngFor

Answer 1

, , , ,

// 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');
});

:

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