Child route support, root guard support

e2e/shared/common.js

@@ -211,6 +211,34 @@ function writeAppFile(filePath, content) {
   });
 }
 
+/**
+ * Verify directory exists in src/app folder
+ */
+function verifyAppFolder(folderPath) {
+  const resolvedFolderPath = path.join(path.resolve(tmp), 'src', 'app', folderPath);
+  return new Promise((resolve, reject) => {
+    if (!fs.existsSync(resolvedFolderPath)) {
+      fs.mkdirSync(resolvedFolderPath);
+    }
+
+    resolve();
+  });
+}
+
+/**
+ * Remove directory if it exists in src/app folder
+ */
+function removeAppFolder(folderPath) {
+  const resolvedFolderPath = path.join(path.resolve(tmp), 'src', 'app', folderPath);
+  return new Promise((resolve, reject) => {
+    if (fs.existsSync(resolvedFolderPath)) {
+      fs.rmdirSync(resolvedFolderPath);
+    }
+
+    resolve();
+  });
+}
+
 /**
  * Remove file from the src/app folder -- Used for cleaning up after we've injected
  * files for a specific test or group of tests
@@ -242,5 +270,7 @@ module.exports = {
   prepareServe: prepareServe,
   tmp: tmp,
   writeAppFile: writeAppFile,
-  removeAppFile: removeAppFile
+  removeAppFile: removeAppFile,
+  verifyAppFolder: verifyAppFolder,
+  removeAppFolder: removeAppFolder
 };

e2e/shared/tests.js

@@ -1,5 +1,5 @@
 /*jshint jasmine: true, node: true */
-/*global element, by, $$*/
+/*global element, by, $$, protractor, browser*/
 'use strict';
 
 const fs = require('fs');
@@ -52,6 +52,40 @@ module.exports = {
     const nav = $$('.sky-navbar-item a');
     nav.get(1).click();
     expect(element(by.tagName('h1')).getText()).toBe('SKY UX Template');
+
+    const aboutComponent = $$('my-about')[0];
+    expect(aboutComponent).toBe(undefined);
+
+    done();
+  },
+
+  respectRootGuard: (done) => {
+    // if the home component isn't there, the outlet was not
+    // allowed to activate due to the Guard!
+    const homeComponent = $$('my-home')[0];
+    expect(homeComponent).toBe(undefined);
+    done();
+  },
+
+  verifyChildRoute: (done) => {
+    $$('#test').get(0).click();
+    expect($$('h1').get(0).getText()).toBe('Hi');
+    done();
+  },
+
+  verifyNestedChildRoute: (done) => {
+    $$('#child').get(0).click();
+
+    expect($$('h1').get(0).getText()).toBe('Hi');
+    expect($$('#text').get(0).getText()).toBe('Child');
+    done();
+  },
+
+  verifyNestedTopRoute: (done) => {
+    $$('#top').get(0).click();
+
+    expect($$('h1')[0]).toBe(undefined);
+    expect($$('#text').get(0).getText()).toBe('Top');
     done();
   }
 };

e2e/skyux-build-aot.e2e-spec.js

@@ -54,4 +54,73 @@ export class AboutGuard {
         .catch(console.error);
     });
   });
