test(row-selection): move initial test spec to grid-row-selection.spec …

…#4998

projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts

@@ -12,13 +12,15 @@ import {
     SelectionWithScrollsComponent,
     SingleRowSelectionComponent,
     RowSelectionWithoutPrimaryKeyComponent,
-    SelectionWithTransactionsComponent
+    SelectionWithTransactionsComponent,
+    GridCustomSelectorsComponent
 } from '../../test-utils/grid-samples.spec';
 import { IgxHierarchicalGridModule } from '../hierarchical-grid/hierarchical-grid.module';
 import { HelperUtils } from '../../test-utils/helper-utils.spec';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { helpers } from 'handlebars';
+import { IgxHierarchicalGridCustomSelectorsComponent } from '../../test-utils/hierarhical-grid-components.spec';
 
 const DEBOUNCETIME = 30;
 
@@ -1807,7 +1809,68 @@ describe('IgxGrid - Row Selection', () => {
             HelperUtils.verifyRowSelected(addedRow);
         });
     });
-});
 
+    describe('Custom selectors', () => {
+        let fix;
+        let grid;
+
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(GridCustomSelectorsComponent);
+            fix.detectChanges();
+            grid = fix.componentInstance.grid;
+            grid.rowSelection = GridSelectionMode.multiple;
+            fix.detectChanges();
+        }));
+
+        it('Should be able to select a row by clicking on the custom row selector', () => {
+            // TODO
+        });
+
+        it('Should be able to deselect a selected row by clicking on the custom row selector', () => {
+            // TODO
+        });
+
+        it('Should select/deselect all rows by clicking on the custom header selector', () => {
+            // TODO
+        });
+
+        it('Should have the correct properties in the custom row selector template', () => {
+            // TODO
+        });
+
+        it('Should have the correct properties in the custom row selector header template', () => {
+            // TODO
+        });
+
+        describe('Custom selectors - Hierarchical Grid', () => {
+            let fixture;
+            let hGrid;
 
+            beforeEach(fakeAsync(() => {
+                fixture = TestBed.createComponent(IgxHierarchicalGridCustomSelectorsComponent);
+                fixture.detectChanges();
+                hGrid = fixture.componentInstance.hGrid;
+                hGrid.rowSelection = GridSelectionMode.multiple;
+                fixture.detectChanges();
+            }));
 
+            /** Tests should check root and child grids */
+
+            it('Row context `select` method selects a single row', () => {
+                // TODO
+            });
+
+            it('Row context `deselect` method deselects an already selected row', () => {
+                // TODO
+            });
+
+            it('Header context `selectAll` method selects all rows', () => {
+                // TODO
+            });
+
+            it('Header context `deselectAll` method deselects all rows', () => {
+                // TODO
+            });
+        });
+    });
+});

projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html

@@ -10,7 +10,7 @@
     <div class="igx-grid__cbx-selection">
          <ng-template *ngTemplateOutlet="
             this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;
-            context: { $implicit: {index: this.index + this.grid.page * this.grid.perPage, rowID: rowID, selected: isSelected }}">
+            context: { $implicit: { index: this.index + this.grid.page * this.grid.perPage, rowID: rowID, selected: selected }}">
         </ng-template>
     </div>
 </ng-container>

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -13,6 +13,7 @@ import { IgxFilteringOperand } from '../data-operations/filtering-condition';
 import { ExpressionUI } from '../grids/filtering/grid-filtering.service';
 import { IFilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
 import { FilteringStrategy } from '../data-operations/filtering-strategy';
+import { IgxGridComponent } from '../grids/grid';
 
 @Component({
     template: `<div style="width: 800px; height: 600px;">
@@ -1168,3 +1169,26 @@ export class DynamicColumnsComponent extends GridWithSizeComponent {
     width = '800px';
     height = '800px';
 }
+
+@Component({
+    template: `
+        <igx-grid #gridCustomSelectors [data]="data" [autoGenerate]="true">
+            <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="boolean"></igx-column>
+            <igx-column width="100px" [field]="'Address'" dataType="date"></igx-column>
+            <ng-template igxRowSelector let-rowContext>
+                <igx-checkbox [checked]="rowContext.selected"></igx-checkbox>
+            </ng-template>
+            <ng-template igxHeadSelector let-headContext>
+                <igx-checkbox [checked]="headContext.totalCount === headContext.selectedCount"></igx-checkbox>
+            </ng-template>
+        </igx-grid>`
+})
+export class GridCustomSelectorsComponent extends BasicGridComponent {
+    data = SampleTestData.contactInfoDataFull();
+
+    @ViewChild('gridCustomSelectors', { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+}