Simulando el clic
Contenido del curso
Simulando el clic
Contenido del curso
Cesar Elías Armendariz Ruano
Daniel Meza
Carlos Alejandro Hernández Mejía
Luis Antonio Gutiérrez Hernández
Kenny Julián Luque Ticona
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"> <h4>Hola, {{person?.name}}</h4> <p>Mi altura es {{person?.heigth}}</p> </section>
Y se requiere probar un evento (click)
<h4>Hola, {{person?.name}}</h4> <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
component.personDebugElement, del botónnativeElement del botónAct
triggerEventHadler que permite ejecutar eventos.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:
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>
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);
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();
A mi me funciono ejecutando directamente el metodo click del botón utilizando el tipo HTMLButtonElement.
it('Should display a text with IMC when I make click', () => { // Arrange const expectedMessage = 'overweight level 1'; component.person = new Person('Juan', 'Gonzalez', 28, 65, 1.52); const button: HTMLButtonElement = fixture.debugElement.query(By.css('button.imc-btn')).nativeElement; // Act button.click(); fixture.detectChanges(); // Assert expect(button.textContent).toContain(expectedMessage); });
¿Cual es la diferencia entre ese click() y el triggerEventHandler()?
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();