Pruebas con componente padre
Contenido del curso
Componentes
Componentes con dependencias
Directivas
Pipes
Próximos pasos
Pruebas con componente padre
Contenido del curso
Pruebas con componente padre
Armando Rivera
Estudiante
David Alexander Castiblanco Flórez
Estudiante
Jorge Luis Silva Medina
Estudiante
Jessica Silvia Payano Castro
Estudiante
Ana Velez Ossa
Estudiante
Carlos Alejandro Hernández Mejía
EstudianteJorge Luis Silva Medina
Estudiante
Brayam Esteban Quiñones Sanchez
EstudianteComparto mi solución del reto
it('should show a selected person', () => { // Arrange const personList = [ new Person('Peter', 'Parker', 24, 70, 1.7), new Person('Armando', 'Rivera', 24, 80, 1.8), new Person('Bruce', 'Wayne', 24, 80, 1.8), ]; component.personList = personList; // Act fixture.detectChanges(); const debugButtonList = fixture.debugElement.queryAll( By.css('app-person .btn-choose') ); debugButtonList[0].triggerEventHandler('click', null); fixture.detectChanges(); const debugPersonSelectedInfo = fixture.debugElement.queryAll( By.css('.selectedPerson ul li') ); // Assert expect(debugPersonSelectedInfo[0].nativeElement.textContent).toContain( personList[0].name ); expect(debugPersonSelectedInfo[1].nativeElement.textContent).toContain( personList[0].age ); });
Si estás haciendo testing sobre una version de Angular >17, hay que adicionarle un override, para que la función de detección de cambios tome efecto:beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ PeopleComponent ] }) .overrideComponent(PeopleComponent, { set: { changeDetection: ChangeDetectionStrategy.Default } }) .compileComponents(); });
beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ PeopleComponent ] }) .overrideComponent(PeopleComponent, { set: { changeDetection: ChangeDetectionStrategy.Default } }) .compileComponents(); });
Mejorandolo un poco para que sea el nombre dinámico
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;
const expectMsg = Name: ${personName};
// 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).toEqual(expectMsg);
});
Este es mi desarrollo:
it('should render the person with click and show selected person', ()=>{ // Arrange const buttonDebug = fixture.debugElement.queryAll(By.css('app-person .button-choose')); // Act buttonDebug.forEach((btn, index) => { btn.triggerEventHandler('click', null); fixture.detectChanges(); const selectedPerson = component.selectedPerson; const nameDebug = fixture.debugElement.query(By.css('.name')); const nameElement = nameDebug.nativeElement; const ageDebug = fixture.debugElement.query(By.css('.age')); const ageElement = ageDebug.nativeElement; // Assert expect(nameElement.textContent).toContain(selectedPerson?.name) expect(ageElement.textContent).toContain(selectedPerson?.age) expect(selectedPerson).toEqual(component.people[index]); }) })
Este fue mi resultado:
it('should render selected person after choosing person', () => { // Configuración del componente con una lista de personas component.people = [ new Person('Ana', 'Velez', 29, 58, 1.68), new Person('Marisol', 'Nieto', 29, 60, 1.72), new Person('Santiago', 'Ossa', 25, 90, 1.62), new Person('Eladio', 'Velez', 25, 90, 1.62) ]; // Texto esperado después de seleccionar una persona const expectedContent = 'Name: Ana'; // Detectar cambios en el componente fixture.detectChanges(); // Encontrar el botón de elección para la primera persona (Ana) const chooseButton = fixture.debugElement.query(By.css('app-person .btn-choose')); // Simular el evento de clic en el botón chooseButton.triggerEventHandler('click', null); // Detectar cambios en el componente después del clic fixture.detectChanges(); // Encontrar el elemento que muestra la persona seleccionada const selectedPersonElement: HTMLElement = fixture.debugElement.query(By.css('li')).nativeElement; // Verificar que la persona seleccionada es la primera persona (Ana) expect(component.selectedPerson).toEqual(component.people[0]); // Verificar que el contenido del elemento seleccionado contiene el nombre esperado expect(selectedPersonElement.textContent).toContain(expectedContent); });
Mi solución usando faker.js para generar a las personas:
it('should change the selected person when a person is selected', () => { // Arrange component.people = generateManyPeople(3); fixture.detectChanges(); const personDebugElements = fixture.debugElement.queryAll(By.directive(PersonComponent)); const firstPerson = personDebugElements[0]; const personComponent = firstPerson.componentInstance as PersonComponent; const firstButtonDebugElement = firstPerson.query(By.css('button[name="selectPerson"]')); // Act firstButtonDebugElement.triggerEventHandler('click', null); fixture.detectChanges(); // Assert expect(component.selectedPerson).toBe(personComponent.person); });
Comparto mi monstrito
it('sould render selected person after choose person', () => { // Arrange const expectMsg = 'Name: Jorge'; 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), ]; // 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).toEqual(expectMsg); });
Mi solucon usando un spy para verificar que se llem el metodo de asignacion de person
it('should render a person selected from app-person', () => { //Arrange component.people = [ new Person('Esteban', 'Qs', 27, 89, 1.77), new Person('Valentin', 'Feregrino', 12, 2, 3), new Person('Antoio', 'Feregrino', 12, 2, 3), ]; const spy = spyOn(component, 'choose').and.callThrough(); //Act fixture.detectChanges(); const peopleDebug = fixture.debugElement.queryAll(By.css('app-person')); peopleDebug[1].query(By.css('button.btn-choose')).triggerEventHandler('click', null); fixture.detectChanges(); const renderPersonList = fixture.debugElement.queryAll(By.css('li')); //Assert expect(spy).toHaveBeenCalled(); expect(renderPersonList[0].nativeElement.textContent).toContain(component.people[1].name); expect(renderPersonList[1].nativeElement.textContent).toContain(component.people[1].age); });