diff --git a/src/app/shared/pagination/pagination.component.spec.ts b/src/app/shared/pagination/pagination.component.spec.ts index 8f1b5836a7..d922e44cb0 100644 --- a/src/app/shared/pagination/pagination.component.spec.ts +++ b/src/app/shared/pagination/pagination.component.spec.ts @@ -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(html: string, type: { new (...args: any[]): T }): ComponentFixture { TestBed.overrideComponent(type, { set: { template: html } }); - const fixture = TestBed.createComponent(type); + let fixture = TestBed.createComponent(type); fixture.detectChanges(); return fixture as ComponentFixture; } function expectPages(fixture: ComponentFixture, 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, pagesDef: string[]): void { } function changePageSize(fixture: ComponentFixture, 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, pageSize: string): void } function changePage(fixture: ComponentFixture, 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; + let comp: PaginationComponent; let testComp: TestComponent; let testFixture: ComponentFixture; + 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 = 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 = 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; + } +} diff --git a/src/app/shared/testing/active-router-stub.ts b/src/app/shared/testing/active-router-stub.ts index ebbf0cea43..9959f38292 100644 --- a/src/app/shared/testing/active-router-stub.ts +++ b/src/app/shared/testing/active-router-stub.ts @@ -4,13 +4,14 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject'; export class ActivatedRouteStub { + private _testParams?: any; + // ActivatedRoute.params is Observable - private subject = new BehaviorSubject(this.testParams); + private subject?: BehaviorSubject = new BehaviorSubject(this.testParams); + params = this.subject.asObservable(); queryParams = this.subject.asObservable(); - private _testParams: {}; - constructor(params?: Params) { if (params) { this.testParams = params; diff --git a/src/app/shared/testing/test.component.ts b/src/app/shared/testing/test.component.ts deleted file mode 100644 index c55791099b..0000000000 --- a/src/app/shared/testing/test.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { Component } from '@angular/core'; - -import { PaginationComponentOptions } from '../pagination/pagination-component-options.model'; -import { SortOptions } from '../../core/cache/models/sort-options.model'; - -// declare a test component -@Component({ selector: 'ds-test-cmp', template: '' }) -export 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; - } -}