add ui tests

Author: gilbarbara

gulpfile.js

@@ -1,18 +1,69 @@
 /*eslint-disable no-var, one-var, func-names, indent, prefer-arrow-callback, object-shorthand, no-console, newline-per-chained-call, one-var-declaration-per-line, prefer-template, vars-on-top  */
+var path = require('path');
+var exec = require('child_process').exec;
+var gulp        = require('gulp'),
+    $           = require('gulp-load-plugins')(),
+    browserify  = require('browserify'),
+    buffer      = require('vinyl-buffer'),
+    del         = require('del'),
+    runSequence = require('run-sequence'),
+    source      = require('vinyl-source-stream'),
+    watchify    = require('watchify');
 
-var gulp          = require('gulp'),
-    $             = require('gulp-load-plugins')(),
-    del           = require('del'),
-    runSequence   = require('run-sequence');
+var shouldWatch = false;
+
+function watchifyTask(options) {
+  var bundler, rebundle, iteration = 0;
+  bundler = browserify({
+    entries: path.join(__dirname, '/test/demo/main.js'),
+    basedir: __dirname,
+    insertGlobals: false, // options.watch
+    cache: {},
+    // debug: options.watch,
+    packageCache: {},
+    fullPaths: false, // options.watch
+    transform: [['babelify']],
+    extensions: ['.jsx']
+  });
+
+  if (options.watch) {
+    bundler = watchify(bundler);
+  }
+
+  rebundle = function() {
+    var stream = bundler.bundle();
+
+    if (options.watch) {
+      stream.on('error', function(err) {
+        console.log(err);
+      });
+    }
+
+    stream
+      .pipe(source('bundle.js'))
+      .pipe(buffer())
+      .pipe(gulp.dest('.tmp'))
+      .pipe($.tap(function() {
+        if (iteration === 0 && options.cb) {
+          options.cb();
+        }
+        iteration++;
+      }))
+      .pipe($.connect.reload());
+  };
+
+  bundler.on('update', rebundle);
+  return rebundle();
+}
 
 gulp.task('scripts', function() {
-  return gulp.src('src/scripts/**/*')
+  return gulp.src('demo/scripts/**/*')
     .pipe($.babel())
     .pipe(gulp.dest('lib/scripts'));
 });
 
 gulp.task('lint', function() {
-  return gulp.src('src/scripts/**/*')
+  return gulp.src('demo/scripts/**/*')
     .pipe($.eslint({
       useEslintrc: true,
       rules: {
@@ -24,7 +75,7 @@ gulp.task('lint', function() {
 });
 
 gulp.task('styles', function() {
-  return gulp.src('src/styles/*.scss')
+  return gulp.src('demo/styles/*.scss')
     .pipe(gulp.dest('lib/styles'))
     .pipe($.plumber())
     .pipe($.sass.sync({
@@ -41,7 +92,7 @@ gulp.task('clean', function(cb) {
 });
 
 gulp.task('watch', ['build'], function() {
-  gulp.watch('src/**/*', function() {
+  gulp.watch('demo/**/*', function() {
     gulp.start('scripts');
   });
 });
@@ -51,4 +102,61 @@ gulp.task('build', ['clean'], function(cb) {
   runSequence('lint', 'scripts', 'styles', cb);
 });
 
+gulp.task('localserver', function(cb) {
+  shouldWatch = true;
+
+  gulp.watch(['demo/styles/*', 'test/demo/*.scss'], function() {
+    gulp.start('styles:test');
+  });
+
+  return runSequence('setup:test', cb);
+});
+
+gulp.task('setup:test', ['scripts:test', 'styles:test'], function() {
+  gulp.src('test/demo/index.html')
+    .pipe(gulp.dest('.tmp'));
+
+  return $.connect.server({
+    root: [path.join(__dirname, '.tmp/')],
+    livereload: true,
+    port: 8888
+  });
+});
+
+gulp.task('scripts:test', function(cb) {
+  return watchifyTask({
+    watch: shouldWatch,
+    cb: cb
+  });
+});
+
+gulp.task('styles:test', function() {
+  return gulp.src('test/demo/main.scss')
+    .pipe($.plumber())
+    .pipe($.sass.sync({
+      precision: 4
+    }).on('error', $.sass.logError))
+    .pipe($.plumber.stop())
+    .pipe($.autoprefixer())
+    .pipe($.rename({ basename: 'bundle' }))
+    .pipe(gulp.dest('.tmp'))
+    .pipe($.connect.reload());
+});
+
+gulp.task('test:ui', ['setup:test'], function(cb) {
+  exec('./node_modules/.bin/nightwatch -c test/nightwatch.conf.js', function(error, stdout) {
+    $.connect.serverClose();
+    console.log(stdout);
+
+    if (error) {
+      console.error(`exec error: ${error}`);
+      process.exit(1);
+      return;
+    }
+
+    process.exit(0);
+    cb();
+  });
+});
+
 gulp.task('default', ['build']);

package.json

@@ -22,6 +22,7 @@
     "tour"
   ],
   "dependencies": {
+    "nested-property": "^0.0.6",
     "react-autobind": "^1.0",
     "scroll": "^2.0"
   },
@@ -41,7 +42,12 @@
     "babel-preset-react": "^6.5",
     "babel-preset-stage-1": "^6.5",
     "babel-register": "^6.9",
+    "babelify": "^7.3",
+    "bootstrap": "^4.0.0-alpha",
+    "browserify": "^13.0",
+    "chromedriver": "^2.21",
     "del": "^2.2",
+    "enzyme": "^2.4",
     "eslint": "^2.13",
     "eslint-config-airbnb": "^9.0",
     "eslint-plugin-import": "^1.9",
@@ -51,26 +57,34 @@
     "gulp": "^3.9",
     "gulp-autoprefixer": "^3.1",
     "gulp-babel": "^6.1",
+    "gulp-connect": "^4.1",
     "gulp-eslint": "^2.0",
     "gulp-load-plugins": "^1.2",
     "gulp-plumber": "^1.1",
     "gulp-rename": "^1.2",
     "gulp-sass": "^2.3",
+    "gulp-tap": "^0.1",
     "jsdom": "^9.2",
     "mocha": "^2.5",
+    "nightwatch": "^0.9",
     "react": "^15.1",
     "react-addons-test-utils": "^15.1",
     "react-dom": "^15.1",
-    "run-sequence": "^1.2"
+    "run-sequence": "^1.2",
+    "selenium-server-standalone-jar": "^2.53",
+    "vinyl-buffer": "^1.0",
+    "vinyl-source-stream": "^1.1",
+    "watchify": "^3.7"
   },
   "scripts": {
     "lint": "eslint src test",
     "build": "gulp build",
     "prepublish": "npm run build",
-    "test": "./node_modules/.bin/_mocha --compilers js:babel-register --recursive --require ./test/setup.js"
+    "test": "npm run test:ui",
+    "test:ui": "gulp localserver & nightwatch -c test/nightwatch.js; kill %1"
   },
   "engines": {
-    "node": ">=5.0.0",
+    "node": ">=6.0.0",
     "npm": ">=3.0.0"
   }
 }

test/component.spec.js

@@ -1,37 +1,13 @@
 import expect from 'expect';
 import React from 'react';
-import TestUtils from 'react-addons-test-utils';
+import { render } from 'enzyme';
 
-import Joyride from '../src/scripts/Joyride';
-
-function setup() {
-  const props = {
-    steps: [
-      {
-        title: 'Auto Scroll',
-        text: 'Scroll to correct position if required. <i>It can be turned off</i>',
-        selector: '#area-chart',
-        position: 'top'
-      },
-      {
-        title: 'Hide Elements',
-        text: 'You can really customize the UI',
-        textAlign: 'center',
-        selector: '#donut-chart',
-        position: 'left'
-      }
-    ]
-  };
-
-  return TestUtils.renderIntoDocument(
-    <Joyride {...props} />
-  );
-}
+import Demo from './demo/App';
 
 describe('Joyride', () => {
-  const render = setup();
+  const demo = render(<Demo />);
 
-  it('should be a Component', () => {
-    expect(TestUtils.isCompositeComponent(render)).toBe(true);
+  it('should be able to start', () => {
+    expect(demo.find('.joyride').length).toEqual(1);
   });
 });

test/demo/App.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import Joyride from '../../src/scripts/Joyride';
+
+export default class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      running: false,
+      steps: [
+        {
+          title: 'Our Projects',
+          text: 'Ooops. I forgot to add images!',
+          textAlign: 'center',
+          selector: '.projects h2 span',
+          position: 'right',
+          style: {
+            beacon: {
+              offsetX: 30
+            }
+          }
+        },
+        {
+          title: 'Our Mission',
+          text: 'Or some other marketing bullshit terms',
+          selector: '.mission h2 span',
+          position: 'bottom',
+          style: {
+            beacon: {
+              offsetY: 20
+            }
+          }
+        },
+        {
+          title: 'About Us',
+          text: 'We are the people',
+          selector: '.about h2 span',
+          position: 'left',
+          style: {
+            beacon: {
+              offsetX: 15
+            }
+          }
+        }
+      ]
+    };
+
+    this.onClickStart = this.onClickStart.bind(this);
+  }
+
+  componentDidMount() {
+    this.refs.joyride.addTooltip({
+      title: 'The classic joyride',
+      text: "Let's go on a magical tour",
+      selector: '.hero h3 span',
+      position: 'bottom',
+      event: 'hover',
+      style: {
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        borderRadius: 0,
+        color: '#fff',
+        mainColor: '#ff67b4',
+        textAlign: 'center',
+        width: '20rem'
+      }
+    });
+  }
+
+  onClickStart(e) {
+    const state = this.state;
+    e.preventDefault();
+
+    if (!state.running && state.steps.length) {
+      this.setState({
+        running: true
+      });
+
+      this.refs.joyride.start();
+      return;
+    }
+
+    this.refs.joyride.reset(true);
+  }
+
+  render() {
+    return (
+      <div className="demo">
+        <Joyride
+          ref="joyride"
+          steps={this.state.steps}
+          scrollToFirstStep={true}
+          debug={false} />
+        <div className="hero">
+          <div className="container">
+            <h1>My super awesome catchy title</h1>
+            <h3><span>Let's Talk?</span><a href="#" onClick={this.onClickStart}>&raquo;</a></h3>
+          </div>
+        </div>
+        <div className="site__section projects">
+          <div className="container">
+            <h2><span>Projects</span></h2>
+          </div>
+        </div>
+
+        <div className="site__section mission">
+          <div className="container">
+            <h2><span>Mission</span></h2>
+          </div>
+        </div>
+        <div className="site__section about">
+          <div className="container">
+            <h2><span>About</span></h2>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

test/demo/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>React Joyride</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"/>
+  <meta name="description" content="Create tooltips, walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!"/>
+  <link rel="stylesheet" href="bundle.css">
+</head>
+<body>
+<div id="react"></div>
+<script src="bundle.js"></script>
+</body>
+</html>

test/demo/main.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(<App />, document.getElementById('react'));
+});