El componente es el menú desplegable https://github.com/valor-software/ngx-bootstrap .
en la plantilla tengo esto:
<span dropdown placement="bottom right"> <a id="droplist-label" href="javascript:void(0)" dropdownToggle> <span>{{conf.title}}</span> </a> <ul class="dropdown-menu pull-right" *dropdownMenu> <li *ngFor="let item of items"> <a class="dropdown-item" (click)="listClick(item.value)" href="javascript:void(0)">{{item.label}}</a> </li> </ul> </span>La ul no se agrega hasta que se hace clic en la etiqueta; por lo tanto, no puedo acceder a ella en la prueba.
Clic de llamada:
let droplist = fixture.debugElement.query(By.css('#droplist-label')).nativeElement; droplist.click(); No funciona. Si trato de buscar el dropdown-menu , está vacío:
it('should test if droplist has title', async(() => { fixture.detectChanges(); let droplist = fixture.debugElement.query(By.css('#droplist-label')).nativeElement; droplist.click(); fixture.whenStable().then(() => { let droplistOptions = fixture.debugElement.queryAll(By.css('.dropdown-item')); expect(droplistOptions.length).toBeGreaterThan(0); }); }));Parece que la directiva tiene un hostlistener para el evento de clic: ¿cómo puedo activarlo para que el ul esté disponible?
Finalmente resolví el mismo pb usando fakeAsync() :
it('should render submenus', fakeAsync(() => { fixture.detectChanges(); // update the view // trig submenus opening let toggleButtons = fixture.debugElement.nativeElement.querySelectorAll('[dropdownToggle]'); toggleButtons.forEach(b => b.click()); tick(); // wait for async tasks to end fixture.detectChanges(); // update the view // then count how many items you got for each submenus. let droplistOptions1= fixture.debugElement.nativeElement.querySelectorAll('#first-ul > li') let droplistOptions2= fixture.debugElement.nativeElement.querySelectorAll('#second-ul > li') let droplistOptions3= fixture.debugElement.nativeElement.querySelectorAll('#third-ul > li') expect(droplistOptions1.length).toEqual(3); expect(droplistOptions2.length).toEqual(5); expect(droplistOptions3.length).toEqual(2); })); Pero estoy seguro de que es posible hacerlo con async() : supongo que solo te perdiste un fixture.detectChanges() al comienzo del fixture.whenStable().then(...) en tu intento inicial.
Además, recuerde importar BsDropdownModule a su banco de pruebas:
import { BsDropdownModule} from 'ngx-bootstrap/dropdown'; ... TestBed.configureTestingModule({ imports: [ BsDropdownModule.forRoot(), ], ... });Esta es la solución que se me ocurrió para el problema anterior: usar niños para introducir los elementos.
it('should test if droplist has listed correct values', async(() => { comp.isOpen = true; fixture.detectChanges(); fixture.whenStable().then(() => { let droplist = fixture.debugElement.query(By.css('.dropdown-menu')); fixture.detectChanges(); expect(droplist.children.length).toBeGreaterThan(0); let i = 0; for(let item of droplist.children) { let anchorElement = item.children[0].nativeElement; expect(anchorElement.innerText).toBe(droplistItems[i].label); expect(anchorElement.getAttribute('data-value')).toBe(droplistItems[i].value); i++; } }); }));