Estoy usando la última versión de Angular y Protractor y me pregunto cómo trabajar con ngFor loop en mis pruebas.
En el pasado, en mi aplicación AngularJS, era simple. Simplemente usé algo como by.repeater y la magia se hizo detrás.
Sin embargo, ahora en la aplicación Angular 4 no tengo tanta suerte. Basado en este ticket , aún no es compatible. Por otro lado, vi un ticket de stackoverflow cuando alguien ya está trabajando con él.
De todos modos mi HTML es:
<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>Y mi prueba se parece a:
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'); });Y me sale un error:
Error: Índice fuera de límite. Intentando acceder al elemento en el índice: 0, pero solo hay 0 elementos que coinciden con el localizador by.rep eater ("let org of userOrgList; count as count")
Mi pregunta es: ¿Cómo trabajar con ngFor dentro de mi prueba de transportador?
Encontré una solución que funciona para mí, pero aún no es tan limpia como lo era con el repetidor
// 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'); });Con un repetidor de mesa estándar puede parecer:
var data = element.all(by.css('table[name='' + TableName + '']')).all(by.css('tr td')); expect(data.get(0).getText()).toEqual('0');