toHaveBeenCalled() failing when mocked output shows correct data - unit-testing

Question

I am getting tired of trying to figure out the following out. Basically I have a method in my component that calls a service which is mocked. Once that service completes, another service does some logging activities, which is also mocked. But my test fails saying the logging service wasn't called:
process(){
const that : any = this;
this.mainService.process().then(result=>{
return result;
}).then(result=>{
//log the operation now after doing some checkups
let checkups = ""
that.logService.log('process',result, checkups).then(logged=>{
console.log(logged)
}).catch(err=>console.log(err)
}).catch(err=>console.log(err);
}
Before we go ahead, doing Promise.all() isn't match of an option due to the logic in place to do checkups. Now to the testing bit:
fit("should log processed request", done => {
const mainSerivce = TestBed.get(MainService)
const logService = TestBed.get(LogService)
spyOn(mainService, "process").and.returnValue(Promise.resolve({id:34,value:64, rank:310));
const logSpy = spyOn(logSerivce, "log").and.returnValue(Promise.resolve({'done':true}))
fixture.whenStable().then(finished=>{
component.process();
expect(logSpy).toHaveBeenCalled();
done();
})
});
expect(logSpy).toHaveBeenCalled();
fails now but I can see in my console the result of the mock {'done':true} or whatever value I pass is shown, meaning it was mocked and called (?). What am I missing exactly since the methods appear to have been mocked and logged correctly in the console.

Answer 1

It seems to me you have to wait for the promises to resolve before asserting for it, try:
fit("should log processed request", done => {
const mainSerivce = TestBed.get(MainService)
const logService = TestBed.get(LogService)
spyOn(mainService, "process").and.returnValue(Promise.resolve({id:34,value:64, rank:310));
const logSpy = spyOn(logSerivce, "log").and.returnValue(Promise.resolve({'done':true}));
// call the function that will resolve promises
component.process();
// whenStable waits for the promises to resolve.
fixture.whenStable().then(finished=>{
console.log('Making the assertion !!');
expect(logSpy).toHaveBeenCalled();
done();
});
});
Make sure you see the log of { 'done': true } before the log of Making the assertion !!. But since you have a promise resolving within a promise, the following might fix it.
fit("should log processed request", async done => { // check out the async keyword here
const mainSerivce = TestBed.get(MainService)
const logService = TestBed.get(LogService)
spyOn(mainService, "process").and.returnValue(Promise.resolve({id:34,value:64, rank:310));
const logSpy = spyOn(logSerivce, "log").and.returnValue(Promise.resolve({'done':true}));
// call the function that will resolve promises
component.process();
// when stable waits for the promises to resolve.
await fixture.whenStable();
await fixture.whenStable();
expect(logSpy).toHaveBeenCalled();
done();
});