Skip to content

Commit

Permalink
test(grid): Move keyboard navigation tests in one file #2975
Browse files Browse the repository at this point in the history
  • Loading branch information
@nrobakova
nrobakova committed Nov 21, 2018
1 parent a4b7505 commit 89416b3
Show file tree
Hide file tree
Showing 9 changed files with 1,372 additions and 2,273 deletions.
2,712 changes: 790 additions & 1,922 deletions projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav.spec.ts
View file

Large diffs are not rendered by default.

241 changes: 27 additions & 214 deletions projects/igniteui-angular/src/lib/grids/grid/grid-selection.spec.ts
View file

Large diffs are not rendered by default.

365 changes: 364 additions & 1 deletion projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
View file

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,6 @@ describe('IgxGrid - GroupBy', () => {
}).compileComponents();
}));



function checkGroups(groupRows, expectedGroupOrder, grExpr?) {
// verify group rows are sorted correctly, their indexes in the grid are correct and their group records match the group value.
let count = 0;
Expand Down
91 changes: 0 additions & 91 deletions projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -366,97 +366,6 @@ describe('IgxGrid - Column Pinning ', () => {
expect(headers[3].parent.parent.name).toEqual('igx-display-container');
}));

it('should allow horizontal keyboard navigation between start pinned area and unpinned area.', fakeAsync (() => {
const fix = TestBed.createComponent(GridPinningComponent);
fix.detectChanges();
const grid = fix.componentInstance.instance;

fix.detectChanges();
tick();

grid.getColumnByName('CompanyName').pinned = true;
grid.getColumnByName('ContactName').pinned = true;

const cells = fix.debugElement.queryAll(By.css(CELL_CSS_CLASS));
let cell = cells[0];

cell.triggerEventHandler('focus', {});
tick();
fix.detectChanges();

expect(fix.componentInstance.selectedCell.value).toEqual('Maria Anders');
expect(fix.componentInstance.selectedCell.column.field).toMatch('ContactName');

UIInteractions.triggerKeyDownEvtUponElem('arrowright', cell.nativeElement, true);
tick();
fix.detectChanges();
expect(fix.componentInstance.selectedCell.value).toEqual('Alfreds Futterkiste');
expect(fix.componentInstance.selectedCell.column.field).toMatch('CompanyName');
cell = cells[1];

UIInteractions.triggerKeyDownEvtUponElem('arrowright', cell.nativeElement, true);
tick();

fix.detectChanges();
expect(fix.componentInstance.selectedCell.value).toEqual('ALFKI');
expect(fix.componentInstance.selectedCell.column.field).toMatch('ID');
cell = cells[2];

UIInteractions.triggerKeyDownEvtUponElem('arrowleft', cell.nativeElement, true);
tick();
fix.detectChanges();
expect(fix.componentInstance.selectedCell.value).toEqual('Alfreds Futterkiste');
expect(fix.componentInstance.selectedCell.column.field).toMatch('CompanyName');
cell.triggerEventHandler('blur', {});
tick();
cell = cells[0];

UIInteractions.triggerKeyDownEvtUponElem('arrowright', cell.nativeElement, true);
tick();
fix.detectChanges();
cell = cells[1];

UIInteractions.triggerKeyDownEvtUponElem('arrowright', cell.nativeElement, true);
tick();
fix.detectChanges();
expect(fix.componentInstance.selectedCell.value).toEqual('ALFKI');
expect(fix.componentInstance.selectedCell.column.field).toMatch('ID');
}));

