add upgrade-phonecat-3-router, move final to upgrade-phonecat-4-final

Author: filipesilva

public/docs/_examples/upgrade-phonecat-3-final/ts/karma.conf.ng1.js

@@ -0,0 +1,34 @@
+This is the Angular Phonecat application adjusted to fit our boilerplate project
+structure.
+
+The following changes from vanilla Phonecat are applied:
+
+* Karma config for unit tests is in karma.conf.ng1.js because the boilerplate
+  Karma config is not compatible with the way Angular 1 tests need to be run.
+  The shell script run-unit-tests.sh can be used to run the unit tests.
+* There's a `package.ng1.json`, which is not used to run anything but only to
+  show an example of changing the PhoneCat http-server root path.
+* Also for the Karma shim, there is a `karma-test-shim.1.js` file which isn't
+  used but is shown in the test appendix.
+* Instead of using Bower, Angular 1 and its dependencies are fetched from a CDN
+  in index.html and karma.conf.ng1.js.
+* E2E tests have been moved to the parent directory, where `run-e2e-tests` can
+  discover and run them along with all the other examples.
+* Most of the phone JSON and image data removed in the interest of keeping
+  repo weight down. Keeping enough to retain testability of the app.
+
+## Running the app
+
+Start like any example
+
+    npm run start
+
+## Running unit tests
+
+    ./run-unit-tests.sh
+
+## Running E2E tests
+
+Like for any example (at the project root):
+
+    gulp run-e2e-tests --filter=phonecat-2

public/docs/_examples/upgrade-phonecat-3-router/README.md

@@ -0,0 +1,107 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+import { setProtractorToHybridMode } from '../protractor-helpers';
+
+// Angular E2E Testing Guide:
+// https://docs.angularjs.org/guide/e2e-testing
+
+describe('PhoneCat Application', function() {
+
+  beforeAll(function () {
+    setProtractorToHybridMode();
+  });
+
+  it('should redirect `index.html` to `index.html#!/phones', function() {
+    browser.get('index.html');
+    expect(browser.getLocationAbsUrl()).toBe('/phones');
+  });
+
+  xdescribe('View: Phone list', function() {
+
+    beforeEach(function() {
+      browser.get('index.html#!/phones');
+    });
+
+    it('should filter the phone list as a user types into the search box', function() {
+      let phoneList = element.all(by.css('.phones li'));
+      let query = element(by.css('input'));
+
+      expect(phoneList.count()).toBe(20);
+
+      query.sendKeys('nexus');
+      expect(phoneList.count()).toBe(1);
+
+      query.clear();
+      query.sendKeys('motorola');
+      expect(phoneList.count()).toBe(8);
+    });
+
+    it('should be possible to control phone order via the drop-down menu', function() {
+      let queryField = element(by.css('input'));
+      let orderSelect = element(by.css('select'));
+      let nameOption = orderSelect.element(by.css('option[value="name"]'));
+      let phoneNameColumn = element.all(by.css('.phones .name'));
+
+      function getNames() {
+        return phoneNameColumn.map(function(elem) {
+          return elem.getText();
+        });
+      }
+
+      queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
+
+      expect(getNames()).toEqual([
+        'Motorola XOOM\u2122 with Wi-Fi',
+        'MOTOROLA XOOM\u2122'
+      ]);
+
+      nameOption.click();
+
+      expect(getNames()).toEqual([
+        'MOTOROLA XOOM\u2122',
+        'Motorola XOOM\u2122 with Wi-Fi'
+      ]);
+    });
+
+    it('should render phone specific links', function() {
+      let query = element(by.css('input'));
+      query.sendKeys('nexus');
+
+      element.all(by.css('.phones li a')).first().click();
+      browser.sleep(200); // Not sure why this is needed but it is. The route change works fine.
+      expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
+    });
+
+  });
+
+  xdescribe('View: Phone detail', function() {
+
+    beforeEach(function() {
+      browser.get('index.html#!/phones/nexus-s');
+    });
+
+    it('should display the `nexus-s` page', function() {
+      expect(element(by.css('h1')).getText()).toBe('Nexus S');
+    });
+
+    it('should display the first phone image as the main phone image', function() {
+      let mainImage = element(by.css('img.phone.selected'));
+
+      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
+    });
+
+    it('should swap the main image when clicking on a thumbnail image', function() {
+      let mainImage = element(by.css('img.phone.selected'));
+      let thumbnails = element.all(by.css('.phone-thumbs img'));
+
+      thumbnails.get(2).click();
+      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
+
+      thumbnails.get(0).click();
+      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
+    });
+
+  });
+
+});

