test(grid): Adding igxGrid selection tests #4998

IgniteUI · Aug 29, 2019 · e063c5a · e063c5a
1 parent 7b84814
commit e063c5a
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 6 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts
@@ -21,6 +21,7 @@ import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { IgxHierarchicalGridCustomSelectorsComponent } from '../../test-utils/hierarhical-grid-components.spec';
 import { IgxSelectorsModule } from '../igx-selection.module';
+import { ROW_EDITING_BANNER_OVERLAY_CLASS } from '../../test-utils/tree-grid-functions.spec';
 
 const DEBOUNCETIME = 30;
 
@@ -1889,14 +1890,48 @@ describe('IgxGrid - Row Selection #grid', () => {
         }));
 
         it('Should have the correct properties in the custom row selector template', () => {
-            // TODO
+            const firstRow = grid.getRowByIndex(0);
+            const firstCheckbox = firstRow.nativeElement.querySelector('.igx-checkbox__composite');
+            const context = { index: 0, rowID: Object({ ID: 'ALFKI', CompanyName: 'Alfreds Futterkiste', ContactName: 'Maria Anders',
+                ContactTitle: 'Sales Representative', Address: 'Obere Str. 57', City: 'Berlin', Region: null, PostalCode: '12209',
+                Country: 'Germany', Phone: '030-0074321', Fax: '030-0076545' }), selected: false };
+            const contextUnselect = { index: 0, rowID: Object({ ID: 'ALFKI', CompanyName: 'Alfreds Futterkiste', ContactName: 'Maria Anders',
+                ContactTitle: 'Sales Representative', Address: 'Obere Str. 57', City: 'Berlin', Region: null, PostalCode: '12209',
+                Country: 'Germany', Phone: '030-0074321', Fax: '030-0076545' }), selected: true };
+            spyOn(fix.componentInstance, 'onRowCheckboxClick').and.callThrough();
+            firstCheckbox.click();
+            fix.detectChanges();
+
+            expect(fix.componentInstance.onRowCheckboxClick).toHaveBeenCalledTimes(1);
+            expect(fix.componentInstance.onRowCheckboxClick).toHaveBeenCalledWith(new MouseEvent('click'), context);
+
+            // Verify correct properties when unselecting a row
+            firstCheckbox.click();
+            fix.detectChanges();
+
+            expect(fix.componentInstance.onRowCheckboxClick).toHaveBeenCalledTimes(2);
+            expect(fix.componentInstance.onRowCheckboxClick).toHaveBeenCalledWith(new MouseEvent('click'), contextUnselect);
         });
 
         it('Should have the correct properties in the custom row selector header template', () => {
-            // TODO
+            const context = { selectedCount: 0, totalCount: 27 };
+            const contextUnselect = { selectedCount: 27, totalCount: 27 };
+            const headerCheckbox = fix.nativeElement.querySelector('.igx-grid__thead').querySelector('.igx-checkbox__composite');
+            spyOn(fix.componentInstance, 'onHeaderCheckboxClick').and.callThrough();
+            headerCheckbox.click();
+            fix.detectChanges();
+
+            expect(fix.componentInstance.onHeaderCheckboxClick).toHaveBeenCalledTimes(1);
+            expect(fix.componentInstance.onHeaderCheckboxClick).toHaveBeenCalledWith(new MouseEvent('click'), context);
+
+            headerCheckbox.click();
+            fix.detectChanges();
+
+            expect(fix.componentInstance.onHeaderCheckboxClick).toHaveBeenCalledTimes(2);
+            expect(fix.componentInstance.onHeaderCheckboxClick).toHaveBeenCalledWith(new MouseEvent('click'), contextUnselect);
         });
 
-        it('Should have correct indices on all pages', () => {
+        fit('Should have correct indices on all pages', () => {
             // TODO
         });
     });

diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -1172,22 +1172,37 @@ export class DynamicColumnsComponent extends GridWithSizeComponent {
 
 @Component({
     template: `
-    <igx-grid #gridCustomSelectors [data]="data" [autoGenerate]="true">
+    <igx-grid #gridCustomSelectors [data]="data" [rowSelection]="'multiple'" [autoGenerate]="false">
         <igx-column width="100px" [field]="'ID'" [header]="'ID'"></igx-column>
         <igx-column width="100px" [field]="'CompanyName'"></igx-column>
         <igx-column width="100px" [field]="'ContactName'" dataType="number"></igx-column>
         <igx-column width="100px" [field]="'ContactTitle'" dataType="string"></igx-column>
         <igx-column width="100px" [field]="'Address'" dataType="string"></igx-column>
         <ng-template igxRowSelector let-rowContext>
-            <igx-checkbox [checked]="rowContext.selected"></igx-checkbox>
+            <igx-checkbox [checked]="rowContext.selected" (click)="onRowCheckboxClick($event, rowContext)"></igx-checkbox>
         </ng-template>
         <ng-template igxHeadSelector let-headContext>
-            <igx-checkbox [checked]="headContext.totalCount === headContext.selectedCount"></igx-checkbox>
+            <igx-checkbox [checked]="headContext.totalCount === headContext.selectedCount" 
+                (click)="onHeaderCheckboxClick($event, headContext)"></igx-checkbox>
         </ng-template>
     </igx-grid>`
 })
 export class GridCustomSelectorsComponent extends BasicGridComponent implements OnInit {
+    @ViewChild('gridCustomSelectors', { static: true })
+    public grid: IgxGridComponent;
     public ngOnInit(): void {
         this.data = SampleTestData.contactInfoDataFull();
     }
+
+    public onRowCheckboxClick(event, rowContext) {
+        event.stopPropagation();
+        event.preventDefault();
+        rowContext.selected ? this.grid.deselectRows([rowContext.rowID]) : this.grid.selectRows([rowContext.rowID]);
+    }
+
+    public onHeaderCheckboxClick(event, headContext) {
+        event.stopPropagation();
+        event.preventDefault();
+        headContext.selected ? this.grid.deselectAllRows() : this.grid.selectAllRows();
+    }
 }