No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Simulando el clic

7/23
Recursos

Aportes 2

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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