I've encountered an issue while trying to test my component unit. The problem arises when I call the product-list.component.ts from my product.service.ts. While my product.service.spec.ts is successful, the product-list.component.spec.ts fails as the component fails to be created as expected. I'm having trouble with the callFake() method and have tried using an anonymous function without success. I've done some research but haven't found a solution yet. Any guidance would be greatly appreciated!
For reference, here are the images of the issue: https://i.sstatic.net/DCt9ZY4E.png https://i.sstatic.net/oTSxMHrA.png
Below is a snippet of the code:
Here is my product-list.component
export class ProductListComponent implements OnInit {
products: Products[] = [];
allLoadProducts(){
this.productService.getAllProducts().
pipe(tap((products) =>
(this.products = products)))
}
}
Here is my product service:
getAllProducts(): Observable<Products[]>{
return this._http.get<Products[]>(this.rootUrl + '/getProducts/someClothing')
}
Here is my product-list.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ProductListComponent } from './product-list.component';
import { ProductService } from '@app/services/product.service';
import { of } from 'rxjs';
describe('ProductListComponent', () => {
let component: ProductListComponent;
let fixture: ComponentFixture<ProductListComponent>;
console.log("doest it get here");
beforeEach(async () => {
const productServiceSpy = jasmine.createSpyObj<ProductService>(['getAllProducts']);
productServiceSpy.getAllProducts.and.callFake(function (){
return of({
products: [
{
"_id": "0001",
"name": "Black One Piece",
"size": "M",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
"imageUrl": "Test",
"price": 199
},
]
})
});
await TestBed.configureTestingModule({
declarations: [ ProductListComponent ],
providers:[
{
provide: ProductService,
userValue: productServiceSpy
}
]
})
.compileComponents();
})
beforeEach(() => {
fixture = TestBed.createComponent(ProductListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});