I'm setting up protractor for our web app, and all works fine, except one thing: When someone clicks the "login" button, while the HTTP request is running, the button should have class "loading". However, when I try to test this, protractor waits for the HTTP request to finish before it runs the expectation, which then fails, because the loading class is removed again.
How can I assert that the loading class is added?
describe('Authorization', function() {
it('the site loads', () => {
browser.get('/');
expect(browser.getCurrentUrl()).toBe('http://localhost:8000/#/login');
element(by.model('vm.credentials.username')).sendKeys('username');
element(by.model('vm.credentials.password')).sendKeys('password');
element(by.css('#sign-in')).click();
expect(element(by.css('#sign-in')).getAttribute('class')).toMatch(/\bloading\b/);
});
});
I think I found the solution.
The element() function waits for angular to settle in, but browser.driver.findElement() doesn't. So by changing the assertion line to
expect(browser.driver.findElement(by.css('#sign-in')).getAttribute('class')).toMatch(/\bloading\b/);
the tests now pass
As per your problem, protractor is executing your expect statement along with click() function. Protractor is async and fast so it executes everything that it can and then waits for promise/callback to be returned. Try waiting for the click to happen first and then try to assert the class. Here's how you can do it -
element(by.css('#sign-in')).click().then(function(){
expect(element(by.css('#sign-in')).getAttribute('class')).toMatch(/\bloading\b/);
});
Also if the http request is blocking your execution, then try to wait for the element to be displayed. If the element is displayed then it's as good as your element is verified.
browser.wait(protractor.ExpectedConditions.visibilityOf($('.loading')), 10000)
.then(function(){
expect(true).toBe(true);
});
Hope this helps.
Related
I have an application using React and axios, and I want to this the following behvior:
Fill a form
submit form
Success message shows
Fill the form again
submit form
While the request is made, the success message should not be showing**
request finish, success message shows again
**the problem is to test this step (6)
I'm using axios-mock-adapter to mock axios. I tried the following approach:
axiosMock
.onPost('/api/auth/alteracaoSenha').replyOnce(204)
.onPost('/api/auth/alteracaoSenha').replyOnce(() => {
expect(screen.queryByText('Success message')).not.toBeInTheDocument()
return [204]
})
When I try this, it works fine. But, if I remove the code that reset the success message to see if the test broke, the test continues to pass.
What I found is that the expect throws an error, but the axios mock catch this error and just return it to the API :/ So the expect line that should file, did not break the test.
Is there any other option to do that test?
I do prevent a page reload in my web application by the following function:
window.onbeforeunload = (event) => {
const e = event || window.event;
// Cancel the event
e.preventDefault();
save_user_data_to_indexed_db();
if (e) {
e.returnValue = ''; // Legacy method for cross browser support
}
return ''; // Legacy method for cross browser support
};
However, the save_user_data_to_indexed_db() function is not being executed during the "Reload site?" message. I thought that if I could execute my function during the displayed message, I could maybe automatically answer the same dialog programmatically and let the browser continue reloading the page.
Is there a way to make the browser wait for this kind of operation?
Generally, there is no way to make the browser wait. What I often do in this case is write the data to an intermediate place, such as localStorage, synchronously, and then asynchronously copy that data over to indexedDB later on when there is time, such as when the page is next loaded again, or from within a service worker.
I am having problems with the event handler in my office addin . Below is an example code i got from microsoft website to explain what i mean.
I have a manifest file that uses the on-send hook as well as a click-based event triggering.
My button calls appendMessageBodyOnClick and onsend i call appendMessageBodyOnSend. Both function primarily do the same thing. I never want to block sending emails regardless.
The problem is that the event object is not properly cleaned up i think.
Scenario 1
When i click my button ; which calls event.completed(), and then after i try to send the message, it says my app is blocking the message, but then when i try to send again it goes through.
Scenario 2
When i leave the subject empty and then send the message, as expected i am prompted that the subject is empty. If i cancel sending the message on this note and then click on my button, the message tries to send as though i clicked send.
I am supposing the is some sort or state clean up issue. What am i doing wrong here?
Function-File.js
function appendMessageBodyOnClick(event) {
// Append string to message body
event.completed();
}
// In the following example, the checkMessage function has
// been registered as an event handler for ItemSend.
function appendMessageBodyOnSend(event) {
// Append string to message body
event.completed({allowEvent = true});
}
Not sure if this will help, but I also have faced some seemingly inconsistent behavior while understanding how to signal that event is fully completed. Once I got my edge cases fixed, then it worked.
One suggestion: Appending string to message body should be an async function. Call the event.completed() from inside the callback function. (i.e: make sure when you are calling event.completed(), nothing else is pending -like another async result)
Something like the following:
Office.context.mailbox.item.body.setAsync("new body", function(asyncResult) {
// handle success and failure
event.completed()
});
Same would be for your scenario 2, make sure event.completed() is called at the very end.
I'm starting for the first time in Acceptance testing my Ember application.
So I started from login with this:
test/acceptance/login-test.js:
import { test } from "qunit";
import moduleForAcceptance from "myapp/tests/helpers/module-for-acceptance";
moduleForAcceptance("Acceptance | login");
test("Should login", function(assert) {
visit("/login");
fillIn("input[type=email]", "user#email.com");
fillIn("input[type=password]", "userpass");
click("button[type=submit]");
andThen(() => {
assert.equal(currentURL(), "/");
assert.equal(find("h1").text(), "Hello!");
});
});
It never goes in andThen(), so it hangs on click("button[type=submit]");.
I understand why.
In my app/templates/index.hbs I have a component notifications which rely on a websocket which is constantly in pending in my single page application (if I open Chrome there is a pending websocket call...).
If I remove this component from my index.hbs everything works as expected.
After the login I should tell to andThen() helper to ignore the pending state of that service('notifications') which is constantly in pending state?
How to do?
For me I was facing this because of one polling method I used which was calling my server in few seconds to fetch something. What I did was disable that code when running in test mode
if(!Ember.testing){
//polling
}
AndThen() basically waits for all your promises to resolved before it executes.
I have a protractor test that expects a certain panel to be NOT PRESENT after login. My code is below, but every time it is executed, protractor hangs and then fails later on.
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
it('The team overlay page should not be present when another user logs in.', function() {
loginPage.login(user.username, user.password);
expect(element(by.css('div.panel#myPanel')).isPresent()).toBe(false);
});
I also tried using .count() but it also does the same thing. Same error as above.
expect(element.all(by.css('div.panel#myPanel')).count()).toBe(0);
You could try waiting for the element by allowing the browser to fully load with some of the following:
browser.driver.sleep(time in milliseconds)
browser.waitForAngular()
You could increase the timeout interval:
jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
Otherwise:
Make sure your locator via css is working correctly (i.e, test it when the panel should be present), and make sure the webpage you are trying to access supports Angular. My bet is there is something incorrect with the format of your locator, as I don't see what else could be an issue.