build(nightwatch): set up nightwatch, travis and saucelabs connect

.gitignore

@@ -8,3 +8,7 @@ embed.js.sublime-workspace
 .sass-cache
 bower_components
 dist
+reports
+screenshots
+selenium-debug.log
+*.env

.travis.yml

@@ -17,3 +17,5 @@ after_success:
 branches:
   except:
     - /^v\d+\.\d+\.\d+$/
+addons:
+  sauce_connect: true

Gruntfile.js

@@ -30,7 +30,7 @@ module.exports = function (grunt) {
 			},
 			js: {
 				files: ['src/js/**/*.js', 'build.json'],
-				tasks: ['eslint', 'shell:rollup', 'uglify']
+				tasks: ['shell:rollup', 'uglify']
 			}
 		},
 

nightwatch.conf.js

@@ -0,0 +1,160 @@
+require('env2')('./.env'); // optionally store your environment variables in .env
+const PKG = require('./package.json'); // so we can get the version of the project
+const BINPATH = './node_modules/nightwatch/bin/'; // change if required.
+const SCREENSHOT_PATH = "./screenshots/" + PKG.version + "/";
+
+const config = { // we use a nightwatch.conf.js file so we can include comments and helper functions
+	"src_folders": [
+		"test/e2e"     // we use '/test' as the name of our test directory by default. So 'test/e2e' for 'e2e'.
+	],
+	"output_folder": "./node_modules/nightwatch/reports", // reports (test outcome) output by Nightwatch
+	"selenium": {
+		"start_process": true,
+		"server_path": BINPATH + "selenium.jar", // downloaded by selenium-download module (see below)
+		"log_path": "",
+		"host": "127.0.0.1",
+		"port": 4444,
+		"cli_args": {
+			"webdriver.chrome.driver": BINPATH + "chromedriver" // also downloaded by selenium-download
+		}
+	},
+	"test_workers": { "enabled": true, "workers": "auto" }, // perform tests in parallel where possible
+	"test_settings": {
+		"default": {
+			"launch_url": "http://ondemand.saucelabs.com:80", // we're testing a local site
+			"selenium_port": 80,
+			"selenium_host": "ondemand.saucelabs.com",
+			"silent": true,
+			"screenshots": {
+				"enabled": true, // save screenshots to this directory (excluded by .gitignore)
+				"path": SCREENSHOT_PATH
+			},
+			"username": process.env.SAUCE_USERNAME,     // if you want to use Saucelabs remember to
+			"access_key": process.env.SAUCE_ACCESS_KEY, // export your environment variables (see readme)
+			"globals": {
+				"waitForConditionTimeout": 10000    // wait for content on the page before continuing
+			},
+			"desiredCapabilities": {
+				"tunnel-identifier": process.env.TRAVIS_JOB_NUMBER, // needed for sauce-connect, i.e for testing localhost on saucelabs
+				build: `build-${process.env.TRAVIS_JOB_NUMBER}` // needed for sauce-connect
+			}
+		},
+		"local": {
+			"launch_url": "http://localhost",
+			"selenium_port": 4444,
+			"selenium_host": "127.0.0.1",
+			"silent": true,
+			"screenshots": {
+				"enabled": true, // save screenshots taken here
+				"path": SCREENSHOT_PATH
+			}, // this allows us to control the
+			"globals": {
+				"waitForConditionTimeout": 15000 // on localhost sometimes internet is slow so wait...
+			},
+			"desiredCapabilities": {
+				"browserName": "chrome",
+				"chromeOptions": {
+					"args": [
+						`Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46
+            (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3`,
+						"--window-size=640,1136" // iphone 5
+					]
+				},
+				"javascriptEnabled": true,
+				"acceptSslCerts": true
+			}
+		},
+		"chrome": { // your local Chrome browser (chromedriver)
+			"desiredCapabilities": {
+				"browserName": "chrome",
+				"javascriptEnabled": true,
+				"acceptSslCerts": true
+			}
+		},
+		"chromemac": { // browsers used on saucelabs:
+			"desiredCapabilities": {
+				"browserName": "chrome",
+				"platform": "OS X 10.11",
+				"version": "47"
+			}
+		},
+		"ie11": {
+			"desiredCapabilities": {
+				"browserName": "internet explorer",
+				"platform": "Windows 10",
+				"version": "11.0"
+			}
+		},
+		"firefox": {
+			"desiredCapabilities": {
+				"platform": "XP",
+				"browserName": "firefox",
+				"version": "33"
+			}
+		},
+		"internet_explorer_10": {
+			"desiredCapabilities": {
+				"platform": "Windows 7",
+				"browserName": "internet explorer",
+				"version": "10"
+			}
+		},
+		"android_s4_emulator": {
+			"desiredCapabilities": {
+				"browserName": "android",
+				"deviceOrientation": "portrait",
+				"deviceName": "Samsung Galaxy S4 Emulator",
+				"version": "4.4"
+			}
+		},
+		"iphone_6_simulator": {
+			"desiredCapabilities": {
+				"browserName": "iPhone",
+				"deviceOrientation": "portrait",
+				"deviceName": "iPhone 6",
+				"platform": "OSX 10.10",
+				"version": "8.4"
+			}
+		}
+	}
+}
+module.exports = config;
+
+/**
+ * selenium-download does exactly what it's name suggests;
+ * downloads (or updates) the version of Selenium (& chromedriver)
+ * on your localhost where it will be used by Nightwatch.
+ */
+require('fs').stat(BINPATH + 'selenium.jar', function (err, stat) { // got it?
+	if (err || !stat || stat.size < 1) {
+		require('selenium-download').ensure(BINPATH, function (error) {
+			if (error) throw new Error(error); // no point continuing so exit!
+			console.log('✔ Selenium & Chromedriver downloaded to:', BINPATH);
+		});
+	}
+});
+
+function padLeft(count) { // theregister.co.uk/2016/03/23/npm_left_pad_chaos/
+	return count < 10 ? '0' + count : count.toString();
+}
+
+var FILECOUNT = 0; // "global" screenshot file count
+/**
+ * The default is to save screenshots to the root of your project even though
+ * there is a screenshots path in the config object above! ... so we need a
+ * function that returns the correct path for storing our screenshots.
+ * While we're at it, we are adding some meta-data to the filename, specifically
+ * the Platform/Browser where the test was run and the test (file) name.
+ */
+function imgpath(browser) {
+	var a = browser.options.desiredCapabilities;
+	var meta = [a.platform];
+	meta.push(a.browserName ? a.browserName : 'any');
+	meta.push(a.version ? a.version : 'any');
+	meta.push(a.name); // this is the test filename so always exists.
+	var metadata = meta.join('~').toLowerCase().replace(/ /g, '');
+	return SCREENSHOT_PATH + metadata + '_' + padLeft(FILECOUNT++) + '_';
+}
+
+module.exports.imgpath = imgpath;
+module.exports.SCREENSHOT_PATH = SCREENSHOT_PATH;

