Add e2e tests

[samreaves]

To run end to end tests:

1. Start up the webpack dev server with either gulp serve or gulp watch.
2. Run "npm run e2e" to get automated tests. By just running "protractor" in the root directory, you will see test logs with greater verbosity.

E2E Test Generator

I've added a component e2e test file generator, and updated the component module generator with a default route of the component name. In order for the component to be tested, two tasks must still be accomplished.

1. New component must be added to the components.js file.
2. There must be a link to the route somewhere in the app for ui-router to recognize it.

[fesor]

Maybe run it as postinstall script?

[samreaves]

How about now, guys?

Removed extraneous code, added environment variables, using relative paths, and the developer experience is so much better.

gulp e2e

• bundles our source with webpack
• serves a webserver
• updates selenium
• runs selenium
• runs protractor (with verbosity this time!)
• exits process after protractor is finished

npm e2e

• Runs gulp e2e

[fesor]

This is maybe not a good idea, but we could store server instance in gulpfile scope and then just stop it. But i think this is better than process.exit.

[samreaves]

In the previous commit I have serve.exit() from the browser-sync API instead, and it doesn't stop the server. Exiting the process seemed to be the only option.

[fesor]

It doesn't stop gulp task maybe?

let stopServer;

// ...
gulp.task('server', function (callback) {
    const server = browsersync({...});

    stopServer = () => {
       server.exit();
       callback();
    };

});

// ...

stopServer();

[samreaves]

I think you're right. However with that implementation, protractor never starts. Probably because serve task is expecting to only proceed after the callback?

[fesor]

Yah, you are right... so we need to run callback after server is ready.

[samreaves]

Unsure what I'm missing here. Everything finishes except for the process.

`
let stopServer;
// Setting up the test task
gulp.task('protractor', ['serve'], function(callback) {
gulp
.src(['example_spec.js'])
.pipe(gulpProtractorAngular({
'configFile': 'protractor.conf.js',
'debug': false,
'autoStartStopServer': true
}))
.on('error', function(e) {
console.log(e);
})
.on('end', callback);
});

gulp.task('e2e', ['protractor'], function(callback) {
//process.exit();
stopServer();
callback();
});

gulp.task('serve', function(callback) {
const config = require('./webpack.dev.config');
config.entry.app = [
// this modules required to make HRM working
// it responsible for all this webpack magic
'webpack-hot-middleware/client?reload=true',
// application entry point
paths.entry
];

var compiler = webpack(config);

const server = serve.init({
port: process.env.PORT || 3000,
open: false,
server: {baseDir: root},
middleware: [
historyApiFallback(),
webpackDevMiddelware(compiler, {
stats: {
colors: colorsSupported,
chunks: false,
modules: false
},
publicPath: config.output.publicPath
}),
webpachHotMiddelware(compiler)
]
});

stopServer = function() {
server.exit();
}

callback();
});
`

[pkishino]

update on this ? Ive used most of this stuff and I can get the protractor to run properly, but as you say, when used with gulp it doesnt want to exit..

[fesor]

I currently working on getting rid of gulp completely. This will simplify stuff.

[FarhadG]

Do we have a working version of the latest here? Curious...