Skip to content

Commit 247f53a

Browse files
nrobakovanrobakova
committed
refactor(grid): update row editing tests #5664 
1 parent 471788c commit 247f53a

File tree

9 files changed

+886
-781
lines changed

9 files changed

+886
-781
lines changed

‎projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts‎

Lines changed: 619 additions & 492 deletions
Large diffs are not rendered by default.

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

Lines changed: 5 additions & 244 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import {
2-
AfterViewInit, ChangeDetectorRef, Component, DebugElement, Injectable,
3-
OnInit, ViewChild, ViewChildren, QueryList, TemplateRef
2+
AfterViewInit, ChangeDetectorRef, Component, Injectable,
3+
OnInit, ViewChild, TemplateRef
44
} from '@angular/core';
5-
import { async, TestBed, fakeAsync, tick, flush, ComponentFixture } from '@angular/core/testing';
5+
import { async, TestBed, fakeAsync, tick } from '@angular/core/testing';
66
import { BehaviorSubject, Observable } from 'rxjs';
77
import { By } from '@angular/platform-browser';
88
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
99
import { IgxGridComponent } from './grid.component';
1010
import { IgxRowComponent } from '../row.component';
11-
import { IgxGridTransaction } from '../grid-base.component';
1211
import { IgxColumnComponent } from '../column.component';
1312
import { IForOfState } from '../../directives/for-of/for_of.directive';
1413
import { IgxGridModule, GridSelectionMode } from './index';
@@ -17,14 +16,9 @@ import { DataType } from '../../data-operations/data-util';
1716
import { GridTemplateStrings } from '../../test-utils/template-strings.spec';
1817
import { SampleTestData, DataParent } from '../../test-utils/sample-test-data.spec';
1918
import { BasicGridComponent } from '../../test-utils/grid-base-components.spec';
20-
import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
21-
import {
22-
IgxRowEditTabStopDirective
23-
} from '../grid.rowEdit.directive';
19+
import { wait } from '../../test-utils/ui-interactions.spec';
2420
import { IgxStringFilteringOperand, IgxNumberFilteringOperand } from '../../data-operations/filtering-condition';
2521
import { SortingDirection } from '../../data-operations/sorting-expression.interface';
26-
import { IgxGridCellComponent } from '../cell.component';
27-
import { IgxTransactionService } from '../../services';
2822
import { configureTestSuite } from '../../test-utils/configure-suite';
2923
import { IgxTabsModule, IgxTabsComponent } from '../../tabs';
3024
import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec';
@@ -1406,8 +1400,7 @@ describe('IgxGrid Component Tests #grid', () => {
14061400
beforeEach(async(() => {
14071401
TestBed.configureTestingModule({
14081402
declarations: [
1409-
IgxGridDefaultRenderingComponent,
1410-
IgxGridRowEditingTransactionComponent
1403+
IgxGridDefaultRenderingComponent
14111404
],
14121405
imports: [
14131406
NoopAnimationsModule, IgxGridModule]
@@ -2052,238 +2045,6 @@ export class IgxGridFormattingComponent extends BasicGridComponent {
20522045
}
20532046
}
20542047

2055-
@Component({
2056-
template: `
2057-
<igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="900px" height="300px" [rowEditable]="true">
2058-
<igx-column field="ProductID" header="Product ID"></igx-column>
2059-
<igx-column field="ReorderLevel" header="Reorder Lever" [dataType]="'number'" width="100px">
2060-
</igx-column>
2061-
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" [sortable]="true" width="150px">
2062-
</igx-column>
2063-
<igx-column field="OrderDate" header="Order Date" [dataType]="'date'" width="150px"></igx-column>
2064-
</igx-grid>`
2065-
})
2066-
export class IgxBasicGridRowEditingComponent {
2067-
public data = SampleTestData.foodProductData();
2068-
2069-
@ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
2070-
}
2071-
2072-
@Component({
2073-
template: `
2074-
<igx-grid #grid [data]="data" [primaryKey]="'ProductID'"
2075-
width="900px" height="600px" [rowEditable]="true" >
2076-
<igx-column field="ProductID" header="Product ID" [editable]="false" width="200px"></igx-column>
2077-
<igx-column field="ReorderLevel" header="Reorder Lever" [dataType]="'number'" editable="true" width="100px">
2078-
</igx-column>
2079-
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" editable="true" [sortable]="true" width="200px">
2080-
</igx-column>
2081-
<igx-column field="OrderDate" header="Order Date" [dataType]="'date'" editable="true" width="200px"></igx-column>
2082-
</igx-grid>`
2083-
})
2084-
export class IgxGridRowEditingComponent {
2085-
public data = SampleTestData.foodProductData();
2086-
@ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
2087-
}
2088-
2089-
@Component({
2090-
template: `
2091-
<igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="700px" height="400px" [rowEditable]="true">
2092-
<igx-column>
2093-
<ng-template igxCell let-cell="cell" let-val>
2094-
<button>Delete</button>
2095-
</ng-template>
2096-
</igx-column>
2097-
<igx-column field="ProductID" header="Product ID"></igx-column>
2098-
<igx-column field="ReorderLevel" header="Reorder Lever" [dataType]="'number'" [editable]="true" width="100px"></igx-column>
2099-
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" width="150px"></igx-column>
2100-
<igx-column field="OrderDate" header="Order Date" [dataType]="'date'" width="150px" [editable]="false"></igx-column>
2101-
</igx-grid>`
2102-
})
2103-
export class IgxGridRowEditingWithoutEditableColumnsComponent {
2104-
public data = SampleTestData.foodProductData();
2105-
@ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
2106-
}
2107-
2108-
@Component({
2109-
template: `
2110-
<igx-grid #grid [data]="data" [primaryKey]="'ID'" width="700px" height="400px" [rowEditable]="true">
2111-
<igx-column
2112-
field="Downloads" header="Downloads" [dataType]="'number'" [pinned]="pinnedFlag" [editable]="true">
2113-
</igx-column>
2114-
<igx-column field="ID" header="ID" [dataType]="'number'"
2115-
[editable]="false" [pinned]="pinnedFlag" [hidden]="hiddenFlag" width="60px">
2116-
</igx-column>
2117-
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" [editable]="false" [hidden]="hiddenFlag" width="150px">
2118-
</igx-column>
2119-
<igx-column field="ReleaseDate" header="Release Date" [dataType]="'date'" [editable]="true" [hidden]="hiddenFlag" width="150px">
2120-
</igx-column>
2121-
<igx-column-group [movable]="true" header="Column Group 1" *ngIf="columnGroupingFlag">
2122-
<igx-column field="Released" header="Released" [dataType]="'boolean'" [pinned]="pinnedFlag" [editable]="true" width="100px">
2123-
</igx-column>
2124-
<igx-column field="Category" header="Category" [dataType]="'string'" [editable]="false" [hidden]="hiddenFlag" width="150px">
2125-
</igx-column>
2126-
</igx-column-group>
2127-
<ng-container *ngIf="!columnGroupingFlag">
2128-
<igx-column field="Released" header="Released" [dataType]="'boolean'" [pinned]="pinnedFlag" [editable]="true" width="100px">
2129-
</igx-column>
2130-
<igx-column field="Category" header="Category" [dataType]="'string'" [editable]="true" [hidden]="hiddenFlag" width="150px">
2131-
</igx-column>
2132-
</ng-container>
2133-
<igx-column field="Items" header="Items" [dataType]="'string'" [editable]="true" width="150px">
2134-
</igx-column>
2135-
<igx-column field="Test" header="Test" [dataType]="'string'" [editable]="true" [hidden]="hiddenFlag" width="150px">
2136-
</igx-column>
2137-
</igx-grid>`
2138-
})
2139-
export class IgxGridWithEditingAndFeaturesComponent {
2140-
/* Data fields: Downloads:number, ID: number, ProductName: string, ReleaseDate: Date,
2141-
Released: boolean, Category: string, Items: string, Test: string. */
2142-
public pinnedFlag = false;
2143-
public hiddenFlag = false;
2144-
public columnGroupingFlag = false;
2145-
public data = SampleTestData.generateProductData(11);
2146-
@ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
2147-
public moveNext(shiftKey: boolean): void {
2148-
UIInteractions.triggerKeyDownWithBlur('tab', this.getCurrentEditCell().nativeElement, true, false, shiftKey);
2149-
}
2150-
public focusGridCell(rowIndex: number, columnName: string): IgxGridCellComponent {
2151-
const targetCell = this.getCell(rowIndex, columnName);
2152-
targetCell.onFocus(new FocusEvent('focus'));
2153-
return targetCell;
2154-
}
2155-
2156-
public getCell(rowIndex: number, columnName: string): IgxGridCellComponent {
2157-
return this.grid.getCellByColumn(rowIndex, columnName);
2158-
}
2159-
2160-
public getCurrentEditCell(): IgxGridCellComponent {
2161-
const grid = this.grid as any;
2162-
const currentCell = grid.gridAPI.get_cell_inEditMode();
2163-
return this.grid.getCellByColumn(currentCell.id.rowIndex, currentCell.column.field);
2164-
}
2165-
2166-
public get gridAPI() {
2167-
return (<any>this.grid).gridAPI;
2168-
}
2169-
2170-
public get cellInEditMode() {
2171-
return this.grid.crudService.cell;
2172-
}
2173-
}
2174-
2175-
@Component({
2176-
template: `
2177-
<igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="700px" height="400px" [rowEditable]="true">
2178-
<igx-column field="ProductID" header="Product ID"></igx-column>
2179-
<igx-column field="ReorderLevel" header="Reorder Lever" [dataType]="'number'" [editable]="true" width="100px"></igx-column>
2180-
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" width="150px"></igx-column>
2181-
<igx-column field="OrderDate" header="Order Date" [dataType]="'date'" width="150px" [editable]="false"></igx-column>
2182-
<ng-template igxRowEdit let-rowChangesCount="rowChangesCount" let-endEdit="endEdit">
2183-
<div class="igx-banner__message">
2184-
<span class="igx-banner__text">{{ rowChangesCount }} </span>
2185-
</div>
2186-
<div class="igx-banner__actions">
2187-
<div class="igx-banner__row">
2188-
<button igxButton igxRowEditTabStop (click)="endEdit(false)">Cancel</button>
2189-
<button igxButton igxRowEditTabStop (click)="endEdit(true)">Done</button>
2190-
</div>
2191-
</div>
2192-
</ng-template>
2193-
</igx-grid>
2194-
`
2195-
})
2196-
export class IgxGridCustomOverlayComponent {
2197-
public data = SampleTestData.foodProductData();
2198-
@ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
2199-
@ViewChildren(IgxRowEditTabStopDirective) public buttons: QueryList<IgxRowEditTabStopDirective>;
2200-
2201-
public get gridAPI() {
2202-
return (<any>this.grid).gridAPI;
2203-
}
2204-
2205-
public get cellInEditMode() {
2206-
return this.gridAPI.get_cell_inEditMode();
2207-
}
2208-
2209-
public getCurrentEditCell(): IgxGridCellComponent {
2210-
const grid = this.grid as any;
2211-
const currentCell = grid.gridAPI.get_cell_inEditMode();
2212-
return this.grid.getCellByColumn(currentCell.id.rowIndex, currentCell.column.field);
2213-
}
2214-
2215-
public moveNext(shiftKey: boolean): void {
2216-
this.getCurrentEditCell().dispatchEvent(new KeyboardEvent('keydown', {
2217-
key: 'tab',
2218-
code: 'tab',
2219-
shiftKey
2220-
}));
2221-
}
2222-
}
2223-
2224-
@Component({
2225-
template: `
2226-
<igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="900px" height="900px" [rowEditable]="true"
2227-
[paging]="paging" [perPage]="7">
2228-
<igx-column field="ProductID" header="Product ID" width="150px"></igx-column>
2229-
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" width="200px"></igx-column>
2230-
<igx-column field="InStock" header="In Stock" [dataType]="'boolean'" width="100px"></igx-column>
2231-
<igx-column field="UnitsInStock" header="Units in Stock" [dataType]="'number'" width="150px"></igx-column>
2232-
<igx-column field="OrderDate" header="Order Date" [dataType]="'date'" width="200px"></igx-column>
2233-
</igx-grid>`,
2234-
providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
2235-
})
2236-
export class IgxGridRowEditingTransactionComponent {
2237-
public data = SampleTestData.foodProductData();
2238-
@ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
2239-
2240-
public paging = false;
2241-
}
2242-
2243-
@Component({
2244-
template: `
2245-
<igx-grid
2246-
[width]='width'
2247-
[height]='height'
2248-
[data]="data"
2249-
[autoGenerate]="true" (onColumnInit)="columnsCreated($event)" (onGroupingDone)="onGroupingDoneHandler($event)"
2250-
[rowEditable]="enableRowEditing">
2251-
</igx-grid>
2252-
<ng-template #dropArea>
2253-
<span> Custom template </span>
2254-
</ng-template>
2255-
`
2256-
})
2257-
export class IgxGridRowEditingWithFeaturesComponent extends DataParent {
2258-
public width = '800px';
2259-
public height = null;
2260-
2261-
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
2262-
public instance: IgxGridComponent;
2263-
2264-
@ViewChild('dropArea', { read: TemplateRef, static: true })
2265-
public dropAreaTemplate: TemplateRef<any>;
2266-
2267-
public enableSorting = false;
2268-
public enableFiltering = false;
2269-
public enableResizing = false;
2270-
public enableEditing = true;
2271-
public enableGrouping = true;
2272-
public enableRowEditing = true;
2273-
public currentSortExpressions;
2274-
2275-
public columnsCreated(column: IgxColumnComponent) {
2276-
column.sortable = this.enableSorting;
2277-
column.filterable = this.enableFiltering;
2278-
column.resizable = this.enableResizing;
2279-
column.editable = this.enableEditing;
2280-
column.groupable = this.enableGrouping;
2281-
}
2282-
public onGroupingDoneHandler(sortExpr) {
2283-
this.currentSortExpressions = sortExpr;
2284-
}
2285-
}
2286-
22872048
@Component({
22882049
template: `
22892050
<div style="width: 600px; height: 400px;">

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import { configureTestSuite } from '../../test-utils/configure-suite';
1010
import { wait } from '../../test-utils/ui-interactions.spec';
1111
import { IgxNumberFilteringOperand } from '../../data-operations/filtering-condition';
1212
import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec';
13+
import { GridFunctions } from '../../test-utils/grid-functions.spec';
1314

1415
describe('IgxGrid - Grid Paging #grid', () => {
1516
configureTestSuite();
1617
const PAGER_CLASS = '.igx-grid-paginator__pager';
17-
const PAGER_BUTTONS = '.igx-grid-paginator__pager > button';
1818

1919
beforeEach(async(() => {
2020
TestBed.configureTestingModule({
@@ -33,7 +33,7 @@ describe('IgxGrid - Grid Paging #grid', () => {
3333
fix.detectChanges();
3434
const grid = fix.componentInstance.grid;
3535
const gridElement: HTMLElement = fix.nativeElement.querySelector('.igx-grid');
36-
const pagingButtons = gridElement.querySelectorAll(PAGER_BUTTONS);
36+
const pagingButtons = GridFunctions.getPagingButtons(gridElement);
3737

3838
expect(grid.paging).toBeTruthy();
3939

@@ -479,7 +479,7 @@ describe('IgxGrid - Grid Paging #grid', () => {
479479
expect(gridElement.querySelector('.igx-grid-paginator__pager > span').textContent).toMatch(pagerText);
480480
}
481481
if (buttonsVisibility != null && buttonsVisibility.length === 4) {
482-
const pagingButtons = gridElement.querySelectorAll(PAGER_BUTTONS);
482+
const pagingButtons = GridFunctions.getPagingButtons(gridElement);
483483
expect(pagingButtons.length).toEqual(4);
484484
expect(pagingButtons[0].className.includes(disabled)).toBe(buttonsVisibility[0]);
485485
expect(pagingButtons[1].className.includes(disabled)).toBe(buttonsVisibility[1]);

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { IgxHierarchicalTransactionServiceFactory } from './hierarchical-grid-ba
1818
import { IgxIconModule } from '../../icon';
1919
import { IgxHierarchicalGridCellComponent } from './hierarchical-cell.component';
2020
import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec';
21+
import { GridFunctions } from '../../test-utils/grid-functions.spec';
2122

2223
describe('IgxHierarchicalGrid Integration #hGrid', () => {
2324
configureTestSuite();
@@ -554,8 +555,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
554555
expect(childGrid.dataRowList.first.cells.first.value).toEqual('00');
555556

556557
// Go to next page
557-
const pagingButtons = hierarchicalGrid.nativeElement.querySelectorAll('.igx-grid-paginator__pager > button');
558-
pagingButtons[2].dispatchEvent(new Event('click'));
558+
GridFunctions.navigateToNextPage(hierarchicalGrid.nativeElement);
559559
fixture.detectChanges();
560560

561561
expect(hierarchicalGrid.dataRowList.toArray()[0].cells.first.value).toEqual('15');
@@ -567,7 +567,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
567567
expect(childGrids.length).toEqual(0);
568568

569569
// Return to previous page
570-
pagingButtons[1].dispatchEvent(new Event('click'));
570+
GridFunctions.navigateToPrevPage(hierarchicalGrid.nativeElement);
571571
fixture.detectChanges();
572572

573573
expect(hierarchicalGrid.dataRowList.toArray()[0].cells.first.value).toEqual('0');

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite';
1414
import { first } from 'rxjs/operators';
1515
import { wait } from '../../test-utils/ui-interactions.spec';
1616
import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec';
17+
import { GridFunctions } from '../../test-utils/grid-functions.spec';
1718

1819
describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => {
1920
configureTestSuite();
@@ -473,14 +474,13 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => {
473474
fix.detectChanges();
474475

475476
const tGrid: HTMLElement = treeGrid.nativeElement;
476-
const paginator = tGrid.querySelectorAll('.igx-grid-paginator__pager > button');
477-
paginator[2].dispatchEvent(new Event('click'));
477+
GridFunctions.navigateToNextPage(tGrid);
478478
fix.detectChanges();
479479
// Verify current page
480480
verifyGridPager(fix, 1, '101', '2 of 2', [false, false, true, true]);
481481
expect(treeGrid.totalPages).toBe(2);
482482

483-
paginator[0].dispatchEvent(new Event('click'));
483+
GridFunctions.navigateToFirstPage(tGrid);
484484
fix.detectChanges();
485485
// Verify current page
486486
verifyGridPager(fix, 10, '147', '1 of 2', [true, true, false, false]);
@@ -913,15 +913,14 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => {
913913
expect(treeGrid.totalPages).toBe(2);
914914

915915
const tGrid: HTMLElement = treeGrid.nativeElement;
916-
const paginator = tGrid.querySelectorAll('.igx-grid-paginator__pager > button');
917-
paginator[3].dispatchEvent(new Event('click'));
916+
GridFunctions.navigateToLastPage(tGrid);
918917
fix.detectChanges();
919918
tick(16);
920919
// Verify current page
921920
verifyGridPager(fix, 1, '9', '2 of 2', [false, false, true, true]);
922921
expect(treeGrid.totalPages).toBe(2);
923922

924-
paginator[1].dispatchEvent(new Event('click'));
923+
GridFunctions.navigateToPrevPage(tGrid);
925924
fix.detectChanges();
926925
tick(16);
927926
// Verify current page
@@ -1387,7 +1386,7 @@ function verifyGridPager(fix, rowsCount, firstCellValue, pagerText, buttonsVisib
13871386
expect(gridElement.querySelector('.igx-grid-paginator__pager > span').textContent).toMatch(pagerText);
13881387
}
13891388
if (buttonsVisibility != null && buttonsVisibility.length === 4) {
1390-
const pagingButtons = gridElement.querySelectorAll('.igx-grid-paginator__pager > button');
1389+
const pagingButtons = GridFunctions.getPagingButtons(gridElement);
13911390
expect(pagingButtons.length).toEqual(4);
13921391
expect(pagingButtons[0].className.includes(disabled)).toBe(buttonsVisibility[0]);
13931392
expect(pagingButtons[1].className.includes(disabled)).toBe(buttonsVisibility[1]);

0 commit comments

Comments
 (0)