Skip to content

Commit 8e7929b

Browse files
zdrawkuzdrawku
authored
Merge pull request #6900 from IgniteUI/nrobakova/column-selection-tests
add column selection tests
2 parents a7f263e + 9efa049 commit 8e7929b

File tree

7 files changed

+1135
-32
lines changed

7 files changed

+1135
-32
lines changed

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

Lines changed: 929 additions & 0 deletions
Large diffs are not rendered by default.

‎projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3131,7 +3131,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
31313131
it('Should enable/disable the apply button correctly.', fakeAsync(() => {
31323132
GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
31333133

3134-
const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
31353134
// Verify there are filtered-in results and that apply button is enabled.
31363135
const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
31373136
let applyButton = GridFunctions.getApplyButtonExcelStyleFiltering(fix) as HTMLElement;
@@ -3185,6 +3184,29 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
31853184
fix.detectChanges();
31863185
}));
31873186

3187+
it('display dansity is properly applied on the column selection container', fakeAsync(() => {
3188+
GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
3189+
tick(100);
3190+
fix.detectChanges();
3191+
3192+
let columnSelectionContainer = GridFunctions.getExcelFilteringColumnSelectionContainer(fix);
3193+
let headerIcons = GridFunctions.getExcelFilteringHeaderIcons(fix);
3194+
3195+
expect(columnSelectionContainer).not.toBeNull();
3196+
expect(headerIcons.length).toEqual(0);
3197+
3198+
grid.displayDensity = DisplayDensity.compact;
3199+
fix.detectChanges();
3200+
3201+
columnSelectionContainer = GridFunctions.getExcelFilteringColumnSelectionContainer(fix);
3202+
headerIcons = GridFunctions.getExcelFilteringHeaderIcons(fix);
3203+
const columnSelectionIcon = headerIcons.find((bi: any) => bi.innerText === 'done');
3204+
3205+
expect(columnSelectionContainer.tagName).toEqual('BUTTON');
3206+
expect(columnSelectionIcon).not.toBeNull();
3207+
3208+
}));
3209+
31883210
it('display density is properly applied on the excel style custom filtering dialog', fakeAsync(() => {
31893211
const column = grid.columns.find((c) => c.field === 'ProductName');
31903212
column.sortable = true;
@@ -4167,6 +4189,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
41674189
expect(excelMenu.querySelector('.esf-custom-pinning')).not.toBeNull();
41684190
expect(GridFunctions.getExcelFilteringPinContainer(fix, excelMenu)).toBeNull();
41694191
expect(GridFunctions.getExcelFilteringUnpinContainer(fix, excelMenu)).toBeNull();
4192+
4193+
// Verify column selection custom template application.
4194+
expect(excelMenu.querySelector('.esf-custom-column-selection')).not.toBeNull();
4195+
expect(GridFunctions.getExcelFilteringColumnSelectionContainer(fix, excelMenu)).toBeNull();
41704196
}
41714197
}));
41724198
});
@@ -4284,6 +4310,37 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
42844310
fix.detectChanges();
42854311
expect(grid.columns[1].hidden).toBeTruthy();
42864312
}));
4313+
4314+
it('Column selection button should be visible/hidden when column is selectable/not selectable', () => {
4315+
let columnSelectionContainer = GridFunctions.getExcelFilteringColumnSelectionContainer(fix);
4316+
expect(columnSelectionContainer).toBeNull();
4317+
4318+
const esf = fix.componentInstance.esf;
4319+
esf.column = grid.getColumnByName('Downloads');
4320+
fix.detectChanges();
4321+
4322+
columnSelectionContainer = GridFunctions.getExcelFilteringColumnSelectionContainer(fix);
4323+
expect(columnSelectionContainer).not.toBeNull();
4324+
});
4325+
4326+
it('should select/deselect column when interact with the column selection item through esf menu', () => {
4327+
const column = grid.getColumnByName('Downloads');
4328+
fix.componentInstance.esf.column = column;
4329+
fix.detectChanges();
4330+
4331+
GridFunctions.clickColumnSelectionInExcelStyleFiltering(fix);
4332+
fix.detectChanges();
4333+
4334+
spyOn(grid.onColumnSelectionChange, 'emit');
4335+
GridSelectionFunctions.verifyColumnAndCellsSelected(column, true);
4336+
4337+
GridFunctions.clickColumnSelectionInExcelStyleFiltering(fix);
4338+
fix.detectChanges();
4339+
4340+
spyOn(grid.onColumnSelectionChange, 'emit');
4341+
GridSelectionFunctions.verifyColumnAndCellsSelected(column, false);
4342+
});
4343+
42874344
});
42884345
});
42894346

