Protractor: How to properly wait after a click?

Question

I am using Protractor for e2e testing. The tests should first enter too short username and passwords and because of Angular validators when clicked on a submit button (which is disabled) get rejected and stay put (this works!), then it should enter an username of correct length with also a password of a correct length, click on the submit button and NOT get redirected, because it's a false login. This fails... The last test requires to input correct login details and click on submit and should get redirected to the dashboard. According to this answer https://stackoverflow.com/a/21785088/12360035 is all it would take to solve my problem that seems to throw the

- Failed: script timeout
    (Session info: chrome=79.0.3945.130)
    (Driver info: chromedriver=79.0.3945.16 (93fcc21110c10dbbd49bbff8f472335360e31d05-refs/branch-heads/3945@{#262}),platform=Windows NT 10.0.18362 x86_64)```

error for both of my tests. How do I fix this? My tests are written this way:

it('should enter too short username and password and NOT get redirected => stay put', () => {
   element(by.css('#inputUser')).sendKeys('bah');
   element(by.css('#inputPassword')).sendKeys('bah');
   const btn = element(by.css('#loginSubmit'));
   btn.click();
   const curUrl = browser.getCurrentUrl();
   expect(curUrl).toBe('http://localhost:4200/avior/login');
 });

  it('should enter incorrect username and password and NOT get redirected => stay put', () => {
    const ele1 = element(by.css('#inputUser'));
    const ele2 = element(by.css('#inputPassword'));
    const btn = element(by.css('#loginSubmit'));
    ele1.clear();
    ele2.clear();
    ele1.sendKeys('bah');
    ele2.sendKeys('bahbahbah');
    btn.click();
    browser.waitForAngular();
    const curUrl = browser.getCurrentUrl();
    expect(curUrl).toBe('http://localhost:4200/avior/login');
  });

  it('should enter correct username and password and get redirected to /avior/dashboard', () => {
    const ele1 = element(by.css('#inputUser'));
    const ele2 = element(by.css('#inputPassword'));
    const btn = element(by.css('#loginSubmit'));
    ele1.clear();
    ele2.clear();
    ele1.sendKeys('Chad');
    ele2.sendKeys('chadchad');
    btn.click();
    browser.waitForAngular();
    const curUrl = browser.getCurrentUrl();
    expect(curUrl).toBe('http://localhost:4200/avior/dashboard');
  });

UPDATE A jwt token is sent as a cookie in response, that might be part of the problem. I can't seem to find info online on how to handle cookies with Protractor..

Answer 1

Waits in Protractor

Wait for the element to Present

this.waitForElementPresent = function (element) {
    return browser.wait(() => (element.isPresent()), 30000);
}

Wait for the element to Display

 this.waitForElementDisplayed = function (element) {
    return browser.wait(() => (element.isDisplayed()), 30000);
}

Sleep Condition

this.sleep = function (sec) {
    browser.sleep(sec * 1000);
}

Expected Conditions

this.waitForElementVisibility = function () {
    let EC = ExpectedConditions;
    return browser.wait(EC.visibilityOf(), 30000);
}