tests(typehead): fixed e2e tests for typehead.

demo/e2e/selectors.json.ts

 import {$} from 'protractor'
 
 export let tooltipEl = {
-  'buttonSimpleDemo': $(`demo-tooltip-basic>.btn.btn-primary`),
-  'tooltipElement': $(`bs-tooltip-container`),
+  'buttonSimpleDemo': $('demo-tooltip-basic>.btn.btn-primary'),
+  'tooltipElement': $('bs-tooltip-container'),
   'buttonFourDirectionsLeft': $('demo-tooltip-four-directions>button:nth-of-type(1)'),
   'buttonFourDirectionsTop': $('demo-tooltip-four-directions>button:nth-of-type(2)'),
   'buttonFourDirectionsBottom': $('demo-tooltip-four-directions>button:nth-of-type(3)'),
@@ -19,3 +19,23 @@ export let tooltipEl = {
   'buttonManualTriggeringHide': $('demo-tooltip-triggers-manual>button:nth-of-type(2)'),
   'buttonComponentLevelStyling': $('demo-tooltip-styling-local>button')
 };
+export let typeheadEl = {
+  'usageLink': $('.item>ul>li:nth-of-type(3)>a'),
+  'inputStatic': $('.section.bd-example>demo-typeahead-static>input'),
+  'modelStatic': $('.section.bd-example>demo-typeahead-static>pre:nth-of-type(1)'),
+  'inputTemplate': $('demo-typeahead-item-template>input'),
+  'modelTemplate': $('demo-typeahead-item-template>pre:nth-of-type(1)'),
+  'inputOption': $('demo-typeahead-field>input'),
+  'modelOption': $('demo-typeahead-field>pre:nth-of-type(1)'),
+  'inputAsynchronous': $('demo-typeahead-async>input'),
+  'modelAsynchronous': $('demo-typeahead-async>pre:nth-of-type(1)'),
+  'inputReactiveForms': $('input[formcontrolname="state"]'),
+  'modelReactiveForms': $('demo-typeahead-forms>pre:nth-of-type(1)'),
+  'inputGroupingResults': $('demo-typeahead-grouping>input'),
+  'modelGroupingResults': $('demo-typeahead-grouping>pre:nth-of-type(1)'),
+  'staticArrayAlabama': $('.dropdown-menu>li:nth-child(1)'),
+  'errorMessageNoResultsFound': $('.section.bd-example>demo-typeahead-async>div'),
+  'dropdownMenu': $('.dropdown-menu'),
+  'dropdownHeader': $('.dropdown-header')
+
+};

demo/e2e/tests/typeahead-demo.e2e-spec.ts

-import { $, browser } from 'protractor';
-import { leftPanelTests } from './leftPanelTests.po';
-import { DataProvider } from '../data-provider/data-provider.po';
+import {browser, $} from 'protractor';
+import {typeheadEl} from '../selectors.json';
+import {leftPanelTests} from './leftPanelTests.po';
+import {DataProvider} from '../data-provider/data-provider.po';
 
 let using = require('jasmine-data-provider');
 
-const inputStatic = $('.container-fluid>input:nth-of-type(1)');
-const inputCustom = $('.container-fluid>input:nth-of-type(2)');
-const inputAsynchronous = $('.container-fluid>input:nth-of-type(3)');
-const inputTypeahead = $('.container-fluid>form>input');
-const inputGrouped = $('.container-fluid>input:nth-of-type(4)');
-const modalStatic = $('.container-fluid>pre:nth-of-type(1)');
-const modalCustom = $('.container-fluid>pre:nth-of-type(2)');
-const modalAsynchronous = $('.container-fluid>pre:nth-of-type(3)');
-const modalTypeahead = $('.container-fluid>pre:nth-of-type(4)');
-const modalGrouped = $('.container-fluid>pre:nth-of-type(5)');
-
-function getItemNumberInDropdown (itemNumber:any):any {
-  return $('typeahead-container li:nth-child('+ itemNumber + ')');
+function getItemNumberInDropdown(itemNumber: any): any {
+  return $('typeahead-container li:nth-child(' + itemNumber + ')>a');
 }
-function clearInputFields():any {
-  inputStatic.clear();
-  inputCustom.clear();
-  inputAsynchronous.clear();
-  inputTypeahead.clear();
-  inputGrouped.clear();
+
+function clearInputFields(): any {
+  typeheadEl.inputStatic.clear();
+  typeheadEl.inputTemplate.clear();
+  typeheadEl.inputOption.clear();
+  typeheadEl.inputAsynchronous.clear();
+  typeheadEl.inputReactiveForms.clear();
+  typeheadEl.inputGroupingResults.clear();
 }
 
 describe('Typeahead page tests on bootstrap 3', () => {
@@ -31,59 +23,102 @@ describe('Typeahead page tests on bootstrap 3', () => {
     browser.get('#/typeahead');
     leftPanelTests.checkLeftPanelMini();
     leftPanelTests.checkLeftPanelMaxi();
+    browser.ignoreSynchronization = false;
   });
-  using (DataProvider.typeaheadDefaultTexts, (data:any, description:string) => {
-    it ('Check default texts: ' + description, () => {
-      expect(data.element().getText()).toBe(data.actualResult);
+
+  using(DataProvider.typeaheadDefaultTexts, (data: any, description: string) => {
+    it('Check default texts: ' + description, () => {
+      expect(data.element().getText()).toContain(data.actualResult);
     });
   });
-  using (DataProvider.inputDifferentData, (data:any, description:string) => {
-    it ('Check input fields with different data: ' + description, () => {
+
+  using(DataProvider.inputDifferentData, (data: any, description: string) => {
+    it('Check input fields with different data: ' + description, () => {
       clearInputFields();
-      inputStatic.sendKeys(data.inputText);
-      expect(modalStatic.getText()).toBe('Model: ' + '"' + data.inputText + '"');
-      inputCustom.sendKeys(data.inputText);
-      expect(modalCustom.getText()).toBe('Model: ' + '"' + data.inputText + '"');
-      inputAsynchronous.sendKeys(data.inputText);
-      expect(modalAsynchronous.getText()).toBe('Model: ' + '"' + data.inputText + '"');
-      inputTypeahead.sendKeys(data.inputText);
-      expect(modalTypeahead.getText()).toBe('Model: ' + '"' + data.inputText + '"');
-      inputGrouped.sendKeys(data.inputText);
-      expect(modalGrouped.getText()).toBe('Model: ' + '"' + data.inputText + '"');
+      typeheadEl.inputStatic.sendKeys(data.inputText);
+      expect(typeheadEl.modelStatic.getText()).toBe('Model: ' + '"' + data.inputText + '"');
+
+      typeheadEl.inputTemplate.sendKeys(data.inputText);
+      expect(typeheadEl.modelTemplate.getText()).toBe('Model: ' + '"' + data.inputText + '"');
+
+      typeheadEl.inputOption.sendKeys(data.inputText);
+      expect(typeheadEl.modelOption.getText()).toBe('Model: ' + '"' + data.inputText + '"');
+
+      typeheadEl.inputAsynchronous.sendKeys(data.inputText);
+      expect(typeheadEl.modelAsynchronous.getText()).toBe('Model: ' + '"' + data.inputText + '"');
+
+      typeheadEl.inputReactiveForms.sendKeys(data.inputText);
+      expect(typeheadEl.modelReactiveForms.getText()).toBe('Model: ' + '"' + data.inputText + '"');
+
+      typeheadEl.inputGroupingResults.sendKeys(data.inputText);
+      expect(typeheadEl.modelGroupingResults.getText()).toBe('Model: ' + '"' + data.inputText + '"');
     });
   });
-  using (DataProvider.typeaheadInputCityTexts, (data:any, description:string) => {
-    it ('Check items from dropdown: ' + description, () => {
+
+  using(DataProvider.typeaheadInputCityTexts, (data: any, description: string) => {
+    it('Check items from dropdown: ' + description, () => {
       clearInputFields();
-      inputStatic.sendKeys(data.inputText);
+      typeheadEl.inputStatic.sendKeys(data.inputText);
       getItemNumberInDropdown(1).click();
-      expect(modalStatic.getText()).toBe('Model: ' + '"' + data.expectedResult + '"');
-      inputCustom.sendKeys(data.inputText);
+      expect(typeheadEl.modelStatic.getText()).toBe('Model: ' + '"' + data.expectedResult + '"');
+
+      typeheadEl.inputTemplate.sendKeys(data.inputText);
       getItemNumberInDropdown(1).click();
-      expect(modalCustom.getText()).toBe('Model: ' + '"' + data.expectedResult + '"');
-      inputAsynchronous.sendKeys(data.inputText);
+      expect(typeheadEl.modelTemplate.getText()).toBe('Model: ' + '"' + data.expectedResult + '"');
+
+      typeheadEl.inputOption.sendKeys(data.inputText);
       getItemNumberInDropdown(1).click();
-      expect(modalAsynchronous.getText()).toBe('Model: ' + '"' + data.expectedResult + '"');
-      inputTypeahead.sendKeys(data.inputText);
+      expect(typeheadEl.modelOption.getText()).toBe('Model: ' + '"' + data.expectedResult + '"');
+
+      typeheadEl.inputAsynchronous.sendKeys(data.inputText);
       getItemNumberInDropdown(1).click();
-      expect(modalTypeahead.getText()).toBe('Model: ' + '"' + data.expectedResult + '"');
+      expect(typeheadEl.modelAsynchronous.getText()).toBe('Model: ' + '"' + data.expectedResult + '"');
+
+      typeheadEl.inputReactiveForms.sendKeys(data.inputText);
+      getItemNumberInDropdown(1).click();
+      expect(typeheadEl.modelReactiveForms.getText()).toBe('Model: ' + '"' + data.expectedResult + '"');
+
+      typeheadEl.inputGroupingResults.sendKeys(data.inputText);
+      getItemNumberInDropdown(2).click();
+      expect(typeheadEl.modelGroupingResults.getText()).toBe('Model: ' + '"' + data.expectedResult + '"');
     });
   });
-  it ('Check items in Grouped results', () => {
-    inputGrouped.clear();
-    inputGrouped.sendKeys('a');
-    $('.dropdown-menu>li:nth-child(2)').click();
-    expect(modalGrouped.getText()).toContain('Alabama');
+
+  it('Check items in Static array', () => {
+    typeheadEl.inputStatic.clear();
+    typeheadEl.inputStatic.sendKeys('a');
+    typeheadEl.staticArrayAlabama.click();
+    expect(typeheadEl.modelStatic.getText()).toContain('Alabama');
+  });
+
+  it('Check items in Item template', () => {
+    typeheadEl.inputTemplate.clear();
+    typeheadEl.inputTemplate.sendKeys('a');
+    typeheadEl.staticArrayAlabama.click();
+    expect(typeheadEl.modelStatic.getText()).toContain('Alabama');
+  });
+
+  it('Check items in Option field', () => {
+    typeheadEl.inputOption.clear();
+    typeheadEl.inputOption.sendKeys('a');
+    typeheadEl.staticArrayAlabama.click();
+    expect(typeheadEl.modelOption.getText()).toContain('Alabama');
+  });
+
+  it('Check unfounded item in Async data results', () => {
+    typeheadEl.inputAsynchronous.clear();
+    typeheadEl.inputAsynchronous.sendKeys('1');
+    expect(typeheadEl.errorMessageNoResultsFound.getText()).toContain('No Results Found');
   });
-  it ('Check unfounded iten in Asynchronous results ', () => {
-    inputAsynchronous.clear();
-    inputAsynchronous.sendKeys('123');
-    expect($('.container-fluid>div').getText()).toContain('No Results Found');
+
+  it('Check dropdown list "Reactive forms" for empty value Model: (null)', () => {
+    browser.refresh();
+    expect(typeheadEl.modelReactiveForms.getText()).toEqual('Model: null');
   });
-  it ('Check dropdown list for typehead with empty value ', () => {
-    inputTypeahead.click();
-    expect($('.dropdown-menu').isDisplayed()).toBe(true);
-    getItemNumberInDropdown(5).click();
-    expect(modalTypeahead.getText()).toContain('California');
+
+  it('Check grouping option at list "Grouping results"', () => {
+    typeheadEl.inputGroupingResults.sendKeys('a');
+    expect(typeheadEl.dropdownHeader.isDisplayed()).toBe(true);
   });
+
 });

protractor.conf.js

@@ -4,7 +4,7 @@
 exports.config = {
   allScriptsTimeout: 11000,
   specs: [
-    './demo/e2e/**/*.e2e-spec.ts'
+    './demo/e2e/**/*.e2e-spec.ts',
   ],
   exclude: [
     './demo/e2e/**/accordion-demo.e2e-spec.ts',
@@ -14,7 +14,6 @@ exports.config = {
     './demo/e2e/**/collapse-demo.e2e-spec.ts',
     './demo/e2e/**/leftPanelTests.po.ts',
     './demo/e2e/**/modals-demo.e2e-spec.ts',
-    './demo/e2e/**/typeahead-demo.e2e-spec.ts'
   ],
   capabilities: {
     browserName: 'chrome',