‎projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -373,7 +373,7 @@ describe('IgxGrid Master Detail #grid', () => {
373373
const targetCellElement = grid.getCellByColumn(4, 'ContactName');
374374

375375
GridFunctions.simulateCellKeydown(targetCellElement, 'ArrowDown');
376-
await wait();
376+
await wait(DEBOUNCETIME);
377377
fix.detectChanges();
378378

379379
const detailRow = GridFunctions.getMasterRowDetail(row);
@@ -468,7 +468,7 @@ describe('IgxGrid Master Detail #grid', () => {
468468
expect(document.activeElement).toBe(detailRow);
469469
});
470470

471-
it(`Should focus detail row after hitting Shift+Tab on first cell in next data row and continue to the prev row.`, async() => {
471+
it(`Should focus detail row after hitting Shift+Tab on first cell in next data row and continue to the prev row.`, async() => {
472472
const prevRow = grid.getRowByIndex(0) as IgxGridRowComponent;
473473
const targetCellElement = grid.getCellByColumn(2, 'ContactName');
474474

@@ -479,7 +479,7 @@ describe('IgxGrid Master Detail #grid', () => {
479479
expect(document.activeElement).toBe(detailRow);
480480

481481
GridFunctions.simulateDetailKeydown(grid, prevRow, 'Tab', false, true);
482-
await wait();
482+
await wait(DEBOUNCETIME);
483483
fix.detectChanges();
484484

485485
expect(document.activeElement).toBe(grid.getCellByColumn(0, 'CompanyName').nativeElement);

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

Lines changed: 85 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { IgxGridHeaderGroupComponent } from '../grids/headers/grid-header-group.
1212
import { SortingDirection } from '../data-operations/sorting-expression.interface';
1313
import { IgxCheckboxComponent } from '../checkbox/checkbox.component';
1414
import { UIInteractions, wait } from './ui-interactions.spec';
15-
import { IgxGridGroupByRowComponent, IgxGridCellComponent, IgxGridRowComponent } from '../grids/grid';
15+
import { IgxGridGroupByRowComponent, IgxGridCellComponent, IgxGridRowComponent, IgxColumnComponent } from '../grids/grid';
1616
import { ControlsFunction } from './controls-functions.spec';
1717
import { IgxGridExpandableCellComponent } from '../grids/grid/expandable-cell.component';
1818

@@ -59,6 +59,9 @@ const FOCUSED_CHECKBOX_CLASS = 'igx-checkbox--focused';
5959
const GRID_BODY_CLASS = '.igx-grid__tbody';
6060
const DISPLAY_CONTAINER = 'igx-display-container';
6161
const SORT_ICON_CLASS = '.sort-icon';
62+
const SELECTED_COLUMN_CLASS = 'igx-grid__th--selected';
63+
const HOVERED_COLUMN_CLASS = 'igx-grid__th--selectable';
64+
const SELECTED_COLUMN_CELL_CLASS = 'igx-grid__td--column-selected';
6265

6366
export class GridFunctions {
6467

@@ -839,7 +842,7 @@ export class GridFunctions {
839842
hideIcon.click();
840843
}
841844

842-
public static getIconFromButton(iconName: string, component: any, fix: ComponentFixture<any>) {
845+
public static getIconFromButton(iconName: string, component: any) {
843846
const icons = component.querySelectorAll('igx-icon');
844847
return Array.from(icons).find((sortIcon: any) => sortIcon.innerText === iconName);
845848
}
@@ -848,35 +851,42 @@ export class GridFunctions {
848851
* Click the sort ascending button in the ESF.
849852
*/
850853
public static clickSortAscInExcelStyleFiltering(fix: ComponentFixture<any>) {
851-
const sortAscIcon: any = this.getIconFromButton('arrow_upwards', GridFunctions.getExcelFilteringSortComponent(fix), fix);
854+
const sortAscIcon: any = this.getIconFromButton('arrow_upwards', GridFunctions.getExcelFilteringSortComponent(fix));
852855
sortAscIcon.click();
853856
}
854857

858+
/**
859+
* Click the column selection button in the ESF.
860+
*/
861+
public static clickColumnSelectionInExcelStyleFiltering(fix: ComponentFixture<any>) {
862+
const columnSelectIcon: any = this.getIconFromButton('done', GridFunctions.getExcelFilteringColumnSelectionContainer(fix));
863+
columnSelectIcon.click();
864+
}
865+
855866
/**
856867
* Click the sort descending button in the ESF.
857868
*/
858869
public static clickSortDescInExcelStyleFiltering(fix: ComponentFixture<any>) {
859-
const sortDescIcon: any = this.getIconFromButton('arrow_downwards', GridFunctions.getExcelFilteringSortComponent(fix), fix);
870+
const sortDescIcon: any = this.getIconFromButton('arrow_downwards', GridFunctions.getExcelFilteringSortComponent(fix));
860871
sortDescIcon.click();
861872
}
862873

863874
/**
864875
* Click the move left button in the ESF.
865876
*/
866877
public static clickMoveLeftInExcelStyleFiltering(fix: ComponentFixture<any>) {
867-
const moveLeftIcon: any = this.getIconFromButton('arrow_back', GridFunctions.getExcelFilteringMoveComponent(fix), fix);
878+
const moveLeftIcon: any = this.getIconFromButton('arrow_back', GridFunctions.getExcelFilteringMoveComponent(fix));
868879
moveLeftIcon.click();
869880
}
870881

871882
/**
872883
* Click the move right button in the ESF.
873-
*/
884+
*/
874885
public static clickMoveRightInExcelStyleFiltering(fix: ComponentFixture<any>) {
875-
const moveRightIcon: any = this.getIconFromButton('arrow_forwards', GridFunctions.getExcelFilteringMoveComponent(fix), fix);
886+
const moveRightIcon: any = this.getIconFromButton('arrow_forwards', GridFunctions.getExcelFilteringMoveComponent(fix));
876887
moveRightIcon.click();
877888
}
878889

879-
880890
public static getExcelFilteringInput(fix: ComponentFixture<any>, expressionIndex: number = 0): HTMLInputElement {
881891
const expr = GridFunctions.getExcelCustomFilteringDefaultExpressions(fix)[expressionIndex];
882892
return expr.querySelectorAll('.igx-input-group__input').item(1) as HTMLInputElement;
@@ -913,6 +923,13 @@ export class GridFunctions {
913923
clearIcon.click();
914924
}
915925

926+
/**
927+
* returns the filter row debug element.
928+
*/
929+
public static getFilterRow(fix: ComponentFixture<any>): DebugElement {
930+
return fix.debugElement.query(By.css(FILTER_UI_ROW));
931+
}
932+
916933
/**
917934
* Open filtering row for a column.
918935
*/
@@ -1029,6 +1046,18 @@ export class GridFunctions {
10291046
});
10301047
}
10311048

1049+
public static clickColumnHeaderUI(columnField: string, fix: ComponentFixture<any>, ctrlKey = false, shiftKey = false) {
1050+
const header = this.getColumnHeader(columnField, fix);
1051+
header.triggerEventHandler('click', new MouseEvent('click', { shiftKey: shiftKey, ctrlKey: ctrlKey}));
1052+
fix.detectChanges();
1053+
}
1054+
1055+
public static clickColumnGroupHeaderUI(columnField: string, fix: ComponentFixture<any>, ctrlKey = false, shiftKey = false) {
1056+
const header = this.getColumnGroupHeaderCell(columnField, fix);
1057+
header.triggerEventHandler('click', new MouseEvent('click', { shiftKey: shiftKey, ctrlKey: ctrlKey}));
1058+
fix.detectChanges();
1059+
}
1060+
10321061
public static getColumnHeaderByIndex(fix: ComponentFixture<any>, index: number) {
10331062
const nativeHeaders = fix.debugElement.queryAll(By.directive(IgxGridHeaderComponent))
10341063
.map((header) => header.nativeElement);
@@ -1091,6 +1120,12 @@ export class GridFunctions {
10911120
return excelMenu.querySelector('igx-excel-style-column-moving');
10921121
}
10931122

1123+
public static getExcelFilteringColumnSelectionContainer(fix: ComponentFixture<any>, menu = null): HTMLElement {
1124+
const excelMenu = menu ? menu : GridFunctions.getExcelStyleFilteringComponent(fix);
1125+
return excelMenu.querySelector('.igx-excel-filter__actions-select') ||
1126+
excelMenu.querySelector('.igx-excel-filter__actions-selected');
1127+
}
1128+
10941129
public static getExcelFilteringLoadingIndicator(fix: ComponentFixture<any>) {
10951130
const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
10961131
const loadingIndicator = searchComponent.querySelector('.igx-excel-filter__loading');
@@ -1977,7 +2012,6 @@ export class GridSelectionFunctions {
19772012
expect(selectedCellFromGrid.rowIndex).toEqual(cell.rowIndex);
19782013
}
19792014

1980-
19812015
public static verifyRowSelected(row, selected = true, hasCheckbox = true) {
19822016
expect(row.selected).toBe(selected);
19832017
expect(row.nativeElement.classList.contains(ROW_SELECTION_CSS_CLASS)).toBe(selected);
@@ -2081,4 +2115,46 @@ export class GridSelectionFunctions {
20812115
public static expandRowIsland(rowNumber = 1) {
20822116
(<any>document.getElementsByClassName(ICON_CSS_CLASS)[rowNumber]).click();
20832117
}
2118+
2119+
public static verifyColumnSelected(column: IgxColumnComponent, selected = true) {
2120+
expect(column.selected).toEqual(selected);
2121+
if (!column.hidden) {
2122+
expect(column.headerCell.elementRef.nativeElement.classList.contains(SELECTED_COLUMN_CLASS)).toEqual(selected);
2123+
}
2124+
}
2125+
2126+
public static verifyColumnsSelected(columns: IgxColumnComponent[], selected = true) {
2127+
columns.forEach(c => this.verifyColumnSelected(c, selected ));
2128+
}
2129+
2130+
public static verifyColumnGroupSelected(fixture: ComponentFixture<any>, column: IgxColumnGroupComponent, selected = true) {
2131+
expect(column.selected).toEqual(selected);
2132+
const header = GridFunctions.getColumnGroupHeaderCell(column.header, fixture);
2133+
expect(header.nativeElement.classList.contains(SELECTED_COLUMN_CLASS)).toEqual(selected);
2134+
}
2135+
2136+
public static verifyColumnHeaderHasSelectableClass(header: DebugElement, hovered = true) {
2137+
expect(header.nativeElement.classList.contains(HOVERED_COLUMN_CLASS)).toEqual(hovered);
2138+
}
2139+
2140+
public static verifyColumnsHeadersHasSelectableClass(headers: DebugElement[], hovered = true) {
2141+
headers.forEach(header => this.verifyColumnHeaderHasSelectableClass(header, hovered));
2142+
}
2143+
2144+
public static verifyColumnAndCellsSelected(column: IgxColumnComponent, selected = true) {
2145+
this.verifyColumnSelected(column, selected);
2146+
column.cells.forEach(cell => {
2147+
expect(cell.nativeElement.classList.contains(SELECTED_COLUMN_CELL_CLASS)).toEqual(selected);
2148+
});
2149+
}
2150+
2151+
public static clickOnColumnToSelect(column: IgxColumnComponent, ctrlKey = false, shiftKey= false) {
2152+
const event = {
2153+
shiftKey: shiftKey,
2154+
ctrlKey: ctrlKey,
2155+
stopPropagation: () => { }
2156+
};
2157+
2158+
column.headerCell.onClick(event);
2159+
}
20842160
}

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

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -979,9 +979,10 @@ export class IgxGridFilteringComponent extends BasicGridComponent {
979979
<igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"
980980
[filterable]="false" [resizable]="resizable"></igx-column>
981981
<igx-column width="100px" [field]="'ProductName'" [sortable]="true"
982-
[filterable]="filterable" [resizable]="resizable" dataType="string"></igx-column>
982+
[filterable]="filterable" [resizable]="resizable" dataType="string" [selectable]="false"></igx-column>
983983
<igx-column width="100px" [field]="'Downloads'" [filterable]="filterable" [resizable]="resizable" dataType="number"></igx-column>
984-
<igx-column width="100px" [field]="'Released'" [filterable]="filterable" [resizable]="resizable" dataType="boolean"></igx-column>
984+
<igx-column width="100px" [field]="'Released'" [filterable]="filterable"
985+
[selectable]="false" [resizable]="resizable" dataType="boolean"></igx-column>
985986
<igx-column width="100px" [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
986987
[filterable]="filterable" [resizable]="resizable" dataType="date">
987988
</igx-column>
@@ -1095,6 +1096,7 @@ export class IgxGridFilteringESFLoadOnDemandComponent extends BasicGridComponent
10951096
<ng-template igxExcelStyleHiding><div class="esf-custom-hiding">Hiding Template</div></ng-template>
10961097
<ng-template igxExcelStyleMoving><div class="esf-custom-moving">Moving Template</div></ng-template>
10971098
<ng-template igxExcelStylePinning><div class="esf-custom-pinning">Pinning Template</div></ng-template>
1099+
<ng-template igxExcelStyleSelecting><div class="esf-custom-column-selection">Column Selection Template</div></ng-template>
10981100
</igx-grid>`
10991101
})
11001102
export class IgxGridFilteringESFTemplatesComponent extends BasicGridComponent {
@@ -1734,6 +1736,38 @@ export class CollapsibleColumnGroupTestComponent {
17341736
data = SampleTestData.contactInfoDataFull();
17351737
}
17361738

1739+
1740+
@Component({
1741+
template: `
1742+
<igx-grid #grid [data]="data" height="500px" width="1000px" columnWidth="100px" [columnHiding]="true">
1743+
<igx-column-group header="General Information" >
1744+
<igx-column field="CompanyName" ></igx-column>
1745+
<igx-column-group header="Person Details">
1746+
<igx-column field="ContactName"></igx-column>
1747+
<igx-column field="ContactTitle"></igx-column>
1748+
</igx-column-group>
1749+
</igx-column-group>
1750+
<igx-column field="ID"></igx-column>
1751+
<igx-column-group header="Country Information">
1752+
1753+
<igx-column-group header="Region Information">
1754+
<igx-column field="Country" [selectable]="false"></igx-column>
1755+
<igx-column field="Region" ></igx-column>
1756+
<igx-column field="PostalCode" ></igx-column>
1757+
</igx-column-group>
1758+
<igx-column-group header="City Information" >
1759+
<igx-column field="City" [selectable]="false" ></igx-column>
1760+
<igx-column field="Address" [selectable]="false"></igx-column>
1761+
</igx-column-group>
1762+
</igx-column-group>
1763+
</igx-grid>
1764+
`
1765+
})
1766+
export class ColumnSelectionGroupTestComponent {
1767+
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
1768+
grid: IgxGridComponent;
1769+
data = SampleTestData.contactInfoDataFull();
1770+
}
17371771
@Component({
17381772
template: `
17391773
<ng-template #indicatorTemplate let-column="column">

0 commit comments

Comments
 (0)