fixed pagination component spec, linting wip

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 {
+import { RouterTestingModule } from '@angular/router/testing';
-  Component,
-  CUSTOM_ELEMENTS_SCHEMA,
-  DebugElement
-} from '@angular/core';
 
 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 { HostWindowServiceStub } from '../testing/host-window-service-stub';
-import { GLOBAL_CONFIG, ENV_CONFIG } from '../../../config';
-
 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 { GLOBAL_CONFIG, ENV_CONFIG } from '../../../config';
-import { HostWindowServiceStub } from '../testing/host-window-service-stub';
 
 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'));
+  let de = fixture.debugElement.query(By.css('.pagination'));
-  const pages = de.nativeElement.querySelectorAll('li');
+  let pages = de.nativeElement.querySelectorAll('li');
 
   expect(pages.length).toEqual(pagesDef.length);
 
   for (let i = 0; i < pagesDef.length; i++) {
-    const pageDef = pagesDef[i];
+    let pageDef = pagesDef[i];
-    const classIndicator = pageDef.charAt(0);
+    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'));
+  let dropdownMenu = fixture.debugElement.query(By.css('#paginationControlsDropdownMenu'));
-  const buttons = dropdownMenu.nativeElement.querySelectorAll('button');
+  let buttons = dropdownMenu.nativeElement.querySelectorAll('button');
 
-  for (const button of buttons) {
+  for (let i = 0; i < buttons.length; i++) {
-    if (button.textContent.trim() === pageSize) {
+    if (buttons[i].textContent.trim() == pageSize) {
-      button.click();
+      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'));
+  let de = fixture.debugElement.query(By.css('.pagination'));
-  const buttons = de.nativeElement.querySelectorAll('li');
+  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
+  //Define initial state and test state
-  const _initialState = { width: 1600, height: 770 };
+  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(() => {
+  it('should set correct route parameters', fakeAsync(() => {
-  //   let paginationComponent: PaginationComponent = testFixture.debugElement.query(By.css('ds-pagination')).references['p'];
+    let paginationComponent: PaginationComponent = testFixture.debugElement.query(By.css('ds-pagination')).references['p'];
-  //   routerStub = testFixture.debugElement.injector.get(Router);
+    routerStub = <any>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', () => {
+    testComp.collectionSize = 60;
-  //
-  //   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', () => {
+    changePage(testFixture, 3);
-  //   let paginationComponent: PaginationComponent = testFixture
+    tick();
-  //     .debugElement.query(By.css('ds-pagination')).references['p'];
+    expect(routerStub.navigate).toHaveBeenCalledWith([], { queryParams: { pageId: 'test', page: 3, pageSize: 10, sortDirection: 0, sortField: 'name' } });
-  //   hostWindowServiceStub = testFixture.debugElement.injector.get(HostWindowService);
+    expect(paginationComponent.currentPage).toEqual(3);
-  //
+
-  //   hostWindowServiceStub.setWidth(400);
+    changePageSize(testFixture, '20');
-  //
+    tick();
-  //   hostWindowServiceStub.isXs().subscribe((status) => {
+    expect(routerStub.navigate).toHaveBeenCalledWith([], { queryParams: { pageId: 'test', page: 3, pageSize: 20, sortDirection: 0, sortField: 'name' } });
-  //     paginationComponent.isXs = status;
+    expect(paginationComponent.pageSize).toEqual(20);
-  //     testFixture.detectChanges();
+  }));
-  //     expectPages(testFixture, ['-« Previous', '+1', '2', '3', '4', '5', '-...', '10', '» Next']);
+
-  //     de = testFixture.debugElement.query(By.css('ul.pagination'));
+  it('should get parameters from route', () => {
-  //     expect(de.nativeElement.classList.contains('pagination-sm')).toBeTruthy();
+
-  //   });
+    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;
+  }
+}

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<any> = new BehaviorSubject(this.testParams);
+
   params = this.subject.asObservable();
   queryParams = this.subject.asObservable();
 
-  private _testParams: {};
-
   constructor(params?: Params) {
     if (params) {
       this.testParams = params;

src/app/shared/testing/test.component.ts

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