Resolviendo el reto

Clase 11 de 23 • Curso de Angular: Unit Testing para Componentes

Erik Leonardo Medina Arias

student•

Mi 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]);
  });

Adrian Silva

student•

Excelente, ya me preguntaba como podría utilizar lo que se obtiene del queryAll como un Array 👌👍

Reinaldo Mendoza

student•

Que bueno que se muestran esos errores, ese es el dia a dia del desarrollo

Jorge Luis Silva Medina

student•

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

Miguel Angel Coy Triana

student•

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]);
    });

Gerardo Pérez Pérez

student•

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