package.json

@@ -56,11 +56,13 @@
     "commitizen": "^2.8.2",
     "cssnano": "^3.4.0",
     "cz-conventional-changelog": "^1.1.6",
+    "env2": "^2.1.1",
     "es6-promise": "^3.0.2",
     "eslint": "^3.16.1",
     "eslint-config-standard": "^6.2.1",
     "eslint-plugin-promise": "^3.4.2",
     "eslint-plugin-standard": "^2.0.1",
+    "express": "^4.15.2",
     "fetch-jsonp": "^1.0.0",
     "grunt": "^0.4.5",
     "grunt-cli": "^1.1.0",
@@ -77,23 +79,31 @@
     "grunt-spritesmith": "^6.3.1",
     "grunt-string-replace": "^1.2.1",
     "load-grunt-tasks": "^3.4.0",
+    "nightwatch": "^0.9.12",
     "phantomjs": "^2.1.3",
     "rollup": "^0.41.4",
     "rollup-plugin-buble": "^0.15.0",
     "rollup-plugin-commonjs": "^7.0.0",
     "rollup-plugin-filesize": "^1.0.1",
     "rollup-plugin-node-resolve": "^2.0.0",
     "rollup-plugin-uglify": "^1.0.1",
+    "saucelabs": "^1.4.0",
+    "selenium-download": "^2.0.9",
     "semantic-release": "^6.3.2"
   },
   "scripts": {
     "commit": "git-cz",
     "lint": "eslint src/js/**/*.js",
     "lintfix": "eslint --fix src/js/**/*.js",
-    "test": "ava test/**/*.test.js --require babel-register && npm run lint",
+    "test:unit": "ava test/**/*.test.js --require babel-register",
+    "test": "npm run test:unit && npm run lint && npm run e2e:saucelabs",
+    "test:local": "npm run test:unit && npm run lint && npm run e2e",
     "build": "rollup -c rollup.umd.config.js && rollup.es2015.config.js",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post",
-    "prepublish": "grunt dist"
+    "prepublish": "grunt dist",
+    "e2e": "grunt dist && node_modules/.bin/nightwatch -e local",
+    "e2e:saucelabs": "npm run e2e -- -e chrome,ie11,android_s4_emulator,iphone_6_simulator",
+    "postinstall": "node nightwatch.conf.js"
   },
   "config": {
     "commitizen": {
@@ -102,5 +112,8 @@
   },
   "dependencies": {
     "unfetch": "^2.0.0"
+  },
+  "engines": {
+    "node": ">=6.0.0"
   }
 }

