user list page has query parameter for current page

springboot-angular2-tutorial/angular2-app#2

Author: ruchirsachdeva

src/app/components/header/Header.spec.ts

@@ -181,6 +181,28 @@ describe('Header', () => {
     });
   }); // when not signed in
 
+  describe('.isActive', () => {
+    beforeEach(createCmp);
+
+    it('return true when path matches', () => {
+      const cmp:Header = cmpDebugElement.componentInstance;
+      spyOn(ctx.location, 'path').and.returnValue('/users');
+      expect(cmp.isActive('/users')).toBeTruthy();
+    });
+
+    it('return true when path including query parameter matches', () => {
+      const cmp:Header = cmpDebugElement.componentInstance;
+      spyOn(ctx.location, 'path').and.returnValue('/users?page=1');
+      expect(cmp.isActive('/users')).toBeTruthy();
+    });
+
+    it('return false when path does not matche', () => {
+      const cmp:Header = cmpDebugElement.componentInstance;
+      spyOn(ctx.location, 'path').and.returnValue('/home');
+      expect(cmp.isActive('/users')).toBeFalsy();
+    });
+  }); // .isActive
+
 });
 
 @Component({

src/app/components/header/Header.ts

@@ -22,7 +22,7 @@ export class Header {
   }
 
   isActive(path:string):boolean {
-    return this.location.path() === path;
+    return this.location.path().split('?')[0] === path;
   }
 
   logout() {

src/app/components/pager/Pager.ts

@@ -3,7 +3,7 @@ import {CORE_DIRECTIVES} from "angular2/common";
 
 @Component({
   selector: 'pager',
-  properties: ['totalPages'],
+  properties: ['totalPages', 'currentPage'],
   events: ['pageChanged'],
   template: require('./pager.html'),
   directives: [CORE_DIRECTIVES],

src/app/components/user/UserListPage.spec.ts

@@ -3,10 +3,10 @@ import {By} from "angular2/platform/common_dom";
 import {DOM} from "angular2/src/platform/dom/dom_adapter";
 import {beforeEachProviders, beforeEach} from "angular2/testing";
 import {ResponseOptions, Response} from "angular2/http";
-import {ROUTER_PRIMARY_COMPONENT} from "angular2/router";
+import {ROUTER_PRIMARY_COMPONENT, ROUTER_DIRECTIVES} from "angular2/router";
 import {App, UserListPage, Gravatar, Pager} from "app/components";
 import {APP_TEST_PROVIDERS} from "app/providers";
-import {TestContext, createTestContext} from "app/testing";
+import {TestContext, createTestContext, signin} from "app/testing";
 
 const dummyResponse = new Response(new ResponseOptions({
   body: JSON.stringify({
@@ -21,25 +21,34 @@ const dummyResponse = new Response(new ResponseOptions({
 
 describe('UserListPage', () => {
 
-  var ctx:TestContext;
-  var cmpDebugElement:DebugElement;
-  var pagerDebugElement:DebugElement;
+  let ctx:TestContext;
+  let cmpDebugElement:DebugElement;
+  let pagerDebugElement:DebugElement;
 
   beforeEachProviders(() => [
     APP_TEST_PROVIDERS,
     provide(ROUTER_PRIMARY_COMPONENT, {useValue: App}),
   ]);
   beforeEach(createTestContext(_ => ctx = _));
+  beforeEach(signin());
   beforeEach(done => {
-    ctx.backend.connections.subscribe(conn => {
-      conn.mockRespond(dummyResponse);
-    });
     ctx.init(TestCmp)
       .finally(done)
       .subscribe(() => {
-        cmpDebugElement = ctx.fixture.debugElement.query(By.directive(UserListPage));
-        pagerDebugElement = cmpDebugElement.query(By.directive(Pager));
-      });
+      }, e => console.error(e));
+  });
+  beforeEach(() => {
+    ctx.backend.connections.subscribe(conn => {
+      conn.mockRespond(dummyResponse);
+    }, e => console.error(e));
+  });
+  beforeEach(done => {
+    ctx.router.navigate(['/UserList']).then(() => {
+      ctx.fixture.detectChanges();
+      cmpDebugElement = ctx.fixture.debugElement.query(By.directive(UserListPage));
+      pagerDebugElement = cmpDebugElement.query(By.directive(Pager));
+      done();
+    }).catch(e => console.error(e));
   });
 
   it('can be shown', () => {
@@ -70,19 +79,22 @@ describe('UserListPage', () => {
     expect(pager.totalPages).toEqual(1);
   });
 
-  it('list another page when page was changed', () => {
-    const cmp:UserListPage = cmpDebugElement.componentInstance;
-    spyOn(cmp, 'list');
+  it('list another page when page was changed', (done) => {
     pagerDebugElement.triggerEventHandler('pageChanged', <any>{page: 2});
-    expect(cmp.list).toHaveBeenCalledWith(2);
+    ctx.router.subscribe(() => {
+      cmpDebugElement = ctx.fixture.debugElement.query(By.directive(UserListPage));
+      const cmp:UserListPage = cmpDebugElement.componentInstance;
+      expect(cmp.page).toEqual(2);
+      done();
+    });
   });
 
 });
 
 @Component({
   selector: 'test-cmp',
-  template: `<user-list-page></user-list-page>`,
-  directives: [UserListPage],
+  template: `<router-outlet></router-outlet>`,
+  directives: [ROUTER_DIRECTIVES],
 })
 class TestCmp {
 }

src/app/components/user/UserListPage.ts

@@ -1,6 +1,11 @@
 import {Component, OnInit} from "angular2/core";
 import {CORE_DIRECTIVES, FORM_DIRECTIVES} from "angular2/common";
-import {ROUTER_DIRECTIVES, CanActivate} from "angular2/router";
+import {
+  ROUTER_DIRECTIVES,
+  CanActivate,
+  RouteParams,
+  Router
+} from "angular2/router";
 import {UserService, HttpErrorHandler} from "app/services";
 import {User} from "app/interfaces";
 import {Gravatar, Pager} from "app/components";
@@ -23,16 +28,24 @@ export class UserListPage implements OnInit {
 
   users:User[];
   totalPages:number;
+  page:number;
 
   constructor(private userService:UserService,
-              private errorHandler:HttpErrorHandler) {
+              private errorHandler:HttpErrorHandler,
+              private params:RouteParams,
+              private router:Router) {
+    this.page = <any>params.get('page') || 1;
   }
 
   ngOnInit():any {
-    this.list(1);
+    this.list(this.page);
   }
 
-  list(page) {
+  onPageChanged(page) {
+    this.router.navigate(['/UserList', {page: page}]);
+  }
+
+  private list(page) {
     this.userService.list({page: page, size: 5})
       .subscribe(usersPage => {
         this.users = usersPage.content;

src/app/components/user/list.html

@@ -8,6 +8,8 @@ <h1>All users</h1>
 </ul>
 
 <div class="clearfix">
-  <pager class="pull-left" (pageChanged)="list($event.page)"
-         [totalPages]="totalPages"></pager>
+  <pager class="pull-left"
+         (pageChanged)="onPageChanged($event.page)"
+         [totalPages]="totalPages"
+         [currentPage]="page"></pager>
 </div>