Testing pipes

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

Miguel Angel Coy Triana

student•

Para evitar que se generé el error de “Cannot read properties of undefined” al intentar cargar la imagen en el ProductComponent, se debe inicializar el @Input.

// Antes 
@Input() product!: Product;

// Después 
  @Input() product: Product = {
    id: '1',
    title: 'title exaple',
    price: 1000,
    images: [''],
    description: 'Description example',
    category: {
      id: 1,
      name: 'category example'
    },
  };

Juan Luna

student•

prefiero hacer esto

beforeEach(() => { fixture = TestBed.createComponent(ProductComponent); component = fixture.componentInstance; component.product = { id: 1, name: 'Test Product', // Otras propiedades del producto... images: ['url1', 'url2', 'url3'] }; fixture.detectChanges(); });

Cesar Elías Armendariz Ruano

student•

Despues de las pruebas sensillas a pipes ahora podemos probar los pipes en un ambiente para verificar si puede funcionar en un ambiente

reverse.pipe.spec.ts

import { Component, DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ReversePipe } from './reverse.pipe';

describe('ReversePipe', () => {
  it('create an instance', () => {
    const pipe = new ReversePipe();
    expect(pipe).toBeTruthy();
  });

  it('should transform "roma" to "amor"', () => {
    const pipe = new ReversePipe();
    const rta = pipe.transform('roma');
    expect(rta).toEqual('amor');
  });

  it('should transform "123" to "321"', () => {
    const pipe = new ReversePipe();
    const rta = pipe.transform('123');
    expect(rta).toEqual('321');
  });
});
  

@Component({
  template: `
  <h6>{{ 'amor' | reverse }}</h6>
  <input [(ngModel)]="text">
  <p> {{text|reverse}}</p>`
})
class HostComponent {
  text = '';
}

describe('ReversePipe from HostComponent', () => {
  let component: HostComponent;
  let fixture: ComponentFixture<HostComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ HostComponent, ReversePipe ],
      imports: [ FormsModule ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(HostComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should the h5 be "roma"', () => {
    const h5De = fixture.debugElement.query(By.css('h5'));
    expect(h5De.nativeElement.textContent).toEqual('roma');
  });

  it('should apply reverse pipe when typing in the input', () => {
    const inputDe = fixture.debugElement.query(By.css('input'));
    const inputEl: HTMLInputElement = inputDe.nativeElement;
    const pDe = fixture.debugElement.query(By.css('p'));
    expect(pDe.nativeElement.textContent).toEqual(' ');
    inputEl.value = 'ANA 2'; // 2 ANA
    inputEl.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    expect(pDe.nativeElement.textContent).toEqual(' 2 ANA');
  });
});

Miguel Angel Coy Triana

student•

La prueba en ‘OthersComponent’ esta fallando porque no se esta declarando el pipe “reverse” en el módulo del .spec de ese componente.

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReversePipe } from 'src/app/pipes/reverse.pipe';

import { OthersComponent } from './others.component';

describe('OthersComponent', () => {
  let component: OthersComponent;
  let fixture: ComponentFixture<OthersComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ OthersComponent, ReversePipe ],
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(OthersComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Juan Luna

student•

y la directiva

declarations: [OthersComponent, ReversePipe, HighligthDirective],

Sebastian Collantes

student•

diferencias entre reserve y reverse?, porque veo que el profe dice reverse cuando escribe reserve

Nicolas Molina

teacher•

😲 wow si fue un pequeño error de escritura

// Antes 
@Input() product!: Product;

// Después 
  @Input() product: Product = {
    id: '1',
    title: 'title exaple',
    price: 1000,
    images: [''],
    description: 'Description example',
    category: {
      id: 1,
      name: 'category example'
    },
  };

import { Component, DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ReversePipe } from './reverse.pipe';

describe('ReversePipe', () => {
  it('create an instance', () => {
    const pipe = new ReversePipe();
    expect(pipe).toBeTruthy();
  });

  it('should transform "roma" to "amor"', () => {
    const pipe = new ReversePipe();
    const rta = pipe.transform('roma');
    expect(rta).toEqual('amor');
  });

  it('should transform "123" to "321"', () => {
    const pipe = new ReversePipe();
    const rta = pipe.transform('123');
    expect(rta).toEqual('321');
  });
});
  

@Component({
  template: `
  <h6>{{ 'amor' | reverse }}</h6>
  <input [(ngModel)]="text">
  <p> {{text|reverse}}</p>`
})
class HostComponent {
  text = '';
}

describe('ReversePipe from HostComponent', () => {
  let component: HostComponent;
  let fixture: ComponentFixture<HostComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ HostComponent, ReversePipe ],
      imports: [ FormsModule ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(HostComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should the h5 be "roma"', () => {
    const h5De = fixture.debugElement.query(By.css('h5'));
    expect(h5De.nativeElement.textContent).toEqual('roma');
  });

  it('should apply reverse pipe when typing in the input', () => {
    const inputDe = fixture.debugElement.query(By.css('input'));
    const inputEl: HTMLInputElement = inputDe.nativeElement;
    const pDe = fixture.debugElement.query(By.css('p'));
    expect(pDe.nativeElement.textContent).toEqual(' ');
    inputEl.value = 'ANA 2'; // 2 ANA
    inputEl.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    expect(pDe.nativeElement.textContent).toEqual(' 2 ANA');
  });
});

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReversePipe } from 'src/app/pipes/reverse.pipe';

import { OthersComponent } from './others.component';

describe('OthersComponent', () => {
  let component: OthersComponent;
  let fixture: ComponentFixture<OthersComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ OthersComponent, ReversePipe ],
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(OthersComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Testing pipes

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