AngularJS testing using Protractor- how to close a

I am developing a suite of automated tests for one of my company's software products. The software has been written using AngularJS, and I am using Protractor to develop the tests.

I am currently writing a set of tests for the navigation of the application, and have number of tests implemented which all pass/ fail correctly depending on the criteria.

However, I am currently working on writing a test for navigating to one particular page of the application, (Charts), but when you first browse to this page, a dialog is automatically opened to allow the user to create a new chart/ configure an existing chart. As a user, I would normally just press 'Cancel' on this dialog in order to close it, and continue to the page.

The issue I'm having is trying to replicate the clicking of the 'Cancel' button for the dialog as part of the automated test script.

All of the tests I have written are currently in the same file, and so they run one after the other, for example:

/*Test that 'Alarms' menu item works correctly */
it('should navigate to the Alarms page', function() {
    console.log("Start Alarms page test");
    browser.waitForAngularEnabled(false);
    browser.actions().mouseMove(alarmsMenuBtn).perform();
    alarmsMenuBtn.click();
    console.log("End Alarms page test");
    expect(browser.getCurrentUrl()).toBe('http://192.168.1.212:8080/#/alarms');
});

/*Test that 'Charts' menu item works correctly */
it('should navigate to the Charts page', function() {
    console.log("Start Charts page test");
    var EC = protractor.ExpectedConditions;
    var chartConfigForm = element(by.id('chartConfigForm'));
    browser.waitForAngularEnabled(false);
    browser.actions().mouseMove(chartsMenuBtn).perform();
    chartsMenuBtn.click();
    browser.waitForAngularEnabled(true);
    browser.wait(EC.visibilityOf($('#chartConfigForm')), 10000)
    browser.call(closeDlg);
    console.log("End Charts page test");
    expect(browser.getCurrentUrl()).toBe('http://192.168.1.212:8080/#/charts');
});

/*Test that 'Export' menu item works correctly */
it('should navigate to the Export page', function() {
    browser.waitForAngularEnabled(false);
    browser.actions().mouseMove(exportMenuBtn).perform();
    exportMenuBtn.click();
    expect(browser.getCurrentUrl()).toBe('http://192.168.1.212:8080/#/export');
});

The test that I'm having trouble with is the middle one of the three above.

When I run the test from the command line, as I step through the script, I eventually get the following output:

-- Next command: mouseMoveTo

-- Next command: executeScript

-- Next command: isElementDisplayed

.Start Alarms page test

End Alarms page test

-- Next command: findElements

-- Next command: mouseMoveTo

-- Next command: findElements

-- Next command: clickElement

-- Next command: getCurrentUrl

.Start Charts page test

End Charts page test

-- Next command: findElements

-- Next command: mouseMoveTo

-- Next command: findElements

-- Next command: clickElement

-- Next command: executeAsyncScript

-- Next command: executeScript

-- Next command: executeScript

FA Jasmine spec timed out. Resetting the WebDriver Control Flow.

-- Next command: findElements

-- Next command: mouseMoveTo

-- Next command: findElements

Within the test, I have a call to a function I have written specifically to close the dialog that appears on that page, and have added a browser.wait(...) before it to ensure that the dialog has had time to load before I try to close it:

browser.wait(EC.visibilityOf($('#chartConfigForm')), 10000)
browser.call(closeDlg);

The closeDlg() function is defined with:

function closeDlg(){
    console.log("closeDlg() function called ")
    var EC = protractor.ExpectedConditions;
    var chartConfigForm = element(by.id('chartConfigForm'));
    browser.wait(EC.visibilityOf($('#chartConfigForm')), 10000)
    var closeDlgBtn = element.driver(by.id('editGraphCancelBtn'));

    browser.waitForAngularEnabled(true);
    console.log(closeDlgBtn.click());
}

I added the call to browser.wait(...) within this function, to ensure that the dialog had had time to load before I tried to close it, but for some reason, my console shows a message stating that a Jasmine spec has timed out, and the browser in which the tests are being run gets stuck on the 'Charts' page with the dialog open (none of the other tests can run, as the other page elements won't be accessible until the dialog is closed).

How can I ensure that my test script actually gets hold of the dialog's 'Cancel' button, and clicks it?

Edit

I have just noticed that the console where I ran webdriver-manager start is showing that an error has been thrown when my closeDlg() function is called by this test:

In the console where I ran protractor conf.js to start running my test scripts, when I see the debug:

closeDlg() function called

the console where I ran webdriver-manager start (separate console) shows quite a long error message and stack trace, part of which says:

throw new Error('You appear to be using angular, but window. 'getAngularTestability was never set. This may be due to bad obfuscation. else throw new error('Cannot get testability API for unknown angular '

It appears that this issue is possibly something to do with Angular/ Protractor synchronisation...? How would I resolve this issue?

You can already disable dialog animations while running your tests.

In protractor.conf.js :

exports.config = {
 onPrepare: function() {
  browser.addMockModule('disableModalAnimations', function() {
   angular.module('disableModalAnimations',
   []).config(['$uibModalProvider', function($uibModalProvider) {
    $uibModalProvider.options.animation = false;
  }]);
 }
}

This will avoid you to browser.wait(...)