feat(protractor): add e2e tests in CI

.travis.yml

@@ -37,3 +37,6 @@ env:
 
 cache:
   directories: node_modules
+
+script:
+  - npm run tests.all

appveyor.yml

@@ -7,7 +7,7 @@ version: "{build}"
 
 # Test against this version of Node.js
 environment:
-  nodejs_version: "4.1.0"
+  nodejs_version: "Stable"
   # https://github.com/DefinitelyTyped/tsd#tsdrc
   # Token has no scope (read-only access to public information)
   TSD_GITHUB_TOKEN: "9b18c72997769f3867ef2ec470e626d39661795d"
@@ -32,8 +32,7 @@ test_script:
   # We test multiple Windows shells because of prior stdout buffering issues
   # filed against Grunt. https://github.com/joyent/node/issues/3584
   - ps: "npm --version # PowerShell" # Pass comment to PS for easier debugging
-  - npm test
-
+  - npm run tests.all
 
 notifications:
   - provider: Webhook
@@ -42,3 +41,4 @@ notifications:
     on_build_failure: true
     on_build_status_changed: true
 
+cache: node_modules

package.json

@@ -19,7 +19,7 @@
     "gulp": "gulp",
     "karma": "karma",
     "karma.start": "karma start",
-    "postinstall": "typings install && gulp check.versions && npm prune",
+    "postinstall": "typings install && gulp check.versions && npm prune && gulp webdriver",
     "reinstall": "npm cache clean && npm install",
     "serve.coverage": "remap-istanbul -b src/ -i coverage/coverage-final.json -o coverage -t html && npm run gulp -- serve.coverage --color",
     "serve.dev": "gulp serve.dev --color",
@@ -29,6 +29,8 @@
     "start": "gulp serve.dev --color",
     "tasks.list": "gulp --tasks-simple --color",
     "test": "gulp test --color",
+    "e2e": "gulp build.prod --color && gulp build.js.e2e --color && gulp e2e --color",
+    "tests.all": "npm test && npm run e2e",
     "webdriver-start": "webdriver-manager start",
     "webdriver-update": "webdriver-manager update"
   },
@@ -53,13 +55,16 @@
     "extend": "^3.0.0",
     "gulp": "^3.9.1",
     "gulp-cached": "^1.1.0",
+    "gulp-clean-css": "^2.0.7",
     "gulp-concat": "^2.6.0",
+    "gulp-concat-css": "^2.2.0",
     "gulp-filter": "^4.0.0",
     "gulp-inject": "^4.0.0",
     "gulp-inline-ng2-template": "^1.1.2",
     "gulp-load-plugins": "^1.2.0",
     "gulp-plumber": "~1.1.0",
     "gulp-postcss": "^6.1.0",
+    "gulp-protractor": "^2.3.0",
     "gulp-shell": "~0.5.2",
     "gulp-sourcemaps": "2.0.0-alpha",
     "gulp-template": "^4.0.0",
@@ -69,8 +74,6 @@
     "gulp-uglify": "^1.5.3",
     "gulp-util": "^3.0.7",
     "gulp-watch": "^4.3.5",
-    "gulp-concat-css": "^2.2.0",
-    "gulp-clean-css": "^2.0.7",
     "is-ci": "^1.0.8",
     "isstream": "^0.1.2",
     "jasmine-core": "~2.4.1",

protractor.conf.js

@@ -1,32 +1,35 @@
-exports.config = {
-  baseUrl: 'http://localhost:5555',
+const config = {
+  baseUrl: 'http://localhost:5555/',
 
   specs: [
-    'dist/dev/**/*.e2e.js'
+    './dist/dev/**/*.e2e.js'
   ],
+
   exclude: [],
 
-  framework: 'jasmine2',
+  // 'jasmine' by default will use the latest jasmine framework
+  framework: 'jasmine',
 
-  allScriptsTimeout: 110000,
+  // allScriptsTimeout: 110000,
 
   jasmineNodeOpts: {
-    showTiming: true,
+    // showTiming: true,
     showColors: true,
     isVerbose: false,
     includeStackTrace: false,
-    defaultTimeoutInterval: 400000
+    // defaultTimeoutInterval: 400000
   },
+
   directConnect: true,
 
   capabilities: {
-    'browserName': 'chrome'
+    browserName: 'chrome'
   },
 
   onPrepare: function() {
-    var SpecReporter = require('jasmine-spec-reporter');
+    const SpecReporter = require('jasmine-spec-reporter');
     // add jasmine spec reporter
-    jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: true}));
+    jasmine.getEnv().addReporter(new SpecReporter({ displayStacktrace: true }));
 
     browser.ignoreSynchronization = false;
   },
