No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
1H
58M
52S

Testing pipes

22/23
Recursos

Aportes 3

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Para evitar que se gener茅 el error de 鈥淐annot 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'
    },
  };

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: `
聽 <h5>{{ 'amor' | reverse }}</h5>
聽 <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');
聽 });
});

La prueba en 鈥極thersComponent鈥 esta fallando porque no se esta declarando el pipe 鈥渞everse鈥 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();
  });
});