Adding unit tests for VCH pagination (#471)

* - Adding unit test casses for vch view pagination * - changing from ngfor to clrDgItem for display on the datagrid - Formating the unit test code
vmware · May 9, 2018 · 4572e72 · 4572e72
1 parent a7d5d5b
commit 4572e72
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 2 deletions.
diff --git a/h5c/vic/src/vic-webapp/src/app/container-view/container-view.component.spec.ts b/h5c/vic/src/vic-webapp/src/app/container-view/container-view.component.spec.ts
@@ -40,13 +40,15 @@ import { VicContainerViewComponent } from './container-view.component';
 import { VicOvaVerificationComponent } from '../shared/vic-ova-verification.component';
 import { VicVmViewService } from '../services/vm-view.service';
 import { WS_CONTAINER } from '../shared/constants';
+import { DebugElement } from '@angular/core';
 
 let responseProperlyFormatted = true;
 
 class VicVmViewServiceStub {
     private containersSubj: Subject<ContainerVm[]>;
     public containers$: Observable<ContainerVm[]>;
     private data: ContainerVm[] = [];
+    public totalContainersCount: number;
 
     constructor() {
         this.containersSubj = new Subject<ContainerVm[]>();
@@ -67,6 +69,7 @@ class VicVmViewServiceStub {
                     this.data.push(new ContainerVm(cResponse[objId]));
                 }
             }
+            this.totalContainersCount = this.data.length;
             this.containersSubj.next(this.data);
         } catch (e) {
             this.containersSubj.error('error');
@@ -116,7 +119,76 @@ describe('VicContainerViewComponent', () => {
         fixture.detectChanges();
         const rowElements = fixture.debugElement.queryAll(By.css('clr-dg-row'));
         const rowElementsLength = rowElements.length;
-        expect(rowElementsLength).toBe(30);
+        expect(rowElementsLength).toBe(10);
+    }));
+
+    it('should navigate correctly through the VCHs pages', async(() => {
+        let paginationText: DebugElement;
+        let nextPageButton: DebugElement;
+        let previousPageButton: DebugElement;
+        let rowElements: DebugElement [];
+        let vchFirstRow: DebugElement [];
+        let rowElementsLength = 0;
+
+        fixture.componentInstance.ngOnInit();
+        fixture.componentInstance.reloadContainers();
+        fixture.detectChanges();
+        paginationText = fixture.debugElement.query(By.css('div.datagrid-foot-description'));
+        nextPageButton = fixture.debugElement.query(By.css('button.pagination-next'));
+
+        // cheking on the first page
+        rowElements = fixture.debugElement.queryAll(By.css('clr-dg-row'));
+        rowElementsLength = rowElements.length;
+        vchFirstRow = fixture.debugElement.queryAll(By.css('.datagrid-cell'));
+
+        expect(rowElementsLength).toBe(10);
+        expect(vchFirstRow[0].nativeElement.textContent).toContain('Container-VM-0');
+        expect(paginationText.nativeElement.textContent).toContain('1 - 10 of 30');
+
+        // advancing and checking on the second page
+        nextPageButton.triggerEventHandler('click', null);
+        fixture.detectChanges();
+        rowElements = fixture.debugElement.queryAll(By.css('clr-dg-row'));
+        rowElementsLength = rowElements.length;
+        vchFirstRow = fixture.debugElement.queryAll(By.css('.datagrid-cell'));
+
+        expect(rowElementsLength).toBe(10);
+        expect(vchFirstRow[0].nativeElement.textContent).toContain('Container-VM-10');
+        expect(paginationText.nativeElement.textContent).toContain('11 - 20 of 30');
+
+        // advancing and checking on the third page
+        nextPageButton.triggerEventHandler('click', null);
+        fixture.detectChanges();
+        vchFirstRow = fixture.debugElement.queryAll(By.css('.datagrid-cell'));
+        rowElements = fixture.debugElement.queryAll(By.css('clr-dg-row'));
+        rowElementsLength = rowElements.length;
+
+        expect(rowElementsLength).toBe(10);
+        expect(vchFirstRow[0].nativeElement.textContent).toContain('Container-VM-20');
+        expect(paginationText.nativeElement.textContent).toContain('21 - 30 of 30');
+
+        // returning and checking on the second page
+        previousPageButton = fixture.debugElement.query(By.css('button.pagination-previous'));
+        previousPageButton.triggerEventHandler('click', null);
+        fixture.detectChanges();
+        vchFirstRow = fixture.debugElement.queryAll(By.css('.datagrid-cell'));
+        rowElements = fixture.debugElement.queryAll(By.css('clr-dg-row'));
+        rowElementsLength = rowElements.length;
+
+        expect(rowElementsLength).toBe(10);
+        expect(vchFirstRow[0].nativeElement.textContent).toContain('Container-VM-10');
+        expect(paginationText.nativeElement.textContent).toContain('11 - 20 of 30');
+
+        // returning and checking on the first page
+        previousPageButton.triggerEventHandler('click', null);
+        fixture.detectChanges();
+        vchFirstRow = fixture.debugElement.queryAll(By.css('.datagrid-cell'));
+        rowElements = fixture.debugElement.queryAll(By.css('clr-dg-row'));
+        rowElementsLength = rowElements.length;
+
+        expect(rowElementsLength).toBe(10);
+        expect(vchFirstRow[0].nativeElement.textContent).toContain('Container-VM-0');
+        expect(paginationText.nativeElement.textContent).toContain('1 - 10 of 30');
     }));
 
     it('should render zero row for malformed data', async(() => {

diff --git a/h5c/vic/src/vic-webapp/src/app/container-view/container-view.template.html b/h5c/vic/src/vic-webapp/src/app/container-view/container-view.template.html
@@ -36,7 +36,7 @@
         {{vicI18n.translate(this.WS_CONTAINER_CONSTANTS.DG.COLUMNS, 'IMAGE_NAME')}}
     </clr-dg-column>
 
-    <clr-dg-row *ngFor="let item of containers">
+    <clr-dg-row *clrDgItems="let item of containers">
         <clr-dg-cell>
             <span>{{item.containerName}}</span>
         </clr-dg-cell>