Creando pipe

Curso de Angular: Unit Testing para Componentes

Contenido del curso

Introducción

Componentes

Componentes con dependencias

Directivas

Pipes

Próximos pasos

23
Continúa con el Curso de Testing en Formularios y Routing
00:56 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:37

Creando pipe

Curso de Angular: Unit Testing para Componentes

Clase 21 de 23

Clase 21 / 23

Comentarios (2)2 comentarios

Cesar Elías Armendariz Ruano

Hace 4 años

Crearemos un pipe y haremos pruebas del mismo

primero creamos el pipe

ng g p pipes/reverse

los pipes son los unicos que se pueden a poder probar de forma directa, sin necesidad de crear componentes o servicios embebidos. Sin embargo se puede probar tambien embebiendo componentes

las pruebas se las puede realizar de forma directa

reverse.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {

transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

reverse.pipe.spec.ts

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

Adrian Silva

Hace 3 años

prober el pipe con la palabra "arepera" y no funcionó ....😆

Juan Luna

Hace 2 años

yo probé con 'dábale arroz a la zorra el abad'

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

Creando pipe

Progreso del curso

Introducción

Componentes

Componentes con dependencias

Directivas

Pipes

Próximos pasos