feat(e2e): added more e2e test

close #1163

.gitignore

@@ -24,6 +24,8 @@ npm-debug.log
 /components/**/*.js
 /components/**/*.js.map
 /components/**/*.d.ts
+/tests_e2e/**/*.e2e.js
+/tests_e2e/**/*.e2e.js.map
 ng2-bootstrap.js
 ng2-bootstrap.d.ts
 ng2-bootstrap.js.map

package.json

@@ -90,6 +90,8 @@
     "gulp": "3.9.1",
     "gulp-size": "2.1.0",
     "gulp-tslint": "6.1.2",
+    "jasmine": "2.5.2",
+    "jasmine-data-provider": "2.2.0",
     "lite-server": "2.2.2",
     "marked": "0.3.6",
     "ng2-webpack-config": "0.0.5",
@@ -101,7 +103,9 @@
     "tslint-config-valorsoft": "1.1.1",
     "typedoc": "0.5.0",
     "typescript": "2.0.6",
+    "protractor": "4.0.9",
     "wallaby-webpack": "0.0.26",
     "zone.js": "0.6.25"
+    "protractor": "4.0.3"
   }
 }

protractor.conf.js

@@ -1,7 +1,36 @@
-/**
- * @author: @AngularClass
- */
 'use strict';
 
-// look in ./config for protractor.conf.js
-module.exports.config = require('./config/protractor.conf.js').config;
+exports.config = {
+  seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
+
+  useAllAngular2AppRoots: true,
+
+  baseUrl: 'http://localhost:3000/',
+
+  multiCapabilities: [
+    {
+      browserName: 'chrome',
+      shardTestFiles: true,
+      maxInstances: 1
+    }
+
+    /*{
+     browserName: 'firefox',
+     shardTestFiles: true,
+     maxInstances: 4
+     }*/
+  ],
+
+  specs: [
+    // './tests_e2e/tests/*.e2e.js'
+    './tests_e2e/tests/accordion-demo.e2e.js'
+    // './tests_e2e/tests/modals-demo.e2e.js'
+  ],
+
+  framework: 'jasmine',
+
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 80000
+  }
+};

tests_e2e/data-provider/data-provider.e2e.ts

@@ -0,0 +1,27 @@
+import { $ } from 'protractor';
+import { ElementFinder } from 'protractor/built/index';
+
+const getTabHeaderAccordionPage = (tabNumber:number) => {
+  return $('accordion-group:nth-child(' + tabNumber + ') .panel-heading');
+};
+const getTabContentAccordionPage = (tabNumber:number) => {
+  return $('accordion-group:nth-child(' + tabNumber + ') .panel-body');
+};
+
+export class DataProvider {
+
+  public static accordionTableContent: any = {
+    '1stTabHeaderText': {element: (): ElementFinder => getTabHeaderAccordionPage(1), actualResult: 'Static Header, initially expanded'},
+    '1stTabContentText': {element: (): ElementFinder => getTabContentAccordionPage(1), actualResult: 'This content is straight in the template.'},
+    '2stTabHeaderText': {element: (): ElementFinder => getTabHeaderAccordionPage(2), actualResult: 'Dynamic Group Header - 1'},
+    '2stTabContentText': {element: (): ElementFinder => getTabContentAccordionPage(2), actualResult: 'Dynamic Group Body - 1'},
+    '3stTabHeaderText': {element: (): ElementFinder => getTabHeaderAccordionPage(3), actualResult: 'Dynamic Group Header - 2'},
+    '3stTabContentText': {element: (): ElementFinder => getTabContentAccordionPage(3), actualResult: 'Dynamic Group Body - 2'},
+    '4stTabHeaderText': {element: (): ElementFinder => getTabHeaderAccordionPage(4), actualResult: 'Dynamic Body Content'},
+    '4stTabContentText1stString': {element: (): ElementFinder => $('accordion-group:nth-child(4) .panel-body>p'), actualResult: 'The body of the accordion group grows to fit the contents'},
+    '4stTabContentTextAddButton': {element: (): ElementFinder => $('accordion-group:nth-child(4) .panel-body>button'), actualResult: 'Add Item'},
+    '4stTabContentTextTableItem': {element: (): ElementFinder => $('accordion-group:nth-child(4) .panel-body :nth-child(4)'), actualResult: 'Item 2'},
+    '5stTabHeaderText': {element: (): ElementFinder => getTabHeaderAccordionPage(5), actualResult: 'I can have markup, too!'},
+    '5stTabContentText': {element: (): ElementFinder => getTabContentAccordionPage(5), actualResult: 'This is just some content to illustrate fancy headings.'}
+  };
+}

