feat(router): use querystring params for top-level routes

Closes #3017
This commit is contained in:
Matias Niemelä
2015-07-21 01:26:43 -07:00
parent a9e7c90960
commit fdffcaba9b
10 changed files with 278 additions and 45 deletions
@@ -39,6 +39,21 @@ export function main() {
.toThrowError(`Path "hi//there" contains "//" which is not allowed in a route config.`);
});
describe('querystring params', () => {
it('should parse querystring params so long as the recognizer is a root', () => {
var rec = new PathRecognizer('/hello/there', mockRouteHandler, true);
var params = rec.parseParams('/hello/there?name=igor');
expect(params).toEqual({'name': 'igor'});
});
it('should return a combined map of parameters with the param expected in the URL path',
() => {
var rec = new PathRecognizer('/hello/:name', mockRouteHandler, true);
var params = rec.parseParams('/hello/paul?topic=success');
expect(params).toEqual({'name': 'paul', 'topic': 'success'});
});
});
describe('matrix params', () => {
it('should recognize a trailing matrix value on a path value and assign it to the params return value',
() => {
@@ -125,6 +125,66 @@ export function main() {
.toThrowError('Route generator for \'name\' was not included in parameters passed.');
});
describe('querystring params', () => {
it('should recognize querystring parameters within the URL path', () => {
var recognizer = new RouteRecognizer(true);
recognizer.config(new Route({path: 'profile/:name', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/profile/matsko?comments=all')[0];
var params = solution.params();
expect(params['name']).toEqual('matsko');
expect(params['comments']).toEqual('all');
});
it('should generate and populate the given static-based route with querystring params',
() => {
var recognizer = new RouteRecognizer(true);
recognizer.config(
new Route({path: 'forum/featured', component: DummyCmpA, as: 'forum-page'}));
var params = StringMapWrapper.create();
params['start'] = 10;
params['end'] = 100;
var result = recognizer.generate('forum-page', params);
expect(result['url']).toEqual('forum/featured?start=10&end=100');
});
it('should place a higher priority on actual route params incase the same params are defined in the querystring',
() => {
var recognizer = new RouteRecognizer(true);
recognizer.config(new Route({path: 'profile/:name', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/profile/yegor?name=igor')[0];
var params = solution.params();
expect(params['name']).toEqual('yegor');
});
it('should strip out any occurences of matrix params when querystring params are allowed',
() => {
var recognizer = new RouteRecognizer(true);
recognizer.config(new Route({path: '/home', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/home;showAll=true;limit=100?showAll=false')[0];
var params = solution.params();
expect(params['showAll']).toEqual('false');
expect(params['limit']).toBeFalsy();
});
it('should strip out any occurences of matrix params as input data', () => {
var recognizer = new RouteRecognizer(true);
recognizer.config(new Route({path: '/home/:subject', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/home/zero;one=1?two=2')[0];
var params = solution.params();
expect(params['subject']).toEqual('zero');
expect(params['one']).toBeFalsy();
expect(params['two']).toEqual('2');
});
});
describe('matrix params', () => {
it('should recognize matrix parameters within the URL path', () => {
var recognizer = new RouteRecognizer();
@@ -199,6 +259,40 @@ export function main() {
var result = recognizer.generate('profile-page', params);
expect(result['url']).toEqual('hello/matsko');
});
it('should place a higher priority on actual route params incase the same params are defined in the matrix params string',
() => {
var recognizer = new RouteRecognizer();
recognizer.config(new Route({path: 'profile/:name', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/profile/yegor;name=igor')[0];
var params = solution.params();
expect(params['name']).toEqual('yegor');
});
it('should strip out any occurences of querystring params when matrix params are allowed',
() => {
var recognizer = new RouteRecognizer();
recognizer.config(new Route({path: '/home', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/home;limit=100?limit=1000&showAll=true')[0];
var params = solution.params();
expect(params['showAll']).toBeFalsy();
expect(params['limit']).toEqual('100');
});
it('should strip out any occurences of matrix params as input data', () => {
var recognizer = new RouteRecognizer();
recognizer.config(new Route({path: '/home/:subject', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/home/zero;one=1?two=2')[0];
var params = solution.params();
expect(params['subject']).toEqual('zero');
expect(params['one']).toEqual('1');
expect(params['two']).toBeFalsy();
});
});
});
}
@@ -6,6 +6,7 @@ import {
describe,
expect,
iit,
flushMicrotasks,
inject,
it,
xdescribe,
@@ -21,7 +22,14 @@ import {DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
import {RouteConfig, Route, Redirect} from 'angular2/src/router/route_config_decorator';
import {PromiseWrapper} from 'angular2/src/facade/async';
import {BaseException} from 'angular2/src/facade/lang';
import {routerInjectables, Router, appBaseHrefToken, routerDirectives} from 'angular2/router';
import {
routerInjectables,
RouteParams,
Router,
appBaseHrefToken,
routerDirectives
} from 'angular2/router';
import {LocationStrategy} from 'angular2/src/router/location_strategy';
import {MockLocationStrategy} from 'angular2/src/mock/mock_location_strategy';
import {appComponentTypeToken} from 'angular2/src/core/application_tokens';
@@ -112,6 +120,30 @@ export function main() {
});
});
// TODO: add a test in which the child component has bindings
describe('querystring params app', () => {
beforeEachBindings(
() => { return [bind(appComponentTypeToken).toValue(QueryStringAppCmp)]; });
it('should recognize and return querystring params with the injected RouteParams',
inject([AsyncTestCompleter, TestComponentBuilder], (async, tcb: TestComponentBuilder) => {
tcb.createAsync(QueryStringAppCmp)
.then((rootTC) => {
var router = rootTC.componentInstance.router;
router.subscribe((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('qParam = search-for-something');
/*
expect(applicationRef.hostComponent.location.path())
.toEqual('/qs?q=search-for-something');*/
async.done();
});
router.navigate('/qs?q=search-for-something');
rootTC.detectChanges();
});
}));
});
});
}
@@ -141,6 +173,20 @@ class HierarchyAppCmp {
constructor(public router: Router, public location: LocationStrategy) {}
}
@Component({selector: 'qs-cmp'})
@View({template: "qParam = {{q}}"})
class QSCmp {
q: string;
constructor(params: RouteParams) { this.q = params.get('q'); }
}
@Component({selector: 'app-cmp'})
@View({template: `<router-outlet></router-outlet>`, directives: routerDirectives})
@RouteConfig([new Route({path: '/qs', component: QSCmp})])
class QueryStringAppCmp {
constructor(public router: Router, public location: LocationStrategy) {}
}
@Component({selector: 'oops-cmp'})
@View({template: "oh no"})
class BrokenCmp {
@@ -116,6 +116,27 @@ export function main() {
expect(router.generate(['/firstCmp/secondCmp'])).toEqual('/first/second');
});
describe('querstring params', () => {
it('should only apply querystring params if the given URL is on the root router and is terminal',
() => {
router.config([
new Route({path: '/hi/how/are/you', component: DummyComponent, as: 'greeting-url'})
]);
var path = router.generate(['/greeting-url', {'name': 'brad'}]);
expect(path).toEqual('/hi/how/are/you?name=brad');
});
it('should use parameters that are not apart of the route definition as querystring params',
() => {
router.config(
[new Route({path: '/one/two/:three', component: DummyComponent, as: 'number-url'})]);
var path = router.generate(['/number-url', {'three': 'three', 'four': 'four'}]);
expect(path).toEqual('/one/two/three?four=four');
});
});
describe('matrix params', () => {
it('should apply inline matrix params for each router path within the generated URL', () => {
router.config(