Flow does keeps interpreting variables as Promises after async/await - async-await

Reproduction :
// #flow
type A = { key: string, value: string};
const a:A = {
key: 'a',
value: 'a'
};
const foo = ():Promise<A> => {
return new Promise(function(resolve, reject){
setTimeout(function(){
resolve(a);
}, 1000);
});
}
const bar = async ():A => {
const res:A = ((await foo()):any);
return res;
}
bar();
Try it on flow.org/try
Context :
When calling a function called 'foo' returning a promise with await, the type of the variable is still Promise.
Flow correctly interprets the value if we just return the variable, but triggers an error if we type the return of the function called 'bar'.
19: return res;
^ Cannot return `res` because property `key` is missing in `Promise` [1] but exists in `A` [2].
References:
[LIB] static/v0.75.0/flowlib/core.js:583: declare class Promise<+R> {
^ [1]
17: const bar = async ():A => {
^ [2]
Solutions tried :
Forcing the type to 'A' of the variable calling await
Casting with any then 'A' didn't seem to solve the error.
Issues Related :
https://github.com/facebook/flow/issues/5294
Purpose of this question:
I am mostly looking for a workaround

This seems to be a simple misunderstanding, but the error message from Flow isn't very useful.
You've declared bar as
const bar = async (): A => {
but async functions always return promises, so it should be
const bar = async (): Promise<A> => {
You can see it here on flow.org/try.

Related

how do I unit test this function which handles observables

I have created this function because for all the requests my application sends out using http.post, this is how different parts handle the response. So rather than duplicating the code, I thought to create a function. But I am unable to figure out how to unit test this function.
private editAnswerSubject: Subject<Result>;
subscribeToReturnedObservable(observable:Observable<any>, subject:Subject<Result>) {
observable.subscribe((res) => {
const ev = <HttpEvent<any>>(res);
if (ev.type === HttpEventType.Response) {
const isResponseStructureOK: boolean = this.helper.validateServerResponseStructure(ev.body);
if (isResponseStructureOK) {
const response: ServerResponseAPI = ev.body;
subject.next(new Result(response.result, response['additional-info']));
} else {
subject.next(new Result(messages.error, messages.invalidStructureOfResponse));
}
}
},
(error: ServerResponseAPI) => {
const errorMessage: string = this.helper.userFriendlyErrorMessage(error);
subject.next(new Result(messages.error, errorMessage));
},
() => { // observable complete
});
}
editAnswer(answer: Answer): any {
const observable = this.bs.editAnswer(answer)
this.subscribeToReturnedObservable(observable,this.editAnswerSubject);
}
The test I have written so far is
describe('subscribeToReturnedObservable tests:', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
providers: [QuestionManagementService, HelperService, WebToBackendInterfaceService, AuthService, HttpClient, HttpHandler]
});
});
fit('should call send next value for the subject is the response from the server is ok', () => {
const questionService:QuestionManagementService = TestBed.get(QuestionManagementService);
const body = {"result":"success", "additional-info":"some additional info"};
const receivedHttpEvent = new HttpResponse({body:body});
let observable = new Observable();
spyOn(observable,'subscribe').and.returnValue(receivedHttpEvent);
spyOn(questionService['editQuestionSubject'],'next');
questionService.subscribeToReturnedObservable(observable,questionService['editQuestionSubject']);
observable.subscribe();
expect(questionService['editQuestionSubject'].next).toHaveBeenCalled();
});
});
But it get error Expected spy next to have been called.
I did this (hoping that it is the right way). The scope of testing is to check that the Subject's next is called correctly. So create an Observable using of and let the code flow from there.
fit('should call send next value for the subject is the response from the server is ok', () => {
const questionService:QuestionManagementService = TestBed.get(QuestionManagementService);
const helperService:HelperService = TestBed.get(HelperService);
const body = {"result":"success", "additional-info":"some additional info"};
const receivedHttpEvent = new HttpResponse({body:body});
const expectedResult = new Result('success', 'some additional info');
spyOn(helperService,'validateServerResponseStructure').and.returnValue(true);
let observable = of(receivedHttpEvent);
spyOn(questionService['editQuestionSubject'],'next');
questionService.subscribeToReturnedObservable(observable,questionService['editQuestionSubject']);
expect(questionService['editQuestionSubject'].next).toHaveBeenCalledWith(expectedResult);
});

