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.

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');
  });

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

Directiva con ngModel

Introducción

Unit Testing en Angular para Componentes

Creando el proyecto

Primera prueba

Componentes

Creando un componente & nativeElement

DebugElement & ByCss

Componentes con Inputs

Simulando el clic

Componentes con Outputs

Pruebas aisladas al componente

Pruebas con componente padre

Resolviendo el reto

Componentes con dependencias

Proyecto: creando product component

Componentes con dependencias

Pruebas a getAllProducts

FakeAsync and tick

Pruebas a promesas

Promesas simulando click

Directivas

Creando la Directiva

Pruebas a Directiva

Directiva con ngModel

Pipes

Creando pipe

Testing pipes

Próximos pasos

Continúa con el Curso de Testing en Formularios y Routing