example(routing): adding routing example and e2e tests

Closes #2650

modules/examples/e2e_test/routing/routing_spec.dart

@@ -0,0 +1,5 @@
+library examples.e2e_test.routing.routing_spec;
+
+main() {
+
+}

modules/examples/e2e_test/routing/routing_spec.ts

@@ -0,0 +1,70 @@
+import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
+
+
+describe('routing inbox-app', function() {
+
+  afterEach(verifyNoBrowserErrors);
+
+  describe('index view', function() {
+    var URL = 'examples/src/routing/';
+
+    it('should list out the current collection of items', function() {
+      browser.get(URL);
+      expect(element.all(by.css('.inbox-item-record')).count()).toEqual(200);
+    });
+
+    it('should build a link which points to the detail page', function() {
+      browser.get(URL);
+      expect(element(by.css('#item-15')).getAttribute('href')).toMatch(/\/detail\/15$/);
+      element(by.css('#item-15')).click();
+      browser.sleep(200);  // TODO: see #428
+      expect(browser.getCurrentUrl()).toMatch(/\/detail\/15$/);
+    });
+  });
+
+
+  describe('drafts view', function() {
+    var URL = 'examples/src/routing/#/drafts';
+
+    it('should navigate to the drafts view when the drafts link is clicked', function() {
+      browser.get(URL);
+      element(by.linkText('Drafts')).click();
+      browser.sleep(200);  // TODO: see #428
+      expect(element(by.css('.page-title')).getText()).toEqual('Drafts');
+    });
+
+    it('should navigate to email details', function() {
+      browser.get(URL);
+      element(by.linkText('Drafts')).click();
+      browser.sleep(200);  // TODO: see #428
+      expect(element.all(by.css('.inbox-item-record')).count()).toEqual(2);
+      expect(element(by.css('#item-201')).getAttribute('href')).toMatch(/\/detail\/201$/);
+      element(by.css('#item-201')).click();
+      browser.sleep(200);  // TODO: see #428
+      expect(browser.getCurrentUrl()).toMatch(/\/detail\/201$/);
+    });
+  });
+
+
+  describe('detail view', function() {
+    var URL = 'examples/src/routing/';
+
+    it('should navigate to the detail view when an email is clicked', function() {
+      browser.get(URL);
+      browser.sleep(200);  // TODO: see #428
+      element(by.css('#item-10')).click();
+      browser.sleep(200);
+      expect(element(by.css('#record-id')).getText()).toEqual('ID: 10');
+    });
+
+    it('should navigate back to the email inbox page when the back button is clicked', function() {
+      browser.get(URL);
+      browser.sleep(200);  // TODO: see #428
+      element(by.css('#item-10')).click();
+      browser.sleep(200);
+      element(by.css('.back-button')).click();
+      browser.sleep(200);
+      expect(browser.getCurrentUrl()).toMatch('/#');
+    });
+  })
+});

modules/examples/src/routing/app.css

@@ -0,0 +1,57 @@
+body {
+  background:#eee;
+  color:black;
+}
+
+.inbox-list,
+.inbox-list li {
+  list-style:none;
+  padding:0;
+  margin:0;
+}
+
+.inbox-list a {
+  padding:5px;
+  display:block;
+}
+
+inbox, drafts, inbox-side-menu {
+  display:block;
+}
+
+inbox-side-menu .link {
+  display:block;
+  text-align:center;
+  padding:1em;
+}
+
+inbox-side-menu .link.active {
+  background:white;
+}
+
+inbox-side-menu .link:hover {
+  background:#eee;
+}
+
+inbox-side-menu {
+  position:fixed;
+  left:0;
+  top:0;
+  bottom:0;
+  width:200px;
+  background:#ddd;
+}
+
+inbox-side-menu a {
+  display: block;
+}
+
+inbox, drafts, inbox-detail {
+  padding:1em;
+  margin-left:200px;
+}
+
+inbox-detail {
+  display:block;
+  margin-left:200px;
+}

modules/examples/src/routing/drafts.html

@@ -0,0 +1,9 @@
+<h2 class="page-title">Drafts</h2>
+
+<ol class="inbox-list">
+  <li *ng-for="#item of items" class="inbox-item-record">
+    <a id="item-{{ item.id }}"
+       [router-link]="['/detailPage', {'id':item.id}]">
+      {{ item.subject }}</a>
+  </li>
+</ol>

modules/examples/src/routing/inbox-app.html

@@ -0,0 +1,5 @@
+<inbox-side-menu class="inbox-aside">
+  <a [router-link]="['/inbox']" class="link" [class.active]="inboxPageActive()">Inbox</a>
+  <a [router-link]="['/drafts']" class="link" [class.active]="draftsPageActive()">Drafts</a>
+</inbox-side-menu>
+<router-outlet></router-outlet>

modules/examples/src/routing/inbox-app.ts

