Protractor issue #1511

global.js

'use strict';

(function () {

  var Global = function () {

  // GETTER elements: navbar

    /**
     * @return {[ElementFinder]} [Returns the regisration button located in the navbar]
     */
    this.getNavBarRegistrationButton = function () {
      return element(by.css('.navbar #sign-up-navbar > #navbar-registration-button'));
    };

    /**
     * @return {[ElementFinder]} [Returns the login button located in the navbar]
     */
    this.getNavBarLoginButton = function () {
      return element(by.css('.navbar .vertical-middle #navbar-login-button'));
    };

  // GETTER elements: navbar:dropdown

    /**
     * @return {[ElementFinder]} [Returns the dropdown menu located in the navbar]
     */
    this.getNavBarDropDownMenu = function () {
      return element(by.css('.user-menu .dropdown-toggle'));
    };

    /**
     * @return {[ElementFinder]} [Returns the logout button located in the navbar]
     */
    this.getNavBarDropDownLogoutButton = function () {
      return element(by.css('.user-menu .dropdown-menu #logout-link'));
    };

    /**
     * @return {[ElementFinder]} [Return the text input from the landing page]
     */
    this.getLandingAlbumCodeIndex = function () {
      return element.all(by.css('input[id="input_album_code"]')).get(0);
    };

    /**
     * @return {[ElementFinder]} [Return the Enter Album button from the landing page]
     */
    this.getLandingAlbumCodeButton = function () {
      return element.all(by.css('button[id="album-code"]')).get(0);
    };


  // ACTIONS: global

    /**
     * [open Makes the browser open the @param url]
     * @param  {[String]} url [Url relative to the 'baseUrl' specified in protractor settings file and make the browser wait until the Angular page has been rendered.]
     * @return {[!webdriver.promise.Promise]}     [Promise that that the Angular page has been rendered and there's no more $http calls outstanding.]
     */
    this.open = function (url) { // url is relative not absolute!
      browser.get(url);
      return browser.waitForAngular();
    };

    /**
     * [logout using the UI.]
     * @return {[!webdriver.promise.Promise.<T>]} [Return a promise that is solved when the user is actually logged out.]
     */
    this.logout = function () {
      var self = this;
      // open the dropdown menu
      this.getNavBarDropDownMenu().click();
      browser.waitForAngular();

      // wait the dropdown opening i.e., the logout button is showed
      browser.wait(function () {
        return self.getNavBarDropDownLogoutButton().isDisplayed();
      });

      // request a logout
      this.getNavBarDropDownLogoutButton().click();

      // wait until i'm logged out i.e. i see the login button in the navbar
      return browser.wait(function () {
        return self.getNavBarLoginButton().isDisplayed();
      });
    };

    /**
     * [checkRedirection Check, within the timout time, if the url matches the targetRegex. This function should work also on non-angular windows since it uses browser.driver instead of browser, if some problem is noticed with angular apps please introduce a flag to specifiy if use broser or broswer.driver.]
     * @param  {[regex]} targetRegex [Should describe the target url.]
     * @param  {[Object]} timeout     [Timeout for the redirection.]
     * @param  {[String]} message     [Should describe what redirection we're perfoming.]
     * @return {[!webdriver.promise.Promise.<T>]}             [Returns a solved promise if the URL match with the regex]
     */
    this.checkRedirection = function (targetRegex, timeout, message) {
      return browser.driver.wait(function() {
        return browser.driver.getCurrentUrl().then(function(url) {
          return targetRegex.test(url); // look for a match of the regex /profile/ in the 'url'
        });
      }, timeout, message);
    };

    /**
     * [selectWindow Focus the browser to the index window. Implementation by http://stackoverflow.com/questions/21700162/protractor-e2e-testing-error-object-object-object-has-no-method-getwindowha]
     * @param  {[Object]} index [Is the index of the window. E.g., 0=browser, 1=FBpopup]
     * @return {[!webdriver.promise.Promise.<void>]}       [Promise resolved when the index window is focused.]
     */
    this.selectWindow = function (index) {

      // wait for handels[index] to exists
      browser.driver.wait(function() {
        return browser.driver.getAllWindowHandles().then(function (handles) {
            /**
             * Assume that handles.length >= 1 and index >=0.
             * So when i call selectWindow(index) i return
             * true if handles contains that window.
             */
            if(handles.length > index) {
              return true;
            }
          });
      });
      // here i know that the requested window exists

      // switch to the window
      return browser.driver.getAllWindowHandles().then(function (handles) {
        return browser.driver.switchTo().window(handles[index]);
      });
    };

    /**
     * [fillLandingAlbumCode Fill the simpel form in the langindpage using a public album code.]
     * @return {[!webdriver.promise.Promise.<T>]} [Promise solved when the button is enabled.]
     */
    this.fillLandingAlbumCode = function () {
      var self = this;
      var ptor = protractor.getInstance();

      this.getLandingAlbumCodeIndex().clear().sendKeys(ptor.params.testPublicAlbum.albumCode);

      return browser.wait(function () {
        return self.getLandingAlbumCodeButton().isEnabled();
      });
    };

    /**
     * [confirmAlbumCodeInsert Send to the sistem the form by clicking the button and checking for redirection. ]
     * @return {[see this.checkRedirection()]} [Promise solved when the redirection to the album url is performed.]
     */
    this.confirmAlbumCodeInsert = function() {
      this.getLandingAlbumCodeButton().click();

      return this.checkRedirection(/album/, 7000, 'Redirection to album page after Album Code insert not perfomed.');
    };

  };

  module.exports = function() {
    return new Global();
  };

}());

