Merge pull request #117 from cignium/improve-stability

Improve stability

Author: nranas

.jestrc

@@ -6,13 +6,21 @@ cache:
 notifications:
   email: false
 node_js:
-  - 5.0.0
+  - 6.10.3
+install:
+ - wget https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip
+ - unzip BrowserStackLocal-linux-x64.zip
+ - ./BrowserStackLocal -v -onlyAutomate -forcelocal $BROWSERSTACK_ACCESS_KEY &
+ - sleep 3
+ - npm install
 before_script:
-- npm prune
+  - npm prune
+  - npm run start-ui-test-server &
 script:
   - npm run lint
   - npm run test
   - npm run build
+  - npm run test-ui
 after_success:
   - npm run semantic-release
 branches:

.travis.yml

@@ -2,7 +2,7 @@
 
 Hypermedia renderer for Cignium's hypermedia api.
 
-[![Build Status](https://travis-ci.org/cignium/hypermedia-client.svg)](https://travis-ci.org/cignium/hypermedia-client)
+[![Build Status](https://travis-ci.org/cignium/hypermedia-client.svg)](https://travis-ci.org/cignium/hypermedia-client) [![npm](https://img.shields.io/npm/v/cignium-hypermedia-client.svg)](https://www.npmjs.com/package/cignium-hypermedia-client)
 
 ## Install
 
@@ -21,14 +21,15 @@ npm install cignium-hypermedia-client --save
 Add the following script tag:
 
 ```html
-<script src="//unpkg.com/cignium-hypermedia-client/dist/client.min.js"></script>
+<script src="//unpkg.com/cignium-hypermedia-client/dist@1/client.min.js"></script>
 ```
 
 For default styling, include this tag:
 
 ```html
-<link rel="stylesheet" type="text/css" href="//unpkg.com/cignium-hypermedia-client/dist/default.css">
+<link rel="stylesheet" type="text/css" href="//unpkg.com/cignium-hypermedia-client@1/dist/default.css">
 ```
+*NOTE: the @1 in these import statements make sure that you are importing the latest version of the client that is still on major version 1. Meaning every version below 2.0.0. Importing the client like this ensures that your application will not automatically upgrade to version 2.0.0 which will contain breaking changes. The safest way to import the client will always be to specify the entire version e.g. @1.31.3 but that also means that you will not even get small patches automatically.*
 
 ## Get Started
 

README.md

@@ -0,0 +1,11 @@
+const assert = require('assert')
+
+describe('All type of controls form', () => {
+  it('can load the form and find the header', () => {
+    browser.url('index.html')
+    const selector = '.ct-document-header-text'
+    browser.waitForExist(selector, 30000)
+
+    assert.equal(browser.getText(selector), 'All type of controls form')
+  })
+})

__tests__/ui/all-type-of-controls-form-tests.js

@@ -0,0 +1,12 @@
+module.exports = {
+  transform: { '.*': '<rootDir>/test-preprocessor' },
+  'unmockedModulePathPatterns': [
+    '<rootDir>/node_modules/react',
+    '<rootDir>/node_modules/react-dom',
+    '<rootDir>/node_modules/react-addons-test-utils',
+  ],
+  'automock':true,
+  'testPathIgnorePatterns': [
+    '<rootDir>/__tests__/ui',
+  ],
+}

jest.config.js

@@ -13,6 +13,7 @@
     "moment": "^2.18.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
+    "react-input-autosize": "1.1.0",
     "react-select": "^1.0.0-rc.3",
     "react-text-mask": "^3.0.0",
     "react-tooltip": "3.2.10",
@@ -34,6 +35,7 @@
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
     "babel-runtime": "^6.9.0",
+    "browserstack-local": "^1.3.0",
     "css-loader": "^0.23.0",
     "eslint": "^1.10.3",
     "eslint-loader": "^1.1.1",
@@ -43,7 +45,7 @@
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.10.1",
     "imports-loader": "^0.6.5",
-    "jest-cli": "*",
+    "jest-cli": "^20.0.0",
     "less": "^2.7.2",
     "less-loader": "^4.0.0",
     "npm-run-all": "^1.5.3",
@@ -54,16 +56,20 @@
     "semantic-release": "^4.3.5",
     "style-loader": "^0.13.2",
     "url-loader": "^0.5.8",
+    "wdio-mocha-framework": "^0.5.10",
+    "webdriverio": "^4.8.0",
     "webpack": "^1.12.9",
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0"
   },
   "scripts": {
     "build": "NODE_ENV=production babel-node node_modules/webpack/bin/webpack --config webpack.production.config.js",
-    "test": "jest --config .jestrc",
+    "test": "jest",
+    "test-ui": "wdio wdio.conf.js",
     "lint": "eslint .",
     "start": "npm-run-all --parallel start-server start-test",
     "start-server": "babel-node server.js",
+    "start-ui-test-server": "node ui-test-server.js",
     "start-test": "jest --config .jestrc --watch",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post"
   }

package.json

@@ -18,9 +18,7 @@ export default class Client {
   }
 
   init(element) {
-    if (typeof element === 'string') {
-      element = document.getElementById(element)
-    }
+    element = findAndValidateElement(element)
 
     render(<App api={this.api} config={this.config} state={this.state} />, element)
 
@@ -36,24 +34,24 @@ export default class Client {
   get(propertyName) {
     let data = this.state.get().resources
     data = data[data.current]
-  
+
     if (propertyName) {
       return this.api.allProperties.find(i => i.name === propertyName).value
     }
-  
+
     const output = {}
     this.api.allProperties.forEach(i => {
       output[i.name] = i.value
     })
     return output
   }
-  
+
   set(propertyName, value) {
     let data = this.state.get().resources
     data = data[data.current]
-  
+
     const property = this.api.allProperties.find(i => i.name === propertyName)
-  
+
     if (property.value !== value) {
       if (!property.links.update) {
         property.set('value', value)
@@ -62,3 +60,23 @@ export default class Client {
     }
   }
 }
+
+function findAndValidateElement(element) {
+  if (!element) {
+    throw new Error(`Mandatory parameter 'element' was ${element}`)
+  }
+
+  if (typeof element === 'string') {
+    const elementId = element
+    element = document.getElementById(element)
+    if (!element) {
+      throw new Error(`Element with id '${elementId}' was not found.`)
+    }
+  }
+
+  if (element.nodeType !== 1) {
+    throw new Error(`Parameter 'element' is not a valid DOM element.`)
+  }
+
+  return element
+}

src/client.js

@@ -0,0 +1,14 @@
+const express = require('express')
+
+const app = express()
+app.use(express.static('ui-tests'))
+app.use(express.static('dist'))
+
+app.listen(3004, '0.0.0.0', err => {
+  if (err) {
+    console.log(err)
+    return
+  }
+
+  console.log('Listening at http://localhost:3004')
+})

ui-test-server.js

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Hypermedia Client Testing</title>
+    <link rel="stylesheet" type="text/css" href="default.css" />
+    <script src="client.min.js"></script>
+  </head>
+  <body>
+    <div id="demo-app" data-endpoint="https://cignium-lm-staging.azurewebsites.net/run/staging/regression/prod/forms-test"></div>
+  </body>
+</html>

ui-tests/index.html

@@ -0,0 +1,66 @@
+const browserstack = require('browserstack-local')
+
+exports.config = {
+  user: process.env.BROWSERSTACK_USERNAME || 'BROWSERSTACK_USERNAME',
+  key: process.env.BROWSERSTACK_ACCESS_KEY || 'BROWSERSTACK_ACCESS_KEY',
+
+  updateJob: false,
+  specs: [
+    './__tests__/ui/*-tests.js',
+  ],
+  exclude: [],
+
+  capabilities: [{
+    browser: 'chrome',
+    name: 'single_test',
+    build: process.env.CI ?
+      'hypermedia-client #' +  process.env.TRAVIS_BUILD_NUMBER + '.' + process.env.TRAVIS_JOB_NUMBER :
+      'hypermedia-client-local',
+    'browserstack.local': true,
+  }],
+
+  logLevel: 'verbose',
+  coloredLogs: true,
+  screenshotPath: './errorShots/',
+  baseUrl: 'http://localhost:3004',
+  waitforTimeout: 30000,
+  connectionRetryTimeout: 90000,
+  connectionRetryCount: 3,
+
+  framework: 'mocha',
+  mochaOpts: {
+    ui: 'bdd',
+    timeout: 30000,
+  },
+
+  // Code to start browserstack local before start of test
+  onPrepare: (config, capabilities) => {
+    if (process.env.CI) {
+      console.log('On CI. Skipping local connection.')
+      return
+    }
+    console.log('Connecting local')
+    return new Promise((resolve, reject) => {
+      exports.bs_local = new browserstack.Local()
+      exports.bs_local.start({'key': exports.config.key, 'force': true }, error => {
+        if (error) {
+          console.log(error)
+          return reject(error)
+        }
+        console.log('Connected. Now testing...')
+
+        resolve()
+      })
+    })
+  },
+
+  // Code to stop browserstack local after end of test
+  onComplete: (capabilties, specs) => {
+    if (process.env.CI) {
+      console.log('On CI. No local connection to close.')
+      return
+    }
+    console.log('Closing local connection')
+    exports.bs_local.stop(() => {})
+  },
+}