mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
e844faff79
* [MNT-22924] Fix slow search results loading, limit number of pages * Add unit test * Changed some of the values
396 lines
12 KiB
TypeScript
396 lines
12 KiB
TypeScript
/*!
|
|
* @license
|
|
* Copyright 2019 Alfresco Software, Ltd.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import { NO_ERRORS_SCHEMA } from '@angular/core';
|
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
import { Pagination } from '@alfresco/js-api';
|
|
import { PaginationComponent } from './pagination.component';
|
|
import { PaginatedComponent } from './paginated-component.interface';
|
|
import { BehaviorSubject } from 'rxjs';
|
|
import { setupTestBed } from '../testing/setup-test-bed';
|
|
import { CoreTestingModule } from '../testing/core.testing.module';
|
|
import { TranslateModule } from '@ngx-translate/core';
|
|
|
|
class FakePaginationInput implements Pagination {
|
|
count = 25;
|
|
hasMoreItems = false;
|
|
totalItems = 0;
|
|
skipCount = 0;
|
|
maxItems = 25;
|
|
|
|
constructor(pagesCount: number, currentPage: number, lastPageItems: number) {
|
|
this.totalItems = ((pagesCount - 1) * this.maxItems) + lastPageItems;
|
|
this.skipCount = (currentPage - 1) * this.maxItems;
|
|
}
|
|
}
|
|
|
|
describe('PaginationComponent', () => {
|
|
|
|
let fixture: ComponentFixture<PaginationComponent>;
|
|
let component: PaginationComponent;
|
|
|
|
setupTestBed({
|
|
imports: [
|
|
TranslateModule.forRoot(),
|
|
CoreTestingModule
|
|
],
|
|
schemas: [ NO_ERRORS_SCHEMA ]
|
|
});
|
|
|
|
beforeEach(() => {
|
|
fixture = TestBed.createComponent(PaginationComponent);
|
|
component = fixture.componentInstance;
|
|
fixture.detectChanges();
|
|
});
|
|
|
|
afterEach(() => {
|
|
fixture.destroy();
|
|
});
|
|
|
|
it('should have an "empty" class if no items present', async (done) => {
|
|
fixture.detectChanges();
|
|
await fixture.whenStable();
|
|
|
|
expect(fixture.nativeElement.classList.contains('adf-pagination__empty')).toBeTruthy();
|
|
done();
|
|
});
|
|
|
|
describe('Single page', () => {
|
|
beforeEach(async () => {
|
|
component.pagination = new FakePaginationInput(1, 1, 10);
|
|
});
|
|
|
|
it('has a single page', () => {
|
|
expect(component.pages.length).toBe(1);
|
|
});
|
|
|
|
it('has current page 1', () => {
|
|
expect(component.current).toBe(1);
|
|
});
|
|
|
|
it('is first and last page', () => {
|
|
expect(component.isFirstPage).toBe(true);
|
|
expect(component.isLastPage).toBe(true);
|
|
});
|
|
|
|
it('has range', () => {
|
|
expect(component.range).toEqual([ 1, 10 ]);
|
|
});
|
|
});
|
|
|
|
describe('Single full page', () => {
|
|
beforeEach(() => {
|
|
component.pagination = new FakePaginationInput(1, 1, 25);
|
|
});
|
|
|
|
it('has a single page', () => {
|
|
expect(component.pages.length).toBe(1);
|
|
});
|
|
|
|
it('has range', () => {
|
|
expect(component.range).toEqual([ 1, 25 ]);
|
|
});
|
|
});
|
|
|
|
describe('Middle page', () => {
|
|
|
|
// This test describes 6 pages being on the third page
|
|
// and last page has 5 items
|
|
|
|
beforeEach(() => {
|
|
component.pagination = new FakePaginationInput(6, 3, 5);
|
|
});
|
|
|
|
it('has more pages', () => {
|
|
expect(component.pages.length).toBe(6);
|
|
});
|
|
|
|
it('has the last page', () => {
|
|
expect(component.lastPage).toBe(6);
|
|
});
|
|
|
|
it('is on the 3rd page', () => {
|
|
expect(component.current).toBe(3);
|
|
});
|
|
|
|
it('has previous and next page', () => {
|
|
expect(component.previous).toBe(2);
|
|
expect(component.next).toBe(4);
|
|
});
|
|
|
|
it('is not first, nor last', () => {
|
|
expect(component.isFirstPage).toBe(false);
|
|
expect(component.isLastPage).toBe(false);
|
|
});
|
|
|
|
it('has range', () => {
|
|
expect(component.range).toEqual([ 51, 75 ]);
|
|
});
|
|
|
|
it('goes next', () => {
|
|
const nextPageSpy = spyOn(component.nextPage, 'emit');
|
|
expect(component.current).toBe(3);
|
|
component.goNext();
|
|
|
|
const { skipCount } = nextPageSpy.calls.mostRecent().args[0];
|
|
|
|
expect(skipCount).toBe(75);
|
|
expect(component.current).toBe(4);
|
|
});
|
|
|
|
it('goes previous', () => {
|
|
const prevPageSpy = spyOn(component.prevPage, 'emit');
|
|
expect(component.current).toBe(3);
|
|
component.goPrevious();
|
|
|
|
const { skipCount } = prevPageSpy.calls.mostRecent().args[0];
|
|
|
|
expect(skipCount).toBe(25);
|
|
expect(component.current).toBe(2);
|
|
});
|
|
|
|
it('changes page size', () => {
|
|
const changePageSizeSpy = spyOn(component.changePageSize, 'emit');
|
|
expect(component.current).toBe(3);
|
|
component.onChangePageSize(50);
|
|
|
|
const { maxItems } = changePageSizeSpy.calls.mostRecent().args[0];
|
|
|
|
expect(maxItems).toBe(50);
|
|
expect(component.current).toBe(1);
|
|
});
|
|
|
|
it('changes page number', () => {
|
|
const changePageNumberSpy = spyOn(component.changePageNumber, 'emit');
|
|
expect(component.current).toBe(3);
|
|
component.onChangePageNumber(5);
|
|
|
|
const { skipCount } = changePageNumberSpy.calls.mostRecent().args[0];
|
|
|
|
expect(skipCount).toBe(100);
|
|
expect(component.current).toBe(5);
|
|
});
|
|
});
|
|
|
|
describe('First page', () => {
|
|
|
|
// This test describes 10 pages being on the first page
|
|
|
|
beforeEach(() => {
|
|
component.pagination = new FakePaginationInput(10, 1, 5);
|
|
});
|
|
|
|
it('is on the first page', () => {
|
|
expect(component.current).toBe(1);
|
|
expect(component.isFirstPage).toBe(true);
|
|
});
|
|
|
|
it('has the same, previous page', () => {
|
|
expect(component.previous).toBe(1);
|
|
});
|
|
|
|
it('has next page', () => {
|
|
expect(component.next).toBe(2);
|
|
});
|
|
|
|
it('has range', () => {
|
|
expect(component.range).toEqual([ 1, 25 ]);
|
|
});
|
|
});
|
|
|
|
describe('Last page', () => {
|
|
|
|
// This test describes 10 pages being on the last page
|
|
|
|
beforeEach(() => {
|
|
component.pagination = new FakePaginationInput(10, 10, 5);
|
|
});
|
|
|
|
it('is on the last page', () => {
|
|
expect(component.current).toBe(10);
|
|
expect(component.isLastPage).toBe(true);
|
|
});
|
|
|
|
it('has the same, next page', () => {
|
|
expect(component.next).toBe(10);
|
|
});
|
|
|
|
it('has previous page', () => {
|
|
expect(component.previous).toBe(9);
|
|
});
|
|
|
|
it('has range', () => {
|
|
expect(component.range).toEqual([ 226, 230 ]);
|
|
});
|
|
});
|
|
|
|
describe('Without pagination input', () => {
|
|
it('has defaults', () => {
|
|
component.ngOnInit();
|
|
|
|
expect(component.lastPage).toBe(1, 'lastPage');
|
|
expect(component.previous).toBe(1, 'previous');
|
|
expect(component.current).toBe(1, 'current');
|
|
expect(component.next).toBe(1, 'next');
|
|
|
|
expect(component.isFirstPage).toBe(true, 'isFirstPage');
|
|
expect(component.isLastPage).toBe(true, 'isLastPage');
|
|
|
|
expect(component.range).toEqual([ 0, 0 ], 'range');
|
|
expect(component.pages).toEqual([ 1 ], 'pages');
|
|
});
|
|
});
|
|
|
|
describe('with paginated component', () => {
|
|
|
|
it('should take pagination from the external component', () => {
|
|
const pagination: Pagination = {};
|
|
|
|
const customComponent = {
|
|
pagination: new BehaviorSubject<Pagination>({})
|
|
} as PaginatedComponent;
|
|
|
|
component.target = customComponent;
|
|
component.ngOnInit();
|
|
|
|
customComponent.pagination.next(pagination);
|
|
expect(component.pagination).toEqual(pagination);
|
|
});
|
|
|
|
it('should update pagination by subscription', () => {
|
|
const pagination1: Pagination = {};
|
|
const pagination2: Pagination = {};
|
|
|
|
const customComponent = {
|
|
pagination: new BehaviorSubject<Pagination>({})
|
|
} as PaginatedComponent;
|
|
|
|
component.target = customComponent;
|
|
component.ngOnInit();
|
|
|
|
customComponent.pagination.next(pagination1);
|
|
expect(component.pagination).toEqual(pagination1);
|
|
|
|
customComponent.pagination.next(pagination2);
|
|
expect(component.pagination).toEqual(pagination2);
|
|
});
|
|
|
|
it('should send pagination event to paginated component', () => {
|
|
const customComponent = {
|
|
pagination: new BehaviorSubject<Pagination>({}),
|
|
updatePagination: () => {},
|
|
supportedPageSizes: [],
|
|
rows: []
|
|
} as PaginatedComponent;
|
|
spyOn(customComponent, 'updatePagination').and.stub();
|
|
|
|
component.target = customComponent;
|
|
component.ngOnInit();
|
|
|
|
customComponent.pagination.next(new FakePaginationInput(2, 1, 25));
|
|
expect(component.current).toBe(1);
|
|
|
|
component.goNext();
|
|
expect(customComponent.updatePagination).toHaveBeenCalled();
|
|
expect(component.current).toBe(2);
|
|
});
|
|
|
|
it('should go to previous page if current page has 0 items', () => {
|
|
const customComponent = {
|
|
updatePagination: () => {},
|
|
pagination: new BehaviorSubject<Pagination>({}),
|
|
rows: []
|
|
} as PaginatedComponent;
|
|
|
|
component.target = customComponent;
|
|
component.ngOnInit();
|
|
|
|
customComponent.pagination.next({
|
|
count: 2,
|
|
skipCount: 5,
|
|
maxItems: 5
|
|
});
|
|
|
|
expect(component.current).toBe(2);
|
|
|
|
customComponent.pagination.next({
|
|
count: 0,
|
|
totalItems: 5,
|
|
maxItems: 5
|
|
});
|
|
|
|
expect(component.current).toBe(1);
|
|
});
|
|
|
|
it('should not show pagination when external component count is zero', () => {
|
|
const pagination: Pagination = {};
|
|
const customComponent = {
|
|
pagination: new BehaviorSubject<Pagination>({ count: 0, maxItems: 5, totalItems: 5 })
|
|
} as PaginatedComponent;
|
|
component.target = customComponent;
|
|
component.ngOnInit();
|
|
customComponent.pagination.next(pagination);
|
|
fixture.detectChanges();
|
|
|
|
expect(fixture.debugElement.nativeElement.querySelector('.adf-pagination__block')).toBeNull();
|
|
});
|
|
|
|
});
|
|
|
|
describe('without total items', () => {
|
|
beforeEach(() => {
|
|
component.pagination = new FakePaginationInput(3, 2, 5);
|
|
component.pagination.hasMoreItems = true;
|
|
component.pagination.totalItems = undefined;
|
|
});
|
|
|
|
it('has the same, previous page', () => {
|
|
expect(component.previous).toBe(1);
|
|
});
|
|
|
|
it('has next page', () => {
|
|
expect(component.next).toBe(3);
|
|
});
|
|
|
|
it('has range', () => {
|
|
expect(component.range).toEqual([ 26, 50 ]);
|
|
});
|
|
it('cannot calculate number of pages', () => {
|
|
expect(component.pages).toEqual([1]);
|
|
});
|
|
});
|
|
|
|
describe('many pages', () => {
|
|
it('should all the pages be available if equal or less than 100', () => {
|
|
component.pagination = new FakePaginationInput(100, 30, 5);
|
|
|
|
expect(component.limitedPages.length).toBe(100);
|
|
expect(component.pages).toEqual(component.limitedPages);
|
|
});
|
|
|
|
it('should only some pages be available if over 100', () => {
|
|
component.pagination = new FakePaginationInput(101, 30, 5);
|
|
|
|
const expectedPages = [1, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
|
|
31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 101];
|
|
console.log(component.pagination.totalItems, component.pagination.skipCount);
|
|
expect(component.limitedPages).toEqual(expectedPages);
|
|
expect(component.limitedPages).not.toEqual(component.pages);
|
|
});
|
|
});
|
|
});
|