ngpo-ui-select

Create page objects with helper functions for AngularJs Protractor tests for angular-ui ui-select using ngpo.

• makeUiSelectPo returns a protractor element that has these methods (all other Protractor methods are available and not impacted)
  • enterValue
  • getValue
  • clear
  • isVisible - true if both isPresent and isDisplayed
• makeUiSelectMultiPo returns a protractor element that has these methods (all other Protractor methods are available and not impacted)
  • enterValue
  • getValue - Gets string with all values; suggest expect(...).toContain();
  • clear
  • isVisible - true if both isPresent and isDisplayed
• makePos passthrough for ngpo makePos function

ngpo-ui-select v2.x: requires nodejs 6.x or greater (no breaking api changes from ngpo-ui-select v1.x). Tested with angularJs 1.5.0, angular-ui-select 0.19, Protractor 5.1.2, chromedriver 2.31.

ngpo-ui-select v1.x: Tested with Protractor versions 2.5 and 5.1.

Examples

Page Object file using ngpo template

// person.po.js
var ngpoUis = require('ngpo-ui-select'); 

var els = {
  personInput: {
    locator: by.model('person.selected'),
    po: ngpoUiSelect.makeUiSelectPo},
  colorsInput: {
    locator: by.model('multipleDemo.colors'),
    po: ngpoUiSelect.makeUiSelectMultiPo}    
};

var pos = ngpoUis.makePos(els); 

module.exports = pos; 

Protractor test:

var personPo = require('person.po.js');

describe('person', function() {

    it('should allow name to be selected and cleared', function() {
      browser.get('/');

      testPo.personInput.enterValue('Amalie'); 
      expect(testPo.personInput.getValue()).toBe('Amalie'); 

      testPo.personInput.clear(); 
      expect(testPo.personInput.getValue()).toBe(''); 

    });

    it('should colors (multiple) to be selected and cleared', function() {

      testPo.colorsInput.enterValue('Red');
      // getValue() on makeUiSelectMultiPo returns a string with all values
      expect(testPo.colorsInput.getValue()).toContain('Red'); 

      testPo.colorsInput.enterValue('Green'); 
      expect(testPo.colorsInput.getValue()).toContain('Red'); 
      expect(testPo.colorsInput.getValue()).toContain('Green'); 

      testPo.colorsInput.clear(); 
      expect(testPo.colorsInput.getValue()).toBe(''); 

    });

});

See test\test.js and test\test.po.js for more examples.