Make sure a method to a function has been await'ed for in Jest

I have a function like this (the code is simplified to make this code more readable)
import Adapter from "adapter-package";
const adapter = new Adapter();
async powerOn(): Promise<MyClass> {
const myClass = new MyClass();
await adapter.powerOn();
return myClass;
}
as you can see I am using await on the call of adapter.powerOn(). Now I am writing unit tests for this using Jest.
it("can power on the adapter", async () => {
const spy = jest.spyOn(Adapter.prototype, "powerOn");
const myClass = await MyClass.powerOn();
expect(myClass).toBeInstanceOf(MyClass);
expect(spy).toHaveBeenAwaitedFor();
^^^^^^^^^^^^^^^^^^^^
spy.mockRestore();
}, 10000);
The test that I have underlined does not exist, but it is what I would like to test. Can I know if a method I have called has been waited for?
edit:
Will Jenkins pointed out that it is not clear what I am asking. Basically I want to make sure that the Promise returned by adapter.powerOn() has been resolved by the time my function has been resolved. Because I already had an issue where I accidentially had removed the await before adapter.powerOn().
async powerOn(): Promise {
const myClass = new MyClass();
adapter.powerOn();
return myClass;
}
So when I called my function with
await powerOn();
that function was resolved, but it did not await the call to adapter.powerOn() and I had to spend some time debugging. So I would like to make sure that adapter.powerOn() is resolved by the time await powerOn() completes.
How about something like this?
it("can power on the adapter", async () => {
let hasResolved = false;
const spy = jest.spyOn(Adapter.prototype, "powerOn");
const myClass = await MyClass.powerOn();
expect(myClass).toBeInstanceOf(MyClass);
let hasResolved = false;
//if it has been awaited then this should complete
spy.returnValues[0].then(()=>{
hasResolved=true;
})
expect(hasResolved).to.be.true;
spy.mockRestore();
}, 10000)
You could use setInmediate to wait for all pending promises:
const flushPromises = () => new Promise(setImmediate);
it("can power on the adapter", async () => {
const spy = jest.spyOn(Adapter.prototype, "powerOn");
await expect(MyClass.powerOn()).resolves.toBeInstanceOf(MyClass);
await expect(flushPromises()).resolves.toBeTruthy();
}, 10000);
This test first checks if powerOn resolves and returns an instance of MyClass and then checks if every pending promise has been resolved or rejected.
This is the solution I found:
import { inspect } from "util";
it("waits for the adapter to have been powered on", async () => {
const spy = jest
.spyOn(Adapter.prototype, "powerOn")
.mockImplementation(() => new Promise<void>(res => setTimeout(res, 0)));
await Sblendid.powerOn();
const spyPromise = spy.mock.results[0].value;
expect(inspect(spyPromise)).toBe("Promise { undefined }");
}, 10000);
the line
spy.mock.results[0].value
will get me the promise returned by my mock. Using util.inspect on a promise
expect(inspect(spyPromise)).toBe("Promise { undefined }");
will give me "Promise { undefined }" on a fulfilled promise (that is returning undefined) and would return "Promise { <pending> }" if it weren't fulfilled, that is how I test it has been resolved (fulfilled) when await Sblendid.powerOn(); completed.

Passing value from one RxJS operator to another

