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 });
+ }
+}