Componentes con Outputs

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

Clase anteriorSiguiente clase

Carlos Alejandro Hernández Mejía

student•

Outputs

Para testear atributos con el decorador @Output en Angular, puedes seguir estos pasos:

Configura el componente que emite el @Output para que ejecute una acción cuando cambie el valor del @Output.
```
onEvent(): void {
    this.myOutput.emit('some value');
}
```

Utiliza DebugElement para simular un evento en el elemento del DOM que cambia el valor del @Output:

const debugElement: DebugElement = fixture.debugElement.query(By.css('button[name="my-button"]'));

Verifica si la acción se ha ejecutado correctamente cuando ha cambiado el valor del @Output. Esto puede hacerse utilizando cualquiera de estas opciones:

Utilizar una variable que se cambie cuando se ejecuta la acción y verificar su estado con "expect":

// Arrange
let flag = false;

// Act
fixture.componentInstance.myOutput.subscribe((value) => {
  flag = true;
});
debugElement.triggerEventHandler('click', null});

// Assert
expect(flag).toBeTruthy();

Utilizar una función espía de Jasmine para verificar si se ha llamado a la función cuando ha cambiado el valor del @Output:

// Arrange
const spy = spyOn(fixture.componentInstance, 'onEvent').and.callThrough();
const spyEmit = spyOn(fixture.componentInstance.myOutput, 'emit').and.callThrough();
// Act
debugElement.triggerEventHandler('click', null});
// Assert
expect(spy).toHaveBeenCalled();
expect(spyEmit).toHaveBeenCalled();

Cesar Elías Armendariz Ruano

student•

Se puede realizar las pruebas sobre parámetros de salida como los outputs, de la siguiente manera

primero creamos el output de salida y el evento que lo dispara

person.component.ts

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { Person } from 'src/app/models/person.model';


export class PersonComponent implements OnInit {

  @Input() person!: Person;
  @Output() onSelected = new EventEmitter<Person>();
  imc = '';

  onClick() {
    this.onSelected.emit(this.person);
  }
}

luego creamos el botón que dispara el evento

person.component.html

<button class="btn-choose" (click)="onClick()">Choose</button>

creamos la prueba

person.component.spec.ts

 it('should raise selected event when do click', () => {
    // Arrange
    const expectedPerson = new Person('Juan', 'Perez', 30, 120, 1.65);
    component.person = expectedPerson;
    const buttonDe = fixture.debugElement.query(By.css('button.btn-choose'));
    let selectedPerson: Person | undefined;
    component.onSelected
    .subscribe(person => selectedPerson = person);
    // Act
    buttonDe.triggerEventHandler('click', null);
    fixture.detectChanges();
    // Assert
    expect(selectedPerson).toEqual(expectedPerson);
  })

David Adriazola Muriel

student•

Cuando nos subscribimos al evento "onSelected" no es necesario usar el callback "doneFn"?? por que en otras pruebas que utilizan el subscribe se las usa ?? y en esta prueba no es necesaria??

Germán Arevalo Jerez

student•

buena pregunta🤔

Jorge Luis Silva Medina

student•

Es correcto de preferencia al manejar los subscribe es recomendable manejar en doneFn yo asi lo escribi y me funciono correctamente

  it('should raise selected event when click', (doneFn) => {
    // Arrange
    const expectPerson = new Person('Jorge', 'Medina', 25, 67.2, 1.81);
    component.person = expectPerson;
    const buttonDebug: DebugElement = fixture.debugElement.query(
      By.css('button.btn-choose')
    );
    let selectedPerson: Person | undefined;
    component.onSelected.subscribe((person) => {
      selectedPerson = person;
      expect(selectedPerson).toEqual(expectPerson);
      doneFn();
    });
    // Act
    buttonDebug.triggerEventHandler('click', null);
    fixture.detectChanges();
    // Assert
  });

Juan Luna

student•

Una observación, no sé qué pensaréis. Yo en mis desarrollos suelo usar clases de css para los tests, con unos prefijos específicos, sean unitarios o e2e con cypress, ...

