Componentes con dependencias
Contenido del curso
Componentes con dependencias
Contenido del curso
Cesar Elías Armendariz Ruano
Una vez utilizados los componentes reales en las pruebas de rutas hay que ver como lograr mockear las dependencias de estos componentes
primero realizaremos una inyección de dependencias en uno de los componentes en este caso othersComponent, y enviaremos el total de productos obtenidos al html para hacer las pruebas de render posteriormente
others.component.ts
import { Product } from './../../models/product.model'; import { ProductsService } from './../../services/product.service'; products: Product[] = []; constructor( private productService: ProductsService ) { } ngOnInit(): void { this.productService.getAll() .subscribe(data => { this.products = data; }); }
others.component.html
<h1 data-testid="products-length">Total {{ products.length }}</h2>
Ahora haremos un mocking del product service de othersComponent con spy's
app.integration.spec.ts
import { asyncData, clickElement, getText, query, queryAllByDirective } from 'src/testing'; import { ProductsService } from './services/product.service'; import { generateManyProducts } from './models/product.mock'; describe('App Integration test', () => { let productService: jasmine.SpyObj<ProductsService>; beforeEach(async () => { const productServiceSpy = jasmine.createSpyObj('ProductsService', ['getAll']); await TestBed.configureTestingModule({ providers: [ { provide: ProductsService, useValue: productServiceSpy } ], schemas: [NO_ERRORS_SCHEMA] }).compileComponents(); }); it('should render OthersComponent when clicked', fakeAsync(() => { const productsMocks = generateManyProducts(10); productService.getAll.and.returnValue(asyncData(productsMocks)); clickElement(fixture, 'others-link', true); tick(); // wait while nav... fixture.detectChanges(); // ngOnInit - OthersComponent tick(); fixture.detectChanges(); // ngOnInit - OthersComponent expect(router.url).toEqual('/others'); const element = query(fixture, 'app-others'); expect(element).not.toBeNull(); const text = getText(fixture, 'products-length'); expect(text).toContain(productsMocks.length.toString()); }));
