mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-07 10:04:11 +00:00
348 lines
11 KiB
TypeScript
348 lines
11 KiB
TypeScript
// ... test imports
|
|
import {
|
|
async,
|
|
ComponentFixture,
|
|
inject,
|
|
TestBed, fakeAsync, tick
|
|
} from '@angular/core/testing';
|
|
import {
|
|
Component,
|
|
CUSTOM_ELEMENTS_SCHEMA,
|
|
DebugElement
|
|
} from "@angular/core";
|
|
import { ActivatedRoute, Router } from "@angular/router";
|
|
import { By } from '@angular/platform-browser';
|
|
import { Observable } from "rxjs";
|
|
import { RouterTestingModule } from '@angular/router/testing';
|
|
import Spy = jasmine.Spy;
|
|
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
|
|
import { StoreModule } from "@ngrx/store";
|
|
|
|
// Load the implementations that should be tested
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
import { Ng2PaginationModule } from 'ng2-pagination';
|
|
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
|
|
|
import { PaginationComponent } from './pagination.component';
|
|
import { PaginationComponentOptions } from './pagination-component-options.model';
|
|
import { MockTranslateLoader } from "../testing/mock-translate-loader";
|
|
|
|
import { GLOBAL_CONFIG, EnvConfig } from '../../../config';
|
|
import { ActivatedRouteStub, RouterStub } from "../testing/router-stubs";
|
|
import { HostWindowService } from "../host-window.service";
|
|
import { EnumKeysPipe } from "../utils/enum-keys-pipe";
|
|
import { SortOptions } from "../../core/cache/models/sort-options.model";
|
|
|
|
|
|
function createTestComponent<T>(html: string, type: {new (...args: any[]): T}): ComponentFixture<T> {
|
|
TestBed.overrideComponent(type, {
|
|
set: { template: html }
|
|
});
|
|
let fixture = TestBed.createComponent(type);
|
|
|
|
fixture.detectChanges();
|
|
return fixture as ComponentFixture<T>;
|
|
}
|
|
|
|
function expectPages(fixture: ComponentFixture<any>, pagesDef: string[]): void {
|
|
let de = fixture.debugElement.query(By.css('.pagination'));
|
|
let pages = de.nativeElement.querySelectorAll('li');
|
|
|
|
expect(pages.length).toEqual(pagesDef.length);
|
|
|
|
for (let i = 0; i < pagesDef.length; i++) {
|
|
let pageDef = pagesDef[i];
|
|
let classIndicator = pageDef.charAt(0);
|
|
|
|
if (classIndicator === '+') {
|
|
expect(pages[i].classList.contains("active")).toBeTruthy();
|
|
expect(pages[i].classList.contains("disabled")).toBeFalsy();
|
|
expect(normalizeText(pages[i].textContent)).toEqual(pageDef.substr(1));
|
|
} else if (classIndicator === '-') {
|
|
expect(pages[i].classList.contains("active")).toBeFalsy();
|
|
expect(pages[i].classList.contains("disabled")).toBeTruthy();
|
|
expect(normalizeText(pages[i].textContent)).toEqual(pageDef.substr(1));
|
|
if (normalizeText(pages[i].textContent) !== '...') {
|
|
expect(pages[i].querySelector('a').getAttribute('tabindex')).toEqual('-1');
|
|
}
|
|
} else {
|
|
expect(pages[i].classList.contains("active")).toBeFalsy();
|
|
expect(pages[i].classList.contains("disabled")).toBeFalsy();
|
|
expect(normalizeText(pages[i].textContent)).toEqual(pageDef);
|
|
if (normalizeText(pages[i].textContent) !== '...') {
|
|
expect(pages[i].querySelector('a').hasAttribute('tabindex')).toBeFalsy();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function changePageSize(fixture: ComponentFixture<any>, pageSize: string): void {
|
|
let buttonEl = fixture.nativeElement.querySelector('#paginationControls');
|
|
let activatedRouteStub: ActivatedRouteStub;
|
|
let routerStub: RouterStub;
|
|
|
|
buttonEl.click();
|
|
|
|
let dropdownMenu = fixture.debugElement.query(By.css('#paginationControlsDropdownMenu'));
|
|
let buttons = dropdownMenu.nativeElement.querySelectorAll('button');
|
|
|
|
for (let i = 0; i < buttons.length; i++) {
|
|
if (buttons[i].textContent.trim() == pageSize) {
|
|
buttons[i].click();
|
|
fixture.detectChanges();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function changePage(fixture: ComponentFixture<any>, idx: number): void {
|
|
let de = fixture.debugElement.query(By.css('.pagination'));
|
|
let buttons = de.nativeElement.querySelectorAll('li');
|
|
|
|
buttons[idx].querySelector('a').click();
|
|
fixture.detectChanges();
|
|
}
|
|
|
|
function normalizeText(txt: string): string {
|
|
return txt.trim().replace(/\s+/g, ' ');
|
|
}
|
|
|
|
describe('Pagination component', () => {
|
|
|
|
let fixture: ComponentFixture<PaginationComponent>;
|
|
let comp: PaginationComponent;
|
|
let testComp: TestComponent;
|
|
let testFixture: ComponentFixture<TestComponent>;
|
|
let de: DebugElement;
|
|
let html;
|
|
let hostWindowServiceStub: HostWindowServiceStub;
|
|
|
|
let activatedRouteStub: ActivatedRouteStub;
|
|
let routerStub: RouterStub;
|
|
|
|
//Define initial state and test state
|
|
let _initialState = { width: 1600, height: 770 };
|
|
|
|
// async beforeEach
|
|
beforeEach(async(() => {
|
|
activatedRouteStub = new ActivatedRouteStub();
|
|
routerStub = new RouterStub();
|
|
hostWindowServiceStub = new HostWindowServiceStub(_initialState.width);
|
|
|
|
TestBed.configureTestingModule({
|
|
imports: [CommonModule, StoreModule.provideStore({}), TranslateModule.forRoot({
|
|
loader: {
|
|
provide: TranslateLoader,
|
|
useClass: MockTranslateLoader
|
|
}
|
|
}), Ng2PaginationModule, NgbModule.forRoot(),
|
|
RouterTestingModule.withRoutes([
|
|
{path: 'home', component: TestComponent}
|
|
])],
|
|
declarations: [PaginationComponent, TestComponent, EnumKeysPipe], // declare the test component
|
|
providers: [
|
|
{ provide: ActivatedRoute, useValue: activatedRouteStub },
|
|
{ provide: GLOBAL_CONFIG, useValue: EnvConfig },
|
|
{ provide: Router, useValue: routerStub },
|
|
{ provide: HostWindowService, useValue: hostWindowServiceStub },
|
|
PaginationComponent
|
|
],
|
|
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
|
});
|
|
|
|
}));
|
|
|
|
// synchronous beforeEach
|
|
beforeEach(() => {
|
|
html = `
|
|
<ds-pagination #p="paginationComponent"
|
|
[paginationOptions]="paginationOptions"
|
|
[sortOptions]="sortOptions"
|
|
[collectionSize]="collectionSize"
|
|
(pageChange)="pageChanged($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) => {
|
|
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;
|
|
|
|
changePage(testFixture, 3);
|
|
expectPages(testFixture, ['« Previous', '1', '2', '+3', '-» Next']);
|
|
|
|
changePage(testFixture, 0);
|
|
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', () => {
|
|
|
|
testComp.collectionSize = 30;
|
|
testFixture.detectChanges();
|
|
expectPages(testFixture, ['-« Previous', '+1', '2', '3', '» Next']);
|
|
|
|
changePageSize(testFixture, '5');
|
|
expectPages(testFixture, ['-« Previous', '+1', '2', '3', '4', '5', '6', '» Next']);
|
|
|
|
changePageSize(testFixture, '10');
|
|
expectPages(testFixture, ['-« Previous', '+1', '2', '3', '» Next']);
|
|
|
|
changePageSize(testFixture, '20');
|
|
expectPages(testFixture, ['-« Previous', '+1', '2', '» Next']);
|
|
});
|
|
|
|
it('should emit pageChange event with correct value', fakeAsync(() => {
|
|
|
|
spyOn(testComp, 'pageChanged');
|
|
|
|
changePage(testFixture, 3);
|
|
tick();
|
|
|
|
expect(testComp.pageChanged).toHaveBeenCalledWith(3);
|
|
}));
|
|
|
|
it('should emit pageSizeChange event with correct value', fakeAsync(() => {
|
|
|
|
spyOn(testComp, 'pageSizeChanged');
|
|
|
|
changePageSize(testFixture, '5');
|
|
tick();
|
|
|
|
expect(testComp.pageSizeChanged).toHaveBeenCalledWith(5);
|
|
}));
|
|
|
|
it('should set correct route parameters', fakeAsync(() => {
|
|
let paginationComponent: PaginationComponent = testFixture
|
|
.debugElement.query(By.css('ds-pagination')).references['p'];
|
|
routerStub = testFixture.debugElement.injector.get(Router);
|
|
|
|
testComp.collectionSize = 60;
|
|
|
|
changePage(testFixture, 3);
|
|
tick();
|
|
expect(routerStub.navigate).toHaveBeenCalledWith([], { queryParams: { pageId: 'test', page: 3, pageSize: 10, sortDirection: 0, sortField: 'name' } });
|
|
expect(paginationComponent.currentPage).toEqual(3);
|
|
|
|
changePageSize(testFixture, '20');
|
|
tick();
|
|
expect(routerStub.navigate).toHaveBeenCalledWith([], { queryParams: { pageId: 'test', page: 3, pageSize: 20, sortDirection: 0, sortField: 'name' } });
|
|
expect(paginationComponent.pageSize).toEqual(20);
|
|
}));
|
|
|
|
it('should get parameters from route', () => {
|
|
|
|
activatedRouteStub = testFixture.debugElement.injector.get(ActivatedRoute);
|
|
activatedRouteStub.testParams = {
|
|
pageId: 'test',
|
|
page: 2,
|
|
pageSize: 20
|
|
};
|
|
|
|
testFixture.detectChanges();
|
|
|
|
expectPages(testFixture, ['« Previous', '1', '+2', '3', '4', '5', '» Next']);
|
|
expect(testComp.paginationOptions.currentPage).toEqual(2);
|
|
expect(testComp.paginationOptions.pageSize).toEqual(20);
|
|
|
|
activatedRouteStub.testParams = {
|
|
pageId: 'test',
|
|
page: 3,
|
|
pageSize: 40
|
|
};
|
|
|
|
testFixture.detectChanges();
|
|
|
|
expectPages(testFixture, ['« Previous', '1', '2', '+3', '-» Next']);
|
|
expect(testComp.paginationOptions.currentPage).toEqual(3);
|
|
expect(testComp.paginationOptions.pageSize).toEqual(40);
|
|
});
|
|
|
|
it('should respond to windows resize', () => {
|
|
let paginationComponent: PaginationComponent = testFixture
|
|
.debugElement.query(By.css('ds-pagination')).references['p'];
|
|
hostWindowServiceStub = testFixture.debugElement.injector.get(HostWindowService);
|
|
|
|
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();
|
|
});
|
|
});
|
|
});
|
|
|
|
// declare a test component
|
|
@Component({selector: 'ds-test-cmp', template: ''})
|
|
class TestComponent {
|
|
|
|
collection: string[] = [];
|
|
collectionSize: number;
|
|
paginationOptions = new PaginationComponentOptions();
|
|
sortOptions = new SortOptions();
|
|
|
|
constructor() {
|
|
this.collection = Array.from(new Array(100), (x, i) => `item ${i + 1}`);
|
|
this.collectionSize = 100;
|
|
this.paginationOptions.id = 'test';
|
|
}
|
|
|
|
pageChanged(page) {
|
|
this.paginationOptions.currentPage = page;
|
|
}
|
|
|
|
pageSizeChanged(pageSize) {
|
|
this.paginationOptions.pageSize = pageSize;
|
|
}
|
|
}
|
|
|
|
// declare a stub service
|
|
class HostWindowServiceStub {
|
|
|
|
private width: number;
|
|
|
|
constructor(width) {
|
|
this.setWidth(width);
|
|
}
|
|
|
|
setWidth(width) {
|
|
this.width = width;
|
|
}
|
|
|
|
isXs(): Observable<boolean> {
|
|
return Observable.of(this.width < 576);
|
|
}
|
|
}
|