Implement async/await for e2e tests

Author: Vladimir Makayev

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,12 @@ gulp.task('serve.dev', (done: any) =>
 // --------------
 // Serve e2e
 gulp.task('serve.e2e', (done: any) =>
-  runSequence('build.e2e',
+  runSequence(
+              'tslint',
+              'build.dev',
+              'build.js.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/about/about.component.e2e-spec.ts renamed to src/e2e/specs/about.component.e2e-spec.ts

@@ -1,7 +1,7 @@
 describe('About', () => {
 
-  beforeEach( () => {
-    browser.get('/about');
+  beforeEach(async () => {
+    return await browser.get('/about');
   });
 
   it('should have correct feature heading', () => {

src/client/app/app.component.e2e-spec.ts renamed to src/e2e/specs/app.component.e2e-spec.ts

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

src/client/app/home/home.component.e2e-spec.ts renamed to src/e2e/specs/home.component.e2e-spec.ts

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

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

@@ -152,6 +152,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}
@@ -164,6 +170,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}
@@ -205,6 +216,12 @@ export class SeedConfig {
    */
   PROD_DEST = `${this.DIST_DIR}/prod`;
 
+  /**
+   * The folder for the built 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,12 +13,10 @@ 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())
@@ -30,5 +28,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/tslint.ts

@@ -13,6 +13,8 @@ export = () => {
   let src = [
     join(Config.APP_SRC, '**/*.ts'),
     '!' + join(Config.APP_SRC, '**/*.d.ts'),
+      join(Config.E2E_SRC, '**/*.ts'),
+    '!' + join(Config.E2E_SRC, '**/*.d.ts'),
     join(Config.TOOLS_DIR, '**/*.ts'),
     '!' + join(Config.TOOLS_DIR, '**/*.d.ts')
   ];

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