docs(upgrade): add E2E tests, update PhoneCat dependencies

closes #1070
Separates UpgradeAdapter reference guide examples from the PhoneCat tutorial examples
and update dependencies for phonecat upgrade examples

Author: teropa

public/docs/_examples/protractor.config.js

@@ -32,7 +32,7 @@ exports.config = {
 
   // doesn't seem to work.
   // resultJsonOutputFile: "foo.json",
-  
+
   onPrepare: function() {
     //// SpecReporter
     //var SpecReporter = require('jasmine-spec-reporter');
@@ -60,6 +60,12 @@ exports.config = {
     global.describeIf = describeIf;
     global.itIf = itIf;
     global.sendKeys = sendKeys;
+
+    // Allow changing bootstrap mode to NG1 for upgrade tests
+    global.setProtractorToNg1Mode = function() {
+      browser.useAllAngular2AppRoots = false;
+      browser.rootEl = 'body';
+    };
   },
 
   jasmineNodeOpts: {
@@ -187,4 +193,3 @@ function Reporter(options) {
   }
 
 }
-

public/docs/_examples/upgrade-adapter/e2e-spec.js

@@ -0,0 +1,197 @@
+describe('Upgrade Tests', function () {
+
+  // Protractor doesn't support the UpgradeAdapter's asynchronous
+  // bootstrap with Angular 1 at the moment. Get around it by
+  // waiting for an element to get `ng-scope` class.
+  function waitForNg1AsyncBootstrap() {
+    browser.ignoreSynchronization = true;
+    browser.driver.wait(function() {
+      return element(by.css('.ng-scope')).isPresent();
+    }, 5000);
+  }
+
+  describe('NG1 Auto-bootstrap', function() {
+
+    beforeAll(function () {
+      browser.get('/index-ng-app.html');
+      setProtractorToNg1Mode();
+    });
+
+    it('bootstraps as expected', function () {
+      expect(element(by.css('#message')).getText()).toEqual('Hello world');
+    });
+
+  });
+
+  describe('NG1 JavaScript Bootstrap', function() {
+
+    beforeAll(function () {
+      browser.get('/index-bootstrap.html');
+      setProtractorToNg1Mode();
+    });
+
+    it('bootstraps as expected', function () {
+      expect(element(by.css('#message')).getText()).toEqual('Hello world');
+    });
+
+  });
+
+  describe('NG1-2 Hybrid Bootstrap', function() {
+
+    beforeAll(function () {
+      browser.get('/index-1-2-hybrid-bootstrap.html');
+      setProtractorToNg1Mode();
+    });
+
+    it('bootstraps as expected', function () {
+      expect(element(by.css('#message')).getText()).toEqual('Hello world');
+    });
+
+  });
+
+  describe('NG1-2 Hybrid Bootstrap with Shared UpgradeAdapter', function() {
+
+    beforeAll(function () {
+      browser.get('/index-1-2-hybrid-shared-adapter-bootstrap.html');
+      setProtractorToNg1Mode();
+    });
+
+    it('bootstraps as expected', function () {
+      expect(element(by.css('#message')).getText()).toEqual('Hello world');
+    });
+
+  });
+
+  describe('Upgraded static component', function() {
+
+    beforeAll(function () {
+      browser.get('/index-upgrade-static.html');
+      setProtractorToNg1Mode();
+      waitForNg1AsyncBootstrap();
+    });
+
+    it('renders', function () {
+      expect(element(by.css('h2')).getText()).toEqual('Windstorm details!');
+    });
+
+  });
+
+
+  describe('Upgraded component with IO', function() {
+
+    beforeAll(function () {
+      browser.get('/index-upgrade-io.html');
+      setProtractorToNg1Mode();
+      waitForNg1AsyncBootstrap();
+    });
+
+    it('has inputs', function () {
+      expect(element(by.css('h2')).getText()).toEqual('Windstorm details!');
+    });
+
+    it('has outputs', function () {
+      element(by.buttonText('Delete')).click();
+      expect(element(by.css('h2')).getText()).toEqual('Ex-Windstorm details!');
+    });
+
+  });
+
+
+  describe('Downgraded static component', function() {
+
+    beforeAll(function () {
+      browser.get('/index-downgrade-static.html');
+      setProtractorToNg1Mode();
+      waitForNg1AsyncBootstrap();
+    });
+
+    it('renders', function () {
+      expect(element(by.css('h2')).getText()).toEqual('Windstorm details!');
+    });
+
+  });
+
+  describe('Downgraded component with IO', function() {
+
+    beforeAll(function () {
+      browser.get('/index-downgrade-io.html');
+      setProtractorToNg1Mode();
+      waitForNg1AsyncBootstrap();
+    });
+
+    it('has inputs', function () {
+      expect(element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!');
+    });
+
+    it('has outputs', function () {
+      element.all(by.buttonText('Delete')).first().click();
+      expect(element.all(by.css('h2')).first().getText()).toEqual('Ex-Windstorm details!');
+    });
+
+    it('supports ng-repeat', function () {
+      expect(element.all(by.css('hero-detail')).count()).toBe(3);
+    });
+
+  });
+
+
+  describe('Downgraded component with content projection', function() {
+
+    beforeAll(function () {
+      browser.get('/index-1-to-2-projection.html');
+      setProtractorToNg1Mode();
+      waitForNg1AsyncBootstrap();
+    });
+
+    it('can be transcluded into', function () {
+      expect(element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds');
+    });
+
+  });
+
+
+  describe('Upgraded component with transclusion', function() {
+
+    beforeAll(function () {
+      browser.get('/index-2-to-1-transclusion.html');
+      setProtractorToNg1Mode();
+      waitForNg1AsyncBootstrap();
+    });
+
+    it('can be projected into', function () {
+      expect(element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds');
+    });
+
+  });
+
+
+  describe('Upgrading NG1 Providers', function() {
+
+    beforeAll(function () {
+      browser.get('/index-1-to-2-providers.html');
+      setProtractorToNg1Mode();
+      waitForNg1AsyncBootstrap();
+    });
+
+    it('works', function () {
+      expect(element(by.css('h2')).getText()).toBe('1: Windstorm');
+    });
+
+  });
+
+
+  describe('Downgrading NG2 Providers', function() {
+
+    beforeAll(function () {
+      browser.get('/index-2-to-1-providers.html');
+      setProtractorToNg1Mode();
+      waitForNg1AsyncBootstrap();
+    });
+
+    it('works', function () {
+      expect(element(by.css('h2')).getText()).toBe('1: Windstorm');
+    });
+
+  });
+
+});

public/docs/_examples/upgrade-adapter/ts/.gitignore

@@ -0,0 +1 @@
+**/*.js

public/docs/_examples/upgrade/ts/adapter/app/js/1-2-hybrid-bootstrap/app.module.ts renamed to public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts

@@ -6,7 +6,9 @@ import {UpgradeAdapter} from 'angular2/upgrade';
 // #enddocregion bootstrap
 
 angular.module('heroApp', [])
-  .run(() => console.log('running'));
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });
 
 // #docregion bootstrap
 

public/docs/_examples/upgrade/ts/adapter/app/js/1-2-hybrid-shared-adapter-bootstrap/app.module.ts renamed to public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/app.module.ts

@@ -6,7 +6,9 @@ import {upgradeAdapter} from './upgrade_adapter';
 declare var angular:any;
 
 angular.module('heroApp', [])
-  .run(() => console.log('running'));
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });
 
 // #docregion bootstrap
 

public/docs/_examples/upgrade/ts/adapter/app/js/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts renamed to public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts

@@ -0,0 +1,12 @@
+declare var angular:any;
+
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });
+
+document.addEventListener('DOMContentLoaded', function() {
+  // #docregion bootstrap
+  angular.bootstrap(document.body, ['heroApp'], {strictDi: true});
+  // #enddocregion bootstrap
+});

public/docs/_examples/upgrade-adapter/ts/app/1-bootstrap/app.module.ts

@@ -0,0 +1,6 @@
+declare var angular:any;
+
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });

public/docs/_examples/upgrade-adapter/ts/app/1-ng-app/app.module.ts

@@ -0,0 +1,5 @@
+import {Hero} from '../Hero';
+
+export class MainController {
+  hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');
+}

public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-projection/app.module.ts renamed to public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts

@@ -0,0 +1,11 @@
+import {Heroes} from './heroes';
+
+// #docregion
+export const heroDetailComponent = {
+  template: `
+    <h2>{{$ctrl.hero.id}}: {{$ctrl.hero.name}}</h2>
+  `,
+  controller: ['heroes', function(heroes:Heroes) {
+    this.hero = heroes.get()[0];
+  }]
+};

public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-projection/hero-detail.component.ts renamed to public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/hero-detail.component.ts

@@ -16,5 +16,5 @@ const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
   directives: [HeroDetail]
 })
 export class ContainerComponent {
-  hero = new Hero(1, 'Windstorm', 'a descr');
+  hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');
 }

public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/main.controller.ts

@@ -4,7 +4,7 @@ export const heroDetailComponent = {
     hero: '='
   },
   template: `
-    <h2>{{hero.name}}</h2>
+    <h2>{{$ctrl.hero.name}}</h2>
     <div>
       <ng-transclude></ng-transclude>
     </div>

public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/app.module.ts renamed to public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/app.module.ts

@@ -7,6 +7,6 @@ export class MainController {
     new Hero(3, 'Spiderman')
   ]
   onDelete(hero:Hero) {
-    console.log('del', hero);
+    hero.name = 'Ex-' + hero.name;
   }
 }

public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/hero-detail.component.ts renamed to public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/hero-detail.component.ts

@@ -17,7 +17,7 @@ const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
 })
 export class ContainerComponent {
   hero = new Hero(1, 'Windstorm');
-  heroDeleted(event) {
-    console.log(event);
+  heroDeleted(hero:Hero) {
+    hero.name = 'Ex-' + hero.name;
   }
 }

public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/heroes.service.ts renamed to public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/heroes.service.ts

@@ -0,0 +1,17 @@
+// #docregion
+export const heroDetail = {
+  bindings: {
+    hero: '=',
+    deleted: '&'
+  },
+  template: `
+    <h2>{{$ctrl.hero.name}} details!</h2>
+    <div><label>id: </label>{{$ctrl.hero.id}}</div>
+    <button ng-click="$ctrl.onDelete()">Delete</button>
+  `,
+  controller: function() {
+    this.onDelete = () => {
+      this.deleted(this.hero);
+    };
+  }
+};

public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/upgrade_adapter.ts renamed to public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/upgrade_adapter.ts

@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="styles.css">
+
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+  <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+
+  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+  <script src="node_modules/systemjs/dist/system.src.js"></script>
+  <script src="node_modules/rxjs/bundles/Rx.js"></script>
+  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+  <script src="node_modules/angular2/bundles/upgrade.dev.js"></script>
+  <script>
+    System.config({
+      packages: {
+        app: {
+          format: 'register',
+          defaultExtension: 'js'
+        }
+      }
+    });
+    System.import('app/1-2-hybrid-bootstrap/app.module')
+          .then(null, console.error.bind(console));
+  </script>
+</head>
+<body>
+  <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
+</body>
+</html>