revert: example(routing): adding routing example and e2e tests
This reverts commit 718fa35167.
This commit is contained in:
Matias Niemelä
parent
e79dd6aa2d
commit
258da88765
|
|
@ -1,5 +0,0 @@
|
||||||
library examples.e2e_test.routing.routing_spec;
|
|
||||||
|
|
||||||
main() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
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('/#');
|
|
||||||
});
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
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
|
|
@ -1,9 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,111 +0,0 @@
|
||||||
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() {
|
|
||||||
var p = PromiseWrapper.completer();
|
|
||||||
ObservableWrapper.subscribe(this.http.get('./db.json'), (resp) => { p.resolve(resp.json()); });
|
|
||||||
return p.promise;
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
content: string;
|
|
||||||
email: string;
|
|
||||||
firstName: string;
|
|
||||||
lastName: string;
|
|
||||||
date: string;
|
|
||||||
|
|
||||||
constructor(db: DbService, params: RouteParams) {
|
|
||||||
var id = params.get('id');
|
|
||||||
PromiseWrapper.then(db.email(id), (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'; }
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
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)]);
|
|
||||||
}
|
|
||||||
|
|
@ -46,7 +46,6 @@ const kServedPaths = [
|
||||||
'examples/src/hello_world',
|
'examples/src/hello_world',
|
||||||
'examples/src/http',
|
'examples/src/http',
|
||||||
'examples/src/key_events',
|
'examples/src/key_events',
|
||||||
'examples/src/routing',
|
|
||||||
'examples/src/sourcemap',
|
'examples/src/sourcemap',
|
||||||
'examples/src/todo',
|
'examples/src/todo',
|
||||||
'examples/src/zippy_component',
|
'examples/src/zippy_component',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue