No tienes acceso a esta clase

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

Simulando el clic

7/23
Recursos

Aportes 4

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

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