Componentes con dependencias
Contenido del curso
Componentes
Componentes con dependencias
Directivas
Pipes
Próximos pasos
Componentes con dependencias
Contenido del curso
Componentes con dependencias
Cesar Elías Armendariz Ruano
Estudiante
Reinaldo Mendoza
Estudiante
Kevin Candia
Estudiante
José Luis Jiménez
EstudianteEn unit testing se provo conceptos de forma individual por medio de mockigs y spies a dependencias.
Por lo que vamos a hacer un mocking a las dependencias del component
veamos como se forma cuando products component depende de product component que a su vez depende de product service
products.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { of } from 'rxjs'; import { ProductsComponent } from './products.component'; import { ProductComponent } from './../product/product.component'; import { ProductsService } from './../../services/product.service'; import { generateManyProducts } from './../../models/product.mock'; describe('ProductsComponent', () => { let component: ProductsComponent; let fixture: ComponentFixture<ProductsComponent>; let productService: jasmine.SpyObj<ProductsService>; beforeEach(async () => { const spy = jasmine.createSpyObj('ProductsService', ['getAll']); await TestBed.configureTestingModule({ declarations: [ ProductsComponent, ProductComponent ], providers: [ { provide: ProductsService, useValue: spy } ] }) .compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(ProductsComponent); component = fixture.componentInstance; productService = TestBed.inject(ProductsService) as jasmine.SpyObj<ProductsService>; const productsMock = generateManyProducts(3); productService.getAll.and.returnValue(of(productsMock)); fixture.detectChanges(); //ngOnInit() }); it('should create', () => { const productsMock = generateManyProducts(3); productService.getAll.and.returnValue(of(productsMock)); fixture.detectChanges(); expect(component).toBeTruthy(); expect(productService.getAll).toHaveBeenCalled(); }); });
Este es justo el momento donde los tests se ponen tediosos, cuando la dependencia tiene otra dependencia que teienes que mockear y al final el test real es el 10% del test que hay que escribir
Actualmente estoy usando angular material, pero me aparece el siguiente error:
ERROR: 'NG0304: 'mat-accordion' is not a known element: 1. If 'mat-accordion' is an Angular component, then verify that it is part of this module. 2. If 'mat-accordion' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
¿Cómo lo puedo importar angular material a mis pruebas ?
Hola estoy usando la versión 17 de angular, durante la clase el profesor menciona..que al hacer un mock del servicio, ya no es necesario importar el HttpClientModule. Sin embargo, a pesar de hacer lo que se indica en la clase, el error persiste. Alguna idea de que hacer?