Skip to content

Commit

Permalink
test(custom-selectors): update initial specs #4998
Browse files Browse the repository at this point in the history
  • Loading branch information
jackofdiamond5 committed Aug 23, 2019
1 parent 763c83d commit 85062bc
Show file tree
Hide file tree
Showing 6 changed files with 163 additions and 86 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,10 @@ describe('IgxGrid - Row Selection #grid', () => {
SingleRowSelectionComponent,
SelectionWithTransactionsComponent,
GridCustomSelectorsComponent,
IgxHierarchicalGridCustomSelectorsComponent
],
imports: [
NoopAnimationsModule,
IgxGridModule,
IgxHierarchicalGridModule,
IgxSelectorsModule
]
})
Expand Down Expand Up @@ -1891,21 +1889,8 @@ describe('IgxGrid - Row Selection #grid', () => {
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
});
Expand All @@ -1914,35 +1899,8 @@ describe('IgxGrid - Row Selection #grid', () => {
// 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
});
it('Should have correct indices on all pages', () => {
// TODO
});
});
});
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import { configureTestSuite } from '../../test-utils/configure-suite';
import { async, TestBed, fakeAsync } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IgxHierarchicalGridModule } from './index';
import { IgxHierarchicalGridModule, GridSelectionMode } from './index';
import { IgxHierarchicalGridComponent } from './hierarchical-grid.component';
import { wait } from '../../test-utils/ui-interactions.spec';
import { IgxHierarchicalRowComponent } from './hierarchical-row.component';
import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
import { IgxIconModule } from '../../icon';
import { IgxHierarchicalGridTestBaseComponent,
IgxHierarchicalGridRowSelectionComponent } from '../../test-utils/hierarhical-grid-components.spec';
import {
IgxHierarchicalGridTestBaseComponent,
IgxHierarchicalGridRowSelectionComponent,
IgxHierarchicalGridCustomSelectorsComponent
} from '../../test-utils/hierarhical-grid-components.spec';
import { HelperUtils } from '../../test-utils/helper-utils.spec';
import { IgxSelectorsModule } from '../igx-selection.module';

describe('IgxHierarchicalGrid selection #hGrid', () => {
configureTestSuite();
Expand All @@ -22,10 +26,14 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
TestBed.configureTestingModule({
declarations: [
IgxHierarchicalGridTestBaseComponent,
IgxHierarchicalGridRowSelectionComponent
IgxHierarchicalGridRowSelectionComponent,
IgxHierarchicalGridCustomSelectorsComponent
],
imports: [
NoopAnimationsModule, IgxHierarchicalGridModule, IgxIconModule]
NoopAnimationsModule,
IgxHierarchicalGridModule,
IgxIconModule,
IgxSelectorsModule]
}).compileComponents();
}));

Expand All @@ -43,7 +51,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
hierarchicalGrid.reflow();
fix.detectChanges();

let firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;
let firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;
firstRow.nativeElement.children[0].click();
fix.detectChanges();
expect(firstRow.expanded).toBeTruthy();
Expand All @@ -57,9 +65,9 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {

expect(fCell.selected).toBeTruthy();

const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
const firstChildRow = childGrid.dataRowList.toArray()[0];
const fChildCell = firstChildRow.cells.toArray()[0];
const fChildCell = firstChildRow.cells.toArray()[0];

// select child cell
fChildCell.nativeElement.focus();
Expand Down Expand Up @@ -107,7 +115,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
hierarchicalGrid.filter('ID', '1', IgxStringFilteringOperand.instance().condition('doesNotContain'), true);
fix.detectChanges();

HelperUtils.verifyRowSelected( hierarchicalGrid.getRowByIndex(0));
HelperUtils.verifyRowSelected(hierarchicalGrid.getRowByIndex(0));
HelperUtils.verifyHeaderRowCheckboxState(fix, false, true);
});

Expand Down Expand Up @@ -143,4 +151,49 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
expect(hierarchicalGrid.selectedRows()).toEqual(['1']);
});
});