\<button class="ng-testing-id-imc" (click)="calcIMC()">IMC: {{ imc }}\</button>
\<button class="ng-testing-id-choose" (click)="onSelect()">

Estos prefijos ayudan a distinguir claramente qué elementos están destinados específicamente para pruebas y no para estilos de diseño.

Al emplear este enfoque, los desarrolladores y los equipos de prueba pueden identificar fácilmente los elementos que necesitan para escribir pruebas de integración o pruebas end-to-end. Además, al utilizar prefijos descriptivos como ng-testing-id- o cy-e2e-testing-id-, se facilita la comprensión del propósito de estas clases y se reduce la posibilidad de conflictos con clases de estilo utilizadas en la aplicación.

Daniel Córdova

student•

Como podriamos emular event.preventDefault() desde el archivo de pruebas con el triggerEventHandler en vez de pasar un null como segundo parametro?

Tengo el siguente funcion cuando hago click en un button:

onSaveForm(event: Event) {
    event.preventDefault();
    /// resto de la funcion
  }

Brayam Esteban Quiñones Sanchez

student•

Hola Daniel, lo que podrias hacer es crear un objeto que tenga esta funcion, asi podrias simular este comportamiento.

    const Event = {
      preventDefault: () => {}
    }

Incluso podiras hacer un spy y ver si realmente se esta llamando, en este ejemplo que te comporto, lo ejecuto dos veces para demostrarlo.

  it('should raise select event when do click', () => {
    //Arrange
    const expectPerson = new Person('Esteban', 'Qs', 27, 120, 1.65);
    const Event = {
      preventDefault: () => {}
    }
    component.person = expectPerson;
    const buttonDebug = fixture.debugElement.query(By.css('button.btn-choose'));
    const spyEvent = spyOn(Event, 'preventDefault');
    let selectedPerson: Person | undefined;
    component.onSelected. subscribe((person) => {
      selectedPerson = person;
    });
    //Act
    buttonDebug.triggerEventHandler('click', Event);
    fixture.detectChanges();
    //Assert
    expect(spyEvent).toHaveBeenCalledTimes(2);
    expect(selectedPerson).toEqual(expectPerson);
  });

person.component.ts

  onClick(event: Event): void {
    event.preventDefault();
    event.preventDefault();
    this.onSelected.emit(this.person);
  }

person.component.html

<button class="btn-choose" (click)="onClick($event)">Chooser</button>

Jose Nuñez

student•

Es interesante lo de los @Output(), a mi me sale este warning al intentar nombrarlos como 'onSelected'.

Output bindings, including aliases, should not be named "on", nor prefixed with it (https://angular.io/guide/styleguide#style-05-16)eslint@angular-eslint/no-output-on-prefix

Jorge Luis Silva Medina

student•

Genera una función en person.model.ts

  calcBirthYear(): number {
    if (this.age < 0) {
      return 0;
    }
    const date = new Date();
    const currentYear = date.getFullYear();
    const birthYear = currentYear - this.age;
    return birthYear;
  }

donde genere su set de pruebas correspondiente


  describe('test for calcBirthYear', () => {
    it('should return year of birth', () => {
      // Arrange
      // Act
      const rta = person.calcBirthYear();
      // Assert
      expect(rta).toEqual(1998);
    });

    it('should return 0', () => {
      // Arrange
      person.age = -10;
      // Act
      const rta = person.calcBirthYear();
      // Assert
      expect(rta).toEqual(0);
    });
  });

Agregandolo como un EventEmmiter


  it('should raise calcBirthYear event when click', (doneFn) => {
    // Arrange
    component.person = new Person('Jorge', 'Medina', 25, 67.2, 1.81);
    const expectBirthYear = 1998;
    const buttonDebug: DebugElement = fixture.debugElement.query(
      By.css('button.btn-age')
    );
    component.onCalcBirthYear.subscribe((birthYear) => {
      // Assert
      expect(birthYear).toEqual(expectBirthYear);
      doneFn();
    });
    // Act
    buttonDebug.triggerEventHandler('click', null);
    fixture.detectChanges();
  });

// Arrange
let flag = false;

// Act
fixture.componentInstance.myOutput.subscribe((value) => {
  flag = true;
});
debugElement.triggerEventHandler('click', null});

