hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-11 12:03:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pratik Rajkotiya
2022-02-08 11:47:02 +05:30
parent 8c23c47645
commit 15ab8216ec
4 changed files with 220 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/app/shared/browse-by/browse-by.component.spec.ts
View File

@@ -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;

4
src/app/shared/pagination/pagination.component.html
View File

@@ -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-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-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> {{'pagination.next.button' |translate}}</button>
</div>
</div>
</div>

96
src/app/shared/pagination/pagination.component.spec.ts
View File

@@ -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 ++;
}
}

4
src/assets/i18n/en.json5
View File

@@ -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)",