docs(upgrade): update examples to beta.3 and make necessary edits to guide.

closes #808

Also fixes some minor issues in code style and unit tests.

public/docs/_examples/upgrade/ts/adapter/package.json

@@ -10,13 +10,13 @@
     "typescript": "1.7.5"
   },
   "dependencies": {
-    "angular2": "2.0.0-beta.0",
+    "angular2": "2.0.0-beta.3",
     "es6-promise": "3.0.2",
     "es6-shim": "0.33.13",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
     "systemjs": "0.19.9",
-    "zone.js": "0.5.10"
+    "zone.js": "0.5.11"
   },
   "scripts": {
     "tsc": "tsc -p . -w"

public/docs/_examples/upgrade/ts/ng2_components/app/js/core/Phones.ts

@@ -7,8 +7,8 @@ import 'rxjs/add/operator/map';
 // #docregion phone-interface
 export interface Phone {
   name: string;
-  snippet: string;
+  snippet?: string;
-  images: string[];
+  images?: string[];
 }
 // #enddocregion phone-interface
 

public/docs/_examples/upgrade/ts/ng2_components/package.1.json

@@ -6,12 +6,12 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "angular2": "2.0.0-alpha.54",
+    "angular2": "2.0.0-beta.3",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
-    "zone.js": "0.5.10",
+    "zone.js": "0.5.11",
     "systemjs": "0.19.6"
   },
   "devDependencies": {

public/docs/_examples/upgrade/ts/ng2_components/test/karma.conf.1.js

@@ -21,13 +21,12 @@ module.exports = function(config){
       'node_modules/rxjs/bundles/Rx.js',
       'node_modules/angular2/bundles/http.dev.js',
       // #enddocregion ng2-http
-      'test/karma_test_shim.js',
-      {pattern: 'app/js/**/*.js', included: false, watched: true},
-      {pattern: 'test/unit/**/*.js', included: false, watched: true},
       // #docregion ng2-testing
       'node_modules/angular2/bundles/testing.dev.js',
       // #enddocregion ng2-testing
-
+      'test/karma_test_shim.js',
+      {pattern: 'app/js/**/*.js', included: false, watched: true},
+      {pattern: 'test/unit/**/*.js', included: false, watched: true},
       // #docregion html
       {pattern: 'app/js/**/*.html', included: false, watched: true}
     ],

public/docs/_examples/upgrade/ts/ng2_components/test/karma_test_shim.js

@@ -22,8 +22,11 @@ System.config({
 });
 
 // #docregion ng2
-System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
+System.import('angular2/testing').then(function(testing) {
-  browser_adapter.BrowserDomAdapter.makeCurrent();
+  return System.import('angular2/platform/testing/browser').then(function(testing_platform_browser) {
+    testing.setBaseTestProviders(testing_platform_browser.TEST_BROWSER_PLATFORM_PROVIDERS,
+                                 testing_platform_browser.TEST_BROWSER_APPLICATION_PROVIDERS);
+  });
 }).then(function() {
   return Promise.all(
     Object.keys(window.__karma__.files) // All files served by Karma.

public/docs/_examples/upgrade/ts/ng2_components/test/test_helper.ts

@@ -1,2 +1,4 @@
 // #docregion
+/// <reference path="../node_modules/angular2/typings/jasmine/jasmine.d.ts" />
 /// <reference path="../typings/angularjs/angular-mocks.d.ts" />
+/// <reference path="../node_modules/angular2/typings/angular-protractor/angular-protractor.d.ts" />

public/docs/_examples/upgrade/ts/ng2_components/test/unit/PhoneDetail.spec.ts

@@ -29,7 +29,7 @@ class MockPhones extends Phones {
   }
 }
 
-describe('PhoneDetail', function(){
+describe('PhoneDetail', () => {
 
   beforeEachProviders(() => [
     provide(Phones, {useClass: MockPhones}),
@@ -42,7 +42,7 @@ describe('PhoneDetail', function(){
       fixture.detectChanges();
       let compiled = fixture.debugElement.nativeElement;
 
-      expect(compiled.querySelector('.h1')).toHaveText(xyzPhoneData().name);
+      expect(compiled.querySelector('h1')).toHaveText(xyzPhoneData().name);
     });
   }));
 

public/docs/_examples/upgrade/ts/ng2_components/test/unit/PhoneList.spec.ts

@@ -23,7 +23,7 @@ class MockPhones extends Phones {
   }
 }
 
-describe('PhoneList', function(){
+describe('PhoneList', () => {
 
   beforeEachProviders(() => [
     provide(Phones, {useClass: MockPhones}),
@@ -35,7 +35,6 @@ describe('PhoneList', function(){
       injectAsync([TestComponentBuilder], (tcb) => {
     return tcb.createAsync(PhoneList).then((fixture) => {
       fixture.detectChanges();
-      fixture.detectChanges();
 
       let compiled = fixture.debugElement.nativeElement;
 

public/docs/_examples/upgrade/ts/ng2_final/app/js/app.ts

@@ -26,7 +26,7 @@ import {
 @RouteConfig([
   {path:'/phones', as: 'Phones', component: PhoneList},
   {path:'/phones/:phoneId', as: 'Phone', component: PhoneDetail},
-  {path:'/', redirectTo: ['/phones']}
+  {path:'/', redirectTo: ['Phones']}
 ])
 @Component({
   selector: 'pc-app',

public/docs/_examples/upgrade/ts/ng2_final/app/js/core/Phones.ts

@@ -7,8 +7,8 @@ import 'rxjs/add/operator/map';
 // #docregion phone-interface
 export interface Phone {
   name: string;
-  snippet: string;
+  snippet?: string;
-  images: string[];
+  images?: string[];
 }
 // #enddocregion phone-interface
 

public/docs/_examples/upgrade/ts/ng2_final/package.1.json

@@ -6,12 +6,12 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "angular2": "2.0.0-alpha.54",
+    "angular2": "2.0.0-beta.3",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
-    "zone.js": "0.5.10",
+    "zone.js": "0.5.11",
     "systemjs": "0.19.6"
   },
   "devDependencies": {

public/docs/_examples/upgrade/ts/ng2_final/test/karma_test_shim.js

@@ -22,8 +22,11 @@ System.config({
 });
 
 // #docregion ng2
-System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
+System.import('angular2/testing').then(function(testing) {
-  browser_adapter.BrowserDomAdapter.makeCurrent();
+  return System.import('angular2/platform/testing/browser').then(function(testing_platform_browser) {
+    testing.setBaseTestProviders(testing_platform_browser.TEST_BROWSER_PLATFORM_PROVIDERS,
+                                 testing_platform_browser.TEST_BROWSER_APPLICATION_PROVIDERS);
+  });
 }).then(function() {
   return Promise.all(
     Object.keys(window.__karma__.files) // All files served by Karma.

public/docs/_examples/upgrade/ts/ng2_final/test/test_helper.ts

@@ -0,0 +1,2 @@
+/// <reference path="../node_modules/angular2/typings/jasmine/jasmine.d.ts" />
+/// <reference path="../node_modules/angular2/typings/angular-protractor/angular-protractor.d.ts" />

public/docs/_examples/upgrade/ts/ng2_final/test/unit/CheckmarkPipe.spec.ts

@@ -2,7 +2,7 @@
 import {describe, beforeEachProviders, it, inject, expect} from 'angular2/testing';
 import {CheckmarkPipe} from '../../app/js/core/CheckmarkPipe';
 
-describe('CheckmarkPipe', function() {
+describe('CheckmarkPipe', () => {
 
   beforeEachProviders(() => [CheckmarkPipe]);
 

public/docs/_examples/upgrade/ts/ng2_final/test/unit/OrderByPipe.spec.ts

@@ -3,7 +3,7 @@ import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
 
 import OrderByPipe from '../../app/js/phone_list/OrderByPipe';
 
-describe('OrderByPipe', function() {
+describe('OrderByPipe', () => {
 
   let input:any[] = [
     {name: 'Nexus S', snippet: 'The Nexus S Phone', images: []},

public/docs/_examples/upgrade/ts/ng2_final/test/unit/PhoneDetail.spec.ts

@@ -32,7 +32,7 @@ class MockPhones extends Phones {
 }
 
 // #docregion routeparams
-describe('PhoneDetail', function(){
+describe('PhoneDetail', () => {
 
   beforeEachProviders(() => [
     provide(Phones, {useClass: MockPhones}),
@@ -46,7 +46,7 @@ describe('PhoneDetail', function(){
       fixture.detectChanges();
       let compiled = fixture.debugElement.nativeElement;
 
-      expect(compiled.querySelector('.h1')).toHaveText(xyzPhoneData().name);
+      expect(compiled.querySelector('h1')).toHaveText(xyzPhoneData().name);
     });
   }));
 

public/docs/_examples/upgrade/ts/ng2_final/test/unit/PhoneFilterPipe.spec.ts

@@ -4,7 +4,7 @@ import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
 import PhoneFilterPipe from '../../app/js/phone_list/PhoneFilterPipe';
 import {Phone} from '../../app/js/core/Phones';
 
-describe('PhoneFilterPipe', function() {
+describe('PhoneFilterPipe', () => {
 
   let phones:Phone[] = [
     {name: 'Nexus S', snippet: 'The Nexus S Phone', images: []},

public/docs/_examples/upgrade/ts/ng2_final/test/unit/PhoneList.spec.ts

@@ -22,7 +22,7 @@ class MockPhones extends Phones {
   }
 }
 
-describe('PhoneList', function(){
+describe('PhoneList', () => {
 
   beforeEachProviders(() => [
     provide(Phones, {useClass: MockPhones}),
@@ -34,7 +34,6 @@ describe('PhoneList', function(){
       injectAsync([TestComponentBuilder], (tcb) => {
     return tcb.createAsync(PhoneList).then((fixture) => {
       fixture.detectChanges();
-      fixture.detectChanges();
 
       let compiled = fixture.debugElement.nativeElement;
 

public/docs/_examples/upgrade/ts/ng2_final/test/unit/Phones.spec.ts

@@ -3,7 +3,7 @@ import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
 import {HTTP_PROVIDERS} from 'angular2/http';
 import {Phones} from '../../app/js/core/Phones';
 
-describe('Phones', function() {
+describe('Phones', () => {
 
   // load providers
   beforeEachProviders(() => [Phones, HTTP_PROVIDERS]);

public/docs/_examples/upgrade/ts/ng2_initial/package.1.json

@@ -6,12 +6,12 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "angular2": "2.0.0-alpha.54",
+    "angular2": "2.0.0-beta.3",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
-    "zone.js": "0.5.10",
+    "zone.js": "0.5.11",
     "systemjs": "0.19.6"
   },
   "devDependencies": {

public/docs/_examples/upgrade/ts/ng2_initial/test/karma.conf.1.js

@@ -24,11 +24,11 @@ module.exports = function(config){
       'node_modules/angular2/bundles/http.dev.js',
       // #enddocregion ng2-http
       'test/karma_test_shim.js',
-      {pattern: 'app/js/**/*.js', included: false, watched: true},
-      {pattern: 'test/unit/**/*.js', included: false, watched: true},
       // #docregion ng2-testing
-      'node_modules/angular2/bundles/testing.dev.js'
+      'node_modules/angular2/bundles/testing.dev.js',
       // #enddocregion ng2-testing
+      {pattern: 'app/js/**/*.js', included: false, watched: true},
+      {pattern: 'test/unit/**/*.js', included: false, watched: true}
     // #docregion ng2
     ],
     // #enddocregion ng2

public/docs/_examples/upgrade/ts/ng2_initial/test/karma_test_shim.js

@@ -22,8 +22,11 @@ System.config({
 });
 
 // #docregion ng2
-System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
+System.import('angular2/testing').then(function(testing) {
-  browser_adapter.BrowserDomAdapter.makeCurrent();
+  return System.import('angular2/platform/testing/browser').then(function(testing_platform_browser) {
+    testing.setBaseTestProviders(testing_platform_browser.TEST_BROWSER_PLATFORM_PROVIDERS,
+                                 testing_platform_browser.TEST_BROWSER_APPLICATION_PROVIDERS);
+  });
 }).then(function() {
   return Promise.all(
     Object.keys(window.__karma__.files) // All files served by Karma.

public/docs/_examples/upgrade/ts/ng2_initial/test/test_helper.ts

@@ -1,2 +1,4 @@
 // #docregion
+/// <reference path="../node_modules/angular2/typings/jasmine/jasmine.d.ts" />
 /// <reference path="../typings/angularjs/angular-mocks.d.ts" />
+/// <reference path="../node_modules/angular2/typings/angular-protractor/angular-protractor.d.ts" />

public/docs/_examples/upgrade/ts/ng2_initial/test/unit/Phones.spec.ts

@@ -3,7 +3,7 @@ import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
 import {HTTP_PROVIDERS} from 'angular2/http';
 import {Phones} from '../../app/js/core/Phones';
 
-describe('Phones', function() {
+describe('Phones', () => {
 
   // load providers
   beforeEachProviders(() => [Phones, HTTP_PROVIDERS]);

public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts

@@ -1,12 +1,11 @@
 // #docregion
 import {Observable} from 'rxjs';
-import {describe, beforeEach, it} from 'angular2/testing';
 import '../../app/js/phone_detail/phone_detail.module';
 import {Phones} from '../../app/js/core/Phones';
 
 import {FromObservable} from 'rxjs/observable/from';
 
-describe('PhoneDetailCtrl', function(){
+describe('PhoneDetailCtrl', () => {
   var scope, phones, $controller,
       xyzPhoneData = function() {
         return {

public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phone_list.controller.spec.ts

@@ -1,12 +1,11 @@
 // #docregion
 import {Observable} from 'rxjs';
-import {describe, beforeEach, it} from 'angular2/testing';
 import '../../app/js/phone_list/phone_list.module';
 import {Phones} from '../../app/js/core/Phones';
 
 import {FromObservable} from 'rxjs/observable/from';
 
-describe('PhoneListCtrl', function(){
+describe('PhoneListCtrl', () => {
   var scope, ctrl, $httpBackend;
 
   beforeEach(angular.mock.module('phonecat.list'));

public/docs/ts/latest/guide/upgrade.jade

@@ -1237,15 +1237,6 @@ figure
   
 +makeExample('upgrade/ts/ng2_initial/test/karma.conf.1.js', 'ng2', 'test/karma.conf.js', {otl: /(.*\.\.\/node\_modules\/angular2.*)/})
 
-.alert.is-important
-  :marked
-    After installing Angular 2, the TypeScript compiler will complain
-    about a clash in the global `$` variable: The jQuery typings used
-    by the Angular 1 typings introduce one, and the Protractor typings
-    used by Angular 2 introduce another. This will be resolved in a 
-    later release. See [issue #5459](https://github.com/angular/angular/issues/5459)
-    for some workarounds.
-
 :marked
   ## Bootstrapping A Hybrid 1+2 PhoneCat
 
@@ -1271,14 +1262,17 @@ figure
   ```
   rm -r typings/jasmine
   ```
-  Also remove the  reference to those type definitions from
-  `test/test_helper.ts`.
   
-  The same also goes for Protractor: Angular 2 comes with the types of the
+  We can replace the reference to those type definitions in
-  Protractor APIs, so it's safe to remove the `declare var` line from
+  `test/test_helper.ts` with the ones that come with Angular 2. Let's also
-  `scenarios.ts`.
+  add a reference to the Protractor typings while we're at it:
   
++makeExample('upgrade/ts/ng2_initial/test/test_helper.ts', null, 'test/test_helper.ts')
+
 :marked
+  It is now safe to remove the `declare var` line from `scenarios.ts` - the
+  Protractor APIs are now fully typed!
+
   To boostrap a hybrid application, we first need to initialize an `UpgradeAdapter`,
   which [provides the glue](#upgrading-with-the-upgrade-adapter) that joins the two
   versions of the framework together. Let's import the `UpgradeAdapter` class into
@@ -1464,8 +1458,8 @@ figure
 +makeExample('upgrade/ts/ng2_initial/test/karma.conf.1.js', 'ng2-testing')
 
 :marked
-  Then we'll update the Karma test shim. It should load the Angular 2
+  Then we'll update the Karma test shim. It'll make some of Angular 2 core
-  browser adapter before getting to the spec files:
+  providers available before starting to load any of the spec files:
   
 +makeExample('upgrade/ts/ng2_initial/test/karma_test_shim.js', null, 'test/karma_test_shim.js')
 
@@ -1668,6 +1662,11 @@ figure
   
 +makeExample('upgrade/ts/ng2_components/test/karma.conf.1.js', 'html', 'test/karma.conf.js')
 
+.alert.is-important
+  :marked
+    There is [a fixed but as of yet not released issue](https://github.com/angular/angular/pull/5996)
+    with the async pipe that may currently cause some problems with these tests.
+
 :marked
   Now we can start looking at our other controller, which is the one for
   the phone details. Rename `phone_detail.controller.ts` to `PhoneDetail.ts`, and set the
@@ -1986,7 +1985,9 @@ table
   * `app/js/core/upgrade_adapter.ts`
   * `app/js/phone_detail/phone_detail.module.ts`
   * `app/js/phone_list/phone_list.module.ts`
-  * `test/test_helper.ts`
+
+  From `test/test_helper.ts` you can remove the reference to Angular 1 typings. The
+  only ones still needed are the ones for Jasmine and Protractor.
 
   Finally, from `index.html` and `karma.conf.js`, remove all references to
   Angular 1 scripts as well as jQuery. When you're done, this is what `index.html`