diff --git a/src/app/shared/browse-by/browse-by.component.spec.ts b/src/app/shared/browse-by/browse-by.component.spec.ts
index a39a207c77..1e739dafbf 100644
--- a/src/app/shared/browse-by/browse-by.component.spec.ts
+++ b/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;
diff --git a/src/app/shared/pagination/pagination.component.html b/src/app/shared/pagination/pagination.component.html
index e2833fe212..d39dafa082 100644
--- a/src/app/shared/pagination/pagination.component.html
+++ b/src/app/shared/pagination/pagination.component.html
@@ -42,8 +42,8 @@
-
-
+
+
diff --git a/src/app/shared/pagination/pagination.component.spec.ts b/src/app/shared/pagination/pagination.component.spec.ts
index cf2d1c13fd..d0d1612833 100644
--- a/src/app/shared/pagination/pagination.component.spec.ts
+++ b/src/app/shared/pagination/pagination.component.spec.ts
@@ -177,132 +177,206 @@ describe('Pagination component', () => {
}));
- // synchronous beforeEach
- beforeEach(() => {
- html = `
-
-
- `;
+ describe('when showPaginator is false', () => {
+ // synchronous beforeEach
+ beforeEach(() => {
+ html = `
+
+
+ `;
+ testFixture = createTestComponent(html, TestComponent) as ComponentFixture;
+ testComp = testFixture.componentInstance;
+ });
- testFixture = createTestComponent(html, TestComponent) as ComponentFixture;
- testComp = testFixture.componentInstance;
+ it('should create Pagination Component', inject([PaginationComponent], (app: PaginationComponent) => {
+ 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) => {
- 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 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;
+ it('should render and respond to page change', () => {
+ testComp.collectionSize = 30;
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 = `
+
+
+ `;
+ testFixture = createTestComponent(html, TestComponent) as ComponentFixture;
+ 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 ++;
+ }
}
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index f742273edb..a6b9d12ae8 100644
--- a/src/assets/i18n/en.json5
+++ b/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)",