From ff0fa743ed88794e5caf7c9d35dc58ccc1723128 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 9 Mar 2016 23:56:41 -0500 Subject: [PATCH 01/10] Added protractor dependency and end to end npm test scripts --- package.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/package.json b/package.json index 47daa74f..152af8ca 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,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,6 +45,10 @@ "yargs": "^3.9.0" }, "scripts": { + "preupdate-webdriver": "npm install", + "update-webdriver": "webdriver-manager update", + "pree2e": "npm run update-webdriver", + "e2e": "protractor protractor.conf.js", "test": "karma start" }, "keywords": [ From d83b56e33d91da730b588c5c4d7e3cdf7c5ddcd3 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 9 Mar 2016 23:58:28 -0500 Subject: [PATCH 02/10] Configured protractor to use Chrome, go to localhost:3000, use jasmine, run on any file ending with .e2e.js, run in verbose mode and use babel for es2015 compilation --- protractor.conf.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 protractor.conf.js diff --git a/protractor.conf.js b/protractor.conf.js new file mode 100644 index 00000000..e2ec5de2 --- /dev/null +++ b/protractor.conf.js @@ -0,0 +1,30 @@ +const webpackConfig = require('./webpack.config'); + +exports.config = { + framework: "jasmine", + baseUrl: `http://localhost:3000`, + seleniumAddress: 'http://localhost:4444/wd/hub', + specs: [ + 'client/**/**.e2e.js', + 'client/**/*.e2e.js' + ], + jasmineNodeOpts: { + showTiming: true, + showColors: true, + isVerbose: true, + includeStackTrace: true, + defaultTimeoutInterval: 400000 + }, + directConnect: true, + capabilities: { + 'browserName': 'chrome', + 'chromeOptions': { + 'args': ['show-fps-counter=true'] + } + }, + allScriptsTimeout: 30000, + onPrepare: function () { + require("babel-core/register")({ retainLines: true }); + browser.ignoreSynchronization = true; + } +} \ No newline at end of file From 6693f583d4d4d3efd33a36980374269cad0d6e59 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 9 Mar 2016 23:59:09 -0500 Subject: [PATCH 03/10] Added e2e tests for route components --- client/app/components/about/about.e2e.js | 33 +++++++++++++++++++++++ client/app/components/home/home.e2e.js | 34 ++++++++++++++++++++++++ 2 files changed, 67 insertions(+) create mode 100644 client/app/components/about/about.e2e.js create mode 100644 client/app/components/home/home.e2e.js diff --git a/client/app/components/about/about.e2e.js b/client/app/components/about/about.e2e.js new file mode 100644 index 00000000..5873bee6 --- /dev/null +++ b/client/app/components/about/about.e2e.js @@ -0,0 +1,33 @@ +describe('About Route', () => { + + // Before each test + beforeEach(() => { + + // Navigate to about component + browser.get('http://localhost:3000/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); + }) + }); + +}); \ No newline at end of file diff --git a/client/app/components/home/home.e2e.js b/client/app/components/home/home.e2e.js new file mode 100644 index 00000000..4fb6d3f1 --- /dev/null +++ b/client/app/components/home/home.e2e.js @@ -0,0 +1,34 @@ +describe('Home Route', () => { + + // Before each test + beforeEach(() => { + + // Navigate to home component + browser.get('http://localhost:3000'); + }); + + + // 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); + }) + }); + +}); \ No newline at end of file From a0d5cea827d5113f8aee3dd65ec575ee9bb27136 Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 10 Mar 2016 00:13:07 -0500 Subject: [PATCH 04/10] End to end test generator --- generator/component/temp.e2e.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 generator/component/temp.e2e.js diff --git a/generator/component/temp.e2e.js b/generator/component/temp.e2e.js new file mode 100644 index 00000000..1a708bd0 --- /dev/null +++ b/generator/component/temp.e2e.js @@ -0,0 +1,16 @@ +describe('<%= upCaseName %> Route', () => { + + // Before each test + beforeEach(() => { + + // Navigate to <%= name %> component + browser.get('http://localhost:3000/<%= name %>'); + }); + + // <%= upCaseName %> component should be visible + it('should be visible', () => { + + // Expect <%= upCaseName %> component to be visible + expect(element(by.tagName('<%= name %>')).isDisplayed()).toBe(true); + }); +}); \ No newline at end of file From 64f33fc30eff24bc3592fae44e11af6c40a66fbe Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 10 Mar 2016 00:14:31 -0500 Subject: [PATCH 05/10] Proposed module change with route included so as to ensure the component has a home at which to be tested. Still needs to be imported in components.js and provided a ui-sref link somewhere in order for route to work. --- generator/component/temp.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/generator/component/temp.js b/generator/component/temp.js index 686af98d..fbb3416b 100644 --- a/generator/component/temp.js +++ b/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 %>>>' + }); +}) + .component('<%= name %>', <%= name %>Component); export default <%= name %>Module; From f5c87503062f2505783ecf6d494e059b47cffb1a Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 10 Mar 2016 17:47:06 -0500 Subject: [PATCH 06/10] Removed ignoreSynchronization by default. Configured base URLs in both E2E tests and protractor configuration --- client/app/components/about/about.e2e.js | 2 +- client/app/components/home/home.e2e.js | 2 +- generator/component/temp.e2e.js | 2 +- protractor.conf.js | 5 +---- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/client/app/components/about/about.e2e.js b/client/app/components/about/about.e2e.js index 5873bee6..8cc740aa 100644 --- a/client/app/components/about/about.e2e.js +++ b/client/app/components/about/about.e2e.js @@ -4,7 +4,7 @@ describe('About Route', () => { beforeEach(() => { // Navigate to about component - browser.get('http://localhost:3000/about'); + browser.get('/about'); }); // About component should be visible diff --git a/client/app/components/home/home.e2e.js b/client/app/components/home/home.e2e.js index 4fb6d3f1..732012ac 100644 --- a/client/app/components/home/home.e2e.js +++ b/client/app/components/home/home.e2e.js @@ -4,7 +4,7 @@ describe('Home Route', () => { beforeEach(() => { // Navigate to home component - browser.get('http://localhost:3000'); + browser.get('/'); }); diff --git a/generator/component/temp.e2e.js b/generator/component/temp.e2e.js index 1a708bd0..e60c5056 100644 --- a/generator/component/temp.e2e.js +++ b/generator/component/temp.e2e.js @@ -4,7 +4,7 @@ describe('<%= upCaseName %> Route', () => { beforeEach(() => { // Navigate to <%= name %> component - browser.get('http://localhost:3000/<%= name %>'); + browser.get('/<%= name %>'); }); // <%= upCaseName %> component should be visible diff --git a/protractor.conf.js b/protractor.conf.js index e2ec5de2..c64b9d18 100644 --- a/protractor.conf.js +++ b/protractor.conf.js @@ -1,8 +1,6 @@ -const webpackConfig = require('./webpack.config'); - exports.config = { framework: "jasmine", - baseUrl: `http://localhost:3000`, + baseUrl: `http://localhost:${process.env.PORT || 3000}`, seleniumAddress: 'http://localhost:4444/wd/hub', specs: [ 'client/**/**.e2e.js', @@ -25,6 +23,5 @@ exports.config = { allScriptsTimeout: 30000, onPrepare: function () { require("babel-core/register")({ retainLines: true }); - browser.ignoreSynchronization = true; } } \ No newline at end of file From 4ed1d56f231897bcaca429fd6f86dd8f123250e1 Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 10 Mar 2016 18:49:53 -0500 Subject: [PATCH 07/10] Replaced default ChromeDriver with updated Selenium jar. --- protractor.conf.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/protractor.conf.js b/protractor.conf.js index c64b9d18..88ad5e65 100644 --- a/protractor.conf.js +++ b/protractor.conf.js @@ -1,8 +1,8 @@ exports.config = { framework: "jasmine", baseUrl: `http://localhost:${process.env.PORT || 3000}`, - seleniumAddress: 'http://localhost:4444/wd/hub', - specs: [ + seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.51.0.jar', + specs: [ 'client/**/**.e2e.js', 'client/**/*.e2e.js' ], @@ -13,7 +13,6 @@ exports.config = { includeStackTrace: true, defaultTimeoutInterval: 400000 }, - directConnect: true, capabilities: { 'browserName': 'chrome', 'chromeOptions': { From bd036f3d41a78e7489bbed5640466cd6f79d831f Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 10 Mar 2016 18:50:34 -0500 Subject: [PATCH 08/10] Moved e2e tests to gulp. Can't seem to stop the serve process for some reason --- gulpfile.babel.js | 33 +++++++++++++++++++++++++++++++-- package.json | 1 + 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 1598dfe6..cc401df5 100644 --- a/gulpfile.babel.js +++ b/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() { + serve.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); diff --git a/package.json b/package.json index 152af8ca..5e14f719 100644 --- a/package.json +++ b/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", From 4322c73f28b77b46bf28d4fa6cb76c8ecaff6e3e Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 10 Mar 2016 18:52:30 -0500 Subject: [PATCH 09/10] Figured out how to stop server --- gulpfile.babel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index cc401df5..a5535f02 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -80,7 +80,7 @@ gulp.task('protractor', ['serve'], function(callback) { gulp.task('e2e', ['protractor'], function() { - serve.exit(); + process.exit(); }); From 946f89bf348162759d2070ff8528d66fd00828bb Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 10 Mar 2016 19:00:21 -0500 Subject: [PATCH 10/10] Jar location no longer needed as gulp-protractor-angular handles the update and location for us. No longer need npm scripts either --- package.json | 7 ++----- protractor.conf.js | 1 - 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 5e14f719..6a7b3368 100644 --- a/package.json +++ b/package.json @@ -46,11 +46,8 @@ "yargs": "^3.9.0" }, "scripts": { - "preupdate-webdriver": "npm install", - "update-webdriver": "webdriver-manager update", - "pree2e": "npm run update-webdriver", - "e2e": "protractor protractor.conf.js", - "test": "karma start" + "test": "karma start", + "e2e": "gulp e2e" }, "keywords": [ "angular", diff --git a/protractor.conf.js b/protractor.conf.js index 88ad5e65..fbfa6026 100644 --- a/protractor.conf.js +++ b/protractor.conf.js @@ -1,7 +1,6 @@ exports.config = { framework: "jasmine", baseUrl: `http://localhost:${process.env.PORT || 3000}`, - seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.51.0.jar', specs: [ 'client/**/**.e2e.js', 'client/**/*.e2e.js'