Directiva con ngModel

Clase 20 de 23 • Curso de Angular: Unit Testing para Componentes

Cesar Elías Armendariz Ruano

student•

Ahora se va a probar las directiva con los Inputs, por lo que se va a simular con los inputs y las directivas en las pruebas

highligth.directive.spec.ts

import { FormsModule } from '@angular/forms';

@Component({
  template: `
  <h5 class="title" highligth>Hay un valor default</h6>
  <h5 highligth="yellow">Hay un valor</h6>
  <p  highligth="blue">parrafo</p>
  <p>otro parrafo</p>
  <input [(ngModel)]="color" [highligth]="color">`,
})
class HostComponent {
  color = 'pink';
}

  it('should the h5.title be defaultColor', () => {
    // Arrange
    const titleDe = fixture.debugElement.query(By.css('.title'));
    const dir = titleDe.injector.get(HighligthDirective);
    expect(titleDe.nativeElement.style.backgroundColor).toEqual(dir.defaultColor);
  });

  it('should bind <input> and change the bgColor', () => {
    // Arrange
    const inputDe = fixture.debugElement.query(By.css('input'));
    const inputEl: HTMLInputElement = inputDe.nativeElement;
    // Act
    // Assert
    expect(inputEl.style.backgroundColor).toEqual('pink');
    inputEl.value = 'red';
    inputEl.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    expect(inputEl.style.backgroundColor).toEqual('red');
    expect(component.color).toEqual('red');
  });

Ana Velez Ossa

student•

Acá les comparto el ajuste de la prueba 'should have three highlight elements' que me funciono.

it('should have three highlight elements', () => {
    const elements = fixture.debugElement.queryAll(By.directive(HighligthDirective));//los que tienen directivas
    
    const allElements = fixture.debugElement.queryAll(By.css('*')); //todos los elementos del HostComponent
    const elementsWithout = allElements.filter(el => !el.injector.get(HighligthDirective, null)); // filtra los elementos que no tienen la directiva.

    expect(elements.length).toBe(4);
    expect(elementsWithout.length).toBe(1);
  });

Yessica Alexandra Malaver Gómez

student•

dispatchEvent es un método que se utiliza en el contexto de DOM para desencadenar eventos en elementos HTML. Permite simular eventos como clics, teclas presionadas, etc. Este método es útil en pruebas unitarias, especialmente cuando se quiere verificar el comportamiento de un componente cuando se produce un evento específico, como un clic en un botón. En el contexto de Angular, se emplea a menudo al realizar pruebas con DebugElement y simular interacciones, lo que te ayudará a asegurar que tus componentes responden correctamente a los eventos.