Here is my code:
#Injectable()
export class TraitementDetailEffects {
ingoing_loadDetail: { traitementID: number, obs: Promise<any> };
#Effect()
loadTraitementDetail$: Observable<Action> = this.actions$.pipe(
ofType(ETraitementDetailActions.loadTraitementDetail),
map((action: LoadTraitementDetail) => action.payload),
switchMap((traitementID) => {
if (this.ingoing_loadDetail && this.ingoing_loadDetail.traitementID === traitementID) {
return this.ingoing_loadDetail.obs;
}
const obs = this.traitementsService.loadDetail(traitementID);
this.ingoing_loadDetail = {traitementID: traitementID, obs: obs};
return obs;
}),
map(result => {
this.ingoing_loadDetail = null;
//here I don't have access to traitementID :'(
return new LoadTraitementDetailSuccess(traitementID, result);
})
);
constructor(
private actions$: Actions,
private traitementsService: TraitementsService
) {
}
}
I'm trying to pass the variable or value traitementID to the last map.
I tried to avoid the last map with an async await but then I get a weird errors "Effect dispatched an invalid action" and "Actions must have a type property" (FYI all my actions have a type property).
Try to bake this id into observable's resolve, like:
switchMap((traitementID) => {
return this.traitementsService.loadDetail(traitementID).pipe(
map(detail => ({detail,traitementID}))
);
}),
map(({detail,traitementID}) => {
...
})

Unit testing redux-saga select

I have a simple saga of this form:
const getAccountDetails = function * () {
const { url } = yield select(state => state.appConfig)
const accountDetails = yield call(apiFetchAccountDetails, url)
}
I'm trying to write a unit test:
describe('getAccountDetails', () => {
const iterator = getAccountDetails()
it("should yield an Effect 'select(state=> state.appConfig)'", () => {
const effect = iterator.next().value
const expected = select(state => state.appConfig)
expect(effect).to.deep.eql(expected)
})
This test fails. Although effect and expected are very similar, they are not identical.
At least one of the differences is buried in payload.selector.scopes, where the yielded effect and expected are as follows:
As the scopes of these two will always be different, how can these tests ever be made to work?
eta: this pattern is adapted from the example linked to from the redux-saga docs
Cracked it after finding this issue from way back.
The fix is to create a named function to do the select and export it from the module where the saga under test lives, and then use this same function in tests. All is well.
export const selectAppConfig = state => state.appConfig
const getAccountDetails = function * () {
const { url } = yield select(selectAppConfig)
const accountDetails = yield call(apiFetchAccountDetails, url)
}
import {selectAppConfig} from './sagaToTest'
describe('getAccountDetails', () => {
const iterator = getAccountDetails()
it("should yield an Effect 'select(state=> state.appConfig)'", () => {
const effect = iterator.next().value
const expected = select(selectAppConfig)
expect(effect).to.deep.eql(expected)
})

chai-as-promised should.eventually.equal not passing

I am trying to write a minimum working example of chai-as-promised in order to understand how it is working when testing functions that return a promise.
I have the following function:
simple.test = async (input) => {
return input;
};
and the following test function:
chai.use(sinonChai);
chai.use(chaiAsPromised);
const { expect } = chai;
const should = chai.should();
describe('#Test', () => {
it('test', () => {
expect(simple.test(1)).should.eventually.equal(1);
});
});
However, testing this results in the test not passing, but in a very long error, which is pasted here: https://pastebin.com/fppecStx
Question: Is there something wrong about the code, or what seems to be the problem here?
First: Your mixing expect and should. If you want to use should for assertion, you don't need expect.
Second: To tell mocha that a test is async you have to either call done, return a Promise or use async/await.
const chai = require('chai');
const chaiAsPromised = require('chai-as-promised');
const sinonChai = require('sinon-chai');
const should = chai.should();
chai.use(sinonChai);
chai.use(chaiAsPromised);
// Function to test
const simple = {
test: async (input) => {
return input;
}
}
// Test
describe('#Test', () => {
it('test', () => {
return simple.test(1).should.eventually.equal(1);
});
});

Resources