// Assert
expect(flag).toBeTruthy();

// Arrange
const spy = spyOn(fixture.componentInstance, 'onEvent').and.callThrough();
const spyEmit = spyOn(fixture.componentInstance.myOutput, 'emit').and.callThrough();
// Act
debugElement.triggerEventHandler('click', null});
// Assert
expect(spy).toHaveBeenCalled();
expect(spyEmit).toHaveBeenCalled();

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { Person } from 'src/app/models/person.model';


export class PersonComponent implements OnInit {

  @Input() person!: Person;
  @Output() onSelected = new EventEmitter<Person>();
  imc = '';

  onClick() {
    this.onSelected.emit(this.person);
  }
}

 it('should raise selected event when do click', () => {
    // Arrange
    const expectedPerson = new Person('Juan', 'Perez', 30, 120, 1.65);
    component.person = expectedPerson;
    const buttonDe = fixture.debugElement.query(By.css('button.btn-choose'));
    let selectedPerson: Person | undefined;
    component.onSelected
    .subscribe(person => selectedPerson = person);
    // Act
    buttonDe.triggerEventHandler('click', null);
    fixture.detectChanges();
    // Assert
    expect(selectedPerson).toEqual(expectedPerson);
  })

  it('should raise selected event when click', (doneFn) => {
    // Arrange
    const expectPerson = new Person('Jorge', 'Medina', 25, 67.2, 1.81);
    component.person = expectPerson;
    const buttonDebug: DebugElement = fixture.debugElement.query(
      By.css('button.btn-choose')
    );
    let selectedPerson: Person | undefined;
    component.onSelected.subscribe((person) => {
      selectedPerson = person;
      expect(selectedPerson).toEqual(expectPerson);
      doneFn();
    });
    // Act
    buttonDebug.triggerEventHandler('click', null);
    fixture.detectChanges();
    // Assert
  });

  it('should raise select event when do click', () => {
    //Arrange
    const expectPerson = new Person('Esteban', 'Qs', 27, 120, 1.65);
    const Event = {
      preventDefault: () => {}
    }
    component.person = expectPerson;
    const buttonDebug = fixture.debugElement.query(By.css('button.btn-choose'));
    const spyEvent = spyOn(Event, 'preventDefault');
    let selectedPerson: Person | undefined;
    component.onSelected. subscribe((person) => {
      selectedPerson = person;
    });
    //Act
    buttonDebug.triggerEventHandler('click', Event);
    fixture.detectChanges();
    //Assert
    expect(spyEvent).toHaveBeenCalledTimes(2);
    expect(selectedPerson).toEqual(expectPerson);
  });

  calcBirthYear(): number {
    if (this.age < 0) {
      return 0;
    }
    const date = new Date();
    const currentYear = date.getFullYear();
    const birthYear = currentYear - this.age;
    return birthYear;
  }

  describe('test for calcBirthYear', () => {
    it('should return year of birth', () => {
      // Arrange
      // Act
      const rta = person.calcBirthYear();
      // Assert
      expect(rta).toEqual(1998);
    });

    it('should return 0', () => {
      // Arrange
      person.age = -10;
      // Act
      const rta = person.calcBirthYear();
      // Assert
      expect(rta).toEqual(0);
    });
  });

  it('should raise calcBirthYear event when click', (doneFn) => {
    // Arrange
    component.person = new Person('Jorge', 'Medina', 25, 67.2, 1.81);
    const expectBirthYear = 1998;
    const buttonDebug: DebugElement = fixture.debugElement.query(
      By.css('button.btn-age')
    );
    component.onCalcBirthYear.subscribe((birthYear) => {
      // Assert
      expect(birthYear).toEqual(expectBirthYear);
      doneFn();
    });
    // Act
    buttonDebug.triggerEventHandler('click', null);
    fixture.detectChanges();
  });

Componentes con Outputs

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