Skip to content

Commit eaaa95c

Browse files
ChronosSFChronosSF
committed
test(mdv): adding more integration tests #5880 
1 parent c06a86e commit eaaa95c

File tree

4 files changed

+82
-22
lines changed

4 files changed

+82
-22
lines changed

Diff for: ‎projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { GridType } from '../common/grid.interface';
1515
templateUrl: 'expandable-cell.component.html',
1616
providers: [HammerGesturesManager]
1717
})
18-
export class IgGridExpandableCellComponent extends IgxGridCellComponent implements OnInit {
18+
export class IgxGridExpandableCellComponent extends IgxGridCellComponent implements OnInit {
1919

2020
constructor(
2121
selectionService: IgxGridSelectionService,

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

+68-8
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,22 @@ import { By } from '@angular/platform-browser';
66
import { UIInteractions, wait} from '../../test-utils/ui-interactions.spec';
77
import { IgxGridModule } from './index';
88
import { IgxGridComponent } from './grid.component';
9-
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
109
import { IgxGridRowComponent } from './grid-row.component';
10+
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
1111
import { GridFunctions } from '../../test-utils/grid-functions.spec';
12+
import { IgxGridExpandableCellComponent } from './expandable-cell.component';
1213

1314
const COLLAPSED_ICON_NAME = 'chevron_right';
1415
const EXPANDED_ICON_NAME = 'expand_more';
1516
const DEBOUNCETIME = 30;
1617

17-
describe('IgxGrid Master Detail', () => {
18+
describe('IgxGrid Master Detail #grid', () => {
1819
let fix: ComponentFixture<any>;
1920
let grid: IgxGridComponent;
2021

22+
configureTestSuite();
23+
2124
describe('Basic', () => {
22-
configureTestSuite();
2325
beforeEach(async(() => {
2426
TestBed.configureTestingModule({
2527
declarations: [
@@ -132,7 +134,6 @@ describe('IgxGrid Master Detail', () => {
132134
});
133135

134136
describe('Keyboard Navigation ', () => {
135-
configureTestSuite();
136137
beforeEach(async(() => {
137138
TestBed.configureTestingModule({
138139
declarations: [
@@ -232,7 +233,6 @@ describe('IgxGrid Master Detail', () => {
232233
});
233234

234235
describe('Integration', () => {
235-
configureTestSuite();
236236
beforeEach(async(() => {
237237
TestBed.configureTestingModule({
238238
declarations: [
@@ -277,12 +277,70 @@ describe('IgxGrid Master Detail', () => {
277277
expect(checkbox.nativeElement.attributes['aria-checked'].value).toEqual('true');
278278
});
279279
});
280+
281+
describe('Hiding', () => {
282+
it('Should set the expand/collapse icon to the new first visible column when hiding the first column.', () => {
283+
fix = TestBed.createComponent(DefaultGridMasterDetailComponent);
284+
grid = fix.componentInstance.grid;
285+
fix.detectChanges();
286+
grid.columnList.first.hidden = true;
287+
fix.detectChanges();
288+
expect(grid.rowList.first.cells.first instanceof IgxGridExpandableCellComponent).toBeTruthy();
289+
});
290+
});
291+
292+
describe('Pinning', () => {
293+
it('Should keep/move the expand/collapse icon to the correct column when pinning the first column or another one.', () => {
294+
fix = TestBed.createComponent(DefaultGridMasterDetailComponent);
295+
grid = fix.componentInstance.grid;
296+
fix.detectChanges();
297+
grid.columnList.last.pin();
298+
fix.detectChanges();
299+
expect(grid.rowList.first.cells.first instanceof IgxGridExpandableCellComponent).toBeTruthy();
300+
grid.pinnedColumns[0].unpin();
301+
fix.detectChanges();
302+
expect(grid.rowList.first.cells.first instanceof IgxGridExpandableCellComponent).toBeTruthy();
303+
});
304+
305+
it('Should render detail view correctly when expanding a master row and there are pinned columns.', () => {
306+
fix = TestBed.createComponent(DefaultGridMasterDetailComponent);
307+
grid = fix.componentInstance.grid;
308+
fix.detectChanges();
309+
grid.columnList.last.pin();
310+
grid.expand(fix.componentInstance.data[0].ID);
311+
fix.detectChanges();
312+
const firstRowDetail = GridFunctions.getMasterRowDetail(grid.rowList.first);
313+
314+
expect(firstRowDetail.querySelector('.addressArea').innerText).toEqual('Obere Str. 57');
315+
expect(firstRowDetail.querySelector('.igx-grid__hierarchical-indent')).toBeDefined();
316+
});
317+
});
318+
319+
describe('Column Moving', () => {
320+
it('Should keep the expand/collapse icon in the first column, even when moving a column in first place.', () => {
321+
fix = TestBed.createComponent(DefaultGridMasterDetailComponent);
322+
grid = fix.componentInstance.grid;
323+
fix.detectChanges();
324+
grid.moveColumn(grid.columnList.last, grid.columnList.first);
325+
fix.detectChanges();
326+
expect(grid.rowList.first.cells.first instanceof IgxGridExpandableCellComponent).toBeTruthy();
327+
});
328+
it('Should keep the expand/collapse icon in the first column, even when moving a column out of first place.', () => {
329+
fix = TestBed.createComponent(DefaultGridMasterDetailComponent);
330+
grid = fix.componentInstance.grid;
331+
fix.detectChanges();
332+
grid.moveColumn(grid.columnList.first, grid.columnList.last);
333+
fix.detectChanges();
334+
expect(grid.rowList.first.cells.first instanceof IgxGridExpandableCellComponent).toBeTruthy();
335+
});
336+
});
280337
});
281338
});
282339

283340
@Component({
284341
template: `
285-
<igx-grid [data]="data" [width]="width" [height]="height" [primaryKey]="'ID'" [paging]="paging" [perPage]="perPage" [rowSelectable]="rowSelectable">
342+
<igx-grid [data]="data" [width]="width" [height]="height" [primaryKey]="'ID'"
343+
[paging]="paging" [perPage]="perPage" [rowSelectable]="rowSelectable">
286344
<igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field" [width]="c.width" [dataType]='c.dataType'
287345
[hidden]='c.hidden' [sortable]="c.sortable" [movable]='c.movable' [groupable]='c.groupable' [editable]="c.editable"
288346
[hasSummary]="c.hasSummary" [pinned]='c.pinned'>
@@ -314,13 +372,15 @@ export class DefaultGridMasterDetailComponent {
314372
public perPage = 15;
315373
public rowSelectable = false;
316374

317-
public onCheckboxClicked = () => {};
318-
319375
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
320376
public grid: IgxGridComponent;
321377

322378
public checkboxChanged: EventEmitter<any>;
323379

380+
public onCheckboxClicked() {
381+
382+
}
383+
324384
public checkboxClicked(event, context) {
325385
this.checkboxChanged.emit({ event: event, context: context });
326386
}

Diff for: ‎projects/igniteui-angular/src/lib/grids/grid/grid.module.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { IgxGridRowComponent } from './grid-row.component';
2020
import { IgxGridCommonModule } from '../grid-common.module';
2121
import { IgxGridSummaryPipe } from './grid.summary.pipe';
2222
import { IgxGridDetailsPipe } from './grid.details.pipe';
23-
import { IgGridExpandableCellComponent } from './expandable-cell.component';
23+
import { IgxGridExpandableCellComponent } from './expandable-cell.component';
2424

2525
/**
2626
* @hidden
@@ -43,11 +43,11 @@ import { IgGridExpandableCellComponent } from './expandable-cell.component';
4343
IgxGridFilteringPipe,
4444
IgxGridSummaryPipe,
4545
IgxGridDetailsPipe,
46-
IgGridExpandableCellComponent
46+
IgxGridExpandableCellComponent
4747
],
4848
exports: [
4949
IgxGridComponent,
50-
IgGridExpandableCellComponent,
50+
IgxGridExpandableCellComponent,
5151
IgxGridGroupByRowComponent,
5252
IgxGridRowComponent,
5353
IgxGroupByRowTemplateDirective,

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

+10-10
Original file line numberDiff line numberDiff line change
@@ -171,10 +171,10 @@ export class GridFunctions {
171171
grid.expansionStates = allExpanded;
172172
}
173173

174-
public static elementInGridView(grid, element) : boolean {
174+
public static elementInGridView(grid, element): boolean {
175175
const gridBottom = grid.tbody.nativeElement.getBoundingClientRect().bottom;
176176
const gridTop = grid.tbody.nativeElement.getBoundingClientRect().top;
177-
return element.getBoundingClientRect().top >= gridTop && element.getBoundingClientRect().bottom <= gridBottom;
177+
return element.getBoundingClientRect().top >= gridTop && element.getBoundingClientRect().bottom <= gridBottom;
178178
}
179179

180180
public static expandMasterRowByClick = (fix, row: IgxGridRowComponent) => new Promise(async (resolve, reject) => {
@@ -494,13 +494,13 @@ export class GridFunctions {
494494

495495
public static getAdvancedFilteringButton(fix: ComponentFixture<any>) {
496496
const button = GridFunctions.getToolbar(fix).queryAll(By.css('button'))
497-
.find((b) => b.nativeElement.name === 'btnAdvancedFiltering');
497+
.find((b) => b.nativeElement.name === 'btnAdvancedFiltering');
498498
return button ? button.nativeElement : undefined;
499499
}
500500

501501
public static getColumnHidingButton(fixture) {
502502
const button = GridFunctions.getToolbar(fixture).queryAll(By.css('button'))
503-
.find((b) => b.nativeElement.name === 'btnColumnHiding');
503+
.find((b) => b.nativeElement.name === 'btnColumnHiding');
504504
return button ? button.nativeElement : undefined;
505505
}
506506

@@ -1217,7 +1217,7 @@ export class GridFunctions {
12171217
* The returned element is the one that has been gotten last.
12181218
*/
12191219
public static getAdvancedFilteringTreeItem(fix: ComponentFixture<any>,
1220-
path: number[]) {
1220+
path: number[]) {
12211221
let node = GridFunctions.getAdvancedFilteringTreeRootGroup(fix);
12221222
for (let index = 0; index < path.length; index++) {
12231223
const pos = path[index];
@@ -1357,21 +1357,21 @@ export class GridFunctions {
13571357
public static getAdvancedFilteringClearFilterButton(fix: ComponentFixture<any>) {
13581358
const footer = GridFunctions.getAdvancedFilteringFooter(fix);
13591359
const clearFilterButton: any = Array.from(footer.querySelectorAll('button'))
1360-
.find((b: any) => b.innerText.toLowerCase() === 'clear filter');
1360+
.find((b: any) => b.innerText.toLowerCase() === 'clear filter');
13611361
return clearFilterButton;
13621362
}
13631363

13641364
public static getAdvancedFilteringCancelButton(fix: ComponentFixture<any>) {
13651365
const footer = GridFunctions.getAdvancedFilteringFooter(fix);
13661366
const cancelFilterButton: any = Array.from(footer.querySelectorAll('button'))
1367-
.find((b: any) => b.innerText.toLowerCase() === 'cancel');
1367+
.find((b: any) => b.innerText.toLowerCase() === 'cancel');
13681368
return cancelFilterButton;
13691369
}
13701370

13711371
public static getAdvancedFilteringApplyButton(fix: ComponentFixture<any>) {
13721372
const footer = GridFunctions.getAdvancedFilteringFooter(fix);
13731373
const applyFilterButton: any = Array.from(footer.querySelectorAll('button'))
1374-
.find((b: any) => b.innerText.toLowerCase() === 'apply');
1374+
.find((b: any) => b.innerText.toLowerCase() === 'apply');
13751375
return applyFilterButton;
13761376
}
13771377

@@ -1398,8 +1398,8 @@ export class GridFunctions {
13981398
public static getAdvancedFilteringValueInput(fix: ComponentFixture<any>, dateType: boolean = false) {
13991399
const editModeContainer = GridFunctions.getAdvancedFilteringEditModeContainer(fix);
14001400
const input = dateType ?
1401-
editModeContainer.querySelector('igx-date-picker').querySelector('input') :
1402-
GridFunctions.sortNativeElementsHorizontally(Array.from(editModeContainer.querySelectorAll('igx-input-group')))[2];
1401+
editModeContainer.querySelector('igx-date-picker').querySelector('input') :
1402+
GridFunctions.sortNativeElementsHorizontally(Array.from(editModeContainer.querySelectorAll('igx-input-group')))[2];
14031403
return input;
14041404
}
14051405

0 commit comments

Comments
 (0)