Skip to content

Commit

Permalink
test(grid): move keyboard tests in a separate file #2975
Browse files Browse the repository at this point in the history
  • Loading branch information
@nrobakova
nrobakova committed Nov 27, 2018
1 parent 0864fed commit 9584289
Show file tree
Hide file tree
Showing 10 changed files with 1,890 additions and 1,958 deletions.
485 changes: 0 additions & 485 deletions projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts
View file

Large diffs are not rendered by default.

1,398 changes: 1,398 additions & 0 deletions projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav.spec.ts
View file

Large diffs are not rendered by default.

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

Large diffs are not rendered by default.

50 changes: 0 additions & 50 deletions projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -753,55 +753,6 @@ describe('IgxGrid Component Tests', () => {
});
});

describe('IgxGrid - keyboard navigation tests', () => {
configureTestSuite();
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
IgxGridDefaultRenderingComponent
],
imports: [
NoopAnimationsModule, IgxGridModule.forRoot()]
}).compileComponents();
}));

it('should allow pageup/pagedown navigation when the grid is focused', async () => {
const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
fix.detectChanges();
const grid = fix.componentInstance.grid;
const pageDownKeyEvent = new KeyboardEvent('keydown', {
code: 'PageDown',
key: 'PageDown'
});
const pageUpKeyEvent = new KeyboardEvent('keydown', {
code: 'PageUp',
key: 'PageUp'
});
let currScrollTop;
grid.width = '800px';
grid.height = '500px';
fix.componentInstance.initColumnsRows(25, 25);
await wait();
fix.detectChanges();
grid.nativeElement.dispatchEvent(new Event('focus'));

// testing the pagedown key
grid.nativeElement.dispatchEvent(pageDownKeyEvent);
grid.cdr.detectChanges();

await wait();
currScrollTop = grid.verticalScrollContainer.getVerticalScroll().scrollTop;
expect(currScrollTop).toEqual(grid.verticalScrollContainer.igxForContainerSize);

// testing the pageup key
grid.nativeElement.dispatchEvent(pageUpKeyEvent);
grid.cdr.detectChanges();
await wait();
currScrollTop = grid.parentVirtDir.getHorizontalScroll().scrollTop;
expect(currScrollTop).toEqual(0);
});
});

describe('IgxGrid - API methods', () => {
configureTestSuite();
beforeEach(async(() => {
Expand Down Expand Up @@ -1148,7 +1099,6 @@ describe('IgxGrid Component Tests', () => {
it(`Should jump from first editable columns to overlay buttons`, fakeAsync(() => {
const fixture = TestBed.createComponent(IgxGridWithEditingAndFeaturesComponent);
fixture.detectChanges();
const grid = fixture.componentInstance.grid;
const targetCell = fixture.componentInstance.focusGridCell(0, 'Downloads');
const firstCellElement = targetCell.nativeElement;
fixture.detectChanges();
Expand Down
1,132 changes: 297 additions & 835 deletions projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
View file

Large diffs are not rendered by default.

127 changes: 0 additions & 127 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,133 +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 keyboard navigation to first/last cell with Ctrl when there are the pinned columns.', async () => {
const fix = TestBed.createComponent(GridPinningComponent);
fix.detectChanges();

await wait();
const grid = fix.componentInstance.instance;
grid.getColumnByName('CompanyName').pinned = true;
grid.getColumnByName('ContactName').pinned = true;
fix.detectChanges();
const cells = fix.debugElement.queryAll(By.css(CELL_CSS_CLASS));
let cell = cells[0];

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

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

cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'arrowright', ctrlKey: true }));
await wait(30);
fix.detectChanges();

expect(fix.componentInstance.selectedCell.value).toEqual('030-0076545');
expect(fix.componentInstance.selectedCell.column.field).toMatch('Fax');

cell = cells[cells.length - 1];
cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'arrowleft', ctrlKey: true }));
await wait(30);
fix.detectChanges();

// It won't scroll left since the next selected cell will be in the pinned area
expect(fix.componentInstance.selectedCell.value).toEqual('Maria Anders');
expect(fix.componentInstance.selectedCell.column.field).toMatch('ContactName');
});

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
64 changes: 62 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 @@ -709,3 +709,63 @@ 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();
}
Loading

0 comments on commit 9584289

Please sign in to comment.