[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,6 +177,7 @@ describe('Pagination component', () => {
 
   }));
 
+  describe('when showPaginator is false', () => {
     // synchronous beforeEach
     beforeEach(() => {
       html = `
@@ -185,16 +186,15 @@ describe('Pagination component', () => {
                      [sortOptions]='sortOptions'
                      [collectionSize]='collectionSize'
                      (pageChange)='pageChanged($event)'
-                   (pageSizeChange)='pageSizeChanged($event)'>
+                     (pageSizeChange)='pageSizeChanged($event)'
+                      >
         <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;
-
     });
 
     it('should create Pagination Component', inject([PaginationComponent], (app: PaginationComponent) => {
@@ -303,6 +303,80 @@ describe('Pagination component', () => {
         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)",