@@ -37,7 +40,14 @@ exports.config = {
    *
    * useAllAngular2AppRoots: tells Protractor to wait for any angular2 apps on the page instead of just the one matching
    * `rootEl`
-   *
    */
   useAllAngular2AppRoots: true
 };
+
+if (process.env.TRAVIS) {
+  config.capabilities = {
+    browserName: 'firefox'
+  };
+}
+
+exports.config = config;

src/client/app/+about/components/about.component.e2e.ts

@@ -1,12 +1,11 @@
 describe('About', () => {
   beforeEach(() => {
     browser.get('/');
-    browser.waitForAngular();
     element.all(by.css('nav > a')).get(1).click();
   });
 
   it('should have correct feature heading', () => {
-    let el = element(by.css('sd-app sd-about h2'));
+    let el = element(by.css('sd-about h2'));
     expect(el.getText()).toEqual('Features');
   });
 });

src/client/app/+home/components/home.component.e2e.ts

@@ -1,7 +1,7 @@
 describe('Home', () => {
 
   beforeEach( () => {
-    browser.get('');
+    browser.get('/');
   });
 
   it('should have an input', () => {

src/client/app/components/app.component.e2e.ts

@@ -1,7 +1,7 @@
 describe('App', () => {
 
   beforeEach( () => {
-      browser.get('');
+      browser.get('/');
   });
 
   it('should have a title', () => {

tools/tasks/seed/e2e.ts

@@ -0,0 +1,27 @@
+import * as gulp from 'gulp';
+import * as express from 'express';
+import { protractor } from 'gulp-protractor';
+
+class Protractor {
+  server(port: number, dir: string) {
+    let app = express();
+    app.use(express.static(dir));
+    return new Promise((resolve, reject) => {
+      let server = app.listen(port, () => {
+        resolve(server);
+      });
+    });
+  }
+}
+
+export = (done: any) => {
+  new Protractor()
+    .server(5555, './dist/prod')
+    .then((server: any) => {
+      gulp
+        .src('./dist/dev/**/*.e2e.js')
+        .pipe(protractor({ configFile: 'protractor.conf.js' }))
+        .on('error', (error: string) => { throw error; })
+        .on('end', () => { server.close(done); });
+    });
+};

tools/tasks/seed/webdriver.ts

@@ -0,0 +1,3 @@
+import { webdriver_update } from 'gulp-protractor';
+
+export = webdriver_update;

typings.json

@@ -15,6 +15,7 @@
     "glob": "github:DefinitelyTyped/DefinitelyTyped/glob/glob.d.ts#5c3e47967affa3c4128a3875d1664ba206ae1b0f",
     "gulp": "github:DefinitelyTyped/DefinitelyTyped/gulp/gulp.d.ts#5c3e47967affa3c4128a3875d1664ba206ae1b0f",
     "gulp-load-plugins": "github:DefinitelyTyped/DefinitelyTyped/gulp-load-plugins/gulp-load-plugins.d.ts#e081148d88b857d66509e3b46edbd08b3f75f96a",
+    "gulp-protractor": "registry:dt/gulp-protractor#1.0.0+20160316155526",
     "gulp-shell": "github:DefinitelyTyped/DefinitelyTyped/gulp-shell/gulp-shell.d.ts#5c3e47967affa3c4128a3875d1664ba206ae1b0f",
     "gulp-util": "github:DefinitelyTyped/DefinitelyTyped/gulp-util/gulp-util.d.ts#5a8fc5ee71701431e4fdbb80c506e3c13f85a9ff",
     "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#26c98c8a9530c44f8c801ccc3b2057e2101187ee",