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

…bdd tests

.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,9 +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
 
 install:
@@ -55,7 +52,6 @@ jobs:
   allow_failures:
     - env: NGV=next
     - env: SAUCE=true
-    - env: BDD=true
     - stage: sauce-tests
   include:
 # precache npm and apt dependencies
@@ -88,17 +84,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": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/landing_page_spec.ts

@@ -0,0 +1,64 @@
+import { LandingPo } from '../support/landing.po';
+
+describe('Landing Page test suite', () => {
+  const landing = new LandingPo();
+
+  it('Successfully loads and displays all content of the ngx-bootstrap LP', () => {
+    landing.navigateTo();
+
+    cy.get('.logo').should('be.visible');
+    cy.get('.header-info').should('be.visible');
+    cy.get('.content-logo').should('be.visible');
+    cy.get('.slogan').should('be.visible');
+    cy.get('.descr').should('be.visible');
+    cy.get('.version').should('be.visible');
+    cy.get('.advantages').should('be.visible');
+  });
+
+  it('Get started button redirects to Getting Started page', () => {
+    const buttonText = 'Get started';
+    const searchedUrl = '/getting-started';
+
+    landing.navigateTo();
+    landing.clickByText('.btn', buttonText);
+
+    cy.url().should('include', searchedUrl);
+  });
+
+  it('Github button is enabled and contains link to ngx-bootstrap repo', () => {
+    const buttonText = 'Github';
+
+    landing.navigateTo();
+
+    cy.get('.btn').contains(buttonText).should('be.enabled');
+    cy.get('.btn').contains(buttonText).should('have.attr', 'href', landing.githubUrl);
+  });
+
+  it('Info buttons in header are enabled and contains links to slack, github and stackoverflow', () => {
+    const buttonSelector = '.header-list li a';
+
+    landing.navigateTo();
+
+    cy.get(buttonSelector).eq(0).should('be.enabled');
+    cy.get(buttonSelector).eq(1).should('be.enabled');
+    cy.get(buttonSelector).eq(2).should('be.enabled');
+    cy.get(buttonSelector).eq(0).should('have.attr', 'href', landing.stackoverflowUrl);
+    cy.get(buttonSelector).eq(1).should('have.attr', 'href', landing.githubUrl);
+    cy.get(buttonSelector).eq(2).should('have.attr', 'href', landing.slackUrl);
+  });
+
+  it('Footer contains links to ng-team, contributors, MIT license, Creative Commons and to original Bootstrap', () => {
+    landing.navigateTo();
+
+    cy.get('footer p').eq(0).children('a').eq(0)
+      .should('have.attr', 'href', landing.ngTeamUrl);
+    cy.get('footer p').eq(0).children('a').eq(1)
+      .should('have.attr', 'href', landing.contributorsUrl);
+    cy.get('footer p').eq(1).children('a').eq(0)
+      .should('have.attr', 'href', landing.mitLicenseUrl);
+    cy.get('footer p').eq(1).children('a').eq(1)
+      .should('have.attr', 'href', landing.crCommonsUrl);
+    cy.get('footer p').eq(2).children('a')
+      .should('have.attr', 'href', landing.originalBsUrl);
+  });
+});

cypress/plugins/cy-ts-preprocessor.js

@@ -0,0 +1,26 @@
+const wp = require('@cypress/webpack-preprocessor')
+
+const webpackOptions = {
+  resolve: {
+    extensions: ['.ts', '.js']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: [/node_modules/],
+        use: [
+          {
+            loader: 'ts-loader'
+          }
+        ]
+      }
+    ]
+  }
+}
+
+const options = {
+  webpackOptions
+}
+
+module.exports = wp(options)

cypress/plugins/index.js

@@ -0,0 +1,5 @@
+const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor')
+
+module.exports = on => {
+  on('file:preprocessor', cypressTypeScriptPreprocessor)
+}

cypress/support/base.component.ts

@@ -0,0 +1,11 @@
+export abstract class BaseComponent {
+  abstract pageUrl: string;
+
+  navigateTo() {
+    cy.visit(this.pageUrl);
+  }
+
+  clickByText(parent: string, text: string) {
+    cy.get(parent).contains(text).click();
+  }
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/support/landing.po.ts

@@ -0,0 +1,14 @@
+import { BaseComponent } from './base.component';
+
+export class LandingPo extends BaseComponent {
+  pageUrl = '/';
+
+  stackoverflowUrl =  'https://stackoverflow.com/questions/tagged/ngx-bootstrap';
+  githubUrl = 'https://github.com/valor-software/ngx-bootstrap';
+  slackUrl = 'https://ngx-slack.herokuapp.com';
+  ngTeamUrl = 'https://github.com/orgs/valor-software/teams/ng-team';
+  contributorsUrl = 'https://github.com/valor-software/ngx-bootstrap/graphs/contributors';
+  mitLicenseUrl = 'https://github.com/valor-software/ngx-bootstrap/blob/development/LICENSE';
+  crCommonsUrl = 'https://creativecommons.org/licenses/by/3.0/';
+  originalBsUrl = 'https://getbootstrap.com/';
+}

cypress/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "declaration": false,
+    "sourceMap": true,
+    "noEmitHelpers": false,
+    "moduleResolution": "node",
+    "typeRoots": [
+      "../node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  },
+  "include": [
+    "integration/*.ts",
+    "support/*.ts",
+    "../node_modules/cypress"
+  ]
+}