feat(tests): covering navigation feature with bdd (#3026)

YevheniiaMazur · valorkin · commit c5fb8dce9c81 · 2017-12-07T17:28:32.000+02:00
diff --git a/.travis.yml b/.travis.yml
@@ -25,6 +25,8 @@ stages:
     name: lint
   - <<: *stage
     name: test
+  - <<: *stage
+    name: bdd-tests
   - <<: *stage
     name: build
   - name: deploy
@@ -85,6 +87,17 @@ jobs:
     - <<: *test
       env: NGV=next
 
+#    test e2e-bdd
+    - stage: bdd-tests
+      before_script:
+      - npm run build:dynamic
+      - node  ./demo/dist/server.js &
+      - sleep 3
+      script:
+      - npm run lint-bdd
+      - webdriver-manager update --standalone
+      - protractor ./protractor.cucumber.js
+
 #    check prod build
     - &build
       stage: build
diff --git a/demo/e2e-bdd/features/navigation.feature b/demo/e2e-bdd/features/navigation.feature
@@ -0,0 +1,45 @@
+Feature: Page navigation
+  Description: User should navigate thru pages by navigation buttons and menus
+
+  Scenario: Navigation from Landing page to Getting started page
+  Description: User should navigate to Getting started page by clicking on Getting Started button on Landing page
+
+    Given I am on the Landing page
+    When I click on Get Started button
+    Then I am redirected to Getting Started page
+    And I see Angular icon
+
+  Scenario: Navigation from Landing page to GitHub
+  Description: Github button on Landing page should be clickable and contain link to ngx-bootstrap repo
+
+    Given I am on the Landing page
+    When I can click on GitHub button
+    Then It links to ngx-bootstrap repository
+
+  Scenario Outline: Navigation to Accordion page using left side menu
+  Description: User should navigate thru component pages by clicking on links in left navigation menu
+
+    Given I am on the Getting Started page
+    When I click on "<linkName>" link in left navigation menu
+    Then I am redirected to <pageName> page
+    And I see <contentName> demo content
+
+  Examples:
+  |linkName   |pageName   |contentName|
+  |Accordion  |Accordion  |Accordion  |
+  |Alerts     |Alerts     |Alerts     |
+  |Buttons    |Buttons    |Buttons    |
+  |Carousel   |Carousel   |Carousel   |
+  |Collapse   |Collapse   |Collapse   |
+  |Datepicker |Datepicker |Datepicker |
+  |Dropdowns  |Dropdowns  |Dropdowns  |
+  |Modals     |Modals     |Modals     |
+  |Pagination |Pagination |Pagination |
+  |Popover    |Popover    |Popover    |
+  |Progressbar|Progressbar|Progressbar|
+  |Rating     |Rating     |Rating     |
+  |Sortable   |Sortable   |Sortable   |
+  |Tabs       |Tabs       |Tabs       |
+  |Timepicker |Timepicker |Timepicker |
+  |Tooltip    |Tooltip    |Tooltip    |
+  |Typeahead  |Typeahead  |Typeahead  |
diff --git a/demo/e2e-bdd/pages/accordion.po.ts b/demo/e2e-bdd/pages/accordion.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class AccordionPo extends BasePo {
+  templateUrl = 'accordion';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/alert.po.ts b/demo/e2e-bdd/pages/alert.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class AlertPo extends BasePo {
+  templateUrl = 'alerts';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/buttons.po.ts b/demo/e2e-bdd/pages/buttons.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class ButtonsPo extends BasePo {
+  templateUrl = 'buttons';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/carousel.po.ts b/demo/e2e-bdd/pages/carousel.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class CarouselPo extends BasePo {
+  templateUrl = 'carousel';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/collapse.po.ts b/demo/e2e-bdd/pages/collapse.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class CollapsePo extends BasePo {
+  templateUrl = 'collapse';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/datepicker.po.ts b/demo/e2e-bdd/pages/datepicker.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class DatepickerPo extends BasePo {
+  templateUrl = 'datepicker';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/dropdowns.po.ts b/demo/e2e-bdd/pages/dropdowns.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class DropdownsPo extends BasePo {
+  templateUrl = 'dropdowns';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/gettingStarted.po.ts b/demo/e2e-bdd/pages/gettingStarted.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class GettingStartedPo extends BasePo {
+  templateUrl = 'getting-started';
+  angularLogo: ElementFinder = $('[alt*="angular logo"]');
+  contentTitle: ElementFinder = $('.content h1');
+}
diff --git a/demo/e2e-bdd/pages/landing.po.ts b/demo/e2e-bdd/pages/landing.po.ts
@@ -0,0 +1,10 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class LandingPo extends BasePo {
+  templateUrl = '';
+  githubRepoUrl = 'https://github.com/valor-software/ngx-bootstrap';
+  getStartedBtn: ElementFinder = $('.btn-primary');
+  githubBtn: ElementFinder = $('.btn-outline-secondary');
+}
diff --git a/demo/e2e-bdd/pages/modals.po.ts b/demo/e2e-bdd/pages/modals.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class ModalsPo extends BasePo {
+  templateUrl = 'modals';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/pagination.po.ts b/demo/e2e-bdd/pages/pagination.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class PaginationPo extends BasePo {
+  templateUrl = 'pagination';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/popover.po.ts b/demo/e2e-bdd/pages/popover.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class PopoverPo extends BasePo {
+  templateUrl = 'popover';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/progressbar.po.ts b/demo/e2e-bdd/pages/progressbar.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class ProgressbarPo extends BasePo {
+  templateUrl = 'progressbar';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/rating.po.ts b/demo/e2e-bdd/pages/rating.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class RatingPo extends BasePo {
+  templateUrl = 'rating';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/sortable.po.ts b/demo/e2e-bdd/pages/sortable.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class SortablePo extends BasePo {
+  templateUrl = 'sortable';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/tabs.po.ts b/demo/e2e-bdd/pages/tabs.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class TabsPo extends BasePo {
+  templateUrl = 'tabs';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/timepicker.po.ts b/demo/e2e-bdd/pages/timepicker.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class TimepickerPo extends BasePo {
+  templateUrl = 'timepicker';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/tooltip.po.ts b/demo/e2e-bdd/pages/tooltip.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class TooltipPo extends BasePo {
+  templateUrl = 'tooltip';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/pages/typeahead.po.ts b/demo/e2e-bdd/pages/typeahead.po.ts
@@ -0,0 +1,9 @@
+import { $, ElementFinder } from 'protractor';
+
+import { BasePo } from '../shared/pages/basePage.po';
+
+export class TypeaheadPo extends BasePo {
+  templateUrl = 'typeahead';
+  contentTitle: ElementFinder = $('.content-header');
+  pageContent: ElementFinder = $('.content-box');
+}
diff --git a/demo/e2e-bdd/shared/helpers/wd-helper.ts b/demo/e2e-bdd/shared/helpers/wd-helper.ts
@@ -0,0 +1,88 @@
+import { browser, by, element, ElementFinder, ExpectedConditions as EC } from 'protractor';
+
+import { AccordionPo } from '../../pages/accordion.po';
+import { LandingPo } from '../../pages/landing.po';
+import { GettingStartedPo } from '../../pages/gettingStarted.po';
+import { AlertPo } from '../../pages/alert.po';
+import { ButtonsPo } from '../../pages/buttons.po';
+import { CarouselPo } from '../../pages/carousel.po';
+import { CollapsePo } from '../../pages/collapse.po';
+import { DatepickerPo } from '../../pages/datepicker.po';
+import { DropdownsPo } from '../../pages/dropdowns.po';
+import { ModalsPo } from '../../pages/modals.po';
+import { PaginationPo } from '../../pages/pagination.po';
+import { PopoverPo } from '../../pages/popover.po';
+import { ProgressbarPo } from '../../pages/progressbar.po';
+import { RatingPo } from '../../pages/rating.po';
+import { SortablePo } from '../../pages/sortable.po';
+import { TabsPo } from '../../pages/tabs.po';
+import { TimepickerPo } from '../../pages/timepicker.po';
+import { TooltipPo } from '../../pages/tooltip.po';
+import { TypeaheadPo } from '../../pages/typeahead.po';
+import { BasePo } from '../pages/basePage.po';
+
+const TIMEOUT = 6000;
+let message: string;
+
+export async function clickOnElemWithText(selectorToCompare: string, template: string) {
+  const searchedElement = await element(by.cssContainingText(selectorToCompare, template));
+
+  await clickWithScroll(searchedElement);
+}
+
+export async function clickWithScroll(button: ElementFinder) {
+  const viewPortBorders = await browser.driver.manage().window().getSize();
+  const elemPosition = await button.getLocation();
+  if (elemPosition.y > viewPortBorders.height) {
+    await browser.executeScript(function (buttonToScroll) {
+      return buttonToScroll.scrollIntoView();
+    }, button);
+  }
+  await safeClick(button);
+}
+
+export function getPageByCompName(componentName: string): BasePo {
+  switch (componentName) {
+    case 'Getting Started': return new GettingStartedPo();
+    case 'Accordion': return new AccordionPo();
+    case 'Alerts': return new AlertPo();
+    case 'Buttons': return new ButtonsPo();
+    case 'Carousel': return new CarouselPo();
+    case 'Collapse': return new CollapsePo();
+    case 'Datepicker': return new DatepickerPo();
+    case 'Dropdowns': return new DropdownsPo();
+    case 'Modals': return new ModalsPo();
+    case 'Pagination': return new PaginationPo();
+    case 'Popover': return new PopoverPo();
+    case 'Progressbar': return new ProgressbarPo();
+    case 'Rating': return new RatingPo();
+    case 'Sortable': return new SortablePo();
+    case 'Tabs': return new TabsPo();
+    case 'Timepicker': return new TimepickerPo();
+    case 'Tooltip': return new TooltipPo();
+    case 'Typeahead': return new TypeaheadPo();
+    default: return new LandingPo();
+  }
+}
+
+export async function safeClick(button: ElementFinder) {
+  await waitForClickable(button);
+
+  await button.click();
+}
+
+export async function waitFor(condition: Function, optMessage?: string) {
+  await browser.wait(condition, TIMEOUT, optMessage);
+}
+
+export async function waitForClickable(button: ElementFinder) {
+  message = 'Waiting for clickable ';
+
+  await waitFor(EC.elementToBeClickable(button), message + (button.locator() as string));
+}
+
+export async function waitForVisible(elem: ElementFinder) {
+  message = 'Waiting for appearing element ';
+
+  await waitFor(EC.visibilityOf(elem), message + (elem.locator() as string));
+}
diff --git a/demo/e2e-bdd/shared/pages/basePage.po.ts b/demo/e2e-bdd/shared/pages/basePage.po.ts
@@ -0,0 +1,34 @@
+import { $, $$, browser, ElementArrayFinder, ElementFinder } from 'protractor';
+import { expect } from 'chai';
+
+export abstract class BasePo {
+  headerLogo: ElementFinder = $('.logo');
+  headerIconBtns: ElementArrayFinder = $$('.header-list>li');
+  searchInput: ElementFinder = $('[name*="search"]');
+  bsVersionBtns: ElementArrayFinder = $$('.bootstrap-version .btn');
+  selectorForLeftNav = '.sidebar-list>li';
+  contentTitle: ElementFinder;
+  pageContent: ElementFinder;
+  abstract templateUrl: string;
+
+  get pageUrl() {
+    return browser.baseUrl + this.templateUrl;
+  }
+
+  async assertCurrentUrlEqual(template: string) {
+    await expect(browser.getCurrentUrl()).to.eventually.equal(template);
+  }
+
+  async assertElementAttrEqual(elem: ElementFinder, attr: string, value: string) {
+    await expect(elem.getAttribute(attr)).to.eventually.equal(value);
+  }
+
+  async assertElementDisplayed(elem: ElementFinder) {
+    await expect(elem.isDisplayed()).to.eventually.equal(true);
+  }
+
+  async assertElementToBeClickable(elem: ElementFinder) {
+    await expect(elem.isDisplayed()).to.eventually.equal(true);
+    await expect(elem.isEnabled()).to.eventually.equal(true);
+  }
+}
diff --git a/demo/e2e-bdd/step_definitions/navigation.steps.ts b/demo/e2e-bdd/step_definitions/navigation.steps.ts
diff --git a/demo/e2e-bdd/support/hooks.ts b/demo/e2e-bdd/support/hooks.ts
diff --git a/demo/e2e-bdd/tsconfig.json b/demo/e2e-bdd/tsconfig.json
diff --git a/demo/e2e-bdd/tslint.json b/demo/e2e-bdd/tslint.json
diff --git a/demo/src/app/common/sidebar/sidebar.component.ts b/demo/src/app/common/sidebar/sidebar.component.ts
diff --git a/demo/src/assets/json/current-version.json b/demo/src/assets/json/current-version.json
diff --git a/package.json b/package.json
diff --git a/protractor.cucumber.js b/protractor.cucumber.js