+
+  describe('w/root level guard', () => {
+    beforeAll((done) => {
+      const guard = `
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class RootGuard {
+  canActivateChild(next: any, state: any) {
+    return false;
+  }
+}
+`;
+
+      common.writeAppFile('index.guard.ts', guard)
+        .then(() => prepareBuild())
+        .then(done)
+        .catch(console.error);
+    });
+
+    it('should respect root guard', tests.respectRootGuard);
+
+    afterAll((done) => {
+      common.removeAppFile('index.guard.ts')
+        .then(() => common.afterAll())
+        .then(done)
+        .catch(console.error);
+    });
+  });
+
+  describe('w/child routes', () => {
+    beforeAll((done) => {
+      common.verifyAppFolder('test')
+        .then(() => common.writeAppFile('index.html', '<a id="test" routerLink="/test">Test</a>'))
+        .then(() => common.writeAppFile(
+          'test/index.html',
+          '<h1>Hi</h1>' +
+          '<a id="child" routerLink="/test/child">Child</a>' +
+          '<a id="top" routerLink="/test/child/top">Top</a>' +
+          '<router-outlet></router-outlet>')
+        )
+        .then(() => common.verifyAppFolder('test/#child'))
+        .then(() => common.writeAppFile('test/#child/index.html', '<div id="text">Child</div>'))
+        .then(() => common.verifyAppFolder('test/#child/top'))
+        .then(() => common.writeAppFile('test/#child/top/index.html', '<div id="text">Top</div>'))
+        .then(() => prepareBuild())
+        .then(done)
+        .catch(console.error);
+    });
+
+    it('should have working child route', tests.verifyChildRoute);
+
+    it('should have working nested child route', tests.verifyNestedChildRoute);
+
+    it('should have working top level route inside child route folder', tests.verifyNestedTopRoute);
+
+    afterAll((done) => {
+      common.removeAppFile('test/#child/top/index.html')
+        .then(() => common.writeAppFile('index.html', '<my-home></my-home>'))
+        .then(() => common.removeAppFile('test/#child/index.html'))
+        .then(() => common.removeAppFile('test/index.html'))
+        .then(() => common.removeAppFolder('test/#child/top'))
+        .then(() => common.removeAppFolder('test/#child'))
+        .then(() => common.removeAppFolder('test'))
+        .then(() => common.afterAll())
+        .then(done)
+        .catch(console.error);
+    });
+  });
 });

e2e/skyux-build-jit.e2e-spec.js

@@ -54,4 +54,73 @@ export class AboutGuard {
         .catch(console.error);
     });
   });
+
+  describe('w/root level guard', () => {
+    beforeAll((done) => {
+      const guard = `
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class RootGuard {
+  canActivateChild(next: any, state: any) {
+    return false;
+  }
+}
+`;
+
+      common.writeAppFile('index.guard.ts', guard)
+        .then(() => prepareBuild())
+        .then(done)
+        .catch(console.error);
+    });
+
+    it('should respect root guard', tests.respectRootGuard);
+
+    afterAll((done) => {
+      common.removeAppFile('index.guard.ts')
+        .then(() => common.afterAll())
+        .then(done)
+        .catch(console.error);
+    });
+  });
+
+  describe('w/child routes', () => {
+    beforeAll((done) => {
+      common.verifyAppFolder('test')
+        .then(() => common.writeAppFile('index.html', '<a id="test" routerLink="/test">Test</a>'))
+        .then(() => common.writeAppFile(
+          'test/index.html',
+          '<h1>Hi</h1>' +
+          '<a id="child" routerLink="/test/child">Child</a>' +
+          '<a id="top" routerLink="/test/child/top">Top</a>' +
+          '<router-outlet></router-outlet>')
+        )
+        .then(() => common.verifyAppFolder('test/#child'))
+        .then(() => common.writeAppFile('test/#child/index.html', '<div id="text">Child</div>'))
+        .then(() => common.verifyAppFolder('test/#child/top'))
+        .then(() => common.writeAppFile('test/#child/top/index.html', '<div id="text">Top</div>'))
+        .then(() => prepareBuild())
+        .then(done)
+        .catch(console.error);
+    });
+
+    it('should have working child route', tests.verifyChildRoute);
+
+    it('should have working nested child route', tests.verifyNestedChildRoute);
+
+    it('should have working top level route inside child route folder', tests.verifyNestedTopRoute);
+
+    afterAll((done) => {
+      common.removeAppFile('test/#child/top/index.html')
+        .then(() => common.writeAppFile('index.html', '<my-home></my-home>'))
+        .then(() => common.removeAppFile('test/#child/index.html'))
+        .then(() => common.removeAppFile('test/index.html'))
+        .then(() => common.removeAppFolder('test/#child/top'))
+        .then(() => common.removeAppFolder('test/#child'))
+        .then(() => common.removeAppFolder('test'))
+        .then(() => common.afterAll())
+        .then(done)
+        .catch(console.error);
+    });
+  });
 });