From 55ae1efc3b8311a8c54e05cbaf67e40d6959bfc4 Mon Sep 17 00:00:00 2001 From: Boris Date: Thu, 22 Aug 2019 09:09:17 +0300 Subject: [PATCH] test(row-selection): move initial test spec to grid-row-selection.spec #4998 --- .../grid/grid-row-custom-selectors.spec.ts | 253 ------------------ .../lib/grids/grid/grid-row-selection.spec.ts | 67 ++++- .../lib/grids/grid/grid-row.component.html | 2 +- .../src/lib/test-utils/grid-samples.spec.ts | 24 ++ .../hierarhical-grid-components.spec.ts | 58 ++++ 5 files changed, 148 insertions(+), 256 deletions(-) delete mode 100644 projects/igniteui-angular/src/lib/grids/grid/grid-row-custom-selectors.spec.ts diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-custom-selectors.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-custom-selectors.spec.ts deleted file mode 100644 index 1230327fea4..00000000000 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-custom-selectors.spec.ts +++ /dev/null @@ -1,253 +0,0 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; -import { async, TestBed } from '@angular/core/testing'; -import { Calendar } from '../../calendar'; -import { IgxGridComponent } from './grid.component'; -import { IgxGridModule, IgxColumnComponent } from './index'; -import { SampleTestData } from '../../test-utils/sample-test-data.spec'; -import { IgxHierarchicalGridMultiLayoutComponent } from '../hierarchical-grid/hierarchical-grid.spec'; -import { IgxHierarchicalGridModule } from '../hierarchical-grid/hierarchical-grid.module'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { configureTestSuite } from '../../test-utils/configure-suite'; - -describe('IgxGrid - Custom Row Selectors', () => { - configureTestSuite(); - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ - GridWithPagingAndSelectionComponent, - GridWithSelectionFilteringComponent, - GridSummaryComponent, - GridCancelableComponent, - GridFeaturesComponent, - HierarchicalGridRowSelectableIslandComponent - ], - imports: [ - NoopAnimationsModule, - IgxGridModule, - IgxHierarchicalGridModule - ] - }) - .compileComponents(); - })); - - - // Events - it('Firing onRowSelectionChange event', () => { }); - it('Canceling onRowSelectionChange event', () => { }); - it('Firing onHeaderSelectionChange event???', () => { }); - it('Canceling onHeaderSelectionChange event???', () => { }); - - // Testing with different row selector templates - it('Row selector template and header selector template with different sizes', () => { }); - - // API - it('', () => { }); - - // Feature integration - it('Pinned columns', () => { }); - it('Multi-column headers', () => { }); - it('Multi-row layout', () => { }); - - // Aplication scenario test - it('Conditional row selectors', () => { }); - - it('', - () => { - // fakeAsync(() => { - // async () => { - const fix = TestBed.createComponent(GridWithPagingAndSelectionComponent); - fix.detectChanges(); - const grid = fix.componentInstance.gridSelection2; - expect(true).toBeTruthy(); - expect(10).toEqual(10, '10'); - const checkboxElement1: HTMLElement = grid.getRowByIndex(5).nativeElement.querySelector('.igx-checkbox__input'); - - spyOn(grid, 'triggerRowSelectionChange').and.callThrough(); - spyOn(grid.onRowSelectionChange, 'emit').and.callThrough(); - expect(grid.triggerRowSelectionChange).toHaveBeenCalledTimes(0); - expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(0); - - }); - -}); - -@Component({ - template: ` - - - - - ` -}) -export class GridWithPagingAndSelectionComponent implements OnInit { - public data = []; - - @ViewChild('gridSelection2', { read: IgxGridComponent, static: true }) - public gridSelection2: IgxGridComponent; - - ngOnInit() { - const bigData = []; - for (let i = 0; i < 100; i++) { - for (let j = 0; j < 5; j++) { - bigData.push({ - ID: i.toString() + '_' + j.toString(), - Column1: i * j, - Column2: i * j * Math.pow(10, i), - Column3: i * j * Math.pow(100, i) - }); - } - } - this.data = bigData; - } - - public ChangePage(val) { - switch (val) { - case -1: - this.gridSelection2.previousPage(); - break; - case 1: - this.gridSelection2.nextPage(); - break; - default: - this.gridSelection2.paginate(val); - break; - } - } -} - -@Component({ - template: ` - - - - - - - - ` -}) -export class GridWithSelectionFilteringComponent { - - public timeGenerator: Calendar = new Calendar(); - public today: Date = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0, 0); - - @ViewChild('gridSelection4', { read: IgxGridComponent, static: true }) - public gridSelection4: IgxGridComponent; - - public data = SampleTestData.productInfoData(); - - @ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent; -} - - - -@Component({ - template: ` - - - - - - - - - - - - - ` -}) -export class GridSummaryComponent { - public data = SampleTestData.foodProductData(); - @ViewChild('grid1', { read: IgxGridComponent, static: true }) - public gridSummaries: IgxGridComponent; -} - -@Component({ - template: ` - - - - - - - - - - - - - ` -}) -export class GridCancelableComponent { - public data = SampleTestData.foodProductData(); - @ViewChild('gridCancelable', { read: IgxGridComponent, static: true }) - public gridCancelable: IgxGridComponent; - - public cancelClick(evt) { - if (evt.row && (evt.row.index + 1) % 2 === 0) { - evt.newSelection = evt.oldSelection || []; - } - } -} - -@Component({ - template: ` - - - ` -}) -export class GridFeaturesComponent { - - @ViewChild('grid1', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent; - public data = [ - { - Name: 'Alice', - Age: 25 - }, - { - Name: 'Bob', - Age: 23 - } - ]; - - public initColumns(column: IgxColumnComponent) { - column.filterable = true; - column.sortable = true; - column.editable = true; - column.resizable = true; - } -} - -@Component({ - template: ` - - - - - - - - - - - - - ` -}) -export class HierarchicalGridRowSelectableIslandComponent extends IgxHierarchicalGridMultiLayoutComponent { } 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 index e30848013fb..79d7a750a45 100644 --- 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 @@ -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 + }); + }); + }); +}); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html index 2f5ba02ea61..843ba8f276a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html @@ -10,7 +10,7 @@
+ context: { $implicit: { index: this.index + this.grid.page * this.grid.perPage, rowID: rowID, selected: selected }}">
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 index fbe2243a55c..738aa77b086 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/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: `
@@ -1168,3 +1169,26 @@ export class DynamicColumnsComponent extends GridWithSizeComponent { width = '800px'; height = '800px'; } + +@Component({ + template: ` + + + + + + + + + + + + + ` +}) +export class GridCustomSelectorsComponent extends BasicGridComponent { + data = SampleTestData.contactInfoDataFull(); + + @ViewChild('gridCustomSelectors', { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; +} diff --git a/projects/igniteui-angular/src/lib/test-utils/hierarhical-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/hierarhical-grid-components.spec.ts index 7f84f180e20..bcda463e9c0 100644 --- a/projects/igniteui-angular/src/lib/test-utils/hierarhical-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/hierarhical-grid-components.spec.ts @@ -89,3 +89,61 @@ export class IgxHierarchicalGridRowSelectionComponent { this.data = SampleTestData.generateHGridData(40, 3); } } + + +@Component({ + template: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + ` +}) +export class IgxHierarchicalGridCustomSelectorsComponent { + public data; + + @ViewChild('hGgridCustomSelectors', { read: IgxHierarchicalGridComponent, static: true }) + public hGrid: IgxHierarchicalGridComponent; + + @ViewChild('rowIsland1', { read: IgxRowIslandComponent, static: true }) + public firstRowIsland: IgxRowIslandComponent; + + @ViewChild('rowIsland2', { read: IgxRowIslandComponent, static: true }) + public secondRowIsland: IgxRowIslandComponent; + + constructor() { + // 3 level hierarchy + this.data = SampleTestData.generateHGridData(40, 3); + } + + public handleHeadSelectorClick(event, headContext) { + headContext.totalCount !== headContext.selectedCount ? headContext.selectAll() : headContext.deselectAll(); + } + + public handleRowSelectorClick(event, rowContext) { + rowContext.selected ? rowContext.deselect() : rowContext.select(); + } +}