registration.js

'use strict';

(function () {

  var Registration = function (global) {

    // GETTER elements: modal:registration

    this.getRegistrationModal = function () {
      return element(by.css('#registrationModalView.modal'));
    };

    this.getRegistrationUserName = function () {
      return element(by.css('#registrationModalView.modal form[name="regForm"] #input_last_name'));
    };

    this.getRegistrationUserEmail = function () {
      return element(by.css('#registrationModalView.modal form[name="regForm"] #input_email'));
    };

    this.getRegistrationUserPwd = function () {
      return element(by.css('#registrationModalView.modal form[name="regForm"] #input_password'));
    };

    this.getRegistrationUserPwdConfirm = function () {
      return element(by.css('#registrationModalView.modal form[name="regForm"] #input_confirm_password'));
    };

    this.getRegistrationRegisterButton = function () {
      return element(by.css('#registrationModalView.modal #registrationModal form[name="regForm"] .modal-footer > #modal-register-button'));
    };

    this.getRegistrationCloseButton = function () {
      return element(by.css('#registrationModalView.modal #registrationModal form[name="regForm"] .modal-footer > #modal-close-button'));
    };


  // ACTIONS: registration

    /**
     * [openRegistrationModal Open the regisration modal using the navbar button]
     * @return {[!webdriver.promise.Promise.<T>]} [Promise that the regisration modal is displayed]
     */
    this.openRegistrationModal = function () {
      var self = this;
      // open the regisration modal
      global.getNavBarRegistrationButton().click();
      browser.waitForAngular();

      // wait for the modal to be displayed
      return browser.wait(function () {
        return self.getRegistrationModal().isDisplayed();
      });
    };

    /**
     * [fillSignUpForm Fill the signup form with the provided parameters.]
     * @param  {[String]} name       []
     * @param  {[String]} email      []
     * @param  {[String]} pwd        []
     * @param  {[String]} pwdConfirm []
     * @return {[!webdriver.promise.Promise.<T>]}            [Promise solved when the register button is enablead, i.e., when the form is correctly fulfilled (according angular logic)]
     */
    this.fillSignUpForm = function (name, email, pwd, pwdConfirm) {
      var self = this;

      // fill form
      this.getRegistrationUserName().clear().sendKeys(name);
      this.getRegistrationUserEmail().clear().sendKeys(email);
      this.getRegistrationUserPwd().clear().sendKeys(pwd);
      this.getRegistrationUserPwdConfirm().clear().sendKeys(pwdConfirm);

      // when the register button is enablead means that form is fulfilled
      return browser.wait(function () {
        return self.getRegistrationRegisterButton().isEnabled();
      });
    };

    /**
     * [confirmRegistration Confirm the registration sending the form to the system.]
     * @return {[look global.checkRedirection()]} [Promise solved when the registration has been completed]
     */
    this.confirmRegistration = function () {
      this.getRegistrationRegisterButton().click();

      return global.checkRedirection(/profile/, 7000, 'redirection after regisration not performed');
    };

  };

  module.exports = function(global) {
    return new Registration(global);
  };

}());

registration.spec.js

'use strict';

var Global = require('./page_object/global.js');
var Registration = require('./page_object/registration.js');

describe('Registration', function(){

  // '@test.com' domain emails will be deleted by a script
  var rndEmail = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 13).concat('@test.com');
  var global = Global();
  var registration = Registration(global);

  afterEach(function () {
    browser.executeScript('window.sessionStorage.clear();');
    browser.executeScript('window.localStorage.clear();');
  });

  it('correct form signup', function () {
    global.open('/view');

    expect(global.getNavBarRegistrationButton().isDisplayed()).toBeTruthy();
    registration.openRegistrationModal();

    expect(registration.getRegistrationModal().isDisplayed()).toBeTruthy();
    registration.fillSignUpForm('soLongQuiteUncommon', rndEmail, 'a', 'a');

    expect(registration.getRegistrationRegisterButton().isEnabled).toBeTruthy();
    registration.confirmRegistration();

    expect(global.getNavBarDropDownMenu().isDisplayed()).toBeTruthy();
    global.logout();
  });

});