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