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/http',
|
||||
'examples/src/key_events',
|
||||
'examples/src/routing',
|
||||
'examples/src/sourcemap',
|
||||
'examples/src/todo',
|
||||
'examples/src/zippy_component',
|
||||
|
|
|
|||
Loading…
Reference in New Issue