[DSC-389] test cases added for pagination component.

src/app/shared/browse-by/browse-by.component.spec.ts

@@ -31,6 +31,9 @@ import { BrowseEntry } from '../../core/shared/browse-entry.model';
 import { ITEM } from '../../core/shared/item.resource-type';
 import { ThemeService } from '../theme-support/theme.service';
 import SpyObj = jasmine.SpyObj;
+import { SelectableListService } from '../object-list/selectable-list/selectable-list.service';
+import { HostWindowService } from '../host-window.service';
+import { CSSVariableService } from '../sass-helper/sass-helper.service';
 
 @listableObjectComponent(BrowseEntry, ViewMode.ListElement, DEFAULT_CONTEXT, 'custom')
 @Component({
@@ -101,6 +104,9 @@ describe('BrowseByComponent', () => {
         {provide: PaginationService, useValue: paginationService},
         {provide: MockThemedBrowseEntryListElementComponent},
         { provide: ThemeService, useValue: themeService },
+        SelectableListService,
+        HostWindowService,
+        CSSVariableService
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
@@ -129,65 +135,6 @@ describe('BrowseByComponent', () => {
     expect(fixture.debugElement.query(By.css('ds-viewable-collection'))).toBeDefined();
   });
 
-  describe('when showPaginator is true and objects are defined', () => {
-    beforeEach(() => {
-      comp.showPaginator = true;
-      comp.objects$ = mockItemsRD$;
-
-      comp.paginationConfig = paginationConfig;
-      comp.sortConfig = Object.assign(new SortOptions('dc.title', SortDirection.ASC));
-      fixture.detectChanges();
-    });
-
-    describe('when clicking the previous arrow button', () => {
-      beforeEach(() => {
-        spyOn(comp.prev, 'emit');
-        fixture.debugElement.query(By.css('#nav-prev')).triggerEventHandler('click', null);
-        fixture.detectChanges();
-      });
-
-      it('should emit a signal to the EventEmitter', () => {
-        expect(comp.prev.emit).toHaveBeenCalled();
-      });
-    });
-
-    describe('when clicking the next arrow button', () => {
-      beforeEach(() => {
-        spyOn(comp.next, 'emit');
-        fixture.debugElement.query(By.css('#nav-next')).triggerEventHandler('click', null);
-        fixture.detectChanges();
-      });
-
-      it('should emit a signal to the EventEmitter', () => {
-        expect(comp.next.emit).toHaveBeenCalled();
-      });
-    });
-
-    describe('when clicking a different page size', () => {
-      beforeEach(() => {
-        spyOn(comp.pageSizeChange, 'emit');
-        fixture.debugElement.query(By.css('.page-size-change')).triggerEventHandler('click', null);
-        fixture.detectChanges();
-      });
-
-      it('should call the updateRoute method from the paginationService', () => {
-        expect(paginationService.updateRoute).toHaveBeenCalledWith('test-pagination', {pageSize: paginationConfig.pageSizeOptions[0]});
-      });
-    });
-
-    describe('when clicking a different sort direction', () => {
-      beforeEach(() => {
-        spyOn(comp.sortDirectionChange, 'emit');
-        fixture.debugElement.query(By.css('.sort-direction-change')).triggerEventHandler('click', null);
-        fixture.detectChanges();
-      });
-
-      it('should call the updateRoute method from the paginationService', () => {
-        expect(paginationService.updateRoute).toHaveBeenCalledWith('test-pagination', {sortDirection: 'ASC'});
-      });
-    });
-  });
-
   describe('when showPaginator is true and browseEntries are provided', () => {
     let browseEntries;
 

src/app/shared/pagination/pagination.component.html

@@ -42,8 +42,8 @@
         </li>
       </ul>
       <div>
-        <button id="nav-prev" type="button" class="btn btn-outline-primary float-left" (click)="goPrev()" [disabled]="objects?.payload?.currentPage <= 1"><i class="fas fa-angle-left"></i> {{'browse.previous.button' |translate}}</button>
+        <button id="nav-prev" type="button" class="btn btn-outline-primary float-left" (click)="goPrev()" [disabled]="objects?.payload?.currentPage <= 1"><i class="fas fa-angle-left"></i> {{'pagination.previous.button' |translate}}</button>
-        <button id="nav-next" type="button" class="btn btn-outline-primary float-right" (click)="goNext()" [disabled]="objects?.payload?.currentPage >= objects?.payload?.totalPages"><i class="fas fa-angle-right"></i> {{'browse.next.button' |translate}}</button>       
+        <button id="nav-next" type="button" class="btn btn-outline-primary float-right" (click)="goNext()" [disabled]="objects?.payload?.currentPage >= objects?.payload?.totalPages"><i class="fas fa-angle-right"></i> {{'pagination.next.button' |translate}}</button>       
       </div>
     </div>
   </div>

src/app/shared/pagination/pagination.component.spec.ts

@@ -177,132 +177,206 @@ describe('Pagination component', () => {
 
   }));
 
-  // synchronous beforeEach
+  describe('when showPaginator is false', () => {
-  beforeEach(() => {
+    // synchronous beforeEach
-    html = `
+    beforeEach(() => {
-    <ds-pagination #p='paginationComponent'
+      html = `
-                   [paginationOptions]='paginationOptions'
+      <ds-pagination #p='paginationComponent'
-                   [sortOptions]='sortOptions'
+                     [paginationOptions]='paginationOptions'
-                   [collectionSize]='collectionSize'
+                     [sortOptions]='sortOptions'
-                   (pageChange)='pageChanged($event)'
+                     [collectionSize]='collectionSize'
-                   (pageSizeChange)='pageSizeChanged($event)'>
+                     (pageChange)='pageChanged($event)'
-      <ul>
+                     (pageSizeChange)='pageSizeChanged($event)'
-        <li *ngFor='let item of collection | paginate: { itemsPerPage: paginationOptions.pageSize,
+                      >
-                    currentPage: paginationOptions.currentPage, totalItems: collectionSize }'> {{item}} </li>
+        <ul>
-      </ul>
+          <li *ngFor='let item of collection | paginate: { itemsPerPage: paginationOptions.pageSize,
-    </ds-pagination>`;
+                      currentPage: paginationOptions.currentPage, totalItems: collectionSize }'> {{item}} </li>
+        </ul>
+      </ds-pagination>`;
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
 
-    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+    it('should create Pagination Component', inject([PaginationComponent], (app: PaginationComponent) => {
-    testComp = testFixture.componentInstance;
+      expect(app).toBeDefined();
+    }));
 
-  });
+    it('should render', () => {
+      expect(testComp.paginationOptions.id).toEqual('test');
+      expect(testComp.paginationOptions.currentPage).toEqual(1);
+      expect(testComp.paginationOptions.pageSize).toEqual(10);
+      expectPages(testFixture, ['-« Previous', '+1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '» Next']);
+    });
 
-  it('should create Pagination Component', inject([PaginationComponent], (app: PaginationComponent) => {
+    it('should render and respond to page change', () => {
-    expect(app).toBeDefined();
+      testComp.collectionSize = 30;
-  }));
-
-  it('should render', () => {
-    expect(testComp.paginationOptions.id).toEqual('test');
-    expect(testComp.paginationOptions.currentPage).toEqual(1);
-    expect(testComp.paginationOptions.pageSize).toEqual(10);
-    expectPages(testFixture, ['-« Previous', '+1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '» Next']);
-  });
-
-  it('should render and respond to page change', () => {
-    testComp.collectionSize = 30;
-    testFixture.detectChanges();
-
-
-    currentPagination.next(Object.assign(new PaginationComponentOptions(), pagination, {currentPage: 3}));
-    testFixture.detectChanges();
-
-    expectPages(testFixture, ['« Previous', '1', '2', '+3', '-» Next']);
-
-    currentPagination.next(Object.assign(new PaginationComponentOptions(), pagination, {currentPage: 2}));
-    testFixture.detectChanges();
-
-    expectPages(testFixture, ['« Previous', '1', '+2', '3', '» Next']);
-  });
-
-  it('should render and respond to collectionSize change', () => {
-
-    testComp.collectionSize = 30;
-    testFixture.detectChanges();
-    expectPages(testFixture, ['-« Previous', '+1', '2', '3', '» Next']);
-
-    testComp.collectionSize = 40;
-    testFixture.detectChanges();
-    expectPages(testFixture, ['-« Previous', '+1', '2', '3', '4', '» Next']);
-  });
-
-  it('should render and respond to pageSize change', () => {
-    const paginationComponent: PaginationComponent = testFixture.debugElement.query(By.css('ds-pagination')).references.p;
-
-    testComp.collectionSize = 30;
-    testFixture.detectChanges();
-    expectPages(testFixture, ['-« Previous', '+1', '2', '3', '» Next']);
-
-    currentPagination.next(Object.assign(new PaginationComponentOptions(), pagination, {pageSize: 5}));
-    testFixture.detectChanges();
-
-    expectPages(testFixture, ['-« Previous', '+1', '2', '3', '4', '5', '6', '» Next']);
-
-    currentPagination.next(Object.assign(new PaginationComponentOptions(), pagination, {pageSize: 10}));
-    testFixture.detectChanges();
-    expectPages(testFixture, ['-« Previous', '+1', '2', '3', '» Next']);
-
-    currentPagination.next(Object.assign(new PaginationComponentOptions(), pagination, {pageSize: 20}));
-    testFixture.detectChanges();
-    expectPages(testFixture, ['-« Previous', '+1', '2', '» Next']);
-  });
-
-  it('should emit pageSizeChange event with correct value', fakeAsync(() => {
-    const paginationComponent: PaginationComponent = testFixture.debugElement.query(By.css('ds-pagination')).references.p;
-
-    spyOn(testComp, 'pageSizeChanged');
-
-    testComp.pageSizeChanged(5);
-    tick();
-
-    expect(testComp.pageSizeChanged).toHaveBeenCalledWith(5);
-  }));
-
-  it('should call the updateRoute method on the paginationService with the correct params', fakeAsync(() => {
-    testComp.collectionSize = 60;
-
-    changePage(testFixture, 3);
-    tick();
-    expect(paginationService.updateRoute).toHaveBeenCalledWith('test', Object.assign({ page: '3'}), {},  false);
-
-    changePage(testFixture, 0);
-    tick();
-    expect(paginationService.updateRoute).toHaveBeenCalledWith('test', Object.assign({ page: '2'}), {},  false);
-  }));
-
-  it('should set correct pageSize route parameters', fakeAsync(() => {
-    routerStub = testFixture.debugElement.injector.get(Router) as any;
-
-    testComp.collectionSize = 60;
-
-    changePageSize(testFixture, '20');
-    tick();
-    expect(paginationService.updateRoute).toHaveBeenCalledWith('test', Object.assign({ pageId: 'test', page: 1, pageSize: 20}), {},  false);
-  }));
-
-  it('should respond to windows resize', () => {
-    const paginationComponent: PaginationComponent = testFixture.debugElement.query(By.css('ds-pagination')).references.p;
-    hostWindowServiceStub = testFixture.debugElement.injector.get(HostWindowService) as any;
-
-    hostWindowServiceStub.setWidth(400);
-
-    hostWindowServiceStub.isXs().subscribe((status) => {
-      paginationComponent.isXs = status;
       testFixture.detectChanges();
-      expectPages(testFixture, ['-« Previous', '+1', '2', '3', '4', '5', '-...', '10', '» Next']);
+
-      de = testFixture.debugElement.query(By.css('ul.pagination'));
+
-      expect(de.nativeElement.classList.contains('pagination-sm')).toBeTruthy();
+      currentPagination.next(Object.assign(new PaginationComponentOptions(), pagination, {currentPage: 3}));
+      testFixture.detectChanges();
+
+      expectPages(testFixture, ['« Previous', '1', '2', '+3', '-» Next']);
+
+      currentPagination.next(Object.assign(new PaginationComponentOptions(), pagination, {currentPage: 2}));
+      testFixture.detectChanges();
+
+      expectPages(testFixture, ['« Previous', '1', '+2', '3', '» Next']);
+    });
+
+    it('should render and respond to collectionSize change', () => {
+
+      testComp.collectionSize = 30;
+      testFixture.detectChanges();
+      expectPages(testFixture, ['-« Previous', '+1', '2', '3', '» Next']);
+
+      testComp.collectionSize = 40;
+      testFixture.detectChanges();
+      expectPages(testFixture, ['-« Previous', '+1', '2', '3', '4', '» Next']);
+    });
+
+    it('should render and respond to pageSize change', () => {
+      const paginationComponent: PaginationComponent = testFixture.debugElement.query(By.css('ds-pagination')).references.p;
+
+      testComp.collectionSize = 30;
+      testFixture.detectChanges();
+      expectPages(testFixture, ['-« Previous', '+1', '2', '3', '» Next']);
+
+      currentPagination.next(Object.assign(new PaginationComponentOptions(), pagination, {pageSize: 5}));
+      testFixture.detectChanges();
+
+      expectPages(testFixture, ['-« Previous', '+1', '2', '3', '4', '5', '6', '» Next']);
+
+      currentPagination.next(Object.assign(new PaginationComponentOptions(), pagination, {pageSize: 10}));
+      testFixture.detectChanges();
+      expectPages(testFixture, ['-« Previous', '+1', '2', '3', '» Next']);
+
+      currentPagination.next(Object.assign(new PaginationComponentOptions(), pagination, {pageSize: 20}));
+      testFixture.detectChanges();
+      expectPages(testFixture, ['-« Previous', '+1', '2', '» Next']);
+    });
+
+    it('should emit pageSizeChange event with correct value', fakeAsync(() => {
+      const paginationComponent: PaginationComponent = testFixture.debugElement.query(By.css('ds-pagination')).references.p;
+
+      spyOn(testComp, 'pageSizeChanged');
+
+      testComp.pageSizeChanged(5);
+      tick();
+
+      expect(testComp.pageSizeChanged).toHaveBeenCalledWith(5);
+    }));
+
+    it('should call the updateRoute method on the paginationService with the correct params', fakeAsync(() => {
+      testComp.collectionSize = 60;
+
+      changePage(testFixture, 3);
+      tick();
+      expect(paginationService.updateRoute).toHaveBeenCalledWith('test', Object.assign({ page: '3'}), {},  false);
+
+      changePage(testFixture, 0);
+      tick();
+      expect(paginationService.updateRoute).toHaveBeenCalledWith('test', Object.assign({ page: '2'}), {},  false);
+    }));
+
+    it('should set correct pageSize route parameters', fakeAsync(() => {
+      routerStub = testFixture.debugElement.injector.get(Router) as any;
+
+      testComp.collectionSize = 60;
+
+      changePageSize(testFixture, '20');
+      tick();
+      expect(paginationService.updateRoute).toHaveBeenCalledWith('test', Object.assign({ pageId: 'test', page: 1, pageSize: 20}), {},  false);
+    }));
+
+    it('should respond to windows resize', () => {
+      const paginationComponent: PaginationComponent = testFixture.debugElement.query(By.css('ds-pagination')).references.p;
+      hostWindowServiceStub = testFixture.debugElement.injector.get(HostWindowService) as any;
+
+      hostWindowServiceStub.setWidth(400);
+
+      hostWindowServiceStub.isXs().subscribe((status) => {
+        paginationComponent.isXs = status;
+        testFixture.detectChanges();
+        expectPages(testFixture, ['-« Previous', '+1', '2', '3', '4', '5', '-...', '10', '» Next']);
+        de = testFixture.debugElement.query(By.css('ul.pagination'));
+        expect(de.nativeElement.classList.contains('pagination-sm')).toBeTruthy();
+      });
     });
   });
+
+  describe('when showPaginator is true', () => {
+    // synchronous beforeEach
+    beforeEach(() => {
+      html = `
+      <ds-pagination #p='paginationComponent'
+                     [paginationOptions]='paginationOptions'
+                     [sortOptions]='sortOptions'
+                     [collectionSize]='collectionSize'
+                     (pageChange)='pageChanged($event)'
+                     (pageSizeChange)='pageSizeChanged($event)'
+                     [showPaginator]='false'
+                     [objects]='objects'
+                     (prev)="goPrev()"
+                     (next)="goNext()"
+                     >
+        <ul>
+          <li *ngFor='let item of collection | paginate: { itemsPerPage: paginationOptions.pageSize,
+                      currentPage: paginationOptions.currentPage, totalItems: collectionSize }'> {{item}} </li>
+        </ul>
+      </ds-pagination>`;
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
+
+    beforeEach(() => {
+      testComp.showPaginator = false;
+      testFixture.detectChanges();
+    });
+
+    describe('when clicking the previous arrow button', () => {
+      beforeEach(() => {
+        spyOn(testComp, 'goPrev');
+        testFixture.detectChanges();
+      });
+
+      it('should call goPrev method', () => {
+        const prev = testFixture.debugElement.query(By.css('#nav-prev'));
+        testFixture.detectChanges();
+        prev.triggerEventHandler('click', null);
+        expect(testComp.goPrev).toHaveBeenCalled();
+      });
+    });
+
+    describe('when clicking the next arrow button', () => {
+      beforeEach(() => {
+        spyOn(testComp, 'goNext');
+        testFixture.detectChanges();
+      });
+
+      it('should call goNext method', () => {
+        const next = testFixture.debugElement.query(By.css('#nav-next'));
+        testFixture.detectChanges();
+        next.triggerEventHandler('click', null);
+        expect(testComp.goNext).toHaveBeenCalled();
+      });
+    });
+
+    describe('check for prev and next button', () => {
+      it('shoud have a previous button', () => {
+        const prev = testFixture.debugElement.query(By.css('#nav-prev'));
+        testFixture.detectChanges();
+        expect(prev).toBeTruthy();
+      });
+
+      it('shoud have a next button', () => {
+        const next = testFixture.debugElement.query(By.css('#nav-next'));
+        testFixture.detectChanges();
+        expect(next).toBeTruthy();
+      });
+    });
+  });
+
 });
 
 // declare a test component
@@ -313,11 +387,19 @@ class TestComponent {
   collectionSize: number;
   paginationOptions = new PaginationComponentOptions();
   sortOptions = new SortOptions('dc.title', SortDirection.ASC);
+  showPaginator: boolean;
+  objects = {
+    payload: {
+      currentPage: 2,
+      totalPages: 100
+    }
+  };
 
   constructor() {
     this.collection = Array.from(new Array(100), (x, i) => `item ${i + 1}`);
     this.collectionSize = 100;
     this.paginationOptions.id = 'test';
+    this.showPaginator = false;
   }
 
   pageChanged(page) {
@@ -327,4 +409,12 @@ class TestComponent {
   pageSizeChanged(pageSize) {
     this.paginationOptions.pageSize = pageSize;
   }
+
+  goPrev() {
+    this.objects.payload.currentPage --;
+  }
+
+  goNext() {
+    this.objects.payload.currentPage ++;
+  }
 }

src/assets/i18n/en.json5

@@ -677,9 +677,9 @@
 
   "browse.metadata.title.breadcrumbs": "Browse by Title",
 
-  "browse.next.button": "Next",
+  "pagination.next.button": "Next",
 
-  "browse.previous.button": "Previous",
+  "pagination.previous.button": "Previous",
 
   "browse.startsWith.choose_start": "(Choose start)",