Async/Await support for e2e tests

gulpfile.ts

@@ -31,11 +31,9 @@ gulp.task('build.dev.watch', (done: any) =>
 // --------------
 // Build e2e.
 gulp.task('build.e2e', (done: any) =>
-  runSequence('clean.dev',
+  runSequence('clean.e2e',
               'tslint',
-              'build.assets.dev',
               'build.js.e2e',
-              'build.index.dev',
               done));
 
 // --------------
@@ -110,8 +108,11 @@ gulp.task('serve.dev', (done: any) =>
 // --------------
 // Serve e2e
 gulp.task('serve.e2e', (done: any) =>
-  runSequence('build.e2e',
+  runSequence(
+              'build.dev',
+              'build.e2e',
               'server.start',
+              'watch.dev',
               'watch.e2e',
               done));
 

protractor.conf.js

@@ -2,7 +2,7 @@ const config = {
   baseUrl: 'http://localhost:5555/',
 
   specs: [
-    './dist/dev/**/*.e2e-spec.js'
+    './dist/e2e/**/*.e2e-spec.js'
   ],
 
   exclude: [],

src/client/app/frameworks/test/index.ts

@@ -2,8 +2,6 @@
 import { Ng2Jasmine, TestApi } from './shorthand/ng2-jasmine';
 export const t: TestApi = Ng2Jasmine;
 
-// e2e
-export * from './e2e/dropdowns';
 
 // shorthand
 export * from './shorthand/ng2-jasmine';

src/client/app/frameworks/test/e2e/dropdowns.ts → src/e2e/framework/dropdowns.ts

@@ -1,5 +1,3 @@
-declare var browser: any, element: any, by: any;
-
 /**
 * Usage: selectDropdownByNumber ( selector, index)
 * selector : select element
@@ -21,12 +19,9 @@ export function selectDropdownByNumber(selector: string, index: number, millisec
 * selector : select element
 * item : option(s) in the dropdown.
 */
-export function selectDropdownByValue(selector: string, item: string, milliseconds: number) {
+export async function selectDropdownByValue(selector: string, item: string) {
   // var desiredOption: any;
-  element(by.css(selector)).sendKeys(item);
-  if (typeof milliseconds !== 'undefined') {
-    browser.sleep(milliseconds);
-  }
+  return await element(by.css(selector)).sendKeys(item);
 }
 
 /**

src/e2e/index.ts

@@ -0,0 +1,9 @@
+// convenient shorthand 
+import { Ng2Jasmine, TestApi } from './ng2-jasmine';
+export const t: TestApi = Ng2Jasmine;
+
+// e2e
+export * from './framework/dropdowns';
+
+// shorthand
+export * from './ng2-jasmine';

src/e2e/ng2-jasmine.ts

@@ -0,0 +1,52 @@
+import {
+  async,
+  fakeAsync,
+  inject,
+  tick
+} from '@angular/core/testing';
+
+// intellisense via shorthand
+export interface TestApi {
+  ae: Function;
+  afterEach: Function;
+  describe: Function;
+  fdescribe: Function;
+  xdescribe: Function;
+  async(fn: Function): Function;
+  fakeAsync(fn: Function): Function;
+  be(fn: Function): void;
+  beforeEach(fn: Function): void;
+  e(actual: any): jasmine.Matchers;
+  expect(actual: any): jasmine.Matchers;
+  fail(e?: any): void;
+  inject(tokens: Array<any>, fn: Function): Function;
+  it(name: string, fn: Function, timeOut?: number): void;
+  fit(name: string, fn: Function, timeOut?: number): void;
+  xit(name: string, fn: Function, timeOut?: number): void;
+  pending(reason?: string): void;
+  spyOn(object: any, method: string): jasmine.Spy;
+  tick(delay?: number): void;
+};
+
+// shorthand - reduces boilerplate in every test
+export const Ng2Jasmine: TestApi = {
+  ae: afterEach, // shorthand
+  afterEach: afterEach,
+  describe: describe,
+  fdescribe: fdescribe,
+  xdescribe: xdescribe,
+  async: async,
+  fakeAsync: fakeAsync,
+  be: beforeEach,  // shorthand beforeEach
+  beforeEach: beforeEach,
+  e: expect, // shorthand expect
+  expect: expect,
+  fail: fail,
+  inject: inject,
+  it: it,
+  fit: fit,
+  xit: xit,
+  pending: pending,
+  spyOn: spyOn,
+  tick: tick
+};

src/e2e/specs/about.component.e2e-spec.ts

@@ -0,0 +1,12 @@
+import { t } from '../index';
+t.describe('About', function () {
+
+  t.be(async function () {
+    return await browser.get('/about');
+  });
+
+  t.it('should have correct feature heading', async function () {
+    let el = element(by.css('sd-about h2'));
+    t.e(el.getText()).toEqual('Features');
+  });
+});

src/client/app/components/app.component.e2e-spec.ts → src/e2e/specs/app.component.e2e-spec.ts

@@ -1,11 +1,11 @@
-import { t } from '../frameworks/test/index';
+import { t } from '../index';
 
 declare var browser: any, element: any, by: any;
 
 t.describe('App', function() {
 
-  t.be(function() {
-    browser.get('/');
+  t.be(async function() {
+    return await browser.get('/');
   });
 
   t.it('should have a title', function() {

src/client/app/components/home/home.component.e2e-spec.ts → src/e2e/specs/home.component.e2e-spec.ts

@@ -1,15 +1,14 @@
-import { t, selectDropdownByValue } from '../../frameworks/test/index';
-
-declare var browser: any, element: any, by: any;
+import { t, selectDropdownByValue } from '../index';
 
 t.describe('Home', function() {
 
-  t.be(function() {
-    browser.get('/');
+  t.be(async function() {
+    return await browser.get('/');
   });
 
-  t.it('should have correct h2', function() {
-      t.e(element(by.css('sd-app sd-home h2')).getText()).toEqual('I love technology!');
+  t.it('should have correct h2', async function() {
+    var text = await element(by.css('sd-app sd-home h2')).getText();
+    t.e(text).toEqual('I love technology!');
   });
 
   t.it('should have an input', function() {
@@ -30,9 +29,9 @@ t.describe('Home', function() {
 
   // this works in development, but travis ci has timing issue with it
   // disabled just so travis doesn't complain
-  t.xit('language switcher should change language', function() {
-    t.e(element(by.css('sd-app sd-home h2')).getText()).toEqual('I love technology!');
-    selectDropdownByValue('sd-app sd-toolbar lang-switcher select', 'fr', 500);
+  t.it('language switcher should change language', async function() {
+    await selectDropdownByValue('sd-app sd-toolbar lang-switcher select', 'fr');
+
     t.e(element(by.css('sd-app sd-home h2')).getText()).toEqual(`J'adore la technologie !`);
     t.e(element(by.css('sd-app sd-home')).all(by.tagName('p')).first().getText())
       .toEqual(`En récompense, voici une liste de géniaux informaticiens :`);

src/e2e/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "module": "commonjs",
+    "declaration": false,
+    "removeComments": true,
+    "noLib": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "sourceMap": true,
+    "pretty": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "noImplicitAny": false,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noFallthroughCasesInSwitch": true,
+    "typeRoots": [
+      "../../node_modules/@types",
+      "../../node_modules"
+    ],
+    "types": [
+      "express",
+      "jasmine",
+      "node",
+      "protractor",
+      "systemjs"
+    ]
+  },
+  "exclude": [
+    "desktop",
+    "nativescript",
+    "node_modules",
+    "dist",
+    "src"
+  ],
+  "compileOnSave": false
+}

tools/config/seed.config.ts

@@ -206,6 +206,12 @@ export class SeedConfig {
    */
   APP_SRC = `src/${this.APP_CLIENT}`;
 
+  /**
+   * The name of the TypeScript project file
+   * @type {string}
+   */
+  APP_PROJECTNAME = 'tsconfig.json';
+
   /**
    * The folder of the applications asset files.
    * @type {string}
@@ -218,6 +224,11 @@ export class SeedConfig {
    */
   CSS_SRC = `${this.APP_SRC}/css`;
 
+  /**
+   * The folder of the e2e specs and framework 
+   */
+  E2E_SRC = 'src/e2e';
+
   /**
    * The folder of the applications scss files.
    * @type {string}
@@ -259,6 +270,12 @@ export class SeedConfig {
    */
   PROD_DEST = `${this.DIST_DIR}/prod`;
 
+  /**
+   * The folder for the build files of the e2e-specs
+   * @type {string}
+   */
+  E2E_DEST = `${this.DIST_DIR}/e2e`;
+
   /**
    * The folder for temporary files.
    * @type {string}

tools/tasks/seed/build.js.e2e.ts

@@ -13,13 +13,13 @@ const jsonSystemConfig = JSON.stringify(Config.SYSTEM_CONFIG_DEV);
  * for the e2e environment.
  */
 export = () => {
-  let tsProject = makeTsProject();
+  let tsProject = makeTsProject({ target: 'es2015' }, Config.E2E_SRC);
+
   let src = [
     Config.TOOLS_DIR + '/manual_typings/**/*.d.ts',
-    join(Config.APP_SRC, '**/*.ts'),
-    '!' + join(Config.APP_SRC, '**/*.spec.ts'),
-    '!' + join(Config.APP_SRC, `**/${Config.NG_FACTORY_FILE}.ts`)
+    join(Config.E2E_SRC, '**/*.ts')
   ];
+
   let result = gulp.src(src)
     .pipe(plugins.plumber())
     .pipe(plugins.sourcemaps.init())
@@ -30,5 +30,5 @@ export = () => {
     .pipe(plugins.template(Object.assign(templateLocals(), {
       SYSTEM_CONFIG_DEV: jsonSystemConfig
     })))
-    .pipe(gulp.dest(Config.APP_DEST));
+    .pipe(gulp.dest(Config.E2E_DEST));
 };

tools/tasks/seed/clean.e2e.ts

@@ -0,0 +1,7 @@
+import Config from '../../config';
+import { clean } from '../../utils';
+
+/**
+ * Executes the build process, cleaning all files within the `/dist/dev` directory.
+ */
+export = clean(Config.E2E_DEST);

tools/tasks/seed/watch.e2e.ts

@@ -1,6 +1,7 @@
 import { watch } from '../../utils';
+import Config from '../../config';
 
 /**
  * Executes the build process, watching for file changes and rebuilding the e2e environment.
  */
-export = watch('build.e2e');
+export = watch('build.e2e', Config.E2E_SRC);

tools/utils/seed/tsproject.ts

@@ -1,5 +1,6 @@
 import * as gulpLoadPlugins from 'gulp-load-plugins';
 import { join } from 'path';
+import ts = require('gulp-typescript/release/main');
 
 import Config from '../../config';
 
@@ -11,14 +12,14 @@ let tsProjects: any = {};
  * Creates a TypeScript project with the given options using the gulp typescript plugin.
  * @param {Object} options - The additional options for the project configuration.
  */
-export function makeTsProject(options: Object = {}, pathToTsConfig: string = Config.APP_SRC) {
+export function makeTsProject(options: ts.Settings = {}, pathToTsConfig: string = Config.APP_SRC, projectName = Config.APP_PROJECTNAME) {
   let optionsHash = JSON.stringify(options);
   if (!tsProjects[optionsHash]) {
     let config = Object.assign({
       typescript: require('typescript')
     }, options);
     tsProjects[optionsHash] =
-      plugins.typescript.createProject(join(pathToTsConfig, 'tsconfig.json'), config);
+      plugins.typescript.createProject(join(pathToTsConfig, projectName), config);
   }
   return tsProjects[optionsHash];
 }

tools/utils/seed/watch.ts

@@ -12,11 +12,11 @@ const plugins = <any>gulpLoadPlugins();
  * Watches the task with the given taskname.
  * @param {string} taskname - The name of the task.
  */
-export function watch(taskname: string) {
+export function watch(taskname: string, root: string = Config.APP_SRC) {
   return function () {
-    let paths:string[]=[
-      join(Config.APP_SRC,'**')
-    ].concat(Config.TEMP_FILES.map((p) => { return '!'+p; }));
+    let paths: string[] = [
+      join(root, '**')
+    ].concat(Config.TEMP_FILES.map((p) => { return '!' + p; }));
 
     plugins.watch(paths, (e: any) => {
       changeFileManager.addFile(e.path);