Testing pipes
Contenido del curso
Testing pipes
Contenido del curso
Miguel Angel Coy Triana
Juan Luna
Cesar Elías Armendariz Ruano
Miguel Angel Coy Triana
Juan Luna
Sebastian Collantes
Nicolas Molina
ProfesorPara 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' }, };
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();
});
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'); }); });
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(); }); });
y la directiva
declarations: [OthersComponent, ReversePipe, HighligthDirective],
diferencias entre reserve y reverse?, porque veo que el profe dice reverse cuando escribe reserve
😲 wow si fue un pequeño error de escritura
