Simulando el clic

Realizar pruebas en el render mientras corre, como por ejemplo si se da un click de la siguiente manera.

Primero crearemos un componente que envie al Input del componente person la información necesaria

ng g c components/people

enviaremos la información desde people

people.component.ts

import { Person } from 'src/app/models/person.model';

person: Person = new Person('Name', 'LastName', 30, 80, 1.69);

people.component.html

<section class="container">
  <app-person [person]="person"></app-person>
</section>

hay que cambiar las rutas de acceso desde app-routing.module.ts

app-routing.module.ts

import { ProductsComponent } from './components/products/products.component';
import { PicoPreviewComponent } from './components/pico-preview/pico-preview.component';
import { PeopleComponent } from './components/people/people.component';

const routes: Routes = [
  {
    path: 'products',
    component: ProductsComponent
  },
  {
    path: 'pico-preview',
    component: PicoPreviewComponent
  },
  {
    path: 'people',
    component: PeopleComponent
  }
];

Ademas el ingreso desde app.component.html

app.component.html

<ul>
      <li><a routerLink="/">Home</a></li>
      <li><a routerLink="/people">People</a></li>
      <li><a routerLink="/products">Products</a></li>
      <li><a routerLink="/pico-preview">Pico Preview</a></li>
    </ul>

ahora con la información en person podemos realizar cambios como el ingreso de un botón y realizar pruebas con el

person.componen.ts

@Input() person!: Person;
  imc = '';
  
  constructor() { }
  ngOnInit(): void {
  }

  calcIMC() {
    this.imc = this.person.calcIMC();
  }

Y realizar las nuevas pruebas en person.component.spec.ts

it('should display a text with IMC when call calcIMC', () => {
    // Arrange
    const expectedMsg = 'overweigth level 3';
    component.person = new Person('Juan', 'Perez', 30, 120, 1.65); // overweight level 3
    const button = fixture.debugElement.query(By.css('button.btn-imc')).nativeElement;
    // Act
    component.calcIMC();
    fixture.detectChanges();
    // Assert
    expect(button.textContent).toContain(expectedMsg);
  });

  it('should display a text with IMC when do click', () => {
    // Arrange
    const expectedMsg = 'overweigth level 3';
    component.person = new Person('Juan', 'Perez', 30, 120, 1.65); // overweight level 3
    const buttonDe = fixture.debugElement.query(By.css('button.btn-imc'));
    const buttonEl = buttonDe.nativeElement;
    // Act
    buttonDe.triggerEventHandler('click', null);
    fixture.detectChanges();
    // Assert
    expect(buttonEl.textContent).toContain(expectedMsg);
  });

en el template del componente person se tiene lo siguiente

<section class="container">
  <h3>Hola, {{person?.name}}</h3>
  <p>Mi altura es {{person?.heigth}}</p>
</section>

Y se requiere probar un evento (click)

<h3>Hola, {{person?.name}}</h3>
<p>Mi altura es {{person?.heigth}}</p>
<button class="btn-imc" (click)="calcIMC()">IMC: {{imc}}</button>

Se retiró el section ya que este componente person está siendo renderizado por un componente padre people

Código de prueba para el evento (click)

it('should display text with IMC when do click', () => {
    // Arrange
    const expectMsg = 'down';
    component.person = new Person('Daniels', 'Mezas', 38, 40, 1.65);
    const buttonDebug: DebugElement = fixture.debugElement.query(By.css('button.btn-imc'));
    const buttonElement: any = buttonDebug.nativeElement;

    // Act
    buttonDebug.triggerEventHandler('click', null);
    fixture.detectChanges();

    // Assert
    expect(buttonElement.textContent).toContain(expectMsg);

  });

Arrange

• comienza definiendo el mensaje que debería mostrarse al calcular el IMC
• Sigue definiendo una persona a la prop component.person
• se obtiene el elemento tipo DebugElement, del botón
• Obtener el nativeElement del botón

Act

• el buttonDebug tiene un método llamado triggerEventHadler que permite ejecutar eventos.
• decirle a angular que detecte cambios

Y para finalizar agregamos una prueba. Para conocer si lo que se está mostrando es lo esperado

Eventos

Para testear eventos en Angular, puedes seguir estos pasos:

1. Configura el componente para que ejecute una acción cuando se produzca el evento que quieres probar. Por ejemplo, para ejecutar una acción al hacer click sobre un botón:

   <button
     (click)="doSomething()">
   	Click Me!
   </button>
   

2. Utiliza DebugElement para simular el evento en el elemento del DOM que lo desencadena:

   const debugElement: DebugElement = fixture.debugElement.query(By.css('button'));
   debugElement.triggerEventHandler('click', null);
   

3. Verifica si la acción se ha ejecutado correctamente cuando se ha producido el evento, utilizando una función spy de Jasmine para verificar si se ha llamado a la función cuando se ha producido el evento:

   const spy = spyOn(fixture.componentInstance, 'doSomething');
   debugElement.triggerEventHandler('click', null);
   expect(spy).toHaveBeenCalled();
   

En caso de tener dos componentes iguales , si uso queryAll
no me permite acceder al segundo DebugElement para usar triggerEventHandler, use

const buttonDebug = ButtonContainerDebug.queryAll(By.css('button'));
const buttonElement: HTMLElement = buttonDebug[0].nativeElement;
pdsButtonElement.click();