functional tests (#401)

* 📐 functional tests

📐 functional tests + fix travis

📐 functional tests + phantomjs

📐 functional tests + trying firefox

functional testing

[test] working state

* [test] local and ci functions

[test] local and ci functions

[test] local and ci functions

[test] local and ci functions

WIP - allow user to specify browser and use phantomjs v2

Revert "WIP - allow user to specify browser and use phantomjs v2"

This reverts commit 1bb9124.

upgrade webdriverio

WIP remove async/await

linting, and allowing user to select the browser

attempt at using the node_module jar

back to downloading the jar

* e-2-e js functional tests

* remove wait

* little clean up

* remove spacing

* removing empty lines and refactoring

.babelrc

@@ -7,11 +7,6 @@
     "transform-react-display-name"
   ],
   "env": {
-    "test": {
-      "plugins": [
-        "rewire"
-      ]
-    },
     "development": {
       "plugins": [
         "typecheck"

.eslintrc

@@ -50,6 +50,8 @@
     "webpackIsomorphicTools": true,
     ga: true,
     Raven: true,
-    mixpanel: true
+    mixpanel: true,
+    "expect": true,
+    "browser": true
   }
 }

package.json

@@ -4,11 +4,15 @@
   "private": false,
   "scripts": {
     "test": "npm run test:dev:unit",
+    "test:ci:unit": "./node_modules/karma/bin/karma start --browsers PhantomJS --single-run; npm run test:ci:lint",
+    "test:ci:functional": "BROWSER=phantomjs bash tests/functional/test.sh start-ci",
+    "posttest:ci:functional": "bash tests/functional/test.sh stop",
     "test:ci:unit": "karma start --browsers PhantomJS --single-run; npm run test:ci:lint",
-    "test:ci:functional": "node ./nightwatch.js -c ./nightwatch.json -e production",
     "test:dev:unit": "karma start",
-    "test:dev:functional": "node ./nightwatch.js -c ./nightwatch.json",
     "test:ci:lint": "eslint ./src/**/*.js",
+    "test:dev:unit": "./node_modules/karma/bin/karma start",
+    "test:dev:functional": "BROWSER=chrome bash tests/functional/test.sh start",
+    "posttest:dev:functional": "bash tests/functional/test.sh stop",
     "test:dev:lint": "eslint ./src/scripts/**/*.js",
     "test:stylelint": "stylelint './src/**/*.scss' --config webpack/.stylelintrc",
     "dev": "node webpack/dev-server.js & PORT=8000 node start.js",
@@ -135,9 +139,9 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.6.0",
     "mocha": "^2.2.5",
-    "nightwatch": "^0.8.6",
     "nodemon": "^1.7.1",
     "path": "^0.11.14",
+    "phantomjs": "^1.9.20",
     "phantomjs-polyfill": "0.0.1",
     "piping": "^0.3.0",
     "pre-commit": "^1.1.3",
@@ -152,6 +156,9 @@
     "sinon": "^1.15.3",
     "sinon-chai": "^2.8.0",
     "stylelint-webpack-plugin": "^0.2.0",
+    "wdio-mocha-framework": "^0.3.7",
+    "wdio-spec-reporter": "0.0.3",
+    "webdriverio": "4.2.1",
     "webpack-dev-server": "^1.6.5"
   },
   "pre-commit": [

tests/functional/pageobjects/BasePage.js

@@ -0,0 +1,16 @@
+export default class BasePage {
+  constructor(selectors) {
+    this.selectors = Object.assign(selectors, {
+      SURAH_PAGE_SURAH_NAME: '.surah-body .navbar-text.surah-name'
+    });
+  }
+
+  getSurahName() {
+    return browser.getText(this.selectors.SURAH_PAGE_SURAH_NAME);
+  }
+
+  goHome() {
+    browser.url('http://quran.com');
+  }
+
+};

tests/functional/pageobjects/HomePage.js

@@ -0,0 +1,33 @@
+import BasePage from './BasePage';
+import selectors from './selectors';
+
+export default class HomePage extends BasePage {
+  constructor() {
+    super(selectors);
+    this.selectors = selectors;
+  }
+
+  getLandingText() {
+    const landingText = browser.getText(this.selectors.LANDING_TEXT);
+    return landingText;
+  }
+
+  getNumberOfSurahs() {
+    const surahs = browser.elements(this.selectors.SURAH_LIST);
+    return surahs.value.length;
+  }
+
+  searchForSurahAndGoToSurahPage(searchQuery) {
+    browser.setValue(this.selectors.SEARCH_FORM, searchQuery);
+    browser.waitForVisible(this.selectors.SEARCH_RESULT_LIST);
+    browser.click(this.selectors.SEARCH_RESULT_LIST);
+    return this.getSurahName();
+  }
+
+  clickOntheSurahByNumber(number) {
+    const surahs = browser.elements('.row .col-xs-7 span');
+    const surahID = surahs.value[number].ELEMENT;
+    browser.elementIdClick(surahID);
+    return browser.getUrl();
+  }
+}

tests/functional/pageobjects/selectors.js

@@ -0,0 +1,10 @@
+export default {
+  LANDING_TEXT: 'h4.title',
+  NEXT: 'a[data-direction="next"]',
+  PREVIOUS: 'a[data-direction="previous"]',
+  SURAH_LIST: '.row .col-md-4 li',
+  SEARCH_FORM: '.searchinput input',
+  SEARCH_RESULT_LIST: '.searchinput a',
+  SURAH_PAGE: '.surah-body .surah-title',
+  SURAH_NAME: '.navbar-text.surah-name'
+};

tests/functional/specs/HomePageTests.js

@@ -0,0 +1,27 @@
+import Homepage from '../pageobjects/HomePage';
+const homePage = new Homepage(browser);
+
+describe('Home Page', () => {
+
+  it('Should Have English Heading', () => {
+    homePage.goHome();
+    const text = homePage.getLandingText();
+    expect(text).to.equal('THE NOBLE QUR\'AN');
+  });
+
+  it('Should have 114 surahs', () => {
+    const numberSurahs = homePage.getNumberOfSurahs();
+    expect(numberSurahs).to.equal(114);
+  });
+
+  it('Should search for surah, click the first result item and land on the surah page', () => {
+    const surahName = homePage.searchForSurahAndGoToSurahPage('ya-sin');
+    expect(surahName).to.equal('YA-SIN (YA SIN) - سورة يس');
+  });
+
+  it('Should click a surah from the list of surahs and land on the surah page', () => {
+    homePage.goHome();
+    const url = homePage.clickOntheSurahByNumber(1);
+    expect(url).to.contain('/1');
+  });
+});

tests/functional/test.sh

@@ -0,0 +1,26 @@
+
+#!/bin/bash
+if [ "$1" == 'stop' ]; then
+        echo "Stopping selenium server..."
+        pid=`ps -eo pid,args | grep selenium-server-standalone | grep -v grep | cut -c1-6`
+        echo $pid
+        kill $pid
+elif [ "$1" == 'start' ]; then
+        echo "Starting selenium server..."
+        PATH="./node_modules/phantomjs/bin:$PATH" java -jar ./node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.0.jar &> /dev/null &
+        sleep 2
+        BROWSERNAME=$BROWSER  ./node_modules/.bin/wdio ./tests/functional/wdio.conf.js
+elif [ "$1" == 'start-ci' ]; then
+        echo "[CI] Starting selenium server..."
+
+        if [ ! -f selenium-server-standalone-2.53.1.jar ]; then
+            echo "selenium jar File not found!"
+            wget https://selenium-release.storage.googleapis.com/2.53/selenium-server-standalone-2.53.1.jar
+        fi
+
+        PATH="./node_modules/phantomjs/bin:$PATH" java -jar selenium-server-standalone-2.53.1.jar &> /dev/null &
+        sleep 5
+        BROWSERNAME=$BROWSER ./node_modules/.bin/wdio ./tests/functional/wdio.conf.js
+else
+        echo "Nothing to do!"
+fi

tests/functional/wdio.conf.js

@@ -0,0 +1,44 @@
+const browser = process.env.BROWSERNAME || 'phantomjs';
+
+exports.config = {
+
+  maxInstances: 4,
+  sync: true,
+  specs: [
+    './tests/functional/specs/**/*.js'
+  ],
+  exclude: [
+  ],
+
+  capabilities: [
+    {
+      browserName: browser
+    }
+  ],
+
+  logLevel: 'error',
+  coloredLogs: true,
+  screenshotPath: './errorShots/',
+
+  waitforTimeout: 10000,
+  framework: 'mocha',
+  reporters: ['dot', 'spec'],
+  onPrepare: () => {
+  },
+  before: () => {
+
+    const chai = require('chai'); // eslint-disable-line global-require
+    global.chai = chai;
+    global.expect = chai.expect;
+
+    process.on('unhandledRejection', (e) => {
+      console.error(e);
+      if (e.stack) {
+        console.error(e.stack);
+      }
+    });
+
+    require('babel-core/register'); // eslint-disable-line global-require
+    require('babel-polyfill'); // eslint-disable-line global-require
+  }
+};