I'm reviewing a React test, and I have a problem with asynchronous programming.
The requirements are:
It takes 7 minutes to get returned response after requesting data. But, when the response is delayed for 30 seconds, a timeout error will occur.
Check the API specs, fulfill these requirements:
Use the API that checks the data request progress and make it wait for response.
Check the progress every second.
And the API is:
import { rest } from 'msw';
export function handlers() {
return [
rest.get('/api/data', getData),
rest.get('/api/data/progress', getDataProgress),
];
};
const getData = async (req, res, ctx) => {
let wait = req.url.searchParams.get('wait');
if (wait !== 'no') {
wait = 'yes';
}
try {
startNewGetData();
if (wait === 'yes') {
await Promise.race([waitLastGetData, timeout(minutes(7)), timeoutError(minutes(0.5))]);
}
return res(ctx.status(200));
} catch {
return res(ctx.status(500));
}
};
const getDataProgress = (_, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
hasFinished: hasGetDataFinished,
})
);
};
let waitLastGetData = undefined;
let hasGetDataFinished = false;
function startNewGetData() {
hasGetDataFinished = false;
waitLastGetData = new Promise(resolve => setTimeout(resolve, minutes(3)));
waitLastGetData.then(() => (hasGetDataFinished = true));
}
I don't even know what I should first touch. Could you please tell me what I should do to fulfill those requirements?
You might not understand my English well because of my short English, sorry for that.
Related
I'm studying the node.js module async,I want to find out if there is a way to change the async.retry method to retry even on successfull operations but stop based on some condition or response let's say its an api call.
According to its docs ,the function will continue trying the task on failures until it succeeds.if it succeeds it will only run only that time But how can i make it work the same on successfull operations and make it stop on some condition ?
const async = require('async');
const axios = require('axios');
const api = async () => {
const uri = 'https://jsonplaceholder.typicode.com/todos/1';
try {
const results = await axios.get(uri);
return results.data;
} catch (error) {
throw error;
}
};
const retryPolicy = async (apiMethod) => {
async.retry({ times: 3, interval: 200 }, apiMethod, function (err, result) {
// should retry untill the condition is met
if (result.data.userId == 5) {
// stop retring
}
});
};
retryPolicy(api);
Yes, You can just throw a custom error if condition is not met. Would be something like that:
const async = require('async');
const axios = require('axios');
const api = async () => {
const uri = 'https://jsonplaceholder.typicode.com/todos/1';
try {
const results = await axios.get(uri);
if(typeof result.data.userId != 'undefined' && result.data.userId == 5){ // change this condition to fit your needs
return results.data;
}else{
throw {name : "BadDataError", message : "I don't like the data I got"};
}
} catch (error) {
throw error;
}
};
I don't think this is possible.
On the async.retry documentation you can find this description:
Attempts to get a successful response from task no more than times
times before returning an error. If the task is successful, the
callback will be passed the result of the successful task. If all
attempts fail, the callback will be passed the error and result (if
any) of the final attempt.
However, using the delay function given here, you can do what you want another way:
const async = require('async');
const axios = require('axios');
const delay = (t, val) => {
return new Promise((resolve) => {
setTimeout(() => { resolve(val) }, t);
});
}
const api = async () => {
const uri = 'https://jsonplaceholder.typicode.com/todos/1';
try {
const results = await axios.get(uri);
return results.data;
} catch (error) {
throw error;
}
};
const retryPolicy = async (apiMethod) => {
const times = 3
const interval = 200
let data
for (count = 0; count < 3; count++) {
try {
data = await apiMethod()
catch(e) {
console.log(e)
await delay(interval)
continue
}
if (data.userId === 5) {
break;
}
await delay(interval)
}
// do something
};
retryPolicy(api);
This question already has answers here:
Timeout in async/await
(3 answers)
Closed 1 year ago.
In my express application, I am making call to 2 APIs. The 2nd API is managed by 3rd party and sometimes can take more than 5 seconds to respond. Hence, I want to just wait for 1 second for the API to respond. If it does not, just proceed with data from 1st API.
Below is the mock-up of the functions being called.
I am thinking to use setTimeout to throw error if the API takes more than 1 second. If the API responds within 1 second then I just cancel the setTimeout and no error is ever thrown.
But there is problem with this approach:
setTimeout errors cannot be catched using try...catch block.
I cannot use axios's timeout option, as I still need to wait for the 2nd API to finish the processing and save the data in the DB. This will ofcourse, can happen later, when the 2nd API call finishes.
// Function to simulate it's taking time.
async function cWait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// Track whether it took time.
let isTimeOut = false
async function test() {
console.log('starting')
try {
const one = await apiCall1()
const myt = setTimeout(() => {
console.log('Its taking time, skip the 2nd API Call')
isTimeOut = true
throw new Error('Its taking time')
})
const two = await apiCall2(myt)
} catch (error) {
console.log(error)
}
saveInDB({ ...one, ...two })
}
async function apiCall2(timeOutInstance) {
console.log('start-apiCall')
await cWait(1800)
clearTimeout(timeOutInstance)
if (isTimeOut) saveInDB()
console.log('done-apiCall')
}
async function apiCall1() {
await cWait(5)
}
async function saveInDB(data) {
console.log('saveInDB')
}
test()
please note, this is not the answer as it was when it was accepted
as I misread the question and failed to call saveInDB in a timed out
situation
Promise.race seems perfect for the job
Also, you'd actually use your cWait function, not for mock-up, but to actually do something useful ... win the race :p
const api2delay = 800;
async function cWait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const TIMEDOUT = Symbol('TIMEDOUT');
async function cReject(ms) {
return new Promise((_, reject) => setTimeout(reject, ms, TIMEDOUT));
}
function apiCall2timeout(timeoutCallback) {
const resultApi2 = apiCall2();
const timeout = cReject(1000);
return Promise.race([resultApi2, timeout])
.catch(e => {
if (e === TIMEDOUT) {
resultApi2.then(timeoutCallback);
} else {
throw e;
}
});
}
async function test() {
console.log('starting')
let one, two;
try {
one = await apiCall1();
two = await apiCall2timeout(saveInDB);
} catch (error) {
console.log('error', error)
}
saveInDB({
...one,
...two
})
}
async function apiCall2() {
console.log('start-apiCall2')
await cWait(api2delay)
console.log('done-apiCall2')
return {
api2: 'done'
}
}
async function apiCall1() {
await cWait(5)
return {
api1: 'done'
}
}
async function saveInDB(data) {
console.log('saveInDB', data)
}
test()
Note: I changed where one and two were declared since const is block scoped
I you run with await cWait(800) in apiCall2, the saveInDB will run with both data.
But if you run await cWait(1800), the saveInDB will run 2 times.
// Function to simulate it's taking time.
async function cWait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// https://italonascimento.github.io/applying-a-timeout-to-your-promises/
const promiseTimeout = function (ms, promise) {
// Create a promise that rejects in <ms> milliseconds
let timeout = new Promise((resolve, reject) => {
let id = setTimeout(() => {
clearTimeout(id);
reject('Timed out in ' + ms + 'ms.')
}, ms)
})
// Returns a race between our timeout and the passed in promise
return Promise.race([
promise,
timeout
])
}
// Track whether it took time.
let isTimeOut = false
async function test() {
console.log('starting')
const one = await apiCall1() // get data from 1st API
let two = {};
try {
two = await promiseTimeout(1000, apiCall2())
} catch (error) {
isTimeOut = true;
console.log(error)
}
saveInDB({ ...one, ...two })
}
async function apiCall2() {
console.log('start-apiCall')
await cWait(800)
console.log('done-apiCall', isTimeOut)
if (isTimeOut) {
saveInDB({ 2: 'two' })
}
return { 2: 'two' }
}
async function apiCall1() {
await cWait(5)
return { 1: 'one' }
}
async function saveInDB(data) {
console.log('saveInDB', data)
}
test()
Hi guys I'm having trouble testing the below JS using Jest. It starts with waitForWorker. if the response is 'working' then it calls waitForWorker() again. I tried Jest testing but I don't know how to test an inner function call and I've been researching and failing.
const $ = require('jquery')
const axios = require('axios')
let workerComplete = () => {
window.location.reload()
}
async function checkWorkerStatus() {
const worker_id = $(".worker-waiter").data('worker-id')
const response = await axios.get(`/v1/workers/${worker_id}`)
return response.data
}
function waitForWorker() {
if (!$('.worker-waiter').length) {
return
}
checkWorkerStatus().then(data => {
// delay next action by 1 second e.g. calling api again
return new Promise(resolve => setTimeout(() => resolve(data), 1000));
}).then(worker_response => {
const working_statuses = ['queued', 'working']
if (worker_response && working_statuses.includes(worker_response.status)) {
waitForWorker()
} else {
workerComplete()
}
})
}
export {
waitForWorker,
checkWorkerStatus,
workerComplete
}
if (process.env.NODE_ENV !== 'test') $(waitForWorker)
Some of my test is below since i can't double check with anyone. I don't know if calling await Worker.checkWorkerStatus() twice in the tests is the best way since waitForWorker should call it again if the response data.status is 'working'
import axios from 'axios'
import * as Worker from 'worker_waiter'
jest.mock('axios')
beforeAll(() => {
Object.defineProperty(window, 'location', {
value: { reload: jest.fn() }
})
});
beforeEach(() => jest.resetAllMocks() )
afterEach(() => {
jest.restoreAllMocks();
});
describe('worker is complete after 2 API calls a', () => {
const worker_id = Math.random().toString(36).slice(-5) // random string
beforeEach(() => {
axios.get
.mockResolvedValueOnce({ data: { status: 'working' } })
.mockResolvedValueOnce({ data: { status: 'complete' } })
jest.spyOn(Worker, 'waitForWorker')
jest.spyOn(Worker, 'checkWorkerStatus')
document.body.innerHTML = `<div class="worker-waiter" data-worker-id="${worker_id}"></div>`
})
it('polls the correct endpoint twice a', async() => {
const endpoint = `/v1/workers/${worker_id}`
await Worker.checkWorkerStatus().then((data) => {
expect(axios.get.mock.calls).toMatchObject([[endpoint]])
expect(data).toMatchObject({"status": "working"})
})
await Worker.checkWorkerStatus().then((data) => {
expect(axios.get.mock.calls).toMatchObject([[endpoint],[endpoint]])
expect(data).toMatchObject({"status": "complete"})
})
})
it('polls the correct endpoint twice b', async() => {
jest.mock('waitForWorker', () => {
expect(Worker.checkWorkerStatus).toBeCalled()
})
expect(Worker.waitForWorker).toHaveBeenCalledTimes(2)
await Worker.waitForWorker()
})
I think there are a couple things you can do here.
Inject status handlers
You could make the waitForWorker dependencies and side effects more explicit by injecting them into the function this lets you fully black box the system under test and assert the proper injected effects are triggered. This is known as dependency injection.
function waitForWorker(onComplete, onBusy) {
// instead of calling waitForWorker call onBusy.
// instead of calling workerComplete call onComplete.
}
Now to test, you really just need to create mock functions.
const onComplete = jest.fn();
const onBusy = jest.fn();
And assert that those are being called in the way you expect. This function is also async so you need to make sure your jest test is aware of the completion. I notice you are using async in your test, but your current function doesnt return a pending promise so the test will complete synchronously.
Return a promise
You could just return a promise and test for its competition. Right now the promise you have is not exposed outside of waitForWorker.
async function waitForWorker() {
let result = { status: 'empty' };
if (!$('.worker-waiter').length) {
return result;
}
try {
const working_statuses = ['queued', 'working'];
const data = await checkWorkerStatus();
if (data && working_statuses.includes(data.status)) {
await waitForWorker();
} else {
result = { status: 'complete' };
}
} catch (e) {
result = { status: 'error' };
}
return result;
}
The above example converts your function to async for readability and removes side effects. I returned an async result with a status, this is usefull since there are many branches that waitForWorker can complete. This will tell you that given your axios setup that the promise will complete eventually with some status. You can then use coverage reports to make sure the branches you care about were executed without worrying about testing inner implementation details.
If you do want to test inner implementation details, you may want to incorporate some of the injection principals I mentioned above.
async function waitForWorker(request) {
// ...
try {
const working_statuses = ['queued', 'working'];
const data = await request();
} catch (e) {
// ...
}
// ...
}
You can then inject any function into this, even a mock and make sure its called the way you want without having to mock up axios. In your application you simply just inject checkWorkerStatus.
const result = await waitForWorker(checkWorkerStatus);
if (result.status === 'complete') {
workerComplete();
}
I have this problem where in, user must be redirected to respective dashboards on successful log-in. Say user has accounts in two profiles "p1" and "p2" . After Sign-In success, I am making fetch API to see if user has entries the corresponding profiles.
1)Say if a user has entries in p1, I need to redirect him to "p1" dashboard ;
2) if entries in p2, then redirect him to "p2" dashboard.
3)If no entries are present neither in p1 or p2, then redirect to configuration page where he can make some entries.
4) If in both profile, then user will be asked to select a respective dashboard
Now In my case, the code that I have written is not working as expected. Even though I have no accounts in "p2" but have accounts in "p1" its taking me to configuration page. Can someone help what is wrong in this code?
Note that fetch call just works fine! It gives me array of items. If no items present it returns an empty array
// On login
handleLogin = async () => {
// after successful signin
await Promise.all([
this.setDashboard("p1"),
this.setDashboard("p2"),
]);
this.navigateToDashboards();
};
setDashboard = async (profile) => {
let response, value;
let type = profile;
if (type === "p1") {
response = await this.fetchUserAccounts(type);
value = !!response && response.length ? true : false;
this.setState({ isP1: value });
} else {
response = await this.fetchUserAccounts(type);
value = !!response && response.length ? true : false;
this.setState({ isP2: value });
}
};
fetchUserAccounts = async (type) => {
try {
let response = await fetch({
url: "/fetch/entries",
method: "POST",
body: {
profile: type,
}
);
return response.json();
} catch (error) {
console.log(error);
}
};
navigateToDashboards = () => {
let { isP1, isP2 } = this.state;
if (isP1 && isP2) {
// CODE FOR PROMPTING WHICH DASHBOARD TO GO
} else if (!isP1 && !isP2) {
this.props.history.push("/configpage");
} else if (isP1) {
this.props.history.push("/p1dashboard");
} else if (isP2) {
this.props.history.push("/p2dashboard");
}
};
There are some issues with the code you wrote above and they probably go deeper than we can see in the snippet – why having the logic for the dashboard type on the client-side instead of having it sent from the server?
There is also cloudType that is not specified in the setDashboard method.
I do not know what you are trying to achieve so I'm guessing – you should probably use fetchUserAccounts inside componentDidMount and save the response in the state.
I've came up with something like this with one TODO: in the code:
class X extends React.Component {
constructor(props) {
super(props);
this.state = {
p1: null,
p2: null,
};
}
async componentDidMount() {
const [p1, p2] = await Promise.all([
this.fetchUserAccounts('p1'),
this.fetchUserAccounts('p1'),
]);
// NOTE: setState has a second parameter, which is a callback – this way you make sure that the state has been updated – read more here:
// https://reactjs.org/docs/react-component.html#setstate
this.setState(s => ({ ...s, p1, p2 }), this.navigateToDashboards);
}
fetchUserAccounts = async (type) => {
try {
let response = await fetch({
url: "/fetch/entries",
method: "POST",
body: {
profile: type,
},
});
return response.json();
} catch (error) {
console.log(error);
}
};
navigateToDashboards = () => {
const { history } = this.props;
const { p1, p2 } = this.state;
// TODO: Implement your logic how you decide
if (isP1 && isP2) {
// CODE FOR PROMPTING WHICH DASHBOARD TO GO
return;
}
if (isP1) return history.push('/p1dashboard');
if (isP2) return history.push('/p2dashboard');
return history.push('/configpage');
}
}
If this does not work at least have a look at the code structure. There are places where you do not require the else statement. Use the function version of the setState. Make use of object/array desctrucuring. You should also probably read about what is false and true in the JS world based on the !!response && response.length ? true : false; lines – or maybe there is something I'm missing out here.
The problem is you're using async / await wrong.
await works on promises- you give it a promise, and it waits for it to resolve / reject. If you do not give it a promise- its like passing it an immediately resolved promise.
Your setDashboard function does not reutrn a promise, so what happens is that this code:
await Promise.all([
this.setDashboard("p1"),
this.setDashboard("p2"),
]);
actually resolves immediately, but the setDashboard functions are not executed up until this.navigateToDashboards();. why? because they are defined as async, which puts them in event loop. Then comes in the await, but it immediately resolves as the functions inside does not return a promise (well, it does, because it is async, but its like writing return promise.resolve() as the first line- so the await does nothing only placing the function in event loop)- and the code continues to execute in synchronous fashion until it reaches the end of the function (e.g- executing this.navigateToDashboards();, and only then goes to event loop and execute the setDashboards functions.
On the same subject, response = await this.fetchUserAccounts(type); line also has redundant await, because fetchUserAccounts() does not return a promise.
To correctly use async / await- make sure your async function return a promise, for example:
setDashboard = async (profile) => {
return new Promise( resolve, reject => {
let response, value;
let type = profile;
if (type === "p1") {
response = await this.fetchUserAccounts(type);
value = !!response && response.length ? true : false;
this.setState({ isP1: value });
resolve();
} else {
response = await this.fetchUserAccounts(cloudType);
value = !!response && response.length ? true : false;
this.setState({ isP2: value });
resolve();
}
})
};
as for fetchUserAccount:
fetchUserAccounts = async (type) => {
return new Promise( resolve, reject => {
try {
let response = await fetch({
url: "/fetch/entries",
method: "POST",
body: {
profile: type,
}
);
resolve(response.json());
} catch (error) {
console.log(error);
reject(error);
}
}
};
Notice that you will now have to handle promise rejections using .catch, otherwise you'll get unhandled promise rejection error.
Hi I am write a unit test case of this function. When I run this function from the unit test case then it covers all statements but setInterval complete lines are not covered.
Does anyone know how to cover it in javascript? I am using mocha.
const open = async function (config) {
...... set of lines..
let retryIn = setInterval(async () => {
try {
client = await connect(config);
clearInterval(retryIn);
return client;
} catch (err) {
//error
}
}, 20000);
};
I am simply calling it like this
it("###test", async () => {
open(config);
});
});
First of all, you should never use setInterval in the case where you want to retry a task that has failed. You should use setTimeout instead.
Besides that, you cannot return a value from a classical callback base function like setInterval or setTimeout. So in its current form, the promise returned when calling open will be resolved before any connection is made.
With await/async you can create a clean and simple setup for such a situation:
function wait(seconds) {
return new Promise((resolve, _) => setTimeout(resolve, seconds))
}
async function connect() {
throw new Error('failed')
}
async function open(config) {
let client;
while (client === undefined /* || retries > maxRetries*/ ) {
try {
client = await connect(config);
} catch (err) {
// if connection failed due to an error, wait n seconds and retry
console.log('failed wait 2 seconds for reconnect');
await wait(2000)
// ++retries
}
}
if (!client) {
throw new Error('connection failed due to max number of retries reached.')
}
return client
}
async function main() {
let connection = await open()
}
main().catch(err => console.log(err))
You can further extend this snippet by adding a retry limit. See the comments for a rough idea on how that can be achieved.
To test the above code, you would write:
it("###test", function() {
return open(config);
});
Someone posted an answer about fake timers and then deleted it , The answer was correct so I re-posted again.
You can use sinonjs to create fake timers
Fake timers are synchronous implementations of setTimeout and friends
that Sinon.JS can overwrite the global functions with to allow you to
more easily test code using them
But from your code, it seems you are trying to test async code, in mocha, this can be achieved like this
describe('somthing', () => {
it('the result is 2', async () => {
const x = await add(1, 1)
expect(x).to.equal(4);
});
});
With something closer to your code
async function open() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('done')
}, 1000);
});
};
describe('somthing', () => {
it('###test', async () => {
const x = await open()
chai.expect(x).to.equal("done");
});
});
Just wrap to Promise
const open = async function (config) {
...... set of lines..
return new Promise((resolve, reject) => {
let retryIn = setInterval(async () => {
client = await connect(asConfigParam);
clearInterval(retryIn);
return client;
}, 20000);
return resolve(retryIn);
});
};
it("###test", async () => {
const result = await open(config);
console.log('result', result)
});