describe('Custom row selectors', () => {
let hGrid;
let firstRowIsland;
let secondRowIsland;

beforeEach(fakeAsync(() => {
fix = TestBed.createComponent(IgxHierarchicalGridCustomSelectorsComponent);
fix.detectChanges();
hGrid = fix.componentInstance.hGrid;
hGrid.rowSelection = GridSelectionMode.multiple;
firstRowIsland = hGrid.firstRowIsland;
secondRowIsland = hGrid.secondRowIsland;
}));

/** 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
});

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

it('Should have correct indices on all pages', () => {
// TODO
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import {
IgxTreeGridCellSelectionComponent,
IgxTreeGridSelectionRowEditingComponent,
IgxTreeGridSelectionWithTransactionComponent,
IgxTreeGridRowEditingTransactionComponent
IgxTreeGridRowEditingTransactionComponent,
IgxTreeGridCustomRowSelectorsComponent
} from '../../test-utils/tree-grid-components.spec';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import {
Expand All @@ -20,6 +21,7 @@ import {
import { IgxStringFilteringOperand, IgxNumberFilteringOperand } from '../../data-operations/filtering-condition';
import { configureTestSuite } from '../../test-utils/configure-suite';
import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
import { IgxSelectorsModule } from '../igx-selection.module';

describe('IgxTreeGrid - Selection #tGrid', () => {
configureTestSuite();
Expand All @@ -33,9 +35,10 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
IgxTreeGridCellSelectionComponent,
IgxTreeGridSelectionRowEditingComponent,
IgxTreeGridSelectionWithTransactionComponent,
IgxTreeGridRowEditingTransactionComponent
IgxTreeGridRowEditingTransactionComponent,
IgxTreeGridCustomRowSelectorsComponent
],
imports: [IgxTreeGridModule, NoopAnimationsModule]
imports: [IgxTreeGridModule, NoopAnimationsModule, IgxSelectorsModule]
})
.compileComponents();
}));
Expand Down Expand Up @@ -928,8 +931,29 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
expect(banner[0]).toBeTruthy();
}));
});

describe('Custom row selectors', () => {
beforeEach(fakeAsync(() => {
fix = TestBed.createComponent(IgxTreeGridCustomRowSelectorsComponent);
fix.detectChanges();
treeGrid = fix.componentInstance.treeGrid;
}));

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

it('Should have correct indices on all pages', () => {
// TODO
});
});
});


function getVisibleSelectedRows(fix) {
return TreeGridFunctions.getAllRows(fix).filter(
(row) => row.nativeElement.classList.contains(TREE_ROW_SELECTION_CSS_CLASS));
Expand Down
39 changes: 19 additions & 20 deletions projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, TemplateRef, ViewChild, Input, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { Component, TemplateRef, ViewChild, Input, AfterViewInit, ChangeDetectorRef, OnInit } from '@angular/core';
import { IgxGridCellComponent } from '../grids/cell.component';
import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxSummaryResult } from '../grids/summaries/grid-summary';
import { IGridCellEventArgs, IGridEditEventArgs, IgxGridTransaction } from '../grids/grid-base.component';
Expand Down Expand Up @@ -1172,23 +1172,22 @@ export class DynamicColumnsComponent extends GridWithSizeComponent {

@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;
<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 implements OnInit {
public ngOnInit(): void {
this.data = SampleTestData.contactInfoDataFull();
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,9 @@ export class IgxHierarchicalGridRowSelectionComponent {
}
}


@Component({
template: `
<igx-hierarchical-grid [data]="data" [height]="'600px'" [width]="'700px'" #hGgridCustomSelectors [primaryKey]="'ID'"
<igx-hierarchical-grid [data]="data" [height]="'600px'" [width]="'700px'" #hGridCustomSelectors [primaryKey]="'ID'"
[rowSelection]="'multiple'">
<igx-column field="ID" ></igx-column>
<igx-column field="ChildLevels"></igx-column>
Expand All @@ -108,22 +107,33 @@ export class IgxHierarchicalGridRowSelectionComponent {
<igx-column field="ProductName"></igx-column>
</igx-row-island>
<ng-template igxHeadSelector let-headContext>
<igx-checkbox (change)="handleHeadSelectorClick($event, headContext)" [checked]="headContext.selected"></igx-checkbox>
<igx-checkbox
(click)="handleHeadSelectorClick($event, headContext)"
[checked]="headContext.selectedCount === headContext.totalCount"
[indeterminate]="headContext.selectedCount !== headContext.totalCount && headContext.selectedCount !== 0">
</igx-checkbox>
</ng-template>
<ng-template igxRowSelector let-rowContext>
<igx-checkbox (change)="handleRowSelectorClick($event, rowContext)" [checked]="rowContext.selected"></igx-checkbox>
<igx-checkbox
(click)="handleRowSelectorClick($event, rowContext)"
[checked]="rowContext.selected">
</igx-checkbox>
</ng-template>
</igx-row-island>
<ng-template igxHeadSelector let-headContext>
<igx-checkbox (change)="handleHeadSelectorClick($event, headContext)" [checked]="headContext.selected"></igx-checkbox>
<igx-checkbox
(click)="handleHeadSelectorClick($event, headContext)"
[checked]="headContext.selectedCount === headContext.totalCount"
[indeterminate]="headContext.selectedCount !== headContext.totalCount && headContext.selectedCount !== 0">
</igx-checkbox>
</ng-template>
<ng-template igxRowSelector let-rowContext>
<igx-checkbox (change)="handleRowSelectorClick($event, rowContext)" [checked]="rowContext.selected"></igx-checkbox>
<igx-checkbox (click)="handleRowSelectorClick($event, rowContext)" [checked]="rowContext.selected"></igx-checkbox>
</ng-template>
</igx-hierarchical-grid>`
})
export class IgxHierarchicalGridCustomSelectorsComponent {
public data;
export class IgxHierarchicalGridCustomSelectorsComponent implements OnInit {
public data = [];

@ViewChild('hGgridCustomSelectors', { read: IgxHierarchicalGridComponent, static: true })
public hGrid: IgxHierarchicalGridComponent;
Expand All @@ -134,16 +144,20 @@ export class IgxHierarchicalGridCustomSelectorsComponent {
@ViewChild('rowIsland2', { read: IgxRowIslandComponent, static: true })
public secondRowIsland: IgxRowIslandComponent;

constructor() {
// 3 level hierarchy
public ngOnInit(): void {
// 3 level hierarchy
this.data = SampleTestData.generateHGridData(40, 3);
}

public handleHeadSelectorClick(event, headContext) {
event.stopPropagation();
event.preventDefault();
headContext.totalCount !== headContext.selectedCount ? headContext.selectAll() : headContext.deselectAll();
}

public handleRowSelectorClick(event, rowContext) {
event.stopPropagation();
event.preventDefault();
rowContext.selected ? rowContext.deselect() : rowContext.select();
}
}
Loading

0 comments on commit 85062bc

Please sign in to comment.