DebugElement & ByCss

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

Cesar Elías Armendariz Ruano

student•

Angular puede correr en diferentes plataformas, pero debugElement y Css puede redenrizarse para poder renderizarse en nativeScript, ademas se puede hacer preview side rendering para lograr un rendirizado previo y agilitar todo el proceso de renderizado.

ahora podemos hacer las pruebas de cálidad del render de una mejor manera

person.component.spec.ts

it('should have <p> with "Soy un párrafo"</p>', () => {
    const personDebug: DebugElement = fixture.debugElement;
    const pDebug: DebugElement = personDebug.query(By.css('p'));
    const pElement: HTMLElement = pDebug.nativeElement;
    expect(pElement?.textContent).toEqual('Soy un párrafo');
  });

  it('should have <h4> with "Hola, PersonComponent"</h4>', () => {
    const personDebug: DebugElement = fixture.debugElement;
    const h3Debug: DebugElement = personDebug.query(By.css('h3'));
    const h3: HTMLElement = h3Debug.nativeElement;
    expect(h3?.textContent).toEqual('Hola, PersonComponent');
  });

Con esto se puede hacer pruebas a los componentes revisando todo el renderizado.

Jorge Luis Silva Medina

student•

Nico duda cual es el nombre de la extensión que utilizas para que te salga esto? Para que salga este msj

Luis Gomero

student•

GitLens https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

DebugElement & ByCss

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