I'm confused about how jest works with async & timeouts.
if I throw inside a setTimeout the test gets stuck before the last console.log() and never completes. but it does log the first console.log('throwing').
however if I create a regular js file with the same code. the new Error() stops the entire script running.
what is it about just that makes it wait forever and completely ignore the thrown error.
// file.test.js
await new Promise(() => {
setTimeout((err) => {
console.log("throwing");
throw new Error(err);
});
});
console.log("finished");
Related
I have a Cypress test that has only one testing case (using v10.9 with the test GUI):
describe("Basic test", () => {
it.only("First test", () => {
cy.visit("http://localhost:9999");
cy.pause();
//if(cy.get("#importantBox").contains(...) {
//}
//else
{
Cypress.runner.stop();
console.log("Stopping...");
}
console.log("Visiting...");
cy.visit("http://localhost:9999/page1");
If a certain element doesn't exist in the page, I don't want the test to continue, so I try to stop it.
Unfortunately, I can see this in the console:
Stopping...
Visiting...
And the test keeps going without the necessary data...
So, can I somehow stop it without using huge if statements?
Stopping the test is relatively easy, the harder part is the condition check.
Cypress runner is built on the Mocha framework, which has a .skip() method. If you issue it in your else clause and inside the Cypress queue, the test will stop.
Two ways to access skip():
Using a function() callback gives access to this which is the Mocha context
it('stops on skip', function() {
...
cy.then(() => this.skip()) // stop here
})
Use cy.state() internal command (may be removed at some point)
it('stops on skip', () => {
...
cy.then(() => cy.state('test').skip()) // stop here
})
You should be aware that all Cypress commands and queries run on an internal queue which is asynchronous to javascript code in the test like console.log("Visiting..."), so you won't get any useful indication from that line.
To use synchronous javascript on the queue, wrap it in a cy.then() command as shown above with the skip() method, so to console log do
cy.then(() => console.log("Visiting..."))
I have a widget test similar to:
testWidgets('Widget test', (WidgetTester tester) async {
provideMockedNetworkImages(() async {
final widget = MyWidget();
await WidgetTestFunctions.pumpWidgetTest(
tester,
widget,
);
// ....
await tester.tap(find.byType(MyWidget));
await tester.pump(new Duration(milliseconds: 3000));
// ....
expect(widget.value, myValue);
});
});
And the following implementation of the on-tap method of the widget:
_onButtonPressed() async {
await animationController.forward();
setState(() {
// ...
// Calls method that changes the widget value.
});
}
The problem that I have is that after calling the animationController.forward() method in the test the setState portion is not executed. How should I wait for this method to finish correctly? During the app runtime, this portion of the code is called correctly.
It seems like await tester.pump(new Duration(milliseconds: 3000)); is not working correctly, the animation has a duration of 1500 milliseconds and as you can see the pump duration is double.
Instead of await tester.pump(new Duration(milliseconds: 3000));
try await tester.pumpAndSettle();
this type of pump wait for the animations end and then pump the frames.
I had the same issue, and here is what was happening.
When you do
await animationController.forward();
You are not awaiting for a simple Future<void> to complete but a TickerFuture (extends Future<void>).
For some reason, in my tests, some of the TickerFutures from the animationController.forward() weere cancelled.
In the doc of the TickerProvider, it says:
If the Ticker is disposed without being stopped, or if it is stopped with canceled set to true, then this Future will never complete.
This class works like a normal Future, but has an additional property, orCancel, which returns a derivative Future that completes with an error if the Ticker that returned the TickerFuture was stopped with canceled set to true, or if it was disposed without being stopped.
To run a callback when either this future resolves or when the ticker is canceled, use whenCompleteOrCancel.
Now, the issue with whenCompleteOrCancel is that it returns void (and not Future<void> so we cannot wait for it.
So here is what I have done (inspired by the implementation of whenCompleteOrCancel):
Future<void> thunk(dynamic value) {
return;
}
final TickerFuture ticker = animationController.forward();
await ticker.onCancel.then(thunk, onError: thunk); // <- This resolves even if the ticker is canceled and the tests are not stuck anymore.
I'm dipping my toe into the waters of Axios and async/await at the same time, and am trying to understand something about the control flow. Is the following legitimate?
let loading=true;
(async() => {
let response = null;
try {
response = await axios.get('https://whatever.com/api');
} finally {
loading=false;
}
if(response){
//do something with response here
}
})();
That is, can I count on the request to have returned at the point I am accessing the response variable? I appreciate I could guarantee it is by moving it into the 'try' immediately after the axios get, but then I would have to have the loading=false line before it, as well as in 'finally' (or 'catch'). I need to ensure that loading is set to false before any further actions, whether the request succeeds or fails, and I don't want to repeat myself. Maybe there's a better way of doing this?
Edit
Now that you have changed the question, the previous solution will not be working correctly. The issue is that the code inside the IIFE will be executed after everything else is finished, so loading will never be set to false from the perspective of the outside code. (the other code will be executed, and thеn the IIFE. That's because of the event loop). Your best bet is to make the outside code async and await the axios promise.
If you provide the problem details I might be able to help you refactor it.
Previous answer
I need to ensure that loading is set to false before any further actions
Any code after the await is guaranteed to NOT be loading:
(async() => {
let response = await axios.get('https://whatever.com/api');
// the request is finished, the await guarantees that
})();
If you need error handling, you can wrap it in a try/catch:
(async() => {
try {
let response = await axios.get('https://whatever.com/api');
// definitely not loading
}
catch (e) {
// definitely not loading, but an error occurred
}
})();
I'm new to promises, but as I understand it, .catch usually belongs at the end of a chain of promises:
promiseFunc()
.then( ... )
.then( ... )
.catch( // catch any errors along the chain )
What if the promises are split in between functions? Do I catch at the end of every function?
func1 () {
promiseFunc1()
.then((result) => {
promiseFunc2()
)
// should I .catch here?
}
func2 () {
func1()
.then((result) => {
// do stuff
})
.catch(console.log.bind(console)); // this also catches errors from func1
}
Maybe this is a symptom of another error (in which I'd love to hear if I'm doing this wrong), but when I try catching at the end of func1, I end up reaching the .then block of func2, with result = undefined. After deleting the catch in func1, it works -- but it feels wrong that func1 should expect any functions calling it to catch its errors.
.catch() works very much like try/catch. You should .catch() wherever you want or need to handle the error and either log something or change the course of the chain.
If all you want is for the promise chain to abort when an error occurs, then you can just put one .catch() at the very end of the chain and deal with the error there.
If, on the other hand, you have some sub-part of the chain that, if it has a rejection you want to do something different and allow the chain to continue or to take a different path, then you need to .catch() at that level where you want to influence things if there's an error.
All or Nothing Catch at the End
So, let's say you have four functions that all return promises.
If you do this:
a().then(b).then(c).then(d).then(finalResult => {
// final result here
}).catch(err => {
// deal with error here
});
Then, if anyone of your four promises rejects, then the rest of the chain will abort and it will skip to your one .catch(). For some operations, this is the desired behavior. If you intend to fetch some data from an external server, use that data to then fetch some other data from another external server and then write that data to disk, the whole process is pretty much all or nothing. If any of the earlier steps fails, there's nothing else you can do as the whole operation has failed, you may as well just use one .catch() at the end and report that error.
Intervening Catch to Change the Behavior Mid-Chain upon Error
On, the other hand suppose you have a situation were you want to fetch some data from an external server, but if that server is down, then you want to fetch the data from an alternate server. In that case, you want to catch the error from the first fetch and try something else. So, you'd use a .catch() on the very first step and attempt something different:
fetch1().catch(fetch2).then(b).then(c).then(finalResult => {
// final result here
}).catch(err => {
// deal with error here
});
Logging and Rethrow
When building sub-systems that others will use, it is often useful to log certain types of errors. So, even the whole promise chain might be all or nothing, you still may want to log an error earlier in the chain and then rethrow the error so that the chain continues in the rejected state:
function someFuncOthersUse() {
return a().then(b).then(c).catch(err => {
// you want your own logging any time a or b or c rejects
console.log("Error on fetchB", err);
throw err;
});
}
The caller will then be doing:
someFuncOthersUse().then(finalResult => {
// final result here
}).catch(err => {
// deal with error here
});
I've got many instability with Protractor, and I'm sure there is something I don't understand.
Sometimes I need use the .then() when clicking on a button before continuing, sometimes it don't have any impact and I should not use .then() or the test failed.
I wonder when should I use the .then() callback when testing in Protractor ?
Example :
createAccountForm = $('#form-create-account');
submitButton = createAccountForm.$('button[type=submit]');
browser.wait(EC.elementToBeClickable(submitButton), 5000);
submitButton.click(); // .then(function(){ <-- uncomment in the .then form
// find the confirmation message
var message = $('.alert-success');
browser.wait(EC.visibilityOf(message), 5000);
log.debug('After visibilityOf');
expect(message.isPresent()).to.be.eventually.true;
// }); --> uncomment when in .then form
When I use this form of test (without .then()) I see on browser that the click on the button is not done, the test continue with the following expect and then stop.
If I use the .then() form, the click on the button is done, and the test continue without error.
On other test, I don't need to use the then() callback when clicking on button.
So , when should I use the .then() and when not ?
Jean-Marc
The answer of this question can be found in this post : http://spin.atomicobject.com/2014/12/17/asynchronous-testing-protractor-angular/
That is :
Protractor enqueue all driver commands in the ControlFlow,
when you need the result of a driver command you should use .then,
when you don't need the result of a driver you can avoid .then but all
following instructions must be enqueued in the ControlFlow else they
will be run before commands in the queue leading to unpredictable
result. So, if you want to run a non driver tests command, you should add it into the .then callback or wrap the test into a Promise and enqueue the test in the ControlFlow. See example below.
Here is an example of my test working without .then :
log.debug('test0');
// enqueue the click
submitButton.click();
var message = $('.alert-success');
// enqueue the wait for message to be visible
browser.wait(EC.visibilityOf(message), 5000);
log.debug('test1');
// enqueue a test
expect(message.isPresent()).to.be.eventually.true;
log.debug('test2');
// a function returning a promise that does an async test (check in MongoDB Collection)
var testAccount = function () {
var deferred = protractor.promise.defer();
// Verify that an account has been created
accountColl.find({}).toArray(function (err, accs) {
log.debug('test5');
expect(err).to.not.exist;
log.debug('test6');
expect(accs.length).to.equal(1);
return deferred.fulfill();
});
return deferred.promise;
};
log.debug('test3');
// Enqueue the testAccount function
browser.controlFlow().execute(testAccount);
log.debug('test4');
Output is now what we expect :
test0
test1
test2
test3
test4
test5
test6
Give yourself a favor, and avoid .then
Today, async/await is a lot more appropriate for handing promises
But in nutshell, open protractor API page https://www.protractortest.org/#/api, find the method you're about to use and see what it returns. If it says promise, just add await before calling it. Make sure, to make your wrapping function async
it('test case 1', async () => {
await elem.click()
})