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

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

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

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

Resolviendo el reto

Introducción

Unit Testing en Angular para Componentes

Creando el proyecto

Primera prueba

Componentes

Creando un componente & nativeElement

DebugElement & ByCss

Componentes con Inputs

Simulando el clic

Componentes con Outputs

Pruebas aisladas al componente

Pruebas con componente padre

Resolviendo el reto

Componentes con dependencias

Proyecto: creando product component

Componentes con dependencias

Pruebas a getAllProducts

FakeAsync and tick

Pruebas a promesas

Promesas simulando click

Directivas

Creando la Directiva

Pruebas a Directiva

Directiva con ngModel

Pipes

Creando pipe

Testing pipes

Próximos pasos

Continúa con el Curso de Testing en Formularios y Routing