Add e2e tests

client/app/components/about/about.e2e.js

@@ -0,0 +1,33 @@
+describe('About Route', () => {
+
+	// Before each test
+	beforeEach(() => {
+
+		// Navigate to about component
+    browser.get('/about');
+  });
+
+	// About component should be visible
+  it('should be visible', () => {
+
+    // Expect home component to be visible
+    expect(element(by.tagName('about')).isDisplayed()).toBe(true);
+  });
+
+  // Link to Home navigates to Home Component
+  it('should navigate to Home if Home link clicked', () => {
+
+    // Click navigation to Home route
+    element(by.css('[ui-sref="home"]'))
+      .click()
+      .then(() => {
+
+        // Expect Home Component to be visible
+        expect(element(by.tagName('home')).isDisplayed()).toBe(true);
+
+        // Expect About component to be not be present
+        expect(element(by.tagName('about')).isPresent()).toBe(false);
+      })
+  });
+
+});

client/app/components/home/home.e2e.js

@@ -0,0 +1,34 @@
+describe('Home Route', () => {
+
+	// Before each test
+	beforeEach(() => {
+
+		// Navigate to home component
+    browser.get('/');
+  });
+
+
+  // Home component should be visible
+  it('should be visible', () => {
+
+		// Expect home component to be visible
+  	expect(element(by.tagName('home')).isDisplayed()).toBe(true);
+  });
+
+  // Link to About navigates to About Component
+  it('should navigate to About if About link clicked', () => {
+
+    // Click navigation to About route
+    element(by.css('[ui-sref="about"]'))
+      .click()
+      .then(() => {
+
+        // Expect About Component to be visible
+        expect(element(by.tagName('about')).isDisplayed()).toBe(true);
+
+        // Expect Home component to not be present
+        expect(element(by.tagName('home')).isPresent()).toBe(false);
+      })
+  });
+
+});

generator/component/temp.e2e.js

@@ -0,0 +1,16 @@
+describe('<%= upCaseName %> Route', () => {
+
+	// Before each test
+	beforeEach(() => {
+
+		// Navigate to <%= name %> component
+    browser.get('/<%= name %>');
+  });
+
+  // <%= upCaseName %> component should be visible
+  it('should be visible', () => {
+
+    // Expect <%= upCaseName %> component to be visible
+    expect(element(by.tagName('<%= name %>')).isDisplayed()).toBe(true);
+  });
+});

generator/component/temp.js

@@ -6,6 +6,15 @@ let <%= name %>Module = angular.module('<%= name %>', [
   uiRouter
 ])
 
+.config(($stateProvider) => {
+  "ngInject";
+  $stateProvider
+    .state('<%= name %>', {
+      url: '/<%= name %>',
+      template: '<<%= name %>></<%= name %>>'
+    });
+})
+
 .component('<%= name %>', <%= name %>Component);
 
 export default <%= name %>Module;

gulpfile.babel.js

@@ -15,6 +15,7 @@ import webpackDevMiddelware from 'webpack-dev-middleware';
 import webpachHotMiddelware from 'webpack-hot-middleware';
 import colorsSupported      from 'supports-color';
 import historyApiFallback   from 'connect-history-api-fallback';
+import gulpProtractorAngular from 'gulp-angular-protractor';
 
 let root = 'client';
 
@@ -60,7 +61,31 @@ gulp.task('webpack', (cb) => {
   });
 });
 
-gulp.task('serve', () => {
+
+
+// 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() {
+  process.exit();
+});
+
+
+
+gulp.task('serve', function() {
   const config = require('./webpack.dev.config');
   config.entry.app = [
     // this modules required to make HRM working
@@ -72,7 +97,7 @@ gulp.task('serve', () => {
 
   var compiler = webpack(config);
 
-  serve({
+  serve.init({
     port: process.env.PORT || 3000,
     open: false,
     server: {baseDir: root},
@@ -91,8 +116,12 @@ gulp.task('serve', () => {
   });
 });
 
+
+
 gulp.task('watch', ['serve']);
 
+
+
 gulp.task('component', () => {
   const cap = (val) => {
     return val.charAt(0).toUpperCase() + val.slice(1);

package.json

@@ -19,6 +19,7 @@
     "css-loader": "^0.19.0",
     "fs-walk": "0.0.1",
     "gulp": "^3.9.0",
+    "gulp-angular-protractor": "0.1.1",
     "gulp-rename": "^1.2.2",
     "gulp-template": "^3.0.0",
     "gulp-util": "^3.0.7",
@@ -33,6 +34,7 @@
     "mocha": "^2.3.0",
     "ng-annotate-loader": "0.0.10",
     "node-libs-browser": "^0.5.0",
+    "protractor": "3.1.1",
     "raw-loader": "^0.5.1",
     "run-sequence": "^1.1.0",
     "style-loader": "^0.12.2",
@@ -44,7 +46,8 @@
     "yargs": "^3.9.0"
   },
   "scripts": {
-    "test": "karma start"
+    "test": "karma start",
+    "e2e": "gulp e2e"
   },
   "keywords": [
     "angular",

protractor.conf.js

@@ -0,0 +1,25 @@
+exports.config = {
+	framework: "jasmine",
+	baseUrl: `http://localhost:${process.env.PORT || 3000}`,
+  specs: [
+		'client/**/**.e2e.js',
+    'client/**/*.e2e.js'
+	],
+	jasmineNodeOpts: {
+    showTiming: true,
+    showColors: true,
+    isVerbose: true,
+    includeStackTrace: true,
+    defaultTimeoutInterval: 400000
+  },
+  capabilities: {
+    'browserName': 'chrome',
+    'chromeOptions': {
+      'args': ['show-fps-counter=true']
+    }
+  },
+	allScriptsTimeout: 30000,
+	onPrepare: function () {
+    require("babel-core/register")({ retainLines: true });
+  }
+}