feat(tests): add cypress e2e tests instead of protractor e2e and e2e-…

…bdd tests (#3515)

* feat(tests): add cypress e2e tests instead of protractor e2e and e2e-bdd tests

* test(demo): add cypress e2e for accordion demo page

* feat(tests): add cypress e2e for alerts demo page

* feat(tests): add cypress e2e for buttons demo page

.gitignore

@@ -28,6 +28,8 @@ npm-debug.log
 /demo/temp
 /logs
 /gh-pages
+/cypress/videos/*
+/cypress/screenshots/*
 
 #System Files
 .DS_Store

.travis.yml

@@ -26,7 +26,7 @@ stages:
   - <<: *stage
     name: test
   - <<: *stage
-    name: bdd-tests
+    name: cypress-tests
   - <<: *stage
     name: build
   - name: deploy
@@ -37,8 +37,6 @@ stages:
     name: sauce-tests
 
 before_install:
-  - export CHROME_BIN=chromium-browser
-  - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
   - rm -rf node_modules/ngx-bootstrap
 
@@ -55,7 +53,6 @@ jobs:
   allow_failures:
     - env: NGV=next
     - env: SAUCE=true
-    - env: BDD=true
     - stage: sauce-tests
   include:
 # precache npm and apt dependencies
@@ -88,17 +85,15 @@ jobs:
     - <<: *test
       env: NGV=next
 
-#    test e2e-bdd
-    - stage: bdd-tests
-      env: BDD=true
+#     test cypress
+    - stage: cypress-tests
+      env: URL=http://localhost:3000/
       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
+      - CYPRESS_baseUrl=$URL npm run cy:run -- --config videoRecording=false
 
 #    check prod build
     - &build

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:4400/#"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/accordion_page_spec.ts

@@ -0,0 +1,171 @@
+import { AccordionPo } from '../support/accordion.po';
+
+describe('Accordion page test suite', () => {
+  const accordion = new AccordionPo();
+  const accordionExamples = accordion.accordionDemosArr;
+  const accordionTitles = accordion.exampleTitlesArr;
+
+  beforeEach(() => accordion.navigateTo());
+
+  it('accordion page loads and displays it\'s content', () => {
+    cy.get('.content')
+      .should('be.visible');
+  });
+
+  it('content header contains title and link to accordion component at github', () => {
+    cy.get('.content-header').children('h1').as('title')
+      .should('be.visible')
+      .and('to.contain', accordion.pageTitle);
+
+    cy.get('@title').children('a')
+      .should('be.enabled')
+      .and('have.attr', 'href', accordion.ghLinkToComponent);
+  });
+
+  it('usage code example is displayed at demo top section', () => {
+    cy.get('demo-top-section').as('demoTop').children('h2')
+      .should('be.visible')
+      .and('to.contain', accordion.titleDefaultExample);
+
+    cy.get('@demoTop').children('.prettyprint')
+      .should('be.visible')
+      .and('not.to.be.empty');
+  });
+
+  it('each panel at simple accordion opens content at first click', () => {
+    cy.get(accordionExamples[0]).children('.panel-group').children('.panel').each(($panel, i) => {
+      accordion.getAccordionPanel(accordionExamples[0], i).as('currPanel').click();
+
+      cy.get('@currPanel')
+        .should('have.class', 'panel-open');
+    });
+  });
+
+  it('double click leaves all panels closed at simple accordion', () => {
+    cy.get(accordionExamples[0]).children('.panel-group').children('.panel').each(($panel, i) => {
+      accordion.getAccordionPanel(accordionExamples[0], i).as('currPanel').dblclick();
+
+      cy.get('@currPanel')
+        .should('not.have.class', 'panel-open');
+    });
+  });
+
+  it('first panel can be disabled or enabled at disabled example', () => {
+    accordion.clickByText(accordionExamples[1], accordion.buttonEnableDisable);
+
+    accordion.getAccordionPanel(accordionExamples[1], 0).as('firstPanel').find('.text-muted')
+      .should('to.be.exist');
+
+    accordion.clickByText(accordionExamples[1], accordion.buttonEnableDisable);
+
+    cy.get('@firstPanel').find('.text-muted')
+      .should('not.to.be.exist');
+  });
+
+  it('last panel can be controlled by toggler button at dynamic example', () => {
+    accordion.clickByText(accordionExamples[2], accordion.buttonPanelToggler);
+
+    accordion.getAccordionPanel(accordionExamples[2], 4).as('dynamicPanel')
+      .should('not.have.class', 'panel-open');
+
+    accordion.clickByText(accordionExamples[2], accordion.buttonPanelToggler);
+
+    cy.get('@dynamicPanel')
+      .should('have.class', 'panel-open');
+  });
+
+  it('items in collapse-panel can be added dynamic at dynamic example', () => {
+    accordion.getAccordionPanel(accordionExamples[2], 3).as('dynamicItemsPanel').click();
+
+    cy.get('@dynamicItemsPanel').find('.panel-body').children('div')
+      .should('have.length', 3);
+
+    accordion.clickByText('@dynamicItemsPanel', accordion.buttonAddItem);
+
+    cy.get('@dynamicItemsPanel').find('.panel-body').children('div')
+      .should('have.length', 4);
+  });
+
+  it('open only one panel at a time if closeOthers property sets as true', () => {
+    cy.get(accordionExamples[3]).find('input').check();
+
+    accordion.getAccordionPanel(accordionExamples[3], 0).as('firstPanel').click()
+      .should('have.class', 'panel-open');
+    accordion.getAccordionPanel(accordionExamples[3], 1).as('secondPanel')
+      .should('not.have.class', 'panel-open');
+    accordion.getAccordionPanel(accordionExamples[3], 2).as('thirdPanel')
+      .should('not.have.class', 'panel-open');
+
+    cy.get('@thirdPanel').click()
+      .should('have.class', 'panel-open');
+    cy.get('@firstPanel')
+      .should('not.have.class', 'panel-open');
+    cy.get('@secondPanel')
+      .should('not.have.class', 'panel-open');
+  });
+
+  it('other panels are not closed if closeOthers property sets as false', () => {
+    cy.get(accordionExamples[3]).find('input').uncheck();
+
+    accordion.getAccordionPanel(accordionExamples[3], 0).as('firstPanel').click()
+      .should('have.class', 'panel-open');
+    accordion.getAccordionPanel(accordionExamples[3], 1).as('secondPanel')
+      .should('not.have.class', 'panel-open');
+    accordion.getAccordionPanel(accordionExamples[3], 2).as('thirdPanel')
+      .should('not.have.class', 'panel-open');
+
+    cy.get('@thirdPanel').click()
+      .should('have.class', 'panel-open');
+    cy.get('@firstPanel')
+      .should('have.class', 'panel-open');
+    cy.get('@secondPanel')
+      .should('not.have.class', 'panel-open');
+  });
+
+  it('first and third panel at styling accordion contains customClass style', () => {
+    const stylesPanel = ['rgb(91, 192, 222)', 'rgb(255, 255, 255)'];
+    const stylePanelBody = 'rgb(51, 122, 167)';
+
+    accordion.getAccordionPanel(accordionExamples[4], 0).children('.card').as('firstPanel')
+      .should('to.have.css', 'background-color', stylesPanel[0])
+      .and('to.have.css', 'color', stylesPanel[1]);
+    cy.get('@firstPanel').find('.panel-body')
+      .should('to.have.css', 'background-color', stylePanelBody);
+
+    accordion.getAccordionPanel(accordionExamples[4], 2).children('.card').as('thirdPanel')
+      .should('to.have.css', 'background-color', stylesPanel[0])
+      .and('to.have.css', 'color', stylesPanel[1]);
+    cy.get('@thirdPanel').find('.panel-body')
+      .should('to.have.css', 'background-color', stylePanelBody);
+  });
+
+  it('configuring defaults example opens only one panel at a time', () => {
+    accordion.getAccordionPanel(accordionExamples[5], 0).as('firstPanel').click()
+      .should('have.class', 'panel-open');
+    accordion.getAccordionPanel(accordionExamples[5], 1).as('secondPanel')
+      .should('not.have.class', 'panel-open');
+    accordion.getAccordionPanel(accordionExamples[5], 2).as('thirdPanel')
+      .should('not.have.class', 'panel-open');
+
+    cy.get('@secondPanel').click()
+      .should('have.class', 'panel-open');
+    cy.get('@firstPanel')
+      .should('not.have.class', 'panel-open');
+    cy.get('@thirdPanel')
+      .should('not.have.class', 'panel-open');
+  });
+
+  it('each demo examples are not mixed up with each other and contains code examples', () => {
+    cy.get('examples').find('h3').as('exampleTitles').each(($title, i) => {
+      expect($title).to.contain(accordionTitles[i]);
+
+      cy.get('@exampleTitles').contains(accordionTitles[i]).parent().as('currentBlock');
+
+      cy.get('@currentBlock').find(accordionExamples[i])
+        .should('to.exist');
+      cy.get('@currentBlock').find('.section').eq(1)
+        .should('be.visible')
+        .and('not.to.be.empty');
+    });
+  });
+});