Test that a value is correctly set before calling an asynchronous service in a component - testing

Question

I'm writing unit tests for an Angular2 app in which a component is calling an asynchronous service when it is initialized in order to load its data. Before loading data, it should set a loading flag to true in order to show a spinner, and then the loading flag is set back to falseonce the data has been retrieved.
ngOnInit() {
this.reloadEmployees(this.filter);
}
reloadEmployees(filter: string) {
this.loading = true;
this.employeeService.getEmployees(filter).subscribe((results: Employee[]) => {
this.employees = results;
this.loading = false;
});
}
Here is how I wrote my test:
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [EmployeeComponent],
imports: [FormsModule, SpinnerModule, ModalModule, TranslateModule.forRoot()],
providers: [
{ provide: EmployeeService, useValue: employeeServiceStub },
]
});
fixture = TestBed.createComponent(EmployeeComponent);
component = fixture.componentInstance;
let employeeService = fixture.debugElement.injector.get(EmployeeService);
spy = spyOn(employeeService, 'getEmployees').and.returnValue(Observable.of(testEmployees));
});
it('should start loading employees when the component is initialized', fakeAsync(() => {
fixture.detectChanges();
expect(component.loading).toEqual(true);
}));
I was expecting the callback from the service to be run only if I call tick() in my test but apparently it is called anyway because component.loadingis already back to false when I check its value. Note that if I comment out the line that sets loading back to false in the callback of the component, the test passes.
Any idea how I should test that?

Answer 1

Rx.Observable.of seems to be synchronous (GitHub issue). That's why fakeAsync wrapper doesn't work with it.
Instead you can use e.g. Observable.fromPromise(Promise.resolve(...)).
In your case:
spy = spyOn(employeeService, 'getEmployees').and.returnValue(
Observable.fromPromise(Promise.resolve(testEmployees)));
Alternatively you can use async scheduler:
import { Scheduler } from 'rxjs/Rx';
...
spy = spyOn(employeeService, 'getEmployees').and.returnValue(
Observable.of(testEmployees, Scheduler.async));
I have prepared a working test sample on Plunkr