@@ -0,0 +1,133 @@
+import {NgIf, NgFor, EventEmitter, Component, View, Inject, Injectable} from 'angular2/angular2';
+import {RouterLink, RouteConfig, Router, RouterOutlet, Location, RouteParams} from 'angular2/router';
+import {Http} from 'angular2/http';
+import {ObservableWrapper, PromiseWrapper} from 'angular2/src/facade/async';
+
+@Injectable()
+class DbService {
+  constructor(public http: Http) {}
+
+  getData() {
+    return new Promise((resolve, reject) => {
+      ObservableWrapper.subscribe(this.http.get('./db.json', { cache: true }), (resp) => {
+        resolve(resp.json());
+      });
+    });
+  }
+
+  drafts() {
+    return PromiseWrapper.then(this.getData(), (data) => {
+      return data.filter(record => record.draft);
+    });
+  }
+
+  emails() {
+    return PromiseWrapper.then(this.getData(), (data) => {
+      return data.filter(record => !record.draft);
+    });
+  }
+
+  email(id) {
+    return PromiseWrapper.then(this.getData(), (data) => {
+      for (var i = 0; i < data.length; i++) {
+        var entry = data[i];
+        if (entry.id == id) {
+          return entry;
+        }
+      }
+    });
+  }
+}
+
+@Component({
+  selector: 'inbox-detail'
+})
+@View({
+  templateUrl: "inbox-detail.html",
+  directives: [NgFor, RouterLink]
+})
+class InboxDetailCmp {
+  id: string;
+  subject: string;
+  email: string;
+  content: string;
+  firstName: string;
+  lastName: string;
+
+  constructor(db: DbService, params: RouteParams) {
+    var id = params.get('id');
+    PromiseWrapper.then(db.email(id)).then((data) => {
+      this.setEmailRecord(data);
+    });
+  }
+
+  get fullName() {
+    return this.firstName + ' ' + this.lastName;
+  }
+
+  setEmailRecord(record) {
+    this.id        = record['id'];
+    this.subject   = record['subject'];
+    this.content   = record['content'];
+    this.email     = record['email'];
+    this.firstName = record['first-name'];
+    this.lastName  = record['last-name'];
+    this.date      = record['date'];
+  }
+}
+
+@Component({selector: 'inbox'})
+@View({
+  templateUrl: "inbox.html",
+  directives: [NgFor, RouterLink]
+})
+class InboxCmp {
+  q: string;
+  items: List = [];
+  constructor(public router: Router, db: DbService) {
+    PromiseWrapper.then(db.emails(), (emails) => {
+      this.items = emails;
+    });
+  }
+}
+
+
+@Component({selector: 'drafts'})
+@View({templateUrl: "drafts.html", directives: [NgFor, RouterLink]})
+class DraftsCmp {
+  items: List = [];
+  constructor(public router: Router, db: DbService) {
+    PromiseWrapper.then(db.drafts(), (drafts) => {
+      this.items = drafts;
+    });
+  }
+}
+
+
+@Component({
+  selector: 'inbox-app',
+  viewInjector: [DbService]
+})
+@View({
+  templateUrl: "inbox-app.html",
+  directives: [RouterOutlet, RouterLink]
+})
+@RouteConfig([
+  {path: '/', component: InboxCmp, as: 'inbox'},
+  {path: '/drafts', component: DraftsCmp, as: 'drafts'},
+  {path: '/detail/:id', component: InboxDetailCmp, as: 'detailPage'}
+])
+export class InboxApp {
+  router: Router;
+  location: Location;
+  constructor(router: Router, location: Location) {
+    this.router = router;
+    this.location = location;
+  }
+  inboxPageActive() {
+    return this.location.path() == '';
+  }
+  draftsPageActive() {
+    return this.location.path() == '/drafts';
+  }
+}

modules/examples/src/routing/inbox-detail.html

@@ -0,0 +1,16 @@
+<h2 class="page-title">{{ subject }}</h2>
+
+<ul>
+  <li id="record-id">ID: {{ id }}</li>
+  <li id="record-name">Name: {{ fullName }}</li>
+  <li id="record-email">Email: {{ email }}</li>
+  <li id="record-date">Date: {{ date }}</li>
+</ul>
+
+<p>
+  {{ content }}
+</p>
+
+<span class="btn medium primary">
+  <a [router-link]="['../inbox']" class="back-button">Back</a>
+</span>

modules/examples/src/routing/inbox.html

@@ -0,0 +1,8 @@
+<h2 class="page-title">Inbox</h2>
+
+<ol class="inbox-list">
+  <li *ng-for="#item of items" class="inbox-item-record">
+    <a id="item-{{ item.id }}"
+       [router-link]="['/detailPage', {'id':item.id}]">{{ item.subject }}</a>
+  </li>
+</ol>

modules/examples/src/routing/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <title>Routing Example</title>
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/css/gumby.css" />
+  <link rel="stylesheet" type="text/css" href="./app.css" />
+  <base href="/examples/src/routing/">
+<body>
+  <inbox-app>
+    Loading...
+  </inbox-app>
+
+  $SCRIPTS$
+</body>
+</html>

modules/examples/src/routing/index.ts

@@ -0,0 +1,12 @@
+import {InboxApp} from './inbox-app';
+import {bootstrap, bind} from 'angular2/angular2';
+import {routerInjectables, HashLocationStrategy, LocationStrategy} from 'angular2/router';
+import {httpInjectables} from 'angular2/http';
+
+export function main() {
+  bootstrap(InboxApp, [
+    routerInjectables,
+    httpInjectables,
+    bind(LocationStrategy).toClass(HashLocationStrategy)
+  ]);
+}

tools/broccoli/trees/browser_tree.ts

@@ -46,6 +46,7 @@ const kServedPaths = [
   'examples/src/hello_world',
   'examples/src/http',
   'examples/src/key_events',
+  'examples/src/routing',
   'examples/src/sourcemap',
   'examples/src/todo',
   'examples/src/zippy_component',