example(routing): adding routing example and e2e tests

Closes #2650
This commit is contained in:
Matias Niemelä 2015-07-07 15:20:53 -07:00
parent c177d889a2
commit 718fa35167
12 changed files with 2149 additions and 0 deletions

View File

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

View File

@ -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('/#');
});
})
});

View File

@ -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;
}

File diff suppressed because it is too large Load Diff

View File

@ -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>

View File

@ -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>

View File

@ -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';
}
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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)
]);
}

View File

@ -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',