src/js/main.js

@@ -281,6 +281,7 @@ export default class EmbedJS {
 		return new Promise((resolve) => {
 			this.process().then((data) => {
 				this.options.input.innerHTML = data;
+				this.options.input.className += ' embed-js-applied';
 				this.applyListeners();
 				resolve(this.data);
 			})

test/e2e/smiley.js

@@ -0,0 +1,25 @@
+var conf = require('../../nightwatch.conf');
+
+var server;
+module.exports = {
+	before: function (browser, done) {
+		server = require('../server')('smiley', done)
+	},
+
+	after: function () {
+		server.close()
+	},
+
+	'Smiley': function (browser) {
+		browser
+			.url('localhost:3000')   // visit the url
+			.waitForElementVisible('.embed-js-applied'); // wait for the body to be rendered
+
+		browser
+			.assert.containsText('.embed-js-applied',
+			'Lotus eleates vix attrahendams  luna est.Advenas mori!Fermiums prarere in cubiculum!Cum cacula cantare, omnes stellaes manifestum azureus, nobilis https://angularjs.org acipenseres.Cum orgia mori, omnes rationees '
+		) // assert contains
+			.saveScreenshot(conf.imgpath(browser) + 'dwyl.png')
+			.end()
+	}
+};

test/html/smiley.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Smiley</title>
+	<link rel="stylesheet" href="embed.css">
+</head>
+<body id="rawText">
+Lotus eleates vix attrahendams :P luna est.Advenas mori!Fermiums prarere in cubiculum!Cum cacula cantare, omnes
+stellaes manifestum azureus, nobilis https://angularjs.org/ acipenseres.Cum orgia mori, omnes rationees <3
+</body>
+<script src="embed.js"></script>
+<script>
+	var x = new EmbedJS({
+		input: document.getElementById('rawText')
+	});
+
+	x.render();
+</script>
+</html>

test/server.js

@@ -0,0 +1,18 @@
+function makeServer(name, done) {
+	var express = require('express');
+	var path = require('path');
+	var app = express();
+
+	app.use(express.static('dist'))
+
+	app.get('/', function (req, res) {
+		res.status(200).sendFile(`test/html/${name}.html`, {root: path.resolve()});
+	});
+	var server = app.listen(3000, function () {
+		var port = server.address().port;
+		done()
+	});
+	return server;
+}
+module.exports = makeServer;
+