it('should allow vertical keyboard navigation in pinned area.', fakeAsync (() => {
const fix = TestBed.createComponent(DefaultGridComponent);
fix.detectChanges();
const grid = fix.componentInstance.instance;
fix.detectChanges();
const cells = fix.debugElement.queryAll(By.css(CELL_CSS_CLASS));
let cell = cells[0];

cell.triggerEventHandler('focus', {});

tick();
fix.detectChanges();

expect(fix.componentInstance.selectedCell.value).toEqual('Alfreds Futterkiste');
expect(fix.componentInstance.selectedCell.column.field).toMatch('CompanyName');

UIInteractions.triggerKeyDownEvtUponElem('arrowdown', cell.nativeElement, true);

tick();
grid.cdr.detectChanges();

expect(fix.componentInstance.selectedCell.value).toEqual('Ana Trujillo Emparedados y helados');
expect(fix.componentInstance.selectedCell.column.field).toMatch('CompanyName');
cell = cells[6];

UIInteractions.triggerKeyDownEvtUponElem('arrowup', cell.nativeElement, true);

tick();
grid.cdr.detectChanges();

expect(fix.componentInstance.selectedCell.value).toEqual('Alfreds Futterkiste');
expect(fix.componentInstance.selectedCell.column.field).toMatch('CompanyName');
}));