public/docs/_examples/upgrade-phonecat-3-router/e2e-spec.ts

@@ -0,0 +1,6 @@
+**/*.js
+aot/**/*
+!aot/bs-config.json
+!aot/index.html
+!copy-dist-files.js
+!rollup-config.js

public/docs/_examples/upgrade-phonecat-3-router/ts/.gitignore

@@ -0,0 +1,5 @@
+{
+  "port": 8000,
+  "files": ["./aot/**/*.{html,htm,css,js}"],
+  "server": { "baseDir": "./aot" }
+}

public/docs/_examples/upgrade-phonecat-3-router/ts/aot/bs-config.json

@@ -0,0 +1,38 @@
+<!-- #docregion -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+
+    <base href="/app/">
+
+    <title>Google Phone Gallery</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="app.animations.css" />
+
+    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
+    <script src="https://code.angularjs.org/1.5.5/angular.js"></script>
+    <script src="https://code.angularjs.org/1.5.5/angular-animate.js"></script>
+    <script src="https://code.angularjs.org/1.5.5/angular-resource.js"></script>
+    <script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
+
+    <script src="app.module.ng1.js"></script>
+    <script src="app.config.js"></script>
+    <script src="app.animations.js"></script>
+    <script src="core/core.module.js"></script>
+    <script src="core/phone/phone.module.js"></script>
+    <script src="phone-list/phone-list.module.js"></script>
+    <script src="phone-detail/phone-detail.module.js"></script>
+
+    <script src="/node_modules/core-js/client/shim.min.js"></script>
+    <script src="/node_modules/zone.js/dist/zone.min.js"></script>
+
+    <script>window.module = 'aot';</script>
+  </head>
+
+  <body>
+    <phonecat-app></phonecat-app>
+  </body>
+  <script src="/dist/build.js"></script>
+</html>

public/docs/_examples/upgrade-phonecat-3-router/ts/aot/index.html

@@ -0,0 +1,67 @@
+/* Animate `ngRepeat` in `phoneList` component */
+.phone-list-item.ng-enter,
+.phone-list-item.ng-leave,
+.phone-list-item.ng-move {
+  overflow: hidden;
+  transition: 0.5s linear all;
+}
+
+.phone-list-item.ng-enter,
+.phone-list-item.ng-leave.ng-leave-active,
+.phone-list-item.ng-move {
+  height: 0;
+  margin-bottom: 0;
+  opacity: 0;
+  padding-bottom: 0;
+  padding-top: 0;
+}
+
+.phone-list-item.ng-enter.ng-enter-active,
+.phone-list-item.ng-leave,
+.phone-list-item.ng-move.ng-move-active {
+  height: 120px;
+  margin-bottom: 20px;
+  opacity: 1;
+  padding-bottom: 4px;
+  padding-top: 15px;
+}
+
+/* Animate view transitions with `ngView` */
+.view-container {
+  position: relative;
+}
+
+.view-frame {
+  margin-top: 20px;
+}
+
+.view-frame.ng-enter,
+.view-frame.ng-leave {
+  background: white;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.view-frame.ng-enter {
+  animation: 1s fade-in;
+  z-index: 100;
+}
+
+.view-frame.ng-leave {
+  animation: 1s fade-out;
+  z-index: 99;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+/* Older browsers might need vendor-prefixes for keyframes and animation! */

public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.animations.css

@@ -0,0 +1,43 @@
+'use strict';
+
+angular.
+  module('phonecatApp').
+  animation('.phone', function phoneAnimationFactory() {
+    return {
+      addClass: animateIn,
+      removeClass: animateOut
+    };
+
+    function animateIn(element: JQuery, className: string, done: () => void) {
+      if (className !== 'selected') { return; }
+
+      element.css({
+        display: 'block',
+        position: 'absolute',
+        top: 500,
+        left: 0
+      }).animate({
+        top: 0
+      }, done);
+
+      return function animateInEnd(wasCanceled: boolean) {
+        if (wasCanceled) { element.stop(); }
+      };
+    }
+
+    function animateOut(element: JQuery, className: string, done: () => void) {
+      if (className !== 'selected') { return; }
+
+      element.css({
+        position: 'absolute',
+        top: 0,
+        left: 0
+      }).animate({
+        top: -500
+      }, done);
+
+      return function animateOutEnd(wasCanceled: boolean) {
+        if (wasCanceled) { element.stop(); }
+      };
+    }
+  });

public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.animations.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'phonecat-app',
+  template: `
+    <div class="view-container">
+      <router-outlet class="view-frame"></router-outlet>
+      <div ng-view class="view-frame"></div>
+    </div>
+  `
+})
+export class AppComponent { }