mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-08 18:44:14 +00:00
fixed pagination component spec, linting wip
This commit is contained in:
William Welling
@@ -1,7 +1,12 @@
|
||||
// ... test imports
|
||||
// Load the implementations that should be tested
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import {
|
||||
Component,
|
||||
CUSTOM_ELEMENTS_SCHEMA,
|
||||
DebugElement
|
||||
} from '@angular/core';
|
||||
|
||||
import {
|
||||
async,
|
||||
ComponentFixture,
|
||||
@@ -9,61 +14,54 @@ import {
|
||||
TestBed, fakeAsync, tick
|
||||
} from '@angular/core/testing';
|
||||
|
||||
import {
|
||||
Component,
|
||||
CUSTOM_ELEMENTS_SCHEMA,
|
||||
DebugElement
|
||||
} from '@angular/core';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { By } from '@angular/platform-browser';
|
||||
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
|
||||
import Spy = jasmine.Spy;
|
||||
|
||||
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
|
||||
import { StoreModule } from '@ngrx/store';
|
||||
|
||||
import { Ng2PaginationModule } from 'ng2-pagination';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import Spy = jasmine.Spy;
|
||||
|
||||
import { PaginationComponent } from './pagination.component';
|
||||
import { PaginationComponentOptions } from './pagination-component-options.model';
|
||||
|
||||
import { MockTranslateLoader } from '../testing/mock-translate-loader';
|
||||
|
||||
import { GLOBAL_CONFIG, ENV_CONFIG } from '../../../config';
|
||||
|
||||
import { HostWindowServiceStub } from '../testing/host-window-service-stub';
|
||||
import { ActivatedRouteStub } from '../testing/active-router-stub';
|
||||
import { RouterStub } from '../testing/router-stub';
|
||||
|
||||
import { HostWindowService } from '../host-window.service';
|
||||
import { EnumKeysPipe } from '../utils/enum-keys-pipe';
|
||||
import { SortOptions } from '../../core/cache/models/sort-options.model';
|
||||
|
||||
import { TestComponent } from '../testing/test.component';
|
||||
import { HostWindowServiceStub } from '../testing/host-window-service-stub';
|
||||
import { GLOBAL_CONFIG, ENV_CONFIG } from '../../../config';
|
||||
|
||||
function createTestComponent<T>(html: string, type: { new (...args: any[]): T }): ComponentFixture<T> {
|
||||
TestBed.overrideComponent(type, {
|
||||
set: { template: html }
|
||||
});
|
||||
const fixture = TestBed.createComponent(type);
|
||||
let fixture = TestBed.createComponent(type);
|
||||
|
||||
fixture.detectChanges();
|
||||
return fixture as ComponentFixture<T>;
|
||||
}
|
||||
|
||||
function expectPages(fixture: ComponentFixture<any>, pagesDef: string[]): void {
|
||||
const de = fixture.debugElement.query(By.css('.pagination'));
|
||||
const pages = de.nativeElement.querySelectorAll('li');
|
||||
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++) {
|
||||
const pageDef = pagesDef[i];
|
||||
const classIndicator = pageDef.charAt(0);
|
||||
let pageDef = pagesDef[i];
|
||||
let classIndicator = pageDef.charAt(0);
|
||||
|
||||
if (classIndicator === '+') {
|
||||
expect(pages[i].classList.contains('active')).toBeTruthy();
|
||||
@@ -88,16 +86,18 @@ function expectPages(fixture: ComponentFixture<any>, pagesDef: string[]): void {
|
||||
}
|
||||
|
||||
function changePageSize(fixture: ComponentFixture<any>, pageSize: string): void {
|
||||
const buttonEl = fixture.nativeElement.querySelector('#paginationControls');
|
||||
let buttonEl = fixture.nativeElement.querySelector('#paginationControls');
|
||||
let activatedRouteStub: ActivatedRouteStub;
|
||||
let routerStub: RouterStub;
|
||||
|
||||
buttonEl.click();
|
||||
|
||||
const dropdownMenu = fixture.debugElement.query(By.css('#paginationControlsDropdownMenu'));
|
||||
const buttons = dropdownMenu.nativeElement.querySelectorAll('button');
|
||||
let dropdownMenu = fixture.debugElement.query(By.css('#paginationControlsDropdownMenu'));
|
||||
let buttons = dropdownMenu.nativeElement.querySelectorAll('button');
|
||||
|
||||
for (const button of buttons) {
|
||||
if (button.textContent.trim() === pageSize) {
|
||||
button.click();
|
||||
for (let i = 0; i < buttons.length; i++) {
|
||||
if (buttons[i].textContent.trim() == pageSize) {
|
||||
buttons[i].click();
|
||||
fixture.detectChanges();
|
||||
break;
|
||||
}
|
||||
@@ -105,8 +105,8 @@ function changePageSize(fixture: ComponentFixture<any>, pageSize: string): void
|
||||
}
|
||||
|
||||
function changePage(fixture: ComponentFixture<any>, idx: number): void {
|
||||
const de = fixture.debugElement.query(By.css('.pagination'));
|
||||
const buttons = de.nativeElement.querySelectorAll('li');
|
||||
let de = fixture.debugElement.query(By.css('.pagination'));
|
||||
let buttons = de.nativeElement.querySelectorAll('li');
|
||||
|
||||
buttons[idx].querySelector('a').click();
|
||||
fixture.detectChanges();
|
||||
@@ -119,16 +119,19 @@ function normalizeText(txt: string): string {
|
||||
|
||||
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
|
||||
const _initialState = { width: 1600, height: 770 };
|
||||
//Define initial state and test state
|
||||
let _initialState = { width: 1600, height: 770 };
|
||||
|
||||
// async beforeEach
|
||||
beforeEach(async(() => {
|
||||
@@ -247,64 +250,87 @@ describe('Pagination component', () => {
|
||||
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 set correct route parameters', fakeAsync(() => {
|
||||
let paginationComponent: PaginationComponent = testFixture.debugElement.query(By.css('ds-pagination')).references['p'];
|
||||
routerStub = <any>testFixture.debugElement.injector.get(Router);
|
||||
|
||||
// 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);
|
||||
// });
|
||||
testComp.collectionSize = 60;
|
||||
|
||||
// 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();
|
||||
// });
|
||||
// });
|
||||
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 = <any>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 = <any>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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user