tests_e2e/tests/accordion-demo.e2e.ts

@@ -0,0 +1,129 @@
+import { $, $$, browser } from 'protractor';
+import { leftPanelTests } from './leftPanelTests.e2e';
+import { DataProvider } from './../data-provider/data-provider.e2e';
+
+const buttonToggleLastPanel = $('accordion-demo>p button:nth-child(1)');
+const buttonEnableDisablePanel = $('accordion-demo>p button:nth-child(2)');
+const buttonAddItem = $('.panel-body .btn');
+const checkboxOnlyOne = $('.checkbox .ng-valid');
+const getItemsCount = $$('accordion-group:nth-child(4) .panel-body > div');
+const buttonArrow = $('.pull-right');
+let using = require('jasmine-data-provider');
+
+const getTabHeader = (tabNumber:number) => {
+  return $('accordion-group:nth-child(' + tabNumber + ') .panel-heading');
+};
+const getTabContent = (tabNumber:number) => {
+  return $('accordion-group:nth-child(' + tabNumber + ') .panel-body');
+};
+
+describe('Check the Accordion page in bootstrap 3', () => {
+  beforeAll(() => {
+    browser.get('#/accordion');
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  it('Close/open first tab by click', () => {
+    getTabHeader(1).click();
+    expect(getTabContent(1).isDisplayed()).toBe(false);
+    getTabHeader(1).click();
+    expect(getTabContent(1).isDisplayed()).toBe(true);
+  });
+  it('Open/close last tab with button Toggle Last Panel', () => {
+    buttonToggleLastPanel.click();
+    expect(getTabContent(5).isDisplayed()).toBe(true);
+    expect(buttonArrow.getAttribute('class')).toContain('glyphicon-chevron-down');
+    buttonToggleLastPanel.click();
+    expect(getTabContent(5).isDisplayed()).toBe(false);
+    expect(buttonArrow.getAttribute('class')).toContain('glyphicon-chevron-right');
+  });
+  it('Button Enable/Disable first panel is ON', () => {
+    buttonEnableDisablePanel.click();
+    getTabHeader(1).click();
+    expect(getTabContent(1).isDisplayed()).toBe(false);
+  });
+  it('Button Enable/Disable first panel is OFF', () => {
+    buttonEnableDisablePanel.click();
+    getTabHeader(1).click();
+    expect(getTabHeader(1).isDisplayed()).toBe(true);
+  });
+  it('Add items in 4th tab', () => {
+    getTabHeader(4).click();
+    expect(getItemsCount.count()).toBe(3);
+    buttonAddItem.click();
+    buttonAddItem.click();
+    expect(getItemsCount.count()).toBe(5);
+  });
+  it('Open all tabs together', () => {
+      checkboxOnlyOne.click();
+      getTabHeader(1).click();
+      getTabHeader(2).click();
+      getTabHeader(3).click();
+      getTabHeader(5).click();
+      expect(getTabHeader(1).isDisplayed()).toBe(true);
+      expect(getTabHeader(2).isDisplayed()).toBe(true);
+      expect(getTabHeader(3).isDisplayed()).toBe(true);
+      expect(getTabHeader(4).isDisplayed()).toBe(true);
+      expect(getTabHeader(5).isDisplayed()).toBe(true);
+  });
+  using (DataProvider.accordionTableContent, (data:any, description:string) => {
+    it ('Check table texts: ' + description, () => {
+      expect(data.element().getText()).toBe(data.actualResult);
+    });
+  });
+});
+describe('Check the Accordion page in bootstrap 4', () => {
+  beforeAll(() => {
+    browser.get('index-bs4.html#/accordion');
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  it('Close/open first tab by click', () => {
+    getTabHeader(1).click();
+    expect(getTabContent(1).isDisplayed()).toBe(false);
+    getTabHeader(1).click();
+    expect(getTabContent(1).isDisplayed()).toBe(true);
+  });
+  it('Open/close last tab with button Toggle Last Panel', () => {
+    buttonToggleLastPanel.click();
+    expect(getTabContent(5).isDisplayed()).toBe(true);
+    expect(buttonArrow.getAttribute('class')).toContain('glyphicon-chevron-down');
+    buttonToggleLastPanel.click();
+    expect(getTabContent(5).isDisplayed()).toBe(false);
+    expect(buttonArrow.getAttribute('class')).toContain('glyphicon-chevron-right');
+  });
+  it('Button Enable/Disable first panel is ON', () => {
+    buttonEnableDisablePanel.click();
+    getTabHeader(1).click();
+    expect(getTabContent(1).isDisplayed()).toBe(false);
+  });
+  it('Button Enable/Disable first panel is OFF', () => {
+    buttonEnableDisablePanel.click();
+    getTabHeader(1).click();
+    expect(getTabHeader(1).isDisplayed()).toBe(true);
+  });
+  it('Add items in 4th tab', () => {
+    getTabHeader(4).click();
+    expect(getItemsCount.count()).toBe(3);
+    buttonAddItem.click();
+    buttonAddItem.click();
+    expect(getItemsCount.count()).toBe(5);
+  });
+  it('Open all tabs together', () => {
+    checkboxOnlyOne.click();
+    getTabHeader(1).click();
+    getTabHeader(2).click();
+    getTabHeader(3).click();
+    getTabHeader(5).click();
+    expect(getTabHeader(1).isDisplayed()).toBe(true);
+    expect(getTabHeader(2).isDisplayed()).toBe(true);
+    expect(getTabHeader(3).isDisplayed()).toBe(true);
+    expect(getTabHeader(4).isDisplayed()).toBe(true);
+    expect(getTabHeader(5).isDisplayed()).toBe(true);
+  });
+  using (DataProvider.accordionTableContent, (data:any, description:string) => {
+    it ('Check table texts: ' + description, () => {
+      expect(data.element().getText()).toBe(data.actualResult);
+    });
+  });
+});

tests_e2e/tests/alert-demo.e2e.ts

@@ -0,0 +1,82 @@
+import { $, $$, browser } from 'protractor/globals';
+
+const leftPanelTests = require('./../data/leftPanelTests.e2e');
+const buttonAddAlert = $('alert-demo .btn');
+const alertWarning = $('.alert.alert-warning');
+const getAlertCount = $$('alert > div');
+const getCloseButton = (tabNumber:any) => {
+  return 'alert-demo alert:nth-child(' + tabNumber + ') .close';
+};
+
+describe('Alerts page test on bootstrap 3', () => {
+  beforeAll(() => {
+    browser.get('#/alerts');
+    browser.ignoreSynchronization = true;
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  beforeEach(() => {
+    browser.refresh();
+  });
+  it('Warning alert is displayed', () => {
+    expect(alertWarning.isDisplayed()).toBe(true);
+  });
+  it('Warning alert is disappear', () => {
+    browser.sleep(5000);
+    expect(alertWarning.isPresent()).toBe(false);
+  });
+  it('Default warnings count', () => {
+    expect(getAlertCount.count()).toBe(3);
+  });
+  it('Adding warnings', () => {
+    buttonAddAlert.click();
+    buttonAddAlert.click();
+    expect(getAlertCount.count()).toBe(5);
+  });
+  it('User can delete danger and success alerts', () => {
+    $(getCloseButton(2)).click();
+    $(getCloseButton(1)).click();
+    expect(getAlertCount.count()).toBe(1);
+  });
+  it('User can delete added alerts', () => {
+    buttonAddAlert.click();
+    $(getCloseButton(3)).click();
+    expect(getAlertCount.count()).toBe(3);
+  });
+});
+describe('Alerts page test on bootstrap 4', () => {
+  beforeAll(() => {
+    browser.get('index-bs4.html#/alerts');
+    browser.ignoreSynchronization = true;
+    leftPanelTests.checkLeftPanelMini();
+    leftPanelTests.checkLeftPanelMaxi();
+  });
+  beforeEach(() => {
+    browser.refresh();
+  });
+  it('Warning alert is displayed', () => {
+    expect(alertWarning.isDisplayed()).toBe(true);
+  });
+  it('Warning alert is disappear', () => {
+    browser.sleep(5000);
+    expect(alertWarning.isPresent()).toBe(false);
+  });
+  it('Default warnings count', () => {
+    expect(getAlertCount.count()).toBe(3);
+  });
+  it('Adding warnings', () => {
+    buttonAddAlert.click();
+    buttonAddAlert.click();
+    expect(getAlertCount.count()).toBe(5);
+  });
+  it('User can delete danger and success alerts', () => {
+    $(getCloseButton(1)).click();
+    $(getCloseButton(1)).click();
+    expect(getAlertCount.count()).toBe(1);
+  });
+  it('User can delete added alerts', () => {
+    buttonAddAlert.click();
+    $(getCloseButton(3)).click();
+    expect(getAlertCount.count()).toBe(3);
+  });
+});