Protractor not passing my tests without the done() method - angularjs

Question

I am actually finishing the unit tests of my Angular app. I am currently working on E2E tests using Protractor and Jasmine. Unfortunately, I have the following problem:
I did loads of research online such as http://ramonvictor.github.io/protractor/slides/#/1 and I clearly never see the use of the "done" callback to launch tests.
This first test goes on the createUser page and makes sure that the user tab attribute is set to active. It passes ONLY if I use the done method, which I should not use.
'use strict';
var UserCreate = require('./page-objects/userCreate.pageObjects');
describe('on init', function () {
beforeEach(function() {
var rootUrl = browser.baseUrl + '/#/users/create';
browser.driver.get(rootUrl);
});
it('should set the user tab active', function(done) { // DONE callback
UserCreate.tabs.getAttribute('class').then(function(value) {
expect(value).toEqual('active');
done(); // calling callback
});
});
});
If I repeat the same test without using done(), the test passes even if this time, I want it to fail.
'use strict';
var UserCreate = require('./page-objects/userCreate.pageObjects');
describe('on init', function () {
beforeEach(function() {
var rootUrl = browser.baseUrl + '/#/users/create';
browser.driver.get(rootUrl);
});
it('should set the user tab active', function() {
UserCreate.tabs.getAttribute('class').then(function(value) {
expect(value).toEqual('activeWRONG');
});
});
});
It only fails if I use the done callback.
Here is my config file:
/* conf.js */
' use strict';
exports.config = {
rootElement: '#myApp',
directConnect: true,
seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {
browserName: 'chrome',
shardTestFiles: true,
maxInstances: 1
},
framework: 'jasmine',
// specs: ['./*.spec.js'],
baseUrl: 'http://localhost:9001',
defaultTimeoutInterval: 0000,
jasmineNodeOpts: {
showColors: true,
},
suites: {
wip: './userCreate.spec.js',
all: './*spec.js'
},
onPrepare: function() {
browser.driver.get('http://localhost:9001/#/');
element(by.id('ld-link-login')).click();
browser.sleep(500);
element(by.model('username')).sendKeys('test');
element(by.model('password')).sendKeys('test');
element(by.id('nv-login-submit')).click();
return browser.driver.wait(function() {
return browser.driver.getCurrentUrl().then(function(url) {
return /dashboard/.test(url);
});
}, 10000);
}
};
I am having asynchronous problems in deeper tests with the use of done everywhere, so I want to fix this before continuing my tests.
Thank you for your help.
Edit:
Protractor version: ./node_modules/.bin/protractor --version gives Version 3.2.2
userCreate.pageObjects :
'use strict';
module.exports = {
tabs: element(by.id('cc-tab-user'))
};

Answer 1

That's the expected behaviour. If you don't ask for the done() function, jasmine will consider your test as synchronous and finish without waiting for the promise to be resolved.
When you ask for it, your test became asynchronous, and will fail if done() hasn't been called before the timeout ( 5 seconds by default)
See: http://jasmine.github.io/2.0/introduction.html#section-Asynchronous_Support for more info.

Answer 2

You have a problem in the way you are defining the Page Object leading into the problem with the promise resolution order. Follow the style guide and change it to:
var UserCreatePage = function() {
this.tabs = element(by.id('cc-tab-user'));
};
module.exports = UserCreatePage;
Usage:
'use strict';
var UserCreatePage = require('./page-objects/userCreate.pageObjects');
describe('on init', function () {
var userCreatePage;
beforeEach(function() {
var rootUrl = browser.baseUrl + '/#/users/create';
browser.driver.get(rootUrl);
userCreatePage = new UserCreatePage();
});
it('should set the user tab active', function() {
userCreatePage.tabs.getAttribute('class').then(function(value) {
expect(value).toEqual('activeWRONG');
});
});
});

Answer 3

This behavior can happen if your test creates a parallel TaskQueue in your test's Control Flow. For what done() is for and how to use it ( protractor, jasmine) I wrote a few examples of tests giving inconsistent results because of this.
To figure out if this is your problem, you can print out the control flow at various points in your test:
console.log(protractor.promise.controlFlow().getSchedule(false));

Answer 4

Your issue is, that you use the then() to pass value towards your expect-statement.
then() creates a new async-task, which is dropped as subtask. As result of this, your it first finishes with result = success and then your expect-statement gets executed.
It's documented in the Promise/ControlFlow documentation of Selenium.
As expect() already unwraps/resolves a promise, there is no need for then() in your case.
With your done it works, because you take control of the execution and prevent it to continue/finish before your then() is finished.
Try this:
'use strict';
var UserCreate = require('./page-objects/userCreate.pageObjects');
describe('on init', function () {
beforeEach(function() {
var rootUrl = browser.baseUrl + '/#/users/create';
browser.driver.get(rootUrl);
});
it('should set the user tab active', function() {
expect(UserCreate.tabs.getAttribute('class')).toEqual('activeWRONG');
});
});

Answer 5

It is because of the control flow which is not running properly in your code . The control flow is based on the concept of tasks and task queues. Tasks are functions that define the basic unit of work for the control flow to execute. Each task is scheduled via ControlFlow#execute(), which will return a ManagedPromise that will be resolved with the task's result.
The following should work.
let UserCreate = require('./pageobject.page.js');
describe('should navigate to url', function () {
beforeEach(function() {
url = `${browser.baseUrl}/#/users/create`;
browser.driver.get(url);
});
it('should set the user tab active', function() {
expect(UserCreate.tabs.getAttribute('class')).toEqual('activeWRONG');
});
});