Automated browser test fixes (#224)

* Automated test and browser matrix fixes

Now tests against multiple jQuery and React versions

* Continue using NPM instead of Yarn

* Ensure vendor tasks finishes before starting karma

* Additional text fixes and node compatibility

* Improved gulp task scheduling

* Test fixes for latest react version

* Better Travis React installation

* Improved polyfill serving on non-IE8

* Fix code coverage reporting

* Fix mocha test dependency

Author: Nick Frasser

.editorconfig

@@ -10,3 +10,7 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[*.yml]
+indent_style = space
+tab_width = 2

.eslintrc

@@ -1,31 +1,34 @@
 {
-	"parserOptions": {
-		"ecmaVersion": 6,
-		"sourceType": "module"
-	},
-	"env": {
-		"browser": true,
-		"node": true,
-		"jquery": true,
-		"es6": true
-	},
-	"rules": {
-		"curly": 2,
-		"eqeqeq": 2,
-		"indent": [2, "tab"],
-		"no-eq-null": 2,
-		"quotes": [2, "single", "avoid-escape"],
-		"semi": 2
-	},
-	"globals": {
-		"__base": false,
-		"__TLDS__": false,
-		"after": false,
-		"afterEach": false,
-		"before": false,
-		"beforeEach": false,
-		"expect": false,
-		"describe": false,
-		"it": false
-	}
+    "extends": [
+        "eslint:recommended"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "env": {
+        "browser": true,
+        "node": true,
+        "jquery": true,
+        "es6": true,
+        "amd": true
+    },
+    "rules": {
+        "curly": 2,
+        "eqeqeq": 2,
+        "no-eq-null": 2,
+        "quotes": [2, "single", "avoid-escape"],
+        "semi": 2
+    },
+    "globals": {
+        "__base": false,
+        "__TLDS__": false,
+        "after": false,
+        "afterEach": false,
+        "before": false,
+        "beforeEach": false,
+        "expect": false,
+        "describe": false,
+        "it": false
+    }
 }

.gitignore

@@ -22,6 +22,7 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
+.nyc_output
 
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
@@ -41,6 +42,7 @@ build
 !test/qunit/build
 dist
 lib
+vendor
 
 # Specific to plugin website branch
 .sass-cache

.npmignore

@@ -12,6 +12,7 @@ js
 src
 templates
 test
+vendor
 
 # Files
 .editorconfig

.travis.yml

@@ -1,16 +1,25 @@
 sudo: false
 language: node_js
 node_js:
-  - "8.6"
-  - "6.11"
-  - "4.4"
+  - "9.4"
+  - "8.9"
+  - "6.13"
 env:
   global:
     - secure: LhH+mMqOktTe6cIt97PGKBfgUjZM8vRd0qddyg61FSxg7a3WrHQoHE8WdRioJ9+DDzpu/NSTsHEUFUpGN+kSRw1UY4tsNLH6HoBQnqrNN4tVOeefudJpdeteOKZrJ8r8TaA/eO7sAgXO2T+RLJ8+qTbhx8FVZtLaCAgkrS0w9Qk=
     - secure: Okwm1aAR3oo09AhHDsjFSq1UGlIUtWYYvYeoolJScC/UVFGMiK9oC4fzRtUHv3kXcnshDlcVDrr/Q5JL9Qx6E+tosPJp+tioaqE8X4IDbVk7PPs/ToOOEmWnGvxkgmfCGSDuneG8RVhILkhls3fbm0z+rRWlvJkjefeA96T6zps=
+  matrix:
+    - REACT_VERSION=0.14.0 JQUERY_VERSION=1.11.0
+    - REACT_VERSION=16.0.0 JQUERY_VERSION=3.0.0
+
+cache:
+  directories:
+    - node_modules
+
 install:
   - npm install
-  - npm install "jquery@1"
-  - npm install "react@16"
+before_script:
+  - 'if [ "$JQUERY_VERSION" ]; then npm install --force jquery@~$JQUERY_VERSION; fi'
+  - 'if [ "$REACT_VERSION" ]; then npm install --force react-dom@~$REACT_VERSION react@~$REACT_VERSION; fi'
 script: ./run-tests.sh
-after_script: npm run coverage
+after_success: npm run coverage

gulpfile.js

@@ -1,7 +1,6 @@
-'use strict';
+/* istanbul ignore file */
 
 const gulp = require('gulp');
-const amdOptimize = require('amd-optimize');
 const glob = require('glob');
 const Server = require('karma').Server;
 const merge = require('merge-stream');
@@ -13,7 +12,6 @@ const tlds = require('./tlds');
 const babel = require('gulp-babel');
 const clean = require('gulp-clean');
 const concat = require('gulp-concat');
-const istanbul = require('gulp-istanbul');
 const eslint = require('gulp-eslint');
 const mocha = require('gulp-mocha');
 const rename = require('gulp-rename');
@@ -51,7 +49,7 @@ var tldsReplaceStr = `'${tlds.join('|')}'.split('|')`;
 	ES6 ~> babel (with CJS Node Modules)
 	This populates the `lib` folder, allows usage with Node.js
 */
-gulp.task('babel', () =>
+gulp.task('lib', () =>
 	gulp.src(paths.src)
 	.pipe(replace('__TLDS__', tldsReplaceStr))
 	.pipe(babel())
@@ -61,7 +59,7 @@ gulp.task('babel', () =>
 /**
 	ES6 to babel AMD modules
 */
-gulp.task('babel-amd-core', () =>
+gulp.task('amd', () =>
 	gulp.src(paths.src)
 	.pipe(replace('__TLDS__', tldsReplaceStr))
 	.pipe(babel({
@@ -76,51 +74,50 @@ gulp.task('babel-amd-core', () =>
 	.pipe(gulp.dest('build/amd')) // Required for building plugins separately
 );
 
-
 /**
-	ES6 to babel AMD modules
-	Must run interfaces first because a more optimized core linkify payload will
-	overwrite the AMD-generated one
+	Build core linkify.js
 */
-gulp.task('babel-amd', ['babel-amd-core'], () =>
-	gulp.src(paths.srcCore)
+gulp.task('build-core', () =>
+	gulp.src(paths.srcCore, {read: false})
 	.pipe(rollup({
 		bundle: {
-			format: 'amd',
-			moduleId: 'linkify',
+			format: 'iife',
 			moduleName: 'linkify'
 		}
 	}))
 	.pipe(babel())
 	.pipe(replace('__TLDS__', tldsReplaceStr))
-	.pipe(quickEs3())
-	.pipe(concat('linkify.amd.js'))
+	.pipe(replace('undefined.', 'self.'))
+	.pipe(wrap({src: 'templates/linkify.js'}))
 	.pipe(gulp.dest('build'))
 );
 
 /**
-	Build core linkify.js
+	ES6 to babel AMD modules
+	Must run interfaces first because a more optimized core linkify payload will
+	overwrite the AMD-generated one
 */
-gulp.task('build-core', () =>
-	gulp.src(paths.srcCore, {read: false})
+gulp.task('build-amd-core', () =>
+	gulp.src(paths.srcCore)
 	.pipe(rollup({
 		bundle: {
-			format: 'iife',
+			format: 'amd',
+			moduleId: 'linkify',
 			moduleName: 'linkify'
 		}
 	}))
 	.pipe(babel())
 	.pipe(replace('__TLDS__', tldsReplaceStr))
-	.pipe(replace('undefined.', 'self.'))
-	.pipe(wrap({src: 'templates/linkify.js'}))
+	.pipe(quickEs3())
+	.pipe(concat('linkify.amd.js'))
 	.pipe(gulp.dest('build'))
 );
 
 /**
 	Build root linkify interfaces (files located at the root src folder other
 	than linkify.js).
 */
-gulp.task('build-interfaces', () => {
+gulp.task('build-interfaces', ['amd'], () => {
 
 	// Core linkify functionality as plugins
 	let interfaces = [
@@ -195,7 +192,7 @@ gulp.task('build-interfaces', () => {
 });
 
 
-gulp.task('build-plugins', () => {
+gulp.task('build-plugins', ['amd'], () => {
 
 	let streams = [];
 
@@ -250,14 +247,26 @@ gulp.task('build-polyfill', () =>
 
 // Build steps
 gulp.task('build', [
-	'babel',
-	'babel-amd-core',
-	'babel-amd',
+	'lib',
 	'build-core',
+	'build-amd-core',
 	'build-interfaces',
 	'build-plugins',
 	'build-polyfill'
-], (cb) => { cb(); });
+]);
+
+// Copy React into vendor directory for use in tests
+// This is required because React's location may vary between versions
+gulp.task('vendor', () =>
+	gulp.src([
+		'node_modules/react/dist/react.min.js',
+		'node_modules/react-dom/dist/react-dom.min.js',
+		'node_modules/react/umd/react.production.min.js',
+		'node_modules/react-dom/umd/react-dom.production.min.js'
+	])
+	.pipe(rename(path => path.basename = path.basename.replace(/\.production/, '')))
+	.pipe(gulp.dest('vendor'))
+);
 
 /**
 	Lint using eslint
@@ -279,80 +288,63 @@ gulp.task('eslint', () =>
 /**
 	Run mocha tests
 */
-gulp.task('mocha', ['eslint', 'build'], () =>
-	gulp.src(paths.test, {read: false})
-	.pipe(mocha())
+gulp.task('mocha', ['build'], () =>
+	gulp.src(paths.test).pipe(mocha())
 );
 
-/**
-	Code coverage reort for mocha tests
-*/
-gulp.task('coverage', ['eslint', 'dist'], (callback) => {
-	// IMPORTANT: return not required here (and will actually cause bugs!)
-	gulp.src(paths.libTest)
-	.pipe(istanbul()) // Covering files
-	.pipe(istanbul.hookRequire()) // Force `require` to return covered files
-	.on('finish', () => {
-		gulp.src(paths.test, {read: false})
-		.pipe(mocha())
-		.pipe(istanbul.writeReports()) // Creating the reports after tests runned
-		.on('end', callback);
-	});
-});
-
-gulp.task('karma', (callback) => {
+gulp.task('karma', ['vendor'], (callback) => {
 	let server = new Server({
 		configFile: __dirname + '/test/dev.conf.js',
 		singleRun: true
 	}, callback);
 	return server.start();
 });
 
-gulp.task('karma-chrome', (callback) => {
+gulp.task('karma-chrome', ['vendor'], (callback) => {
 	let server = new Server({
 		configFile: __dirname + '/test/chrome.conf.js',
 	}, callback);
 	return server.start();
 });
 
-gulp.task('karma-firefox', (callback) => {
+gulp.task('karma-firefox', ['vendor'], (callback) => {
 	let server = new Server({
 		configFile: __dirname + '/test/firefox.conf.js',
 	}, callback);
 	return server.start();
 });
 
-gulp.task('karma-ci', (callback) => {
+gulp.task('karma-ci', ['vendor'], (callback) => {
 	let server = new Server({
 		configFile: __dirname + '/test/ci.conf.js',
 		singleRun: true
 	}, callback);
 	return server.start();
 });
 
-gulp.task('karma-amd', (callback) => {
+gulp.task('karma-amd', ['vendor'], (callback) => {
 	let server = new Server({
 		configFile: __dirname + '/test/dev.amd.conf.js',
 		singleRun: true
 	}, callback);
 	return server.start();
 });
 
-gulp.task('karma-amd-chrome', (callback) => {
+gulp.task('karma-amd-chrome', ['vendor'], (callback) => {
 	let server = new Server({
 		configFile: __dirname + '/test/chrome.amd.conf.js',
 	}, callback);
 	return server.start();
 });
 
-gulp.task('karma-amd-firefox', (callback) => {
+gulp.task('karma-amd-firefox', ['vendor'], (callback) => {
 	let server = new Server({
 		configFile: __dirname + '/test/firefox.amd.conf.js',
 	}, callback);
 	return server.start();
 });
 
-gulp.task('karma-amd-ci', (callback) => {
+gulp.task('karma-amd-ci', ['vendor'], (callback) => {
 	let server = new Server({
 		configFile: __dirname + '/test/ci.amd.conf.js',
 		singleRun: true
@@ -386,10 +378,10 @@ gulp.task('uglify', ['build'], () => {
 
 gulp.task('dist', ['uglify']);
 gulp.task('test', (callback) =>
-	runSequence('coverage', 'karma', 'karma-amd', callback)
+	runSequence('eslint', 'mocha', 'dist', 'karma', 'karma-amd', callback)
 );
 gulp.task('test-ci', (callback) =>
-	runSequence('karma-ci', 'karma-amd-ci', callback)
+	runSequence('dist', 'karma-ci', 'karma-amd-ci', callback)
 );
 
 gulp.task('clean', () =>
@@ -400,12 +392,13 @@ gulp.task('clean', () =>
 		'dist',
 		'js',
 		'lib',
+		'vendor'
 	], {read: false}).pipe(clean())
 );
 
 /**
 	Build JS and begin watching for changes
 */
-gulp.task('default', ['eslint', 'babel'], () =>
-	gulp.watch(paths.src, ['eslint', 'babel'])
+gulp.task('default', ['eslint', 'lib'], () =>
+	gulp.watch(paths.src, ['eslint', 'lib'])
 );