Resolviendo el reto
Contenido del curso
Componentes
Componentes con dependencias
Directivas
Pipes
Próximos pasos
Resolviendo el reto
Contenido del curso
Resolviendo el reto
Erik Leonardo Medina Arias
Estudiante
Adrian Silva
Estudiante
Reinaldo Mendoza
Estudiante
Jorge Luis Silva Medina
Estudiante
Miguel Angel Coy Triana
Estudiante
Gerardo Pérez Pérez
EstudianteMi test, haciendo la llamada desde el debug element y comprobando el selectedPerson de acuerdo al índice seleccionado del array de people.
it('should raise selected event when clicked', () => { // Arrange component.people = [ new Person('Leonardo', 'Arias', 23, 1, 1), new Person('Valentina', 'Rodriguez', 12, 2, 3), new Person('Santiago', 'Dolores', 12, 2, 3), ]; const idx = 1; //Act fixture.detectChanges(); const debugElement = fixture.debugElement.queryAll(By.css('app-person')); const btnDe = debugElement[idx].query(By.css('.btn-choose')); btnDe.triggerEventHandler('click', null); fixture.detectChanges(); // expect(component.selectedPerson).toEqual(component.people[idx]); });
Excelente, ya me preguntaba como podría utilizar lo que se obtiene del queryAll como un Array 👌👍
Que bueno que se muestran esos errores, ese es el dia a dia del desarrollo
Yo realice un test probando validando los 2 casos en una
it('sould render selected person after choose person', () => { // Arrange component.people = [ new Person('Jorge', 'Medina', 25, 67.2, 1.81), new Person('Glenda', 'López', 24, 62, 1.75), new Person('Mariana', 'López', 5, 30, 1.4), ]; const personName = component.people[0].name; // Act fixture.detectChanges(); const personDebug = fixture.debugElement.query(By.css('app-person')); const btnDebug = personDebug.query(By.css('.btn-choose')); btnDebug.triggerEventHandler('click', null); fixture.detectChanges(); const liNameEl: HTMLElement = fixture.debugElement.query( By.css('div ul li') ).nativeElement; // Assert expect(component.selectedPerson).toEqual(component.people[0]); expect(liNameEl?.textContent).toContain(component.people[0].name); });
Yo hice el test de una manera diferente cuando es llamada la función choose y llena la variable selectedPerson.
it('Should fill selectedPerson when choose function has been called', () => { component.selectedPerson = new Person('', '', 0, 0, 0); component.people = [ new Person('Miguel', 'Coy', 30, 72, 1.76), new Person('Ernesto', 'Pérez', 30, 60, 1.8), ]; component.choose(component.people[0]); fixture.detectChanges(); expect(component.selectedPerson).toEqual(component.people[0]); component.choose(component.people[1]); fixture.detectChanges(); expect(component.selectedPerson).toEqual(component.people[1]); });
Recuerda lo que comentó Nicolas clases atras, lo mejor sería hacer las llamadas desde el debug element, de este modo estamos simulando un usuario interactuando con el componente