I am currently in the process of learning how to write unit tests. The following code snippet is part of the coursework that I am studying:
#spec.ts
...
beforeEach(waitForAsync(() => {
const coursesServiceSpy = jasmine.createSpyObj("CoursesService", [
"findAllCourses",
]);
TestBed.configureTestingModule({
imports: [CoursesModule, NoopAnimationsModule, HttpClientTestingModule],
providers: [{ provide: CoursesService, useValue: coursesServiceSpy }],
})
.compileComponents()
.then(() => {
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
el = fixture.debugElement;
coursesService = TestBed.inject(CoursesService);
});
}));
...
it("should display data from service", () => {
coursesService.findAllCourses.and.returnValue(of(fake data));
fixture.detectChanges();
// test code implementation goes here
});
#component.ts
reloadCourses() {
const courses$ = this.coursesService.findAllCourses();
}
My challenge lies in using component-store to manage the state, as it does not return any value after calling the effect.
# my component
constructor(
private store: StoreService
) {}
...
viewModel$ = this.store.viewModel$;
// triggering the effect to update data
this.store.initCourses();
In my template, I directly display data from the component-store.
# my template
<ng-container *ngIf="viewModel$ | async as viewModel">
I'm struggling with faking a response from the component-store and notifying my component when changes occur. My aim is to assign a value to viewModel$, which is an Observable. Any guidance or alternative solutions would be greatly appreciated!
If additional information is required for clarification, please feel free to ask. Thank you in advance!