chore(tests): Testapp with @angular/upgrade/static (ngUpgrade for A…

…oT apps) (#3758)

These kids and their new fangled "ahead of time compilation."  They're upgrading
their apps using `@angular/upgrade/static` now.  I guess we should get with the
times and run tests against a webapp running this hip new API.

spec/hybrid/async_spec.js

@@ -1,32 +1,61 @@
 describe('async angular1/2 hybrid using ngUpgrade application', function() {
-  beforeEach(function() {
-    browser.get('/hybrid');
-  });
+  describe('@angular/upgrade/static', function() {
+    beforeEach(function() {
+      browser.get('/upgrade');
+    });
 
-  it('should set browser flag via config', function() {
-    expect(browser.ng12Hybrid).toBe(true);
-  });
+    it('should set browser flag via config', function() {
+      expect(browser.ng12Hybrid).toBe(true);
+    });
+
+    it('should be able to click buttons and wait for $timeout', function() {
+      var rootBtn = $$('my-app button').first();
+      expect(rootBtn.getText()).toEqual('Click Count: 0');
+      rootBtn.click();
+      expect(rootBtn.getText()).toEqual('Click Count: 1');
+
+      var ng2Btn = $$('ng2 button').first();
+      expect(ng2Btn.getText()).toEqual('Click Count: 0');
+      ng2Btn.click();
+      expect(ng2Btn.getText()).toEqual('Click Count: 1');
+
+      var ng1Btn = $('ng1 button');
+      expect(ng1Btn.getText()).toEqual('Click Count: 0');
+      ng1Btn.click();
+      expect(ng1Btn.getText()).toEqual('Click Count: 1');
+    });
 
-  it('should be able to click buttons and wait for $timeout', function() {
-    var rootBtn = $$('my-app button').first();
-    expect(rootBtn.getText()).toEqual('Click Count: 0');
-    rootBtn.click();
-    expect(rootBtn.getText()).toEqual('Click Count: 1');
-
-    var ng2Btn = $$('ng2 button').first();
-    expect(ng2Btn.getText()).toEqual('Click Count: 0');
-    ng2Btn.click();
-    expect(ng2Btn.getText()).toEqual('Click Count: 1');
-
-    var ng1Btn = $('ng1 button');
-    expect(ng1Btn.getText()).toEqual('Click Count: 0');
-    ng1Btn.click();
-    expect(ng1Btn.getText()).toEqual('Click Count: 1');
+    it('should use the flag on the browser object', function() {
+      browser.ng12Hybrid = false;
+      browser.get('/ng2'); // will time out if Protractor expects hybrid
+      browser.ng12Hybrid = true;
+    });
   });
 
-  it('should use the flag on the browser object', function() {
-    browser.ng12Hybrid = false;
-    browser.get('/ng2'); // will time out if Protractor expects hybrid
-    browser.ng12Hybrid = true;
+  describe('@angular/upgrade (not static)', function() {
+    beforeEach(function() {
+      browser.get('/upgrade?no_static');
+    });
+
+    it('should set browser flag via config', function() {
+      expect(browser.ng12Hybrid).toBe(true);
+    });
+
+    it('should be able to click buttons and wait for $timeout', function() {
+      var rootBtn = $$('my-app button').first();
+      expect(rootBtn.getText()).toEqual('Click Count: 0');
+      rootBtn.click();
+      expect(rootBtn.getText()).toEqual('Click Count: 1');
+
+      var ng2Btn = $$('ng2 button').first();
+      expect(ng2Btn.getText()).toEqual('Click Count: 0');
+      ng2Btn.click();
+      expect(ng2Btn.getText()).toEqual('Click Count: 1');
+
+      var ng1Btn = $('ng1 button');
+      expect(ng1Btn.getText()).toEqual('Click Count: 0');
+      ng1Btn.click();
+      expect(ng1Btn.getText()).toEqual('Click Count: 1');
+    });
   });
 });

testapp/app.css

@@ -13,19 +13,27 @@ ol {
 }
 
 li {
-  width: 25%;
-  padding: 4%;
+  width: 18%;
+  padding: 3%;
   display: block;
   text-align: center;
   position: absolute;
   top: 0;
   margin: auto;
 }
 
-li.left, li.mid {
+li.left {
   left: 0;
 } 
 
-li.right, li.mid {
+li.left.mid {
+  left: 25%;
+}
+
+li.right {
   right: 0;
-} 
+}
+
+li.right.mid {
+  right: 25%;
+}

testapp/index.html

@@ -11,8 +11,11 @@ <h1>Choose Version</h1>
       <li class="left">
         <a href="ng1">Angular 1</a>
       </li>
-      <li class='mid'>
-        <a href='hybrid'>Hybrid</a>
+      <li class='mid left'>
+        <a href='upgrade?no_static'>Hybrid (JIT)</a>
+      </li>
+      <li class='mid right'>
+        <a href='upgrade'>Hybrid (AOT)</a>
       </li>
       <li class="right">
         <a href="ng2">Angular 2</a>

testapp/package.json

@@ -5,30 +5,30 @@
     "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
-    "lite": "lite-server",
-    "typings": "typings",
-    "postinstall": "typings install"
+    "lite": "lite-server"
   },
   "dependencies": {
-    "@angular/common": "2.2.0",
-    "@angular/compiler": "2.2.0",
-    "@angular/core": "2.2.0",
-    "@angular/http": "2.2.0",
-    "@angular/platform-browser": "2.2.0",
-    "@angular/platform-browser-dynamic": "2.2.0",
+    "@angular/common": "2.2.1",
+    "@angular/compiler": "2.2.1",
+    "@angular/core": "2.2.1",
+    "@angular/http": "2.2.1",
+    "@angular/platform-browser": "2.2.1",
+    "@angular/platform-browser-dynamic": "2.2.1",
     "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.2.0",
-    "systemjs": "0.19.27",
+    "@angular/upgrade": "2.2.1",
+    "@types/angular": "^1.5.20",
+    "@types/core-js": "^0.9.34",
+    "@types/node": "^6.0.48",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.12",
+    "systemjs": "0.19.27",
     "zone.js": "0.6.25"
   },
   "devDependencies": {
     "concurrently": "2.2.0",
+    "express": "4.13.3",
     "lite-server": "2.2.0",
-    "typescript": "1.8.10",
-    "typings":"1.0.4",
-    "express": "4.13.3"
+    "typescript": "^2.0.10"
   }
 }

testapp/tsconfig.json

@@ -8,10 +8,14 @@
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": false,
-    "suppressImplicitAnyIndexErrors": true
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "./node_modules/@types/"
+    ]
   },
+  "compileOnSave": true,
   "exclude": [
-    "typings/globals",
-    "node_modules"
+    "node_modules",
+    "**/*-aot.ts"
   ]
 }

testapp/upgrade/app/main.ts

@@ -0,0 +1,9 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+import { AppModule } from './module';
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['upgradeApp'], {strictDi: true});
+});

testapp/upgrade/app/module.ts

@@ -0,0 +1,32 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { RootDirective } from './myApp';
+import { Ng2Component } from './ng2';
+import { Ng1Directive, Ng1Component } from './ng1';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    Ng2Component,
+    Ng1Component,
+  ],
+  entryComponents: [
+    Ng2Component
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+
+angular.module('upgradeApp', [])
+  .directive('ng1', Ng1Directive)
+  .directive('ng2', downgradeComponent({
+    component: Ng2Component,
+  }) as angular.IDirectiveFactory)
+  .directive('myApp', RootDirective);