Componentes con Outputs

Outputs

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

1. 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');
   }
   

2. 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"]'));
   

3. 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();
     

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

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, ... ```html \<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.

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

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