it('should allow hiding/showing pinned column.', fakeAsync(() => {
const fix = TestBed.createComponent(GridPinningComponent);
fix.detectChanges();
Expand Down
7 changes: 5 additions & 2 deletions projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
treeGrid.getColumnByName('HireDate').editable = true;
treeGrid.getColumnByName('Age').editable = true;
treeGrid.getColumnByName('OnPTO').editable = true;
await wait(DEBOUNCETIME);
fix.detectChanges();

await testEditingNavigationTab(fix, treeGrid, treeColumns);
Expand Down Expand Up @@ -800,7 +801,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {

const testEditingNavigationTab =
(fixture, treegrid: IgxTreeGridComponent, columns) => new Promise(async (resolve, reject) => {
let cell = treegrid.getCellByColumn(2, columns[2]);
let cell = treegrid.getCellByColumn(2, columns[1]);

cell.nativeElement.dispatchEvent(new Event('focus'));
await wait(DEBOUNCETIME);
Expand All @@ -812,10 +813,12 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
await wait(DEBOUNCETIME);
fixture.detectChanges();

cell = treeGrid.getCellByColumn(2, columns[2]);
cell = treeGrid.getCellByColumn(2, columns[1]);
expect(cell.inEditMode).toBe(true);

// Test tab on child row
await TreeGridFunctions.moveEditableCellWithTab(fixture, treegrid, 2, 1, columns);

await TreeGridFunctions.moveEditableCellWithTab(fixture, treegrid, 2, 2, columns);

await TreeGridFunctions.moveEditableCellWithTab(fixture, treegrid, 2, 3, columns);
Expand Down
74 changes: 72 additions & 2 deletions projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,9 +192,9 @@ export class SelectionCancellableComponent extends BasicGridComponent {
EventSubscriptions.onColumnInit, '')
})
export class ScrollsComponent extends BasicGridComponent {
data = SampleTestData.generateBigDataRowsAndCols(100, 100);
data = SampleTestData.generateBigDataRowsAndCols(16, 16);
public columnInit(column) {
column.width = '50px';
// column.width = '50px';
}
}

Expand Down Expand Up @@ -699,3 +699,73 @@ export class GridWithAvatarComponent extends GridWithSizeComponent {
data = SampleTestData.personAvatarData();
height = '500px';
}

@Component({
template: GridTemplateStrings.declareGrid(`[height]="gridHeight" [columnWidth]="defaultWidth" [width]="gridWidth"`,
`${ EventSubscriptions.onSelection }`, ColumnDefinitions.generatedWithWidth)
})
export class VirtualGridComponent extends BasicGridComponent {
public gridWidth = '800px';
public gridHeight = '300px';
public defaultWidth = '200px';
public columns = [
{ field: 'index' },
{ field: 'value' },
{ field: 'other' },
{ field: 'another' }
];

public selectedCell: IgxGridCellComponent;

constructor() {
super();
this.data = this.generateData(1000);
}

public generateCols(numCols: number, defaultColWidth = null) {
const cols = [];
for (let j = 0; j < numCols; j++) {
cols.push({
field: j.toString(),
width: defaultColWidth !== null ? defaultColWidth : j % 8 < 2 ? 100 : (j % 6) * 125
});
}
return cols;
}

public generateData(numRows: number) {
const data = [];

for (let i = 0; i < numRows; i++) {
const obj = {};
for (let j = 0; j < this.columns.length; j++) {
const col = this.columns[j].field;
obj[col] = 10 * i * j;
}
data.push(obj);
}
return data;
}

public cellSelected(event: IGridCellEventArgs) {
this.selectedCell = event.cell;
}

public scrollTop(newTop: number) {
this.grid.verticalScrollContainer.getVerticalScroll().scrollTop = newTop;
}

public scrollLeft(newLeft: number) {
this.grid.parentVirtDir.getHorizontalScroll().scrollLeft = newLeft;
}
}


@Component({
template: GridTemplateStrings.declareGrid(
` [primaryKey]="'ID'"`,
'', ColumnDefinitions.idNameJobHireDate)
})
export class GridWithPrimaryKeyComponent extends BasicGridSearchComponent {
data = SampleTestData.personJobDataFull();
}
151 changes: 113 additions & 38 deletions projects/igniteui-angular/src/lib/test-utils/helper-utils.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
import { IgxCheckboxComponent, IgxGridComponent } from '../../public_api';
import { IgxCheckboxComponent, IgxGridComponent, IgxGridCellComponent } from '../../public_api';
import { wait } from '../test-utils/ui-interactions.spec';
import { take } from 'rxjs/operators';
import { IgxGridGroupByRowComponent } from '../grids/grid/groupby-row.component';
Expand All @@ -9,7 +9,7 @@ export class HelperUtils {
public static getCheckboxElement(name: string, element: DebugElement, fix) {
const checkboxElements = element.queryAll(By.css('igx-checkbox'));
const chkElement = checkboxElements.find((el) =>
(el.context as IgxCheckboxComponent).placeholderLabel.nativeElement.innerText === name);
(el.context as IgxCheckboxComponent).placeholderLabel.nativeElement.innerText === name);

return chkElement;
}
Expand Down Expand Up @@ -52,46 +52,121 @@ export class HelperUtils {
grid: IgxGridComponent,
rowStartIndex: number,
rowEndIndex: number,
colIndex?: number) => new Promise(async(resolve, reject) => {
const dir = rowStartIndex > rowEndIndex ? 'ArrowUp' : 'ArrowDown';
const row = grid.getRowByIndex(rowStartIndex);
const cIndx = colIndex || 0;
const colKey = grid.columnList.toArray()[cIndx].field;
let nextRow = dir === 'ArrowUp' ? grid.getRowByIndex(rowStartIndex - 1) : grid.getRowByIndex(rowStartIndex + 1);
const elem = row instanceof IgxGridGroupByRowComponent ?
row : grid.getCellByColumn(row.index, colKey);
if (rowStartIndex === rowEndIndex) {
if (!elem.focused) {
elem.nativeElement.focus();
colIndex?: number) => new Promise(async (resolve, reject) => {
const dir = rowStartIndex > rowEndIndex ? 'ArrowUp' : 'ArrowDown';
const row = grid.getRowByIndex(rowStartIndex);
const cIndx = colIndex || 0;
const colKey = grid.columnList.toArray()[cIndx].field;
let nextRow = dir === 'ArrowUp' ? grid.getRowByIndex(rowStartIndex - 1) : grid.getRowByIndex(rowStartIndex + 1);
const elem = row instanceof IgxGridGroupByRowComponent ?
row : grid.getCellByColumn(row.index, colKey);
if (rowStartIndex === rowEndIndex) {
if (!elem.focused) {
elem.nativeElement.focus();
}
resolve();
return;
}
resolve();
return;
}
const keyboardEvent = new KeyboardEvent('keydown', {
code: dir,
key: dir
});
const keyboardEvent = new KeyboardEvent('keydown', {
code: dir,
key: dir
});

if (dir === 'ArrowDown') {
elem.nativeElement.dispatchEvent(keyboardEvent);
} else {
elem.nativeElement.dispatchEvent(keyboardEvent);
}

if (nextRow) {
await wait(10);
HelperUtils.navigateVerticallyToIndex(grid, nextRow.index, rowEndIndex, colIndex)
.then(() => { resolve(); });
} else {
// else wait for chunk to load.
grid.verticalScrollContainer.onChunkLoad.pipe(take(1)).subscribe({
next: async() => {
nextRow = dir === 'ArrowUp' ? grid.getRowByIndex(rowStartIndex - 1) : grid.getRowByIndex(rowStartIndex + 1);
HelperUtils.navigateVerticallyToIndex(grid, nextRow.index, rowEndIndex, colIndex)

if (nextRow) {
await wait(10);
HelperUtils.navigateVerticallyToIndex(grid, nextRow.index, rowEndIndex, colIndex)
.then(() => { resolve(); });
}
} else {
// else wait for chunk to load.
grid.verticalScrollContainer.onChunkLoad.pipe(take(1)).subscribe({
next: async () => {
nextRow = dir === 'ArrowUp' ? grid.getRowByIndex(rowStartIndex - 1) : grid.getRowByIndex(rowStartIndex + 1);
HelperUtils.navigateVerticallyToIndex(grid, nextRow.index, rowEndIndex, colIndex)
.then(() => { resolve(); });
}
});
}

})

public static navigateHorizontallyToIndex = (
grid: IgxGridComponent,
cell: IgxGridCellComponent,
index: number) => new Promise(async (resolve) => {
// grid - the grid in which to navigate.
// cell - current cell from which the navigation will start.
// index - the index to which to navigate

const currIndex = cell.visibleColumnIndex;
const dir = currIndex < index ? 'ArrowRight' : 'ArrowLeft';
const nextIndex = dir === 'ArrowRight' ? currIndex + 1 : currIndex - 1;
const visibleColumns = grid.visibleColumns.sort((c1, c2) => c1.visibleIndex - c2.visibleIndex);
const nextCol = visibleColumns[nextIndex];
let nextCell = nextCol ? grid.getCellByColumn(0, nextCol.field) : null;
const keyboardEvent = new KeyboardEvent('keydown', {
code: dir,
key: dir
});
}
if (!cell.focused) {
cell.nativeElement.dispatchEvent(new Event('focus'));
await wait(10);
grid.cdr.detectChanges();
}
// if index reached return
if (currIndex === index) { resolve(); return; }
// else call arrow up/down
cell.nativeElement.dispatchEvent(keyboardEvent);

grid.cdr.detectChanges();
// if next row exists navigate next
if (nextCell) {
await wait(10);
grid.cdr.detectChanges();
HelperUtils.navigateHorizontallyToIndex(grid, nextCell, index).then(() => { resolve(); });
} else {
// else wait for chunk to load.
grid.parentVirtDir.onChunkLoad.pipe(take(1)).subscribe({
next: () => {
grid.cdr.detectChanges();
nextCell = nextCol ? grid.getCellByColumn(0, nextCol.field) : null;
HelperUtils.navigateHorizontallyToIndex(grid, nextCell, index).then(() => { resolve(); });
}
});
}
})

public static expandCollapceGroupRow =
(fix, groupRow: IgxGridGroupByRowComponent,
cell: IgxGridCellComponent) => new Promise(async (resolve, reject) => {
expect(groupRow.focused).toBe(true);
expect(groupRow.nativeElement.classList.contains('igx-grid__group-row--active')).toBe(true);
if (cell != null) {
expect(cell.selected).toBe(true);
}

})
groupRow.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'arrowleft', code: 'arrowleft', altKey: true }));
await wait(300);
fix.detectChanges();

expect(groupRow.expanded).toBe(false);
expect(groupRow.focused).toBe(true);
expect(groupRow.nativeElement.classList.contains('igx-grid__group-row--active')).toBe(true);
if (cell != null) {
expect(cell.selected).toBe(true);
}

groupRow.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'arrowright', code: 'arrowright', altKey: true }));
await wait(100);
fix.detectChanges();

expect(groupRow.expanded).toBe(true);
expect(groupRow.focused).toBe(true);
expect(groupRow.nativeElement.classList.contains('igx-grid__group-row--active')).toBe(true);
if (cell != null) {
expect(cell.selected).toBe(true);
}
resolve();
})
}
Loading

0 comments on commit 89416b3

Please sign in to comment.