No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

2D
1H
7M
38S

Componentes con Outputs

8/23
Recursos

Aportes 4

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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 鈥渆xpect鈥:

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

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

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