-
-
+@if (!isHierarchical()) {
+
+
+
+
+ {{ item.label }}
+
+
-
-
-
-
-
-
-
- {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}
-
-
-
-
-
-
-
- {{ selectAllItem.label }}
-
+
+
+
+
+
+
+
+
+
+
+ {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}
-
-
+
+}
- {{ addToCurrentFilterItem.label }}
-
-
-
-
-
-
- {{item.label}}
-
- {{childLevel1.label}}
-
- {{childLevel2.label}}
-
- {{childLevel3.label}}
-
- {{childLevel4.label}}
-
- {{childLevel5.label}}
-
- {{childLevel6.label}}
-
- {{childLevel7.label}}
-
- {{childLevel8.label}}
-
- {{childLevel9.label}}
-
+@if (isHierarchical()) {
+
+ @if (!isTreeEmpty()) {
+
+
+
+ {{ selectAllItem.label }}
+
+
+ @if (searchValue) {
+
+
+ {{ addToCurrentFilterItem.label }}
+
+
+ }
+
+ }
+
+ @for (item of displayedListData; track item.value) {
+
+ {{item.label}}
+ @for (childLevel1 of item.children; track childLevel1.value) {
+
+ {{childLevel1.label}}
+ @for (childLevel2 of childLevel1.children; track childLevel2.value) {
+
+ {{childLevel2.label}}
+ @for (childLevel3 of childLevel2.children; track childLevel3.value) {
+
+ {{childLevel3.label}}
+ @for (childLevel4 of childLevel3.children; track childLevel4.value) {
+
+ {{childLevel4.label}}
+ @for (childLevel5 of childLevel4.children; track childLevel5.value) {
+
+ {{childLevel5.label}}
+ @for (childLevel6 of childLevel5.children; track childLevel6.value) {
+
+ {{childLevel6.label}}
+ @for (childLevel7 of childLevel6.children; track childLevel7.value) {
+
+ {{childLevel7.label}}
+ @for (childLevel8 of childLevel7.children; track childLevel8.value) {
+
+ {{childLevel8.label}}
+ @for (childLevel9 of childLevel8.children; track childLevel9.value) {
+
+ {{childLevel9.label}}
+
+ }
+
+ }
+
+ }
+
+ }
+
+ }
+
+ }
-
+ }
-
+ }
-
+ }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ @if (isTreeEmpty()) {
+
+ }
+
+}
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts
index c8139ddd8fb..25199db8605 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts
@@ -32,7 +32,7 @@ import { IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective } from '
import { IgxListItemComponent } from '../../../list/list-item.component';
import { IgxListComponent } from '../../../list/list.component';
import { IgxSuffixDirective } from '../../../directives/suffix/suffix.directive';
-import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IgxPrefixDirective } from '../../../directives/prefix/prefix.directive';
import { IgxIconComponent } from '../../../icon/icon.component';
@@ -59,7 +59,7 @@ let NEXT_ID = 0;
@Component({
selector: 'igx-excel-style-search',
templateUrl: './excel-style-search.component.html',
- imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, IgxListComponent, IgxForOfDirective, IgxListItemComponent, IgxCheckboxComponent, IgxDataLoadingTemplateDirective, NgTemplateOutlet, IgxEmptyListTemplateDirective, IgxTreeComponent, NgFor, IgxTreeNodeComponent, IgxCircularProgressBarComponent, IgxButtonDirective]
+ imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxForOfDirective, IgxListItemComponent, IgxCheckboxComponent, IgxDataLoadingTemplateDirective, NgTemplateOutlet, IgxEmptyListTemplateDirective, IgxTreeComponent, IgxTreeNodeComponent, IgxCircularProgressBarComponent, IgxButtonDirective]
})
export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
private static readonly filterOptimizationThreshold = 2;
@@ -462,6 +462,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
selectAllBtn.indeterminate = anyFiltered && anyUnfiltered;
if (this.isHierarchical() && this.tree) {
this._hierarchicalSelectedItems = this.tree.nodes.map(n => n.data as FilterListItem).filter(item => item.isFiltered);
+ this.tree.collapseAll();
}
this.esf.listData.forEach(i => i.isSelected = i.isFiltered);
@@ -568,6 +569,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
}
filterTree.filteringOperands.push({
condition,
+ conditionName: condition.name,
fieldName: this.esf.column.field,
ignoreCase: this.esf.column.filteringIgnoreCase,
searchVal: element.value
@@ -582,6 +584,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
}
filterTree.filteringOperands.push({
condition: this.createCondition('in'),
+ conditionName: 'in',
fieldName: this.esf.column.field,
ignoreCase: this.esf.column.filteringIgnoreCase,
searchVal: new Set(
@@ -598,6 +601,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
if (blanksItem) {
filterTree.filteringOperands.push({
condition: this.createCondition('empty'),
+ conditionName: 'empty',
fieldName: this.esf.column.field,
ignoreCase: this.esf.column.filteringIgnoreCase,
searchVal: blanksItem.value
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.html
index f1ba36e2519..34b3b651719 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.html
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.html
@@ -1,9 +1,11 @@
-
- {{esf.grid.resourceStrings.igx_grid_excel_select }}
-
-
+@if (esf.column) {
+
+ {{esf.grid.resourceStrings.igx_grid_excel_select }}
+
+
+}
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts
index 36354db79ed..d3fd52a5b69 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts
@@ -1,7 +1,7 @@
import { Component } from '@angular/core';
import { BaseFilteringComponent } from './base-filtering.component';
import { IgxIconComponent } from '../../../icon/icon.component';
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
/**
* A component used for presenting Excel style conditional filter UI.
@@ -9,7 +9,7 @@ import { NgIf, NgClass } from '@angular/common';
@Component({
selector: 'igx-excel-style-selecting',
templateUrl: './excel-style-selecting.component.html',
- imports: [NgIf, NgClass, IgxIconComponent]
+ imports: [NgClass, IgxIconComponent]
})
export class IgxExcelStyleSelectingComponent {
constructor(public esf: BaseFilteringComponent) { }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.html
index 4491db53da8..35cf79678e6 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.html
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.html
@@ -1,33 +1,32 @@
-
-
- {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }}
-
-
-
-
-
-
-
+@if (esf.column) {
+
+ {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }}
+
+
+
+
+
+}
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts
index 631fc9fd1ae..1d23c7a78c9 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts
@@ -11,7 +11,6 @@ import { Subject } from 'rxjs';
import { BaseFilteringComponent } from './base-filtering.component';
import { IgxIconComponent } from '../../../icon/icon.component';
import { IgxButtonDirective } from '../../../directives/button/button.directive';
-import { NgIf } from '@angular/common';
/**
* A component used for presenting Excel style column sorting UI.
@@ -19,7 +18,7 @@ import { NgIf } from '@angular/common';
@Component({
selector: 'igx-excel-style-sorting',
templateUrl: './excel-style-sorting.component.html',
- imports: [NgIf, IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent]
+ imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent]
})
export class IgxExcelStyleSortingComponent implements OnDestroy {
/**
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
index 3bc09de4a93..717e78acbcf 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
@@ -20,7 +20,7 @@ import { ColumnType, GridType } from '../common/grid.interface';
import { formatDate } from '../../core/utils';
import { ExcelStylePositionStrategy } from './excel-style/excel-style-position-strategy';
import { fadeIn } from 'igniteui-angular/animations';
-import { ExpressionsTreeUtil } from '../../data-operations/expressions-tree-util';
+import { ExpressionsTreeUtil, isTree } from '../../data-operations/expressions-tree-util';
/**
* @hidden
@@ -146,7 +146,7 @@ export class IgxFilteringService implements OnDestroy {
this.isFiltering = true;
let expressionsTree;
- if (expressions instanceof FilteringExpressionsTree) {
+ if (expressions && 'operator' in expressions) {
expressionsTree = expressions;
} else {
expressionsTree = this.createSimpleFilteringTree(field, expressions);
@@ -197,11 +197,10 @@ export class IgxFilteringService implements OnDestroy {
const expressionsTreeForColumn = ExpressionsTreeUtil.find(this.grid.filteringExpressionsTree, field);
if (!expressionsTreeForColumn) {
throw new Error('Invalid condition or Expression Tree!');
- } else if (expressionsTreeForColumn instanceof FilteringExpressionsTree) {
+ } else if (isTree(expressionsTreeForColumn)) {
this.filter_internal(field, value, expressionsTreeForColumn, filteringIgnoreCase);
} else {
- const expressionForColumn = expressionsTreeForColumn as IFilteringExpression;
- this.filter_internal(field, value, expressionForColumn.condition, filteringIgnoreCase);
+ this.filter_internal(field, value, expressionsTreeForColumn.condition, filteringIgnoreCase);
}
}
const doneEventArgs = ExpressionsTreeUtil.find(this.grid.filteringExpressionsTree, field) as FilteringExpressionsTree;
@@ -496,9 +495,8 @@ export class IgxFilteringService implements OnDestroy {
}
for (const expr of expressionTree.filteringOperands) {
- if ((expr instanceof FilteringExpressionsTree)) {
- const exprTree = expr as FilteringExpressionsTree;
- if (exprTree.filteringOperands && exprTree.filteringOperands.length) {
+ if (isTree(expr)) {
+ if (expr.filteringOperands && expr.filteringOperands.length) {
return false;
}
} else {
@@ -532,9 +530,9 @@ export class IgxFilteringService implements OnDestroy {
insertAtIndex = -1,
createNewTree = false): FilteringExpressionsTree {
- let expressionsTree = conditionOrExpressionsTree instanceof FilteringExpressionsTree ?
- conditionOrExpressionsTree as IFilteringExpressionsTree : null;
- const condition = conditionOrExpressionsTree instanceof FilteringExpressionsTree ?
+ let expressionsTree = conditionOrExpressionsTree && 'operator' in conditionOrExpressionsTree ?
+ conditionOrExpressionsTree : null;
+ const condition = conditionOrExpressionsTree && 'operator' in conditionOrExpressionsTree ?
null : conditionOrExpressionsTree as IFilteringOperation;
let newExpressionsTree = filteringState as FilteringExpressionsTree;
@@ -545,7 +543,7 @@ export class IgxFilteringService implements OnDestroy {
}
if (condition) {
- const newExpression: IFilteringExpression = { fieldName, searchVal, condition, ignoreCase };
+ const newExpression: IFilteringExpression = { fieldName: fieldName, searchVal, condition, conditionName: condition.name, ignoreCase };
expressionsTree = new FilteringExpressionsTree(filteringState.operator, fieldName);
expressionsTree.filteringOperands.push(newExpression);
}
@@ -567,17 +565,16 @@ export class IgxFilteringService implements OnDestroy {
return false;
}
- if (expressions instanceof FilteringExpressionsTree) {
- const expressionsTree = expressions as FilteringExpressionsTree;
- if (expressionsTree.operator === FilteringLogic.Or) {
- const andOperatorsCount = this.getChildAndOperatorsCount(expressionsTree);
+ if (isTree(expressions)) {
+ if (expressions.operator === FilteringLogic.Or) {
+ const andOperatorsCount = this.getChildAndOperatorsCount(expressions);
// having more than one 'And' operator in the sub-tree means that the filter could not be represented without parentheses.
return andOperatorsCount > 1;
}
let isComplex = false;
- for (const operand of expressionsTree.filteringOperands) {
+ for (const operand of expressions.filteringOperands) {
isComplex = isComplex || this.isFilteringTreeComplex(operand);
}
@@ -592,12 +589,12 @@ export class IgxFilteringService implements OnDestroy {
let operand;
for (let i = 0; i < expressions.filteringOperands.length; i++) {
operand = expressions[i];
- if (operand instanceof FilteringExpressionsTree) {
+ if (operand && isTree(operand)) {
if (operand.operator === FilteringLogic.And) {
count++;
}
- count = count + this.getChildAndOperatorsCount(operand);
+ count = count + this.getChildAndOperatorsCount(operand as IFilteringExpressionsTree);
}
}
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
index 3051f5657ef..aa442dff801 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -37,7 +37,7 @@ import { Subject, pipe, fromEvent, animationFrameScheduler, merge } from 'rxjs';
import { takeUntil, first, filter, throttleTime, map, shareReplay, takeWhile } from 'rxjs/operators';
import { cloneArray, mergeObjects, compareMaps, resolveNestedPath, isObject, PlatformUtil } from '../core/utils';
import { GridColumnDataType } from '../data-operations/data-util';
-import { FilteringLogic, IFilteringExpression } from '../data-operations/filtering-expression.interface';
+import { FilteringLogic } from '../data-operations/filtering-expression.interface';
import { IGroupByRecord } from '../data-operations/groupby-record.interface';
import { IForOfDataChangingEventArgs, IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
import { IgxTextHighlightService } from '../directives/text-highlight/text-highlight.service';
@@ -178,6 +178,7 @@ import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../data-operations
import { IgxGridCellComponent } from './cell.component';
import { IgxGridValidationService } from './grid/grid-validation.service';
import { getCurrentResourceStrings } from '../core/i18n/resources';
+import { isTree, recreateTreeFromFields } from '../data-operations/expressions-tree-util';
interface IMatchInfoCache {
row: any;
@@ -1845,18 +1846,21 @@ export abstract class IgxGridBaseDirective implements GridType,
}
public set filteringExpressionsTree(value) {
- if (value && value instanceof FilteringExpressionsTree) {
- const val = (value as FilteringExpressionsTree);
- for (let index = 0; index < val.filteringOperands.length; index++) {
- if (!(val.filteringOperands[index] instanceof FilteringExpressionsTree)) {
- const newExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, val.filteringOperands[index].fieldName);
- newExpressionsTree.filteringOperands.push(val.filteringOperands[index] as IFilteringExpression);
- val.filteringOperands[index] = newExpressionsTree;
+ if (value && isTree(value)) {
+ for (let index = 0; index < value.filteringOperands.length; index++) {
+ if (!(isTree(value.filteringOperands[index]))) {
+ const newExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, value.filteringOperands[index].fieldName);
+ newExpressionsTree.filteringOperands.push(value.filteringOperands[index]);
+ value.filteringOperands[index] = newExpressionsTree;
}
}
value.type = FilteringExpressionsTreeType.Regular;
- this._filteringExpressionsTree = value;
+ if (value && this.columns) {
+ this._filteringExpressionsTree = recreateTreeFromFields(value, this.columns) as IFilteringExpressionsTree;
+ } else {
+ this._filteringExpressionsTree = value;
+ }
this.filteringPipeTrigger++;
this.filteringExpressionsTreeChange.emit(this._filteringExpressionsTree);
@@ -1900,9 +1904,9 @@ export abstract class IgxGridBaseDirective implements GridType,
return;
}
- if (value && value instanceof FilteringExpressionsTree) {
+ if (value && isTree(value)) {
value.type = FilteringExpressionsTreeType.Advanced;
- this._advancedFilteringExpressionsTree = value;
+ this._advancedFilteringExpressionsTree = recreateTreeFromFields(value, this.columns) as IFilteringExpressionsTree;
this.filteringPipeTrigger++;
} else {
this._advancedFilteringExpressionsTree = null;
@@ -6600,6 +6604,9 @@ export abstract class IgxGridBaseDirective implements GridType,
.filter((c) => c.pinned);
this._unpinnedColumns = newColumns.filter((c) => !c.pinned);
this._columns = newColumns;
+ if (this._columns && this._filteringExpressionsTree) {
+ this._filteringExpressionsTree = recreateTreeFromFields(this._filteringExpressionsTree, this.columns) as IFilteringExpressionsTree;
+ }
this.resetCaches();
}
@@ -6661,6 +6668,9 @@ export abstract class IgxGridBaseDirective implements GridType,
this.autogenerateColumns();
} else {
this._columns = this.getColumnList();
+ if (this._columns && this._filteringExpressionsTree) {
+ this._filteringExpressionsTree = recreateTreeFromFields(this._filteringExpressionsTree, this._columns) as IFilteringExpressionsTree;
+ }
}
this.initColumns(this._columns, (col: IgxColumnComponent) => this.columnInit.emit(col));
diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts
index 964424676f4..47aa02b7bd0 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts
@@ -12,7 +12,6 @@ import { VirtualGridComponent, NoScrollsComponent,
import { GridFunctions } from '../../test-utils/grid-functions.spec';
import { TestNgZone } from '../../test-utils/helper-utils.spec';
import { CellType } from '../common/grid.interface';
-import { NgFor } from '@angular/common';
import { IGridCellEventArgs, IgxColumnComponent } from '../public_api';
describe('IgxGrid - Cell component #grid', () => {
@@ -406,19 +405,21 @@ describe('IgxGrid - Cell component #grid', () => {
@Component({
template: `
-
-
+ @for (c of columns; track c) {
+
+
+ }
`,
styleUrls: ['../../test-utils/grid-cell-style-testing.scss'],
- imports: [IgxGridComponent, IgxColumnComponent, NgFor]
+ imports: [IgxGridComponent, IgxColumnComponent]
})
export class ConditionalCellStyleTestComponent implements OnInit {
@ViewChild('grid', { static: true }) public grid: IgxGridComponent;
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts
index fd9c04de40f..9e25636960f 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts
@@ -26,7 +26,7 @@ const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid-th__title';
const GRID_COL_GROUP_THEAD_TITLE_CLASS = 'igx-grid-thead__title';
const GRID_COL_GROUP_THEAD_GROUP_CLASS = 'igx-grid-thead__group';
-
+
describe('IgxGrid - multi-column headers #grid', () => {
let fixture: ComponentFixture
; let grid: IgxGridComponent; let componentInstance;
@@ -76,7 +76,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
const headerHeight = grid.nativeElement
.querySelector("igx-grid-header-row")
.getBoundingClientRect().height;
-
+
expect(Math.round(headerHeight)).toEqual(expectedGridHeaderHeight);
});
@@ -1112,8 +1112,9 @@ describe('IgxGrid - multi-column headers #grid', () => {
grAdressInf.pinned = true;
fixture.detectChanges();
- // Verify group and all its children are not pinned
+ // Verify group and all its children are pinned
testColumnPinning(grAdressInf, true);
+ expect(grid.pinnedColumnsCount).toEqual(10);
expect(grid.getCellByColumn(0, 'ID')).toBeDefined();
expect(grid.getCellByColumn(0, 'Country')).toBeDefined();
@@ -1828,4 +1829,4 @@ class NestedColGroupsTests {
'slaveColGroup', masterColGroupChildrenCount);
}
}
-
+
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts
index b58b5f02b41..b510df76d26 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts
@@ -11,7 +11,6 @@ import { MultiColumnHeadersComponent } from '../../test-utils/grid-samples.spec'
import { configureTestSuite } from '../../test-utils/configure-suite';
import { GridFunctions } from '../../test-utils/grid-functions.spec';
import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective } from '../columns/templates.directive';
-import { NgFor } from '@angular/common';
import { IgxAvatarComponent } from '../../avatar/avatar.component';
import { IColumnResizeEventArgs, IgxColumnComponent } from '../public_api';
import { Size } from "../common/enums";
@@ -961,7 +960,7 @@ export class GridFeaturesComponent {
@Component({
template: GridTemplateStrings.declareGrid(`height="800px"`, ``, ColumnDefinitions.resizableColsComponent),
- imports: [IgxGridComponent, IgxColumnComponent, NgFor]
+ imports: [IgxGridComponent, IgxColumnComponent]
})
export class NullColumnsComponent implements OnInit {
@ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent;
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts
index a13f5c76a37..a4287723f28 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts
@@ -1,7 +1,7 @@
import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
import { TestBed, fakeAsync, tick, waitForAsync, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import { getLocaleCurrencySymbol, NgFor, registerLocaleData } from '@angular/common';
+import { getLocaleCurrencySymbol, registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeJa from '@angular/common/locales/ja';
@@ -1662,7 +1662,7 @@ describe('IgxGrid - Column properties #grid', () => {
@Component({
template: GridTemplateStrings.declareGrid('', '', ColumnDefinitions.iterableComponent),
- imports: [IgxGridComponent, IgxColumnComponent, NgFor]
+ imports: [IgxGridComponent, IgxColumnComponent]
})
export class ColumnsFromIterableComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1688,7 +1688,7 @@ interface IColumnConfig {
`,
- imports: [IgxGridComponent, IgxColumnComponent, NgFor, IgxButtonDirective]
+ imports: [IgxGridComponent, IgxColumnComponent, IgxButtonDirective]
})
export class ResizableColumnsComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1738,10 +1738,12 @@ export class TemplatedColumnsComponent {
@Component({
template: `
-
-
+ @for (field of columns; track field) {
+
+
+ }
@@ -1760,7 +1762,7 @@ export class TemplatedColumnsComponent {
{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}
`,
- imports: [IgxGridComponent, IgxColumnComponent, NgFor, IgxSummaryTemplateDirective]
+ imports: [IgxGridComponent, IgxColumnComponent, IgxSummaryTemplateDirective]
})
export class TemplatedInputColumnsComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
index 99cd472e085..e241c39710b 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
@@ -1,72 +1,84 @@
- {{ grid.resourceStrings.igx_grid_pinned_row_indicator }}
+ @if (displayPinnedChip) {
+ {{ grid.resourceStrings.igx_grid_pinned_row_indicator }}
+ }
- {{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === "number"
- ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
- ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'
- ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'
- ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}
+ @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {
+
+ {{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === "number"
+ ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
+ ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'
+ ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'
+ ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}
+ }
-
-
- ![]()
+ @if (column.dataType === 'boolean' && !this.formatter) {
+
+
+ }
+ @if (column.dataType === 'image') {
+ ![]()
+ }
- {{
- value ? value : (column.header || column.field)
- }}
+ @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {
+
+ {{ value ? value : (column.header || column.field) }}
+
+ }
-
-
-
-
-
-
+ @if (column.dataType === 'string' || column.dataType === 'image') {
+
+
+
+
+
+ }
+ @if (column.dataType === 'number') {
-
-
-
-
-
-
-
-
-
-
-
-
+ }
+ @if (column.dataType === 'boolean') {
+
+
+
+ }
+ @if (column.dataType === 'date') {
+
+
+
+
+ }
+ @if (column.dataType === 'time') {
+
+
+
+ }
+ @if (column.dataType === 'dateTime') {
-
-
+ }
+ @if (column.dataType === 'currency') {
- {{ currencyCodeSymbol }}
+ @if (grid.currencyPositionLeft) {
+ {{ currencyCodeSymbol }}
+ }
- {{ currencyCodeSymbol }}
+ @if (!grid.currencyPositionLeft) {
+ {{ currencyCodeSymbol }}
+ }
-
-
+ }
+ @if (column.dataType === 'percent') {
{{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }}
-
+ }
-
+@if (showExpanderIndicator) {
-
+}
-
+@if (isInvalid) {
-
+}
@@ -199,25 +221,39 @@
-
- {{grid.resourceStrings.igx_grid_required_validation_error}}
-
-
- {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}
-
-
- {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}
-
-
- {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}
-
-
- {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}
-
-
- {{grid.resourceStrings.igx_grid_email_validation_error }}
-
-
- {{grid.resourceStrings.igx_grid_pattern_validation_error}}
-
+ @if (formGroup?.get(column?.field).errors?.['required']) {
+
+ {{grid.resourceStrings.igx_grid_required_validation_error}}
+
+ }
+ @if (formGroup?.get(column?.field).errors?.['minlength']) {
+
+ {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}
+
+ }
+ @if (formGroup?.get(column?.field).errors?.['maxlength']) {
+
+ {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}
+
+ }
+ @if (formGroup?.get(column?.field).errors?.['min']) {
+
+ {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}
+
+ }
+ @if (formGroup?.get(column?.field).errors?.['max']) {
+
+ {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}
+
+ }
+ @if (formGroup?.get(column?.field).errors?.['email']) {
+
+ {{grid.resourceStrings.igx_grid_email_validation_error }}
+
+ }
+ @if (formGroup?.get(column?.field).errors?.['pattern']) {
+
+ {{grid.resourceStrings.igx_grid_pattern_validation_error}}
+
+ }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts
index aa9352b9450..19e4bcd005b 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts
@@ -12,7 +12,7 @@ import {
} from '@angular/core';
import { IgxGridCellComponent } from '../cell.component';
import { PlatformUtil } from '../../core/utils';
-import { DOCUMENT, NgIf, NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common';
+import { DOCUMENT, NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common';
import { IgxGridSelectionService } from '../selection/selection.service';
import { HammerGesturesManager } from '../../core/touch';
import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
@@ -39,7 +39,7 @@ import { IgxChipComponent } from '../../chips/chip.component';
selector: 'igx-expandable-grid-cell',
templateUrl: 'expandable-cell.component.html',
providers: [HammerGesturesManager],
- imports: [NgIf, IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe]
+ imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe]
})
export class IgxGridExpandableCellComponent extends IgxGridCellComponent implements OnInit {
/**
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-editing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-cell-editing.spec.ts
index cae4b6c5753..d8c15d44868 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-editing.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-cell-editing.spec.ts
@@ -274,7 +274,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
expect(firstCell.editMode).toBeTruthy();
}));
- it('should end cell editing when clearing or applying advanced filter', () => {
+ it('should end cell editing when clearing or applying advanced filter', fakeAsync(() => {
const cell = grid.gridAPI.get_cell_by_index(0, 'fullName');
// Enter cell edit mode
@@ -310,7 +310,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
fixture.detectChanges();
expect(cell.editMode).toBe(false);
- });
+ }));
it('should focus the first cell when editing mode is cell', fakeAsync(() => {
const cell = grid.gridAPI.get_cell_by_index(0, 'fullName');
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
index 59df53aa7e7..055b7b63ac0 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
@@ -1,14 +1,14 @@
import { fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IgxGridComponent } from './grid.component';
-import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
+import { UIInteractions } from '../../test-utils/ui-interactions.spec';
import { configureTestSuite } from '../../test-utils/configure-suite';
import {
IgxNumberFilteringOperand,
IgxStringFilteringOperand
} from '../../data-operations/filtering-condition';
import { GridFunctions } from '../../test-utils/grid-functions.spec';
-import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
+import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
import {
IgxGridAdvancedFilteringColumnGroupComponent,
@@ -19,20 +19,15 @@ import {
IgxGridAdvancedFilteringDynamicColumnsComponent,
IgxGridAdvancedFilteringWithToolbarComponent
} from '../../test-utils/grid-samples.spec';
-import { ControlsFunction } from '../../test-utils/controls-functions.spec';
import { FormattedValuesFilteringStrategy } from '../../data-operations/filtering-strategy';
import { IgxHierGridExternalAdvancedFilteringComponent } from '../../test-utils/hierarchical-grid-components.spec';
import { IgxHierarchicalGridComponent } from '../hierarchical-grid/public_api';
import { IFilteringEventArgs, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent } from '../public_api';
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
+import { QueryBuilderFunctions } from '../../query-builder/query-builder-functions.spec';
import { By } from '@angular/platform-browser';
import { IgxDateTimeEditorDirective } from '../../directives/date-time-editor/date-time-editor.directive';
-
-const ADVANCED_FILTERING_OPERATOR_LINE_AND_CSS_CLASS = 'igx-filter-tree__line--and';
-const ADVANCED_FILTERING_OPERATOR_LINE_OR_CSS_CLASS = 'igx-filter-tree__line--or';
-const ADVANCED_FILTERING_OPERATOR_LINE_SELECTED_CSS_CLASS = 'igx-filter-tree__line--selected';
-const ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS = 'igx-filter-tree__expression-item';
-const CHIP_SELECT_CLASS = '.igx-chip__select';
+import { QueryBuilderSelectors } from '../../query-builder/query-builder.common';
describe('IgxGrid - Advanced Filtering #grid - ', () => {
configureTestSuite((() => {
@@ -85,13 +80,15 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
+ const advFilteringDialog = GridFunctions.getAdvancedFilteringComponent(fix);
+
// Verify AF dialog is opened.
- expect(GridFunctions.getAdvancedFilteringComponent(fix)).not.toBeNull();
+ expect(advFilteringDialog).not.toBeNull();
+ expect(advFilteringDialog.querySelector('igx-query-builder')).not.toBeNull();
// Verify there are not filters present and that the default text is shown.
expect(grid.advancedFilteringExpressionsTree).toBeUndefined();
- expect(GridFunctions.getAdvancedFilteringTreeRootGroup(fix)).toBeNull();
- expect(GridFunctions.getAdvancedFilteringEmptyPrompt(fix)).not.toBeNull();
+ QueryBuilderFunctions.verifyRootAndSubGroupExpressionsCount(fix, 0, 0);
// Close Advanced Filtering dialog.
GridFunctions.clickAdvancedFilteringCancelButton(fix);
@@ -123,19 +120,19 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ // Click the initial 'Add Condition' button of the query builder.
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
// Populate edit inputs.
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
- let input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
+ let input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
UIInteractions.clickAndSendInputElementValue(input, 'ign', fix); // Type filter value.
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
fix.detectChanges();
// Close dialog through API.
@@ -154,15 +151,15 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- // Double-click the existing chip to enter edit mode.
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [0], true);
+ // Click the existing chip to enter edit mode.
+ QueryBuilderFunctions.clickQueryBuilderTreeExpressionChip(fix, [0]);
tick(50);
fix.detectChanges();
// Edit the filter value.
- input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+ input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
UIInteractions.clickAndSendInputElementValue(input, 'some non-existing value', fix); // Type filter value.
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
fix.detectChanges();
// Close dialog through API.
@@ -173,519 +170,79 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
// Verify AF dialog is closed.
expect(GridFunctions.getAdvancedFilteringComponent(fix)).toBeNull();
// Verify the filter changes are NOT applied.
- expect(grid.filteredData.length).toEqual(2);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
- expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('Ignite UI for Angular');
- }));
-
- it('Should show/hide initial adding buttons depending on the existence of groups.', fakeAsync(() => {
- // Open Advanced Filtering dialog.
- GridFunctions.clickAdvancedFilteringButton(fix);
- fix.detectChanges();
-
- // Verify that the initial buttons are visible.
- expect(GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix).length).toBe(2);
-
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- // Verify that the initial buttons are not visible.
- expect(GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix).length).toBe(0);
-
- // Discard the new group and verify that the initial buttons are visible.
- GridFunctions.clickAdvancedFilteringExpressionCloseButton(fix);
- fix.detectChanges();
- expect(GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix).length).toBe(2);
-
- // Click the initial 'Add Or Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 1);
- tick(100);
- fix.detectChanges();
-
- // Verify that the initial buttons are not visible.
- expect(GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix).length).toBe(0);
- }));
-
- it('Should correctly initialize a newly added \'And\' group.', fakeAsync(() => {
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- // Verify there is a new root group, which is empty.
- const group = GridFunctions.getAdvancedFilteringTreeRootGroup(fix);
- expect(group).not.toBeNull('There is no root group.');
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(group).length).toBe(0, 'The group has children.');
-
- // Verify the operator line of the root group is an 'And' line.
- verifyOperatorLine(GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix), 'and');
-
- // Verify the enabled/disabled state of each input of the expression in edit mode.
- verifyEditModeExpressionInputStates(fix, true, false, false, false);
-
- // Verify the edit inputs are empty.
- verifyEditModeExpressionInputValues(fix, '', '', '');
-
- // Verify adding buttons are disabled.
- const buttons = GridFunctions.getAdvancedFilteringTreeRootGroupButtons(fix, 0);
- for (const button of buttons) {
- ControlsFunction.verifyButtonIsDisabled(button);
- }
- }));
-
- it('Should correctly initialize a newly added \'Or\' group.', fakeAsync(() => {
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Click the initial 'Add Or Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 1);
- tick(100);
- fix.detectChanges();
-
- // Verify there is a new root group, which is empty.
- const group = GridFunctions.getAdvancedFilteringTreeRootGroup(fix);
- expect(group).not.toBeNull('There is no root group.');
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(group).length).toBe(0, 'The group has children.');
-
- // Verify the operator line of the root group is an 'Or' line.
- verifyOperatorLine(GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix), 'or');
-
- // Verify the enabled/disabled state of each input of the expression in edit mode.
- verifyEditModeExpressionInputStates(fix, true, false, false, false);
-
- // Verify the edit inputs are empty.
- verifyEditModeExpressionInputValues(fix, '', '', '');
-
- // Verify adding buttons are disabled.
- const buttons = GridFunctions.getAdvancedFilteringTreeRootGroupButtons(fix, 0);
- for (const button of buttons) {
- ControlsFunction.verifyButtonIsDisabled(button);
- }
- }));
-
- it('Should add a new group through initial adding button and filter by it.', fakeAsync(() => {
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- // Verify the enabled/disabled state of each input of the expression in edit mode.
- verifyEditModeExpressionInputStates(fix, true, false, false, false);
-
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- verifyEditModeExpressionInputStates(fix, true, true, false, false);
-
- selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
- verifyEditModeExpressionInputStates(fix, true, true, true, false);
-
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, 'ign', fix); // Type filter value.
- tick();
- fix.detectChanges();
- verifyEditModeExpressionInputStates(fix, true, true, true, true);
-
- // Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
- fix.detectChanges();
-
- // Verify the new expression has been added to the group.
- const group = GridFunctions.getAdvancedFilteringTreeRootGroup(fix);
- expect(GridFunctions.getAdvancedFilteringTreeChildExpressions(group).length).toBe(1, 'Incorrect children count.');
-
- // Apply the filters.
- GridFunctions.clickAdvancedFilteringApplyButton(fix);
- fix.detectChanges();
-
- // Verify the filter results.
- expect(grid.filteredData.length).toEqual(2);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
- expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('Ignite UI for Angular');
- }));
-
- it('Should update the Advanced Filtering button in toolbar when (filtering)/(clear filtering).',
- fakeAsync(() => {
- // Verify that the advanced filtering button indicates there are no filters.
- let advFilterBtn = GridFunctions.getAdvancedFilteringButton(fix);
- expect(Array.from(advFilterBtn.children).some(c => (c as any).classList.contains('igx-adv-filter--column-number')))
- .toBe(false, 'Button indicates there is active filtering.');
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- // Populate edit inputs.
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, 'angular', fix); // Type filter value.
- // Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
- fix.detectChanges();
-
- // Apply the filters.
- GridFunctions.clickAdvancedFilteringApplyButton(fix);
- fix.detectChanges();
-
- // Verify that the advanced filtering button indicates there are filters.
- advFilterBtn = GridFunctions.getAdvancedFilteringButton(fix);
- expect(Array.from(advFilterBtn.children).some(c => (c as any).classList.contains('igx-adv-filter--column-number')))
- .toBe(true, 'Button indicates there is no active filtering.');
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Clear the filters.
- GridFunctions.clickAdvancedFilteringClearFilterButton(fix);
- fix.detectChanges();
-
- // Close the dialog.
- GridFunctions.clickAdvancedFilteringApplyButton(fix);
- fix.detectChanges();
-
- // Verify that the advanced filtering button indicates there are no filters.
- advFilterBtn = GridFunctions.getAdvancedFilteringButton(fix);
- expect(Array.from(advFilterBtn.children).some(c => (c as any).classList.contains('igx-adv-filter--column-number')))
- .toBe(false, 'Button indicates there is active filtering.');
- }));
-
- it('The Clear/Cancel/Apply buttons type should be set to "button"', () => {
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Get Clear/Cancel/Apply buttons types.
- const clearButtonType = GridFunctions.getAdvancedFilteringClearFilterButton(fix).getAttributeNode('type').value;
- const cancelButtonType = GridFunctions.getAdvancedFilteringCancelButton(fix).getAttributeNode('type').value;
- const applyButtonType = GridFunctions.getAdvancedFilteringApplyButton(fix).getAttributeNode('type').value;
-
- const expectedButtonType = 'button';
-
- // Verify buttons type is set to "button".
- expect(clearButtonType).toBe(expectedButtonType, 'Clear button type is not "button"');
- expect(cancelButtonType).toBe(expectedButtonType, 'Cancel button type is not "button"');
- expect(applyButtonType).toBe(expectedButtonType, 'Apply button type is not "button"');
- });
-
- it('Should correctly display header name in select dropdown and in chip expression.', fakeAsync(() => {
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- // Open column dropdown and verify header name is displayed for first item
- GridFunctions.clickAdvancedFilteringColumnSelect(fix);
- fix.detectChanges();
- const dropdownItems = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix);
- expect(dropdownItems[0].innerText).toBe('HeaderID');
-
- selectColumnInEditModeExpression(fix, 0); // Select 'HeaderID' column
- selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, 'a', fix); // Type filter value.
-
- // Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
- fix.detectChanges();
-
- // Verify header name in chip text
- verifyExpressionChipContent(fix, [0], 'HeaderID', 'Contains', 'a');
-
- // Apply the filters.
- GridFunctions.clickAdvancedFilteringApplyButton(fix);
- fix.detectChanges();
-
- // Close Advanced Filtering dialog.
- GridFunctions.clickAdvancedFilteringCancelButton(fix);
- tick(100);
- fix.detectChanges();
-
- // Open Advanced Filtering dialog again.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify header name in chip text
- verifyExpressionChipContent(fix, [0], 'HeaderID', 'Contains', 'a');
- }));
-
- it('Should correctly filter by a \'string\' column through UI.', fakeAsync(() => {
- // Test prerequisites
- grid.height = '800px';
- fix.detectChanges();
- tick(50);
-
- // Verify no filters are present.
- expect(grid.filteredData).toBeNull();
- expect(grid.rowList.length).toBe(8);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
- expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
-
- // Open Advanced Filtering dialog.
- GridFunctions.clickAdvancedFilteringButton(fix);
- fix.detectChanges();
-
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, 'ign', fix); // Type filter value.
-
- // Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
- fix.detectChanges();
-
- // Apply the filters.
- GridFunctions.clickAdvancedFilteringApplyButton(fix);
- fix.detectChanges();
-
- // Verify the filter results.
- expect(grid.filteredData.length).toEqual(2);
- expect(grid.rowList.length).toBe(2);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
- expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('Ignite UI for Angular');
- }));
-
- it('Should correctly filter by a \'Greater Than\' with \'number\' column through UI.', fakeAsync(() => {
- // Test prerequisites
- grid.height = '800px';
- fix.detectChanges();
- tick(50);
-
- // Verify no filters are present.
- expect(grid.filteredData).toBeNull();
- expect(grid.rowList.length).toBe(8);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
- expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
-
- // Open Advanced Filtering dialog.
- GridFunctions.clickAdvancedFilteringButton(fix);
- fix.detectChanges();
-
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- selectColumnInEditModeExpression(fix, 2); // Select 'Downloads' column.
- selectOperatorInEditModeExpression(fix, 2); // Select 'Greater Than' operator.
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, '20', fix); // Type filter value.
-
- // Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
- fix.detectChanges();
-
- // Apply the filters.
- GridFunctions.clickAdvancedFilteringApplyButton(fix);
- fix.detectChanges();
-
- // Verify the filter results.
- expect(grid.filteredData.length).toEqual(5);
- expect(grid.rowList.length).toBe(5);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
- expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
- }));
-
- it('Should correctly filter by a \'Equals\' with \'number\' column through UI.', fakeAsync(() => {
- // Test prerequisites
- grid.height = '800px';
- fix.detectChanges();
- tick(50);
-
- // Verify no filters are present.
- expect(grid.filteredData).toBeNull();
- expect(grid.rowList.length).toBe(8);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
- expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
-
- // Open Advanced Filtering dialog.
- GridFunctions.clickAdvancedFilteringButton(fix);
- fix.detectChanges();
-
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- selectColumnInEditModeExpression(fix, 2); // Select 'Downloads' column.
- selectOperatorInEditModeExpression(fix, 0); // Select 'Equals' operator.
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, '127', fix); // Type filter value.
-
- // Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
- fix.detectChanges();
-
- // Apply the filters.
- GridFunctions.clickAdvancedFilteringApplyButton(fix);
- fix.detectChanges();
-
- // Verify the filter results.
- expect(grid.filteredData.length).toEqual(1);
- expect(grid.rowList.length).toBe(1);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('NetAdvantage');
- }));
-
- it('Should correctly filter by a \'boolean\' column through UI.', fakeAsync(() => {
- // Test prerequisites
- grid.height = '800px';
- fix.detectChanges();
- tick(50);
-
- // Verify no filters are present.
- expect(grid.filteredData).toBeNull();
- expect(grid.rowList.length).toBe(8);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
- expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
-
- // Open Advanced Filtering dialog.
- GridFunctions.clickAdvancedFilteringButton(fix);
- fix.detectChanges();
-
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- selectColumnInEditModeExpression(fix, 3); // Select 'Released' column.
- selectOperatorInEditModeExpression(fix, 1); // Select 'True' operator.
- verifyEditModeExpressionInputStates(fix, true, true, false, true); // Third input should be disabled for unary operators.
-
- // Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
- fix.detectChanges();
-
- // Apply the filters.
- GridFunctions.clickAdvancedFilteringApplyButton(fix);
- fix.detectChanges();
-
- // Verify the filter results.
- expect(grid.filteredData.length).toEqual(3);
- expect(grid.rowList.length).toBe(3);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('NetAdvantage');
- expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe(null);
- }));
-
- it('Should correctly filter by a \'date\' column through UI with unary operator.', fakeAsync(() => {
- // Test prerequisites
- grid.height = '800px';
- fix.detectChanges();
- tick(50);
-
- // Verify no filters are present.
- expect(grid.filteredData).toBeNull();
- expect(grid.rowList.length).toBe(8);
+ expect(grid.filteredData.length).toEqual(2);
expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
- expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
+ expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('Ignite UI for Angular');
+ }));
+
+ it('Should update the Advanced Filtering button in toolbar when (filtering)/(clear filtering).', fakeAsync(() => {
+ // Verify that the advanced filtering button indicates there are no filters.
+ let advFilterBtn = GridFunctions.getAdvancedFilteringButton(fix);
+ expect(Array.from(advFilterBtn.children).some(c => (c as any).classList.contains('igx-adv-filter--column-number')))
+ .toBe(false, 'Button indicates there is active filtering.');
// Open Advanced Filtering dialog.
- GridFunctions.clickAdvancedFilteringButton(fix);
+ grid.openAdvancedFilteringDialog();
fix.detectChanges();
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ // Click the initial 'Add Condition' button of the query builder.
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
- selectColumnInEditModeExpression(fix, 4); // Select 'ReleaseDate' column.
- selectOperatorInEditModeExpression(fix, 9); // Select 'This Year' operator.
- verifyEditModeExpressionInputStates(fix, true, true, false, true); // Third input should be disabled for unary operators.
- const input = GridFunctions.getAdvancedFilteringValueInput(fix, true);
- input.click();
- fix.detectChanges();
+ // Populate edit inputs.
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
+ const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
+ UIInteractions.clickAndSendInputElementValue(input, 'angular', fix); // Type filter value.
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
fix.detectChanges();
// Apply the filters.
GridFunctions.clickAdvancedFilteringApplyButton(fix);
fix.detectChanges();
- // Verify the filter results.
- const expectedData = fix.componentInstance.data.filter(r =>
- r.ReleaseDate && r.ReleaseDate.getFullYear() === (new Date()).getFullYear());
- expect(grid.filteredData.length).toEqual(expectedData.length);
- expect(grid.rowList.length).toBe(expectedData.length);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe(expectedData[0].ProductName);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe(expectedData[1].ProductName);
- }));
-
- it('Should correctly filter by a \'date\' column through UI with value from calendar.', fakeAsync(() => {
- // Test prerequisites
- grid.height = '800px';
- fix.detectChanges();
- tick(50);
-
- // Verify no filters are present.
- expect(grid.filteredData).toBeNull();
- expect(grid.rowList.length).toBe(8);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
- expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
+ // Verify that the advanced filtering button indicates there are filters.
+ advFilterBtn = GridFunctions.getAdvancedFilteringButton(fix);
+ expect(Array.from(advFilterBtn.children).some(c => (c as any).classList.contains('igx-adv-filter--column-number')))
+ .toBe(true, 'Button indicates there is no active filtering.');
// Open Advanced Filtering dialog.
- GridFunctions.clickAdvancedFilteringButton(fix);
- fix.detectChanges();
-
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
+ grid.openAdvancedFilteringDialog();
fix.detectChanges();
- selectColumnInEditModeExpression(fix, 4); // Select 'ReleaseDate' column.
- selectOperatorInEditModeExpression(fix, 0); // Select 'Equals' operator.
- verifyEditModeExpressionInputStates(fix, true, true, true, false);
- const input = GridFunctions.getAdvancedFilteringValueInput(fix, true);
- input.click();
+ // Clear the filters.
+ GridFunctions.clickAdvancedFilteringClearFilterButton(fix);
fix.detectChanges();
- // Click on 'today' item in calendar.
- const calendar = GridFunctions.getAdvancedFilteringCalendar(fix);
- const todayItem = calendar.querySelector('.igx-days-view__date--current');
- todayItem.firstChild.click();
- tick(100);
+ // Close the dialog.
+ GridFunctions.clickAdvancedFilteringApplyButton(fix);
fix.detectChanges();
- verifyEditModeExpressionInputStates(fix, true, true, true, true);
+ // Verify that the advanced filtering button indicates there are no filters.
+ advFilterBtn = GridFunctions.getAdvancedFilteringButton(fix);
+ expect(Array.from(advFilterBtn.children).some(c => (c as any).classList.contains('igx-adv-filter--column-number')))
+ .toBe(false, 'Button indicates there is active filtering.');
+ }));
- // Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ it('The Clear/Cancel/Apply buttons type should be set to "button"', fakeAsync(() => {
+ // Open Advanced Filtering dialog.
+ grid.openAdvancedFilteringDialog();
fix.detectChanges();
- // Apply the filters.
- GridFunctions.clickAdvancedFilteringApplyButton(fix);
- fix.detectChanges();
+ // Get Clear/Cancel/Apply buttons types.
+ const clearButtonType = GridFunctions.getAdvancedFilteringClearFilterButton(fix).getAttributeNode('type').value;
+ const cancelButtonType = GridFunctions.getAdvancedFilteringCancelButton(fix).getAttributeNode('type').value;
+ const applyButtonType = GridFunctions.getAdvancedFilteringApplyButton(fix).getAttributeNode('type').value;
- // Verify the filter results.
- expect(grid.filteredData.length).toEqual(1);
- expect(grid.rowList.length).toBe(1);
- expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 0).value.toString()).toBe('8');
+ const expectedButtonType = 'button';
- flush();
+ // Verify buttons type is set to "button".
+ expect(clearButtonType).toBe(expectedButtonType, 'Clear button type is not "button"');
+ expect(cancelButtonType).toBe(expectedButtonType, 'Cancel button type is not "button"');
+ expect(applyButtonType).toBe(expectedButtonType, 'Apply button type is not "button"');
}));
it('Should emit the filtering event when applying filters.', fakeAsync(() => {
@@ -695,19 +252,19 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ // Click the initial 'Add Condition' button of the query builder.
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
// Populate edit inputs.
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, 'ign', fix); // Type filter value.
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
+ const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
+ UIInteractions.clickAndSendInputElementValue(input, 'angular', fix); // Type filter value.
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
fix.detectChanges();
// Apply the filters.
@@ -732,19 +289,19 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ // Click the initial 'Add Condition' button of the query builder.
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
// Populate edit inputs.
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, 'ign', fix); // Type filter value.
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
+ const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
+ UIInteractions.clickAndSendInputElementValue(input, 'angular', fix); // Type filter value.
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
fix.detectChanges();
// Apply the filters.
@@ -768,19 +325,19 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ // Click the initial 'Add Condition' button of the query builder.
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
// Populate edit inputs.
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, 'ign', fix); // Type filter value.
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
+ const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
+ UIInteractions.clickAndSendInputElementValue(input, 'angular', fix); // Type filter value.
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
fix.detectChanges();
// Apply the filters.
@@ -804,15 +361,18 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
// Apply advanced filter through API.
const tree = new FilteringExpressionsTree(FilteringLogic.And);
tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
+ fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
+ conditionName: 'greaterThan'
});
const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
orTree.filteringOperands.push({
fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains',
ignoreCase: true
});
orTree.filteringOperands.push({
fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains',
ignoreCase: true
});
tree.filteringOperands.push(orTree);
@@ -849,15 +409,18 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
// Apply advanced filter through API.
const tree = new FilteringExpressionsTree(FilteringLogic.And);
tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
+ fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
+ conditionName: 'greaterThan'
});
const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
orTree.filteringOperands.push({
fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains',
ignoreCase: true
});
orTree.filteringOperands.push({
fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains',
ignoreCase: true
});
tree.filteringOperands.push(orTree);
@@ -875,21 +438,21 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
fix.detectChanges();
// Verfiy there is a root group with 'And' operator line and 2 children.
- const rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix);
+ const rootGroup = QueryBuilderFunctions.getQueryBuilderTreeRootGroup(fix);
expect(rootGroup).not.toBeNull();
- verifyOperatorLine(GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix), 'and');
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup).length).toBe(2);
+ QueryBuilderFunctions.verifyOperatorLine(QueryBuilderFunctions.getQueryBuilderTreeRootGroupOperatorLine(fix) as HTMLElement, 'and');
+ expect(QueryBuilderFunctions.getQueryBuilderTreeChildItems(rootGroup as HTMLElement).length).toBe(2);
// Verify the contnet of the first child (expression) of the root group.
- verifyExpressionChipContent(fix, [0], 'Downloads', 'Greater Than', '100');
+ QueryBuilderFunctions.verifyExpressionChipContent(fix, [1], 'Downloads', 'Greater Than', '100');
// Verify the content of the second child (group) of the root group.
- const group = GridFunctions.getAdvancedFilteringTreeItem(fix, [1]);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(group, false).length).toBe(2);
- verifyExpressionChipContent(fix, [1, 0], 'ProductName', 'Contains', 'angular');
- verifyExpressionChipContent(fix, [1, 1], 'ProductName', 'Contains', 'script');
+ const group = QueryBuilderFunctions.getQueryBuilderTreeItem(fix, [0]);
+ expect(QueryBuilderFunctions.getQueryBuilderTreeChildItems(group as HTMLElement, false).length).toBe(2);
+ QueryBuilderFunctions.verifyExpressionChipContent(fix, [0, 0], 'ProductName', 'Contains', 'angular');
+ QueryBuilderFunctions.verifyExpressionChipContent(fix, [0, 1], 'ProductName', 'Contains', 'script');
// Verify the operator line of the child group.
- verifyOperatorLine(GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [1]), 'or');
+ QueryBuilderFunctions.verifyOperatorLine(QueryBuilderFunctions.getQueryBuilderTreeGroupOperatorLine(fix, [0]) as HTMLElement, 'or');
// Close Advanced Filtering dialog.
GridFunctions.clickAdvancedFilteringCancelButton(fix);
@@ -906,8 +469,7 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
// Verify there are not filters present and that the default text is shown.
expect(grid.advancedFilteringExpressionsTree).toBeNull();
- expect(GridFunctions.getAdvancedFilteringTreeRootGroup(fix)).toBeNull();
- expect(GridFunctions.getAdvancedFilteringEmptyPrompt(fix)).not.toBeNull();
+ QueryBuilderFunctions.verifyRootAndSubGroupExpressionsCount(fix, 0, 0);
}));
it('Applying/Clearing filter through the UI should correctly update the API.', fakeAsync(() => {
@@ -927,48 +489,19 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- // Add a root 'and' group.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- // Populate edit inputs.
- selectColumnInEditModeExpression(fix, 2); // Select 'Downloads' column.
- selectOperatorInEditModeExpression(fix, 2); // Select 'Greater Than' operator.
- let input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, '100', fix); // Type filter value.
- // Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
- fix.detectChanges();
-
- // Add a child 'or' group.
- const addOrGroupBtn = GridFunctions.getAdvancedFilteringTreeRootGroupButtons(fix, 0)[2];
- addOrGroupBtn.click();
- tick(100);
- fix.detectChanges();
-
- // Populate edit inputs.
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
- input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, 'angular', fix); // Type filter value.
- // Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
- fix.detectChanges();
-
- // Add new expression to the child group.
- const addExpressionBtn = GridFunctions.getAdvancedFilteringTreeGroupButtons(fix, [1], 0)[0];
- addExpressionBtn.click();
+ // Click the initial 'Add Condition' button of the query builder.
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
// Populate edit inputs.
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
- input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
+ const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
UIInteractions.clickAndSendInputElementValue(input, 'script', fix); // Type filter value.
+
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
fix.detectChanges();
// Apply the filters.
@@ -1001,46 +534,19 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
}));
- it('Should discard the newly added group when clicking the \'close\' button of its initial condition.', fakeAsync(() => {
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- // Verify there is a new group and the initial buttons are not visible.
- expect(GridFunctions.getAdvancedFilteringTreeRootGroup(fix)).not.toBeNull();
- expect(GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix).length).toBe(0);
-
- // Populate edit inputs
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, 'ign', fix); // Type filter value.
-
- // Discard the populated expression, so the whole new group gets discarded.
- GridFunctions.clickAdvancedFilteringExpressionCloseButton(fix);
- fix.detectChanges();
-
- // Verify there are no groups in the dialog and the initial buttons are visible.
- expect(GridFunctions.getAdvancedFilteringTreeRootGroup(fix)).toBeNull();
- expect(GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix).length).toBe(2);
- }));
-
it('Should apply filters on Apply button click without prior Commit button click', fakeAsync(() => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ // Click the initial 'Add Condition' button of the query builder.
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+ // Populate edit inputs.
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
+ const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
UIInteractions.clickAndSendInputElementValue(input, 'ign', fix); // Type filter value.
GridFunctions.clickAdvancedFilteringApplyButton(fix);
@@ -1058,7 +564,8 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ // Click the initial 'Add Condition' button of the query builder.
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
@@ -1073,11 +580,12 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ // Click the initial 'Add Condition' button of the query builder.
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
GridFunctions.clickAdvancedFilteringApplyButton(fix);
tick(100);
@@ -1089,12 +597,13 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ // Click the initial 'Add Condition' button of the query builder.
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
GridFunctions.clickAdvancedFilteringApplyButton(fix);
tick(100);
@@ -1105,10 +614,6 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
}));
it('Column dropdown should contain only filterable columns.', fakeAsync(() => {
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
// Make the 'Downloads', 'Released' and 'ReleaseDate' columns non-filterable.
grid.getColumnByName('Downloads').filterable = false;
grid.getColumnByName('Released').filterable = false;
@@ -1116,126 +621,26 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.cdr.detectChanges();
tick(100);
- // Click the initial 'Add and Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- // Open column dropdown and verify that only filterable columns are present.
- GridFunctions.clickAdvancedFilteringColumnSelect(fix);
- fix.detectChanges();
- const dropdownItems = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix);
- expect(dropdownItems.length).toBe(4);
- expect(dropdownItems[0].innerText).toBe('HeaderID');
- expect(dropdownItems[1].innerText).toBe('ProductName');
- expect(dropdownItems[2].innerText).toBe('Another Field');
- }));
-
- it('Operator dropdown should contain operators based on the column\'s datatype (\'string\' or \'number\').', fakeAsync(() => {
// Open Advanced Filtering dialog.
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- // Add a new group.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- // Select 'string' type column ('ProductName').
- selectColumnInEditModeExpression(fix, 1);
- // Open the operator dropdown and verify they are 'string' specific.
- GridFunctions.clickAdvancedFilteringOperatorSelect(fix);
- fix.detectChanges();
- let dropdownValues: string[] = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix).map((x: any) => x.innerText);
- let expectedValues = ['Contains', 'Does Not Contain', 'Starts With', 'Ends With', 'Equals',
- 'Does Not Equal', 'Empty', 'Not Empty', 'Null', 'Not Null'];
- expect(dropdownValues).toEqual(expectedValues);
-
- // Close current dropdown by a random select.
- GridFunctions.clickAdvancedFilteringSelectDropdownItem(fix, 0);
- tick();
- fix.detectChanges();
-
- // Select 'number' type column ('Downloads').
- selectColumnInEditModeExpression(fix, 2);
- // Open the operator dropdown and verify they are 'number' specific.
- GridFunctions.clickAdvancedFilteringOperatorSelect(fix);
- fix.detectChanges();
- dropdownValues = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix).map((x: any) => x.innerText);
- expectedValues = ['Equals', 'Does Not Equal', 'Greater Than', 'Less Than', 'Greater Than Or Equal To',
- 'Less Than Or Equal To', 'Empty', 'Not Empty', 'Null', 'Not Null'];
- expect(dropdownValues).toEqual(expectedValues);
- }));
-
- it('Operator dropdown should contain operators based on the column\'s datatype (\'date\' or \'boolean\').', fakeAsync(() => {
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
+ const queryBuilderElement: HTMLElement = fix.debugElement.queryAll(By.css(`.${QueryBuilderSelectors.QUERY_BUILDER_TREE}`))[0].nativeElement;
- // Add a new group.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ // Click the initial 'Add Condition' button of the query builder.
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
- // Select 'date' type column ('ReleaseDate').
- selectColumnInEditModeExpression(fix, 4);
- // Open the operator dropdown and verify they are 'date' specific.
- GridFunctions.clickAdvancedFilteringOperatorSelect(fix);
- fix.detectChanges();
- let dropdownValues: string[] = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix).map((x: any) => x.innerText);
- let expectedValues = ['Equals', 'Does Not Equal', 'Before', 'After', 'Today', 'Yesterday',
- 'This Month', 'Last Month', 'Next Month', 'This Year', 'Last Year',
- 'Next Year', 'Empty', 'Not Empty', 'Null', 'Not Null'];
- expect(dropdownValues).toEqual(expectedValues);
-
- // Close current dropdown by a random select.
- GridFunctions.clickAdvancedFilteringSelectDropdownItem(fix, 0);
- tick();
- fix.detectChanges();
-
- // Select 'boolean' type column ('Released').
- selectColumnInEditModeExpression(fix, 3);
- // Open the operator dropdown and verify they are 'boolean' specific.
- GridFunctions.clickAdvancedFilteringOperatorSelect(fix);
- fix.detectChanges();
- dropdownValues = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix).map((x: any) => x.innerText);
- expectedValues = ['All', 'True', 'False', 'Empty', 'Not Empty', 'Null', 'Not Null'];
- expect(dropdownValues).toEqual(expectedValues);
- }));
-
- it('Should not commit and close currently edited condition when the \'close\' button is clicked.', fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
- });
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- verifyExpressionChipContent(fix, [0], 'Downloads', 'Greater Than', '100');
-
- // Edit the first expression in the inner 'or' group.
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [0], true); // Double-click the chip
- tick(200);
- fix.detectChanges();
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, '500', fix); // Type filter value.
-
- // Verify the edit mode container is visible.
- expect(GridFunctions.getAdvancedFilteringEditModeContainer(fix)).not.toBeNull();
-
- // Close the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCloseButton(fix);
+ // Open column dropdown and verify that only filterable columns are present.
+ QueryBuilderFunctions.clickQueryBuilderColumnSelect(fix);
fix.detectChanges();
-
- // Verify the edit mode container is no longer visible.
- expect(GridFunctions.getAdvancedFilteringEditModeContainer(fix)).toBeNull();
-
- verifyExpressionChipContent(fix, [0], 'Downloads', 'Greater Than', '100');
+ const dropdownItems = QueryBuilderFunctions.getQueryBuilderSelectDropdownItems(queryBuilderElement);
+ expect(dropdownItems.length).toBe(4);
+ expect((dropdownItems[0] as HTMLElement).innerText).toBe('HeaderID');
+ expect((dropdownItems[1] as HTMLElement).innerText).toBe('ProductName');
+ expect((dropdownItems[2] as HTMLElement).innerText).toBe('Another Field');
+ expect((dropdownItems[3] as HTMLElement).innerText).toBe('ReleaseTime');
}));
it('Should scroll the adding buttons into view when the add icon of a chip is clicked.', fakeAsync(() => {
@@ -1243,7 +648,7 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
const tree = new FilteringExpressionsTree(FilteringLogic.Or);
for (let index = 0; index < 30; index++) {
tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: index, condition: IgxNumberFilteringOperand.instance().condition('equals')
+ fieldName: 'Downloads', searchVal: index, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals'
});
}
grid.advancedFilteringExpressionsTree = tree;
@@ -1254,25 +659,25 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
fix.detectChanges();
// Scroll to the top.
- const exprContainer = GridFunctions.getAdvancedFilteringExpressionsContainer(fix);
+ const exprContainer = QueryBuilderFunctions.getQueryBuilderExpressionsContainer(fix);
tick(50);
exprContainer.scrollTop = 0;
// Hover the last visible expression chip
- const expressionItem = fix.nativeElement.querySelectorAll(`.${ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS}`)[9];
+ const expressionItem = fix.nativeElement.querySelectorAll(`.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM}`)[9];
expressionItem.dispatchEvent(new MouseEvent('mouseenter'));
tick();
fix.detectChanges();
// Click the add icon to display the adding buttons.
- GridFunctions.clickAdvancedFilteringTreeExpressionChipAddIcon(fix, [9]);
+ QueryBuilderFunctions.clickQueryBuilderTreeExpressionChipIcon(fix, [9], 'add');
fix.detectChanges();
tick(50);
// Verify the adding buttons are in view.
- const addingButtons = GridFunctions.getAdvancedFilteringTreeRootGroupButtons(fix, 0);
+ const addingButtons = QueryBuilderFunctions.getQueryBuilderTreeRootGroupButtons(fix, 0);
for (const addingButton of addingButtons) {
- verifyElementIsInExpressionsContainerView(fix, addingButton);
+ verifyElementIsInExpressionsContainerView(fix, addingButton as HTMLElement);
}
}));
@@ -1281,7 +686,7 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
const tree = new FilteringExpressionsTree(FilteringLogic.Or);
for (let index = 0; index < 30; index++) {
tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: index, condition: IgxNumberFilteringOperand.instance().condition('equals')
+ fieldName: 'Downloads', searchVal: index, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals'
});
}
grid.advancedFilteringExpressionsTree = tree;
@@ -1292,27 +697,28 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
fix.detectChanges();
// Scroll to the top.
- const exprContainer = GridFunctions.getAdvancedFilteringExpressionsContainer(fix);
+ const exprContainer = QueryBuilderFunctions.getQueryBuilderExpressionsContainer(fix);
tick(50);
exprContainer.scrollTop = 0;
// Hover the previous to last visible expression chip.
- const expressionItem = fix.nativeElement.querySelectorAll(`.${ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS}`)[8];
+ const expressionItem = fix.nativeElement.querySelectorAll(`.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM}`)[9];
expressionItem.dispatchEvent(new MouseEvent('mouseenter'));
tick();
fix.detectChanges();
// Click the add icon to display the adding buttons.
- GridFunctions.clickAdvancedFilteringTreeExpressionChipAddIcon(fix, [8]);
+ QueryBuilderFunctions.clickQueryBuilderTreeExpressionChipIcon(fix, [9], 'add');
+ fix.detectChanges();
tick(50);
// Click the 'add condition' button.
- const addCondButton = GridFunctions.getAdvancedFilteringTreeRootGroupButtons(fix, 0)[0];
+ const addCondButton = QueryBuilderFunctions.getQueryBuilderTreeRootGroupButtons(fix, 0)[0] as HTMLElement;
addCondButton.click();
fix.detectChanges();
// Verify the edit mode container (the one with the editing inputs) is in view.
- verifyElementIsInExpressionsContainerView(fix, GridFunctions.getAdvancedFilteringEditModeContainer(fix));
+ verifyElementIsInExpressionsContainerView(fix, QueryBuilderFunctions.getQueryBuilderEditModeContainer(fix, false) as HTMLElement);
}));
it('Should scroll to the expression when entering its edit mode.', fakeAsync(() => {
@@ -1320,7 +726,7 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
const tree = new FilteringExpressionsTree(FilteringLogic.Or);
for (let index = 0; index < 30; index++) {
tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: index, condition: IgxNumberFilteringOperand.instance().condition('equals')
+ fieldName: 'Downloads', searchVal: index, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals'
});
}
grid.advancedFilteringExpressionsTree = tree;
@@ -1331,73 +737,41 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
fix.detectChanges();
// Scroll to the top.
- const exprContainer = GridFunctions.getAdvancedFilteringExpressionsContainer(fix);
+ const exprContainer = QueryBuilderFunctions.getQueryBuilderExpressionsContainer(fix);
tick(50);
exprContainer.scrollTop = 0;
// Hover the last visible expression chip
- const expressionItem = fix.nativeElement.querySelectorAll(`.${ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS}`)[9];
+ const expressionItem = fix.nativeElement.querySelectorAll(`.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM}`)[9];
expressionItem.dispatchEvent(new MouseEvent('mouseenter'));
tick();
fix.detectChanges();
- // Click the edit icon to enter edit mode of the expression.
- GridFunctions.clickAdvancedFilteringTreeExpressionChipEditIcon(fix, [9]);
- tick(50);
-
- // Verify the edit mode container (the one with the editing inputs) is in view.
- verifyElementIsInExpressionsContainerView(fix, GridFunctions.getAdvancedFilteringEditModeContainer(fix));
- }));
-
- it('Should keep the context menu in view when scrolling the expressions container.', fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.Or);
- for (let index = 0; index < 20; index++) {
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: index, condition: IgxNumberFilteringOperand.instance().condition('equals')
- });
- }
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
+ // Click the chip to enter edit mode of the expression.
+ QueryBuilderFunctions.clickQueryBuilderTreeExpressionChip(fix, [9]);
fix.detectChanges();
-
- // Scroll to the top.
- const exprContainer = GridFunctions.getAdvancedFilteringExpressionsContainer(fix);
tick(50);
- exprContainer.scrollTop = 0;
-
- // Select the first two chips.
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [0]);
- fix.detectChanges();
-
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [1]);
- tick(200); // Await click timeout
- fix.detectChanges();
-
- // Scroll to the bottom.
- exprContainer.scrollTop = exprContainer.scrollHeight;
- // Verify that the context menu is correctly repositioned and in view.
- const contextMenu = GridFunctions.getAdvancedFilteringContextMenu(fix);
- verifyElementIsInExpressionsContainerView(fix, contextMenu);
+ // Verify the edit mode container (the one with the editing inputs) is in view.
+ verifyElementIsInExpressionsContainerView(fix, QueryBuilderFunctions.getQueryBuilderEditModeContainer(fix, false) as HTMLElement);
}));
it('Should clear all conditions and groups when the \'clear filter\' button is clicked.', fakeAsync(() => {
// Apply advanced filter through API.
const tree = new FilteringExpressionsTree(FilteringLogic.And);
tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
+ fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
+ conditionName: 'greaterThan'
});
const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
orTree.filteringOperands.push({
fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains',
ignoreCase: true
});
orTree.filteringOperands.push({
fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains',
ignoreCase: true
});
tree.filteringOperands.push(orTree);
@@ -1409,8 +783,7 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
fix.detectChanges();
// Verify there are filters in the dialog.
- expect(GridFunctions.getAdvancedFilteringTreeRootGroup(fix)).not.toBeNull();
- expect(GridFunctions.getAdvancedFilteringEmptyPrompt(fix)).toBeNull();
+ expect(QueryBuilderFunctions.getQueryBuilderTreeRootGroup(fix)).not.toBeNull();
// Clear the filters.
GridFunctions.clickAdvancedFilteringClearFilterButton(fix);
@@ -1418,24 +791,25 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
fix.detectChanges();
// Verify there are no filters in the dialog.
- expect(GridFunctions.getAdvancedFilteringTreeRootGroup(fix)).toBeNull();
- expect(GridFunctions.getAdvancedFilteringEmptyPrompt(fix)).not.toBeNull();
+ QueryBuilderFunctions.verifyRootAndSubGroupExpressionsCount(fix, 0, 0);
}));
- it('Should keep edited conditions and groups inside AF dialog when applying and opening it again.',
- fakeAsync(() => {
+ it('Should keep edited conditions and groups inside AF dialog when applying and opening it again.', fakeAsync(() => {
// Apply advanced filter through API.
const tree = new FilteringExpressionsTree(FilteringLogic.And);
tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
+ fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
+ conditionName: 'greaterThan'
});
const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
orTree.filteringOperands.push({
fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains',
ignoreCase: true
});
orTree.filteringOperands.push({
fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains',
ignoreCase: true
});
tree.filteringOperands.push(orTree);
@@ -1453,17 +827,17 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
fix.detectChanges();
// Verify the content of the first expression in the inner 'or' group.
- verifyExpressionChipContent(fix, [1, 0], 'ProductName', 'Contains', 'angular');
+ QueryBuilderFunctions.verifyExpressionChipContent(fix, [0, 0], 'ProductName', 'Contains', 'angular');
// Edit the first expression in the inner 'or' group.
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [1, 0], true); // Double-click the chip
+ QueryBuilderFunctions.clickQueryBuilderTreeExpressionChip(fix, [0, 0]); // Click the chip
tick(200);
fix.detectChanges();
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+ const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
UIInteractions.clickAndSendInputElementValue(input, 'a', fix); // Type filter value.
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
fix.detectChanges();
// Apply the filters.
@@ -1482,23 +856,25 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
fix.detectChanges();
// Verify the content of the first expression in the inner 'or' group.
- verifyExpressionChipContent(fix, [1, 0], 'ProductName', 'Contains', 'a');
+ QueryBuilderFunctions.verifyExpressionChipContent(fix, [0, 0], 'ProductName', 'Contains', 'a');
}));
- it('Should not keep changes over edited conditions and groups inside AF dialog when canceling and opening it again.',
- fakeAsync(() => {
+ it('Should not keep changes over edited conditions and groups inside AF dialog when canceling and opening it again.', fakeAsync(() => {
// Apply advanced filter through API.
const tree = new FilteringExpressionsTree(FilteringLogic.And);
tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
+ fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
+ conditionName: 'greaterThan'
});
const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
orTree.filteringOperands.push({
fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains',
ignoreCase: true
});
orTree.filteringOperands.push({
fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains',
ignoreCase: true
});
tree.filteringOperands.push(orTree);
@@ -1516,17 +892,17 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
fix.detectChanges();
// Verify the content of the first expression in the inner 'or' group.
- verifyExpressionChipContent(fix, [1, 0], 'ProductName', 'Contains', 'angular');
+ QueryBuilderFunctions.verifyExpressionChipContent(fix, [0, 0], 'ProductName', 'Contains', 'angular');
// Edit the first expression in the inner 'or' group.
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [1, 0], true); // Double-click the chip
+ QueryBuilderFunctions.clickQueryBuilderTreeExpressionChip(fix, [0, 0]); // Click the chip
tick(200);
fix.detectChanges();
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+ const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
UIInteractions.clickAndSendInputElementValue(input, 'a', fix); // Type filter value.
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
fix.detectChanges();
// Cancel the filters.
@@ -1545,7 +921,7 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
fix.detectChanges();
// Verify the content of the first expression in the inner 'or' group.
- verifyExpressionChipContent(fix, [1, 0], 'ProductName', 'Contains', 'angular');
+ QueryBuilderFunctions.verifyExpressionChipContent(fix, [0, 0], 'ProductName', 'Contains', 'angular');
}));
it('Should not close the AF dialog when clicking outside of it.', fakeAsync(() => {
@@ -2045,18 +1421,18 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
fix.detectChanges();
// Add root group.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
// Add a new expression
- selectColumnInEditModeExpression(fix, 2); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 2); // Select 'ProductName' column.
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
+ const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
UIInteractions.clickAndSendInputElementValue(input, '1', fix); // Type filter value.
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
tick(100);
fix.detectChanges();
GridFunctions.clickAdvancedFilteringApplyButton(fix);
@@ -2079,18 +1455,18 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
fix.detectChanges();
// Add root group.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
// Add a new expression
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
- const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
+ const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
UIInteractions.clickAndSendInputElementValue(input, '1:', fix); // Type filter value.
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
tick(100);
fix.detectChanges();
GridFunctions.clickAdvancedFilteringApplyButton(fix);
@@ -2112,17 +1488,18 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ const queryBuilderElement: HTMLElement = fix.debugElement.queryAll(By.css(`.${QueryBuilderSelectors.QUERY_BUILDER_TREE}`))[0].nativeElement;
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
- GridFunctions.clickAdvancedFilteringColumnSelect(fix);
+ QueryBuilderFunctions.clickQueryBuilderColumnSelect(fix);
fix.detectChanges();
- const dropdownItems = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix);
- expect(dropdownItems[4].innerText).toBe('ReleaseDate');
+ const dropdownItems = QueryBuilderFunctions.getQueryBuilderSelectDropdownItems(queryBuilderElement);
+ expect((dropdownItems[4] as HTMLElement).innerText).toBe('ReleaseDate');
- selectColumnInEditModeExpression(fix, 4); // Select 'ReleaseDate' column
- selectOperatorInEditModeExpression(fix, 0);
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 4); // Select 'ReleaseDate' column
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0);
const dateTimeEditor = fix.debugElement.query(By.directive(IgxDateTimeEditorDirective))
.injector.get(IgxDateTimeEditorDirective);
@@ -2142,15 +1519,15 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
- GridFunctions.clickAdvancedFilteringColumnSelect(fix);
+ QueryBuilderFunctions.clickQueryBuilderColumnSelect(fix);
fix.detectChanges();
- selectColumnInEditModeExpression(fix, 4);
- selectOperatorInEditModeExpression(fix, 0);
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 4);
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0);
const dateTimeEditor = fix.debugElement.query(By.directive(IgxDateTimeEditorDirective))
.injector.get(IgxDateTimeEditorDirective);
@@ -2168,15 +1545,15 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
- GridFunctions.clickAdvancedFilteringColumnSelect(fix);
+ QueryBuilderFunctions.clickQueryBuilderColumnSelect(fix);
fix.detectChanges();
- selectColumnInEditModeExpression(fix, 6);
- selectOperatorInEditModeExpression(fix, 0);
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 6);
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0);
const dateTimeEditor = fix.debugElement.query(By.directive(IgxDateTimeEditorDirective))
.injector.get(IgxDateTimeEditorDirective);
@@ -2193,15 +1570,15 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
- GridFunctions.clickAdvancedFilteringColumnSelect(fix);
+ QueryBuilderFunctions.clickQueryBuilderColumnSelect(fix);
fix.detectChanges();
- selectColumnInEditModeExpression(fix, 6);
- selectOperatorInEditModeExpression(fix, 0);
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 6);
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0);
const dateTimeEditor = fix.debugElement.query(By.directive(IgxDateTimeEditorDirective))
.injector.get(IgxDateTimeEditorDirective);
@@ -2222,19 +1599,19 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
GridFunctions.clickAdvancedFilteringButton(fixture);
fixture.detectChanges();
- // Click the initial 'Add And Group' button
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fixture, 0);
+ // Click the initial 'Add Condition' button
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fixture, 0);
tick(100);
fixture.detectChanges();
// Populate edit inputs
- selectColumnInEditModeExpression(fixture, 1);
- selectOperatorInEditModeExpression(fixture, 2);
- const input = GridFunctions.getAdvancedFilteringValueInput(fixture).querySelector('input');
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fixture, 1);
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fixture, 2);
+ const input = QueryBuilderFunctions.getQueryBuilderValueInput(fixture).querySelector('input');
UIInteractions.clickAndSendInputElementValue(input, 'ign', fixture);
// Commit the populated expression
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fixture);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fixture);
fixture.detectChanges();
// Apply the filters
@@ -2250,7 +1627,7 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
// Change the grid's columns collection
fixture.componentInstance.columns = [
{ field: 'ID', header: 'ID', width: '200px', type: 'string' },
- { field: 'CompanyName', header: 'Company Name', width: '200px', type: 'string'},
+ { field: 'CompanyName', header: 'Company Name', width: '200px', type: 'string' },
{ field: 'ContactName', header: 'Contact Name', width: '200px', type: 'string' },
{ field: 'ContactTitle', header: 'Contact Title', width: '200px', type: 'string' },
{ field: 'City', header: 'City', width: '200px', type: 'string' },
@@ -2279,885 +1656,6 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
// Check for error messages in the console
expect(consoleSpy).not.toHaveBeenCalled();
}));
-
- it('should not trigger accessibility errors when interacting with the edit icon in the advanced filtering expression chip', fakeAsync(() => {
- // Apply advanced filter through API to generate chips.
- const tree = new FilteringExpressionsTree(FilteringLogic.Or);
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 1, condition: IgxNumberFilteringOperand.instance().condition('equals')
- });
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- GridFunctions.clickAdvancedFilteringButton(fix);
- tick(50);
- fix.detectChanges();
-
- // Hover over the first visible expression chip to show edit icon.
- const expressionItem = fix.nativeElement.querySelectorAll(`.${ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS}`)[0];
- expressionItem.dispatchEvent(new MouseEvent('mouseenter'));
- tick(50);
- fix.detectChanges();
-
- // Click the edit icon on the hovered and focused edit icon.
- const editIcon = GridFunctions.getAdvancedFilteringTreeExpressionEditIcon(fix, [0]);
- tick(50);
- fix.detectChanges();
- expect(editIcon.getAttribute('aria-hidden')).toBe('true');
- expect(editIcon.getAttribute('tabIndex')).toBeFalsy();
- }));
-
- describe('Context Menu - ', () => {
- it('Should discard added group when clicking its operator line without having a single expression.', fakeAsync(() => {
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Add initial 'and' group.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
- tick(100);
- fix.detectChanges();
-
- // Click operator line.
- const rootOperatorLine = GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix);
- rootOperatorLine.click();
- tick(200);
- fix.detectChanges();
-
- // Verify group is discarded and the context menu was not opened.
- expect(GridFunctions.getAdvancedFilteringTreeRootGroup(fix)).toBeNull('Group is not discarded.');
- verifyContextMenuVisibility(fix, false);
- }));
-
- it('Selecting multiple conditions should display the (create group)/(delete filters) context menu.', fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
- });
- const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push(orTree);
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify context menu is not visible.
- verifyContextMenuVisibility(fix, false);
-
- // Select two chips.
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [0]);
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [1, 1]);
- tick(200);
- fix.detectChanges();
-
- // Verify context menu is visible.
- verifyContextMenuVisibility(fix, true);
- verifyContextMenuType(fix, false);
-
- // Unselect one of the two selected chips.
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [0]);
- tick(200);
- fix.detectChanges();
-
- // Verify context menu is no longer visible.
- verifyContextMenuVisibility(fix, false);
- }));
-
- it('Should create an \'and\' group from multiple selected conditions when respective context menu button is clicked.',
- fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
- });
- const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push(orTree);
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify tree layout before the creation of a new group with context menu.
- let rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(4);
-
- let firstItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [0]); // expression
- expect(firstItem.classList.contains(ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS)).toBe(true);
-
- let secondItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [1]); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, false).length).toBe(2);
-
- // Select two chips.
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [0]);
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [1, 1]);
- tick(200);
-
- // Click "Create And Group" in context menu.
- const buttons = GridFunctions.getAdvancedFilteringContextMenuButtons(fix);
- buttons[1].click();
- tick(100);
- fix.detectChanges();
-
- // Verify tree layout after the creation of a new group with context menu.
- rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(5);
-
- firstItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [0]); // the new group
- verifyOperatorLine(GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [0]), 'and');
- expect(firstItem.classList.contains(ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS)).toBe(false);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(firstItem, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(firstItem, false).length).toBe(2);
-
- secondItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [1]); // group
- verifyOperatorLine(GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [1]), 'or');
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, true).length).toBe(1);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, false).length).toBe(1);
- }));
-
- it('Should create an \'or\' group from multiple selected conditions when respective context menu button is clicked.',
- fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
- });
- const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push(orTree);
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify tree layout before the creation of a new group with context menu.
- let rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(4);
-
- let firstItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [0]); // expression
- expect(firstItem.classList.contains(ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS)).toBe(true);
-
- let secondItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [1]); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, false).length).toBe(2);
-
- // Select two chips.
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [0]);
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [1, 1]);
- tick(200);
-
- // Click "Create Or Group" in context menu.
- const buttons = GridFunctions.getAdvancedFilteringContextMenuButtons(fix);
- buttons[2].click();
- tick(100);
- fix.detectChanges();
-
- // Verify tree layout after the creation of a new group with context menu.
- rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(5);
-
- firstItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [0]); // the new group
- verifyOperatorLine(GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [0]), 'or');
- expect(firstItem.classList.contains(ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS)).toBe(false);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(firstItem, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(firstItem, false).length).toBe(2);
-
- secondItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [1]); // group
- verifyOperatorLine(GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [1]), 'or');
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, true).length).toBe(1);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, false).length).toBe(1);
- }));
-
- it('Should respect the changes of the groups applied from the context menu.',
- fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Verify the filter changes are applied.
- expect(grid.filteredData.length).toEqual(0);
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify tree layout before the group change through context menu.
- let rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(2);
-
- // Select two chips.
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [0]);
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [1]);
- tick(200);
-
- // Click "Create Or Group" in context menu.
- const buttons = GridFunctions.getAdvancedFilteringContextMenuButtons(fix);
- buttons[2].click();
- tick(100);
- fix.detectChanges();
-
- // Close dialog through API.
- grid.closeAdvancedFilteringDialog(true);
- tick(100);
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify tree layout after the group change through context menu.
- rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(1);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(3);
-
- // Verify the filter changes are applied.
- expect(grid.filteredData.length).toEqual(3);
- }));
-
-
- it('Should delete all selected conditions when the \'delete filters\' option from context menu is clicked.',
- fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
- });
- const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push(orTree);
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify tree layout before the creation of a new group with context menu.
- let rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(4);
-
- let firstItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [0]); // expression
- expect(firstItem.classList.contains(ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS)).toBe(true);
-
- const secondItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [1]); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, false).length).toBe(2);
-
- // Select two chips.
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [0]);
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [1, 1]);
- tick(200);
-
- // Click "Delete Filters" in context menu.
- const buttons = GridFunctions.getAdvancedFilteringContextMenuButtons(fix);
- buttons[3].click();
- tick(100);
- fix.detectChanges();
-
- // Verify tree layout after deleting some expressions with the context menu.
- rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(1);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(2);
-
- firstItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [0]); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(firstItem, true).length).toBe(1);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(firstItem, false).length).toBe(1);
- verifyExpressionChipContent(fix, [0, 0], 'ProductName', 'Contains', 'angular');
- }));
-
- it('Should show/hide group\'s context menu when clicking its operator line.', fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
- });
- const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push(orTree);
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify context menu is not visible.
- verifyContextMenuVisibility(fix, false);
-
- // Click the innner group's operator line.
- const operatorLine = GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [1]);
- operatorLine.click();
- fix.detectChanges();
-
- // Verify context menu is visible.
- verifyContextMenuVisibility(fix, true);
- verifyContextMenuType(fix, true);
-
- // Click the innner group's operator line again.
- operatorLine.click();
- tick();
- fix.detectChanges();
-
- // Verify context menu is no longer visible.
- verifyContextMenuVisibility(fix, false);
- }));
-
- it('Should change the group\'s operator when using its context menu buttons.', async () => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
- });
- const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push(orTree);
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify current operator of inner group.
- let operatorLine = GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [1]);
- verifyOperatorLine(operatorLine, 'or');
-
- // Click the innner group's operator line.
- operatorLine.click();
- await wait(400);
- fix.detectChanges();
-
- // Click the 'and' button of the button group in the context menu.
- const buttonGroup = GridFunctions.getAdvancedFilteringContextMenuButtonGroup(fix);
- const andOperatorButton: any = Array.from(buttonGroup.querySelectorAll('.igx-button-group__item'))
- .find((b: any) => b.textContent.toLowerCase() === 'and');
- andOperatorButton.click();
- await wait();
- fix.detectChanges();
-
- // Verify new operator of inner group.
- operatorLine = GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [1]);
- verifyOperatorLine(operatorLine, 'and');
-
- // Click the 'or' button of the button group in the context menu.
- const orOperatorButton: any = Array.from(buttonGroup.querySelectorAll('.igx-button-group__item'))
- .find((b: any) => b.textContent.toLowerCase() === 'or');
- orOperatorButton.click();
- await wait();
- fix.detectChanges();
-
- // Verify new operator of inner group.
- operatorLine = GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [1]);
- verifyOperatorLine(operatorLine, 'or');
- });
-
- it('Should apply changes in the group\'s operator made via its context menu buttons.', fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
- });
- const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push(orTree);
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify current operator of inner group.
- let operatorLine = GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [1]);
- verifyOperatorLine(operatorLine, 'or');
-
- // Verify the advancedFilteringExpressionsTree inner group's filteringOperand's operator
- expect(grid.advancedFilteringExpressionsTree.filteringOperands.length).toEqual(2);
- expect((grid.advancedFilteringExpressionsTree.filteringOperands[1] as IFilteringExpressionsTree).operator).toEqual(1);
-
- // Click the innner group's operator line.
- operatorLine.click();
- tick(400);
- fix.detectChanges();
-
- // Click the 'and' button of the button group in the context menu.
- const buttonGroup = GridFunctions.getAdvancedFilteringContextMenuButtonGroup(fix);
- const andOperatorButton: any = Array.from(buttonGroup.querySelectorAll('.igx-button-group__item'))
- .find((b: any) => b.textContent.toLowerCase() === 'and');
- andOperatorButton.click();
- fix.detectChanges();
-
- // Verify new operator of inner group.
- operatorLine = GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [1]);
- verifyOperatorLine(operatorLine, 'and');
-
- // Apply new advanced filtering logic
- GridFunctions.clickAdvancedFilteringApplyButton(fix);
- tick(100);
- fix.detectChanges();
-
- // Open the advanced filtering dialog
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify the operator of inner group should persist as "And"
- operatorLine = GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [1]);
- verifyOperatorLine(operatorLine, 'and');
-
- // Verify the advancedFilteringExpressionsTree inner group's filteringOperand's operator
- expect(grid.advancedFilteringExpressionsTree.filteringOperands.length).toEqual(2);
- expect((grid.advancedFilteringExpressionsTree.filteringOperands[1] as IFilteringExpressionsTree).operator).toEqual(0);
- }));
-
- it('Should ungroup the group\'s children and append them to next parent group when click \'ungroup\' from context menu.',
- fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
- });
- const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push(orTree);
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify tree layout before the the ungrouping with context menu.
- let rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(4);
-
- let firstItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [0]); // expression
- expect(firstItem.classList.contains(ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS)).toBe(true);
-
- const secondItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [1]); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, false).length).toBe(2);
-
- // Click the innner group's operator line.
- const operatorLine = GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [1]);
- operatorLine.click();
- tick(400);
- fix.detectChanges();
-
- // Click "Ungroup" in context menu.
- const buttons = GridFunctions.getAdvancedFilteringContextMenuButtons(fix);
- buttons[3].click();
- tick(100);
- fix.detectChanges();
-
- // Verify tree layout after ungrouping a group with the context menu.
- rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(3);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(3);
- // Verify three expression in the root group are what remains.
- for (let index = 0; index < 3; index++) {
- firstItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [index]); // expression
- expect(firstItem.classList.contains(ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS)).toBe(true);
- }
-
- // Should apply this change to the advancedFilteringExpressionsTree
- GridFunctions.clickAdvancedFilteringApplyButton(fix);
- tick(100);
- fix.detectChanges();
-
- // Open the advanced filtering dialog
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify the layout after as above
- rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(3);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(3);
- // Verify three expression in the root group are what remains, no inner groups
- for (let index = 0; index < 3; index++) {
- firstItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [index]); // expression
- expect(firstItem.classList.contains(ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS)).toBe(true);
- }
- }));
-
- it('Ungroup button of the root group\'s context menu should be disabled.',
- fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
- });
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Click root group's operator line.
- const rootOperatorLine = GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix);
- rootOperatorLine.click();
- tick(200);
- fix.detectChanges();
-
- // Verify the ungroup button is disabled.
- const ungroupButton = GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[3];
- ControlsFunction.verifyButtonIsDisabled(ungroupButton);
- }));
-
- it('Should delete the group from the tree when click \'delete\' from context menu.',
- fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
- });
- const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push(orTree);
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify tree layout before deleting a group through context menu.
- let rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(4);
-
- let firstItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [0]); // expression
- expect(firstItem.classList.contains(ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS)).toBe(true);
-
- const secondItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [1]); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, true).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, false).length).toBe(2);
-
- // Click the innner group's operator line.
- const operatorLine = GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [1]);
- operatorLine.click();
- tick(400);
- fix.detectChanges();
-
- // Click "Delete" in context menu.
- const buttons = GridFunctions.getAdvancedFilteringContextMenuButtons(fix);
- buttons[4].click();
- tick(100);
- fix.detectChanges();
-
- // Verify tree layout after deleting a group through context menu.
- rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(1);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(1);
-
- firstItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [0]); // expression
- expect(firstItem.classList.contains(ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS)).toBe(true);
-
- // Should apply this change to the advancedFilteringExpressionsTree
- GridFunctions.clickAdvancedFilteringApplyButton(fix);
- tick(100);
- fix.detectChanges();
-
- // Open the advanced filtering dialog
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify the layout after as above
- rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix); // group
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(1);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(1);
-
- firstItem = GridFunctions.getAdvancedFilteringTreeItem(fix, [0]); // expression
- expect(firstItem.classList.contains(ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS)).toBe(true);
-
- // Verify the advancedFilteringExpressionsTree filteringOperands operator
- expect(grid.advancedFilteringExpressionsTree.filteringOperands.length).toEqual(1);
- }));
-
- it('Should close the context menu when clicking its close button.' , fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.Or);
- tree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Click root operator line to open the context menu.
- const rootOperatorLine = GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix);
- rootOperatorLine.click();
- fix.detectChanges();
-
- // Verify context menu is opened.
- verifyContextMenuVisibility(fix, true);
-
- // Click close button of context menu.
- const buttons = GridFunctions.getAdvancedFilteringContextMenuButtons(fix);
- buttons[0].click();
- tick();
-
- // Verify context menu is closed.
- verifyContextMenuVisibility(fix, false);
- }));
- });
-
- describe('Keyboard Navigation/Interaction - ', () => {
- it('Should close the context menu when pressing \'Escape\' on it.' , fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.Or);
- tree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Click root operator line to open the context menu.
- const rootOperatorLine = GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix);
- rootOperatorLine.click();
- fix.detectChanges();
-
- // Verify context menu is opened.
- verifyContextMenuVisibility(fix, true);
-
- // Press 'Escape' on the context menu.
- UIInteractions.triggerKeyDownEvtUponElem('Escape', GridFunctions.getAdvancedFilteringContextMenu(fix));
- tick();
-
- // Verify context menu is closed.
- verifyContextMenuVisibility(fix, false);
- }));
-
- it('Should select/deselect a condition when pressing \'Enter\' on its respective chip.' , fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.Or);
- tree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify first chip is not selected.
- verifyExpressionChipSelection(fix, [1], false);
-
- // Press 'Enter' on the second chip and verify it is selected.
- UIInteractions.triggerKeyDownEvtUponElem('Enter', GridFunctions.getAdvancedFilteringTreeExpressionChip(fix, [1]));
- tick(200);
- fix.detectChanges();
- verifyExpressionChipSelection(fix, [1], true);
-
- // Press 'Enter' on the second chip again and verify it is not selected.
- UIInteractions.triggerKeyDownEvtUponElem('Enter', GridFunctions.getAdvancedFilteringTreeExpressionChip(fix, [1]));
- tick(200);
- fix.detectChanges();
- verifyExpressionChipSelection(fix, [1], false);
- }));
-
- it('Should remove a chip in when pressing \'Enter\' on its \'remove\' icon.' , fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.Or);
- tree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify the there are two chip expressions.
- let rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(2);
- expect(GridFunctions.getAdvancedFilteringTreeChildExpressions(rootGroup, true).length).toBe(2);
-
- // Press 'Enter' on the remove icon of the second chip.
- const chip = GridFunctions.getAdvancedFilteringTreeExpressionChip(fix, [1]);
- const removeIcon = ControlsFunction.getChipRemoveButton(chip);
- UIInteractions.triggerKeyDownEvtUponElem('Enter', removeIcon);
- tick(200);
- fix.detectChanges();
-
- // Verify the there is only one chip expression.
- rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix);
- expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(1);
- expect(GridFunctions.getAdvancedFilteringTreeChildExpressions(rootGroup, true).length).toBe(1);
- }));
-
- it('Should select/deselect all child conditions and groups when pressing \'Enter\' on a group\'s operator line.',
- fakeAsync(() => {
- // Apply advanced filter through API.
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
- });
- const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- orTree.filteringOperands.push({
- fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
- ignoreCase: true
- });
- tree.filteringOperands.push(orTree);
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Press 'Enter' on the root group's operator line
- let rootOperatorLine = GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix);
- const keyboardEvent = new KeyboardEvent('keydown', { key: 'Enter' });
- rootOperatorLine.dispatchEvent(keyboardEvent);
- tick();
- fix.detectChanges();
-
- // Simulate end of chip selection animation
- const chipSelect = fix.nativeElement.querySelector(CHIP_SELECT_CLASS);
- const transitionEvent = new TransitionEvent('transitionend', {
- propertyName: 'width'
- });
- chipSelect.dispatchEvent(transitionEvent);
-
- // Verify items are selected and context menu is opened
- verifyChildrenSelection(GridFunctions.getAdvancedFilteringExpressionsContainer(fix), true);
- verifyContextMenuVisibility(fix, true);
-
- // Press 'Enter' on the root group's operator line again
- rootOperatorLine = GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix);
- rootOperatorLine.dispatchEvent(keyboardEvent);
- tick();
-
- // Verify items are not selected and context menu is closed
- verifyChildrenSelection(GridFunctions.getAdvancedFilteringExpressionsContainer(fix), false);
- verifyContextMenuVisibility(fix, false);
- }));
-
- });
-
});
describe('Advanced filtering with toolbar', () => {
@@ -3227,18 +1725,14 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
igx_grid_filter_operator_and: 'My and',
igx_grid_filter_operator_or: 'My or',
igx_grid_advanced_filter_title: 'My advanced filter',
- igx_grid_advanced_filter_and_group: 'My and group',
- igx_grid_advanced_filter_or_group: 'My or group',
igx_grid_advanced_filter_end_group: 'My end group',
igx_grid_advanced_filter_create_and_group: 'My create and group',
- igx_grid_advanced_filter_create_or_group: 'My create or group',
igx_grid_advanced_filter_and_label: 'My and',
igx_grid_advanced_filter_or_label: 'My or',
- igx_grid_advanced_filter_add_condition: 'My condition',
+ igx_grid_advanced_filter_add_condition_root: 'My condition',
+ igx_grid_advanced_filter_add_group_root: 'My group',
igx_grid_advanced_filter_ungroup: 'My ungroup',
- igx_grid_advanced_filter_delete: 'My delete',
- igx_grid_advanced_filter_delete_filters: 'My delete filters',
- igx_grid_advanced_filter_initial_text: 'My initial text'
+ igx_grid_advanced_filter_delete_filters: 'My delete filters'
});
fix.detectChanges();
@@ -3246,92 +1740,28 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- expect(GridFunctions.getAdvancedFilteringHeaderText(fix)).toBe('My advanced filter');
- expect(GridFunctions.getAdvancedFilteringHeaderLegendItemAnd(fix).innerText).toBe('My and');
- expect(GridFunctions.getAdvancedFilteringHeaderLegendItemOr(fix).innerText).toBe('My or');
- expect(GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix)[0].querySelector('span').innerText)
- .toBe('My and group');
- expect(GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix)[1].querySelector('span').innerText)
- .toBe('My or group');
- expect(GridFunctions.getAdvancedFilteringEmptyPrompt(fix).innerText).toBe('My initial text');
+ expect(QueryBuilderFunctions.getQueryBuilderHeaderText(fix).trim()).toBe('My advanced filter');
+ expect(QueryBuilderFunctions.getQueryBuilderInitialAddConditionBtn(fix).querySelector('span').innerText)
+ .toBe('My condition');
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
- expect(GridFunctions.getAdvancedFilteringTreeRootGroupButtons(fix, 0)[0].querySelector('span').innerText)
- .toBe('My condition');
- expect(GridFunctions.getAdvancedFilteringTreeRootGroupButtons(fix, 0)[1].querySelector('span').innerText)
- .toBe('My and group');
- expect(GridFunctions.getAdvancedFilteringTreeRootGroupButtons(fix, 0)[2].querySelector('span').innerText)
- .toBe('My or group');
// Populate edit inputs.
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
- let input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+ let input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
UIInteractions.clickAndSendInputElementValue(input, 'angular', fix); // Type filter value.
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
- fix.detectChanges();
-
- const rootOperatorLine = GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix);
- rootOperatorLine.click();
- fix.detectChanges();
-
- const buttonGroupItems = GridFunctions.sortNativeElementsHorizontally(
- Array.from(GridFunctions.getAdvancedFilteringContextMenuButtonGroup(fix)
- .querySelectorAll('.igx-button-group__item-content')));
- expect(buttonGroupItems[0].textContent).toBe('My and');
- expect(buttonGroupItems[1].textContent).toBe('My or');
- expect(GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[3].querySelector('span').innerText)
- .toBe('My ungroup');
- expect(GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[4].querySelector('span').innerText)
- .toBe('My delete');
-
- // Close context menu.
- GridFunctions.clickAdvancedFilteringContextMenuCloseButton(fix);
- fix.detectChanges();
-
- // Add another expression to root group.
- let btn = GridFunctions.getAdvancedFilteringTreeRootGroupButtons(fix, 0)[0];
- btn.click();
- fix.detectChanges();
-
- // Populate edit inputs.
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
-
- input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- UIInteractions.clickAndSendInputElementValue(input, 'script', fix); // Type filter value.
- // Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
- fix.detectChanges();
-
- // Select two chips.
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [0]);
- GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [1]);
- tick(200);
- fix.detectChanges();
-
- expect(GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[1].innerText).toBe('My create and group');
- expect(GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[2].innerText).toBe('My create or group');
- expect(GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[3].innerText).toBe('My delete filters');
-
- // Close context menu.
- GridFunctions.clickAdvancedFilteringContextMenuCloseButton(fix);
- tick(100);
- fix.detectChanges();
-
- // Add an 'or' group to root group.
- btn = GridFunctions.getAdvancedFilteringTreeRootGroupButtons(fix, 0)[2];
- btn.click();
- tick(100);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
fix.detectChanges();
-
- const endGroupButton = GridFunctions.getAdvancedFilteringTreeGroupButtons(fix, [2], 0)[3];
- expect(endGroupButton.querySelector('span').innerText).toBe('My end group');
+ expect((QueryBuilderFunctions.getQueryBuilderTreeRootGroupButtons(fix, 0)[0] as HTMLElement).querySelector('span').innerText)
+ .toBe('My condition');
+ expect((QueryBuilderFunctions.getQueryBuilderTreeRootGroupButtons(fix, 0)[1] as HTMLElement).querySelector('span').innerText)
+ .toBe('My group');
}));
});
@@ -3348,48 +1778,20 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
grid.openAdvancedFilteringDialog();
fix.detectChanges();
- // Click the initial 'Add And Group' button.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ const queryBuilderElement: HTMLElement = fix.debugElement.queryAll(By.css(`.${QueryBuilderSelectors.QUERY_BUILDER_TREE}`))[0].nativeElement;
+
+ // Click the initial 'Add Condition' button.
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
// Open column dropdown and verify that there are no column groups present.
- GridFunctions.clickAdvancedFilteringColumnSelect(fix);
+ QueryBuilderFunctions.clickQueryBuilderColumnSelect(fix);
fix.detectChanges();
- const dropdownValues = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix).map((x: any) => x.innerText);
+ const dropdownValues = QueryBuilderFunctions.getQueryBuilderSelectDropdownItems(queryBuilderElement).map((x: any) => x.innerText);
const expectedValues = ['ID', 'ProductName', 'Downloads', 'Released', 'ReleaseDate', 'Another Field', 'DateTimeCreated'];
expect(expectedValues).toEqual(dropdownValues);
}));
-
- it('Should correctly focus the search value input when editing the filtering expression', fakeAsync(() => {
- // Open dialog through API.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- //Create dateTime filtering expression
- const tree = new FilteringExpressionsTree(FilteringLogic.And);
- tree.filteringOperands.push({
- fieldName: 'DateTimeCreated', searchVal: '11/11/2000 10:11:11 AM', condition: IgxStringFilteringOperand.instance().condition('equals')
- });
-
- grid.advancedFilteringExpressionsTree = tree;
- fix.detectChanges();
-
- // Hover the last visible expression chip
- const expressionItem = fix.nativeElement.querySelectorAll(`.${ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS}`)[0];
- expressionItem.dispatchEvent(new MouseEvent('mouseenter'));
- tick();
- fix.detectChanges();
-
- // Click the edit icon to enter edit mode of the expression.
- GridFunctions.clickAdvancedFilteringTreeExpressionChipEditIcon(fix, [0]);
- tick();
- fix.detectChanges();
-
- //Check for the active element
- const searchValueInput = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
- expect(document.activeElement).toBe(searchValueInput, 'The input should be the active element.');
- }));
});
describe('External - ', () => {
@@ -3402,32 +1804,32 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
it('Should allow hosting Advanced Filtering dialog outside of the grid.', fakeAsync(() => {
// Add a root 'and' group.
- GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+ QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
tick(100);
fix.detectChanges();
// Populate edit inputs.
- selectColumnInEditModeExpression(fix, 2); // Select 'Downloads' column.
- selectOperatorInEditModeExpression(fix, 2); // Select 'Greater Than' operator.
- let input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 2); // Select 'Downloads' column.
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 2); // Select 'Greater Than' operator.
+ let input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
UIInteractions.clickAndSendInputElementValue(input, '100', fix); // Type filter value.
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
fix.detectChanges();
// Add new expression to the root group.
- const addExpressionBtn = GridFunctions.getAdvancedFilteringTreeRootGroupButtons(fix, 0)[0];
+ const addExpressionBtn = QueryBuilderFunctions.getQueryBuilderTreeRootGroupButtons(fix, 0)[0] as HTMLElement;
addExpressionBtn.click();
tick(100);
fix.detectChanges();
// Populate edit inputs.
- selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
- selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
- input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+ QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+ QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
+ input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
UIInteractions.clickAndSendInputElementValue(input, 'ignite', fix); // Type filter value.
// Commit the populated expression.
- GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+ QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
fix.detectChanges();
// Apply the filters.
@@ -3511,190 +1913,15 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
expect(grid.filteredData).toBe(null);
}));
});
-
- describe('Overlay settings - ', () => {
- it('Should respect the overlay settings set in the component.', fakeAsync(() => {
- const fix = TestBed.createComponent(IgxGridAdvancedFilteringOverlaySettingsComponent);
- const grid: IgxGridComponent = fix.componentInstance.grid;
- fix.detectChanges();
-
- // Open Advanced Filtering dialog.
- grid.openAdvancedFilteringDialog();
- fix.detectChanges();
-
- // Verify context menu is opened.
- expect(GridFunctions.getAdvancedFilteringComponent(fix)).not.toBeNull();
-
- // Press 'Escape' on the context menu.
- UIInteractions.triggerKeyDownEvtUponElem('Escape', GridFunctions.getRowEditingOverlay(fix));
- tick();
- fix.detectChanges();
-
- // Verify context menu is opened.
- expect(GridFunctions.getAdvancedFilteringComponent(fix)).not.toBeNull();
- }));
- });
});
-const selectColumnInEditModeExpression = (fix, dropdownItemIndex: number) => {
- GridFunctions.clickAdvancedFilteringColumnSelect(fix);
- fix.detectChanges();
- GridFunctions.clickAdvancedFilteringSelectDropdownItem(fix, dropdownItemIndex);
- tick();
- fix.detectChanges();
-};
-
-const selectOperatorInEditModeExpression = (fix, dropdownItemIndex: number) => {
- GridFunctions.clickAdvancedFilteringOperatorSelect(fix);
- fix.detectChanges();
- GridFunctions.clickAdvancedFilteringSelectDropdownItem(fix, dropdownItemIndex);
- tick();
- fix.detectChanges();
-};
-
-/**
- * Verifies the type of the operator line ('and' or 'or').
- * (NOTE: The 'operator' argument must be a string with a value that is either 'and' or 'or'.)
- */
-const verifyOperatorLine = (operatorLine: HTMLElement, operator: string) => {
- expect(operator === 'and' || operator === 'or').toBe(true, 'operator must be \'and\' or \'or\'');
-
- if (operator === 'and') {
- expect(operatorLine.classList.contains(ADVANCED_FILTERING_OPERATOR_LINE_AND_CSS_CLASS)).toBe(true, 'incorrect operator line');
- expect(operatorLine.classList.contains(ADVANCED_FILTERING_OPERATOR_LINE_OR_CSS_CLASS)).toBe(false, 'incorrect operator line');
- } else {
- expect(operatorLine.classList.contains(ADVANCED_FILTERING_OPERATOR_LINE_AND_CSS_CLASS)).toBe(false, 'incorrect operator line');
- expect(operatorLine.classList.contains(ADVANCED_FILTERING_OPERATOR_LINE_OR_CSS_CLASS)).toBe(true, 'incorrect operator line');
- }
-};
-
-const verifyOperatorLineSelection = (operatorLine: HTMLElement, shouldBeSelected: boolean) => {
- expect(operatorLine.classList.contains(ADVANCED_FILTERING_OPERATOR_LINE_SELECTED_CSS_CLASS))
- .toBe(shouldBeSelected, 'incorrect selection state of the operator line');
-};
-
-const verifyExpressionChipContent = (fix, path: number[], columnText: string, operatorText: string, valueText: string) => {
- const chip = GridFunctions.getAdvancedFilteringTreeExpressionChip(fix, path);
- const chipSpans = GridFunctions.sortNativeElementsHorizontally(Array.from(chip.querySelectorAll('span')));
- const columnSpan = chipSpans[0];
- const operatorSpan = chipSpans[1];
- const valueSpan = chipSpans[2];
- expect(columnSpan.textContent.toLowerCase().trim()).toBe(columnText.toLowerCase(), 'incorrect chip column');
- expect(operatorSpan.textContent.toLowerCase().trim()).toBe(operatorText.toLowerCase(), 'incorrect chip operator');
- expect(valueSpan.textContent.toLowerCase().trim()).toBe(valueText.toLowerCase(), 'incorrect chip filter value');
-};
-
-const verifyExpressionChipSelection = (fix, path: number[], shouldBeSelected: boolean) => {
- const chip = GridFunctions.getAdvancedFilteringTreeExpressionChip(fix, path);
- verifyExpressionChipSelectionByChip(chip, shouldBeSelected);
-};
-
-const verifyExpressionChipSelectionByChip = (chip: HTMLElement, shouldBeSelected: boolean) => {
- const chipItem = chip.querySelector('.igx-chip__item');
- if (shouldBeSelected) {
- expect(chipItem.classList.contains('igx-chip__item--selected')).toBe(true, 'chip is not selected');
- expect(chipItem.querySelector(CHIP_SELECT_CLASS)).not.toBeNull();
- } else {
- expect(chipItem.classList.contains('igx-chip__item--selected')).toBe(false, 'chip is selected');
- expect(chipItem.querySelector(CHIP_SELECT_CLASS)).toBeNull();
- }
-};
-
-/**
- * Verifies that all children (operator lines and expression chips) of the provided 'parent' are selected.
- */
-const verifyChildrenSelection = (parent: HTMLElement, shouldBeSelected: boolean) => {
- const allOperatorLines: any[] = Array.from(parent.querySelectorAll('.igx-filter-tree__line'));
- const allExpressionChips: any[] = Array.from(parent.querySelectorAll(`.${ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS}`));
- for (const operatorLine of allOperatorLines) {
- verifyOperatorLineSelection(operatorLine, shouldBeSelected);
- }
- for (const expressionChip of allExpressionChips) {
- verifyExpressionChipSelectionByChip(expressionChip, shouldBeSelected);
- }
-};
-
-const verifyEditModeExpressionInputStates = (fix,
- columnSelectEnabled: boolean,
- operatorSelectEnabled: boolean,
- valueInputEnabled: boolean,
- commitButtonEnabled: boolean) => {
- // Verify the column select state.
- const columnInputGroup = GridFunctions.getAdvancedFilteringColumnSelect(fix).querySelector('igx-input-group');
- expect(!columnInputGroup.classList.contains('igx-input-group--disabled')).toBe(columnSelectEnabled,
- 'incorrect column select state');
-
- // Verify the operator select state.
- const operatorInputGroup = GridFunctions.getAdvancedFilteringOperatorSelect(fix).querySelector('igx-input-group');
- expect(!operatorInputGroup.classList.contains('igx-input-group--disabled')).toBe(operatorSelectEnabled,
- 'incorrect operator select state');
-
- // Verify the value input state.
- const editModeContainer = GridFunctions.getAdvancedFilteringEditModeContainer(fix);
- const valueInputGroup = GridFunctions.sortNativeElementsHorizontally(
- Array.from(editModeContainer.querySelectorAll('igx-input-group')))[2];
- expect(!valueInputGroup.classList.contains('igx-input-group--disabled')).toBe(valueInputEnabled,
- 'incorrect value input state');
-
- // Verify commit expression button state
- const commitButton = GridFunctions.getAdvancedFilteringExpressionCommitButton(fix);
- ControlsFunction.verifyButtonIsDisabled(commitButton, !commitButtonEnabled);
-
-
- // Verify close expression button is enabled.
- const closeButton = GridFunctions.getAdvancedFilteringExpressionCloseButton(fix);
- ControlsFunction.verifyButtonIsDisabled(closeButton, false);
-};
-
-const verifyEditModeExpressionInputValues = (fix,
- columnText: string,
- operatorText: string,
- valueText: string) => {
- const columnInput = GridFunctions.getAdvancedFilteringColumnSelect(fix).querySelector('input');
- const operatorInput = GridFunctions.getAdvancedFilteringColumnSelect(fix).querySelector('input');
- const editModeContainer = GridFunctions.getAdvancedFilteringEditModeContainer(fix);
- const valueInput = GridFunctions.sortNativeElementsHorizontally(Array.from(editModeContainer.querySelectorAll('input')))[2];
- expect(columnInput.value).toBe(columnText);
- expect(operatorInput.value).toBe(operatorText);
- expect(valueInput.value).toBe(valueText);
-};
const verifyElementIsInExpressionsContainerView = (fix, element: HTMLElement) => {
const elementRect = element.getBoundingClientRect();
- const exprContainer: HTMLElement = GridFunctions.getAdvancedFilteringExpressionsContainer(fix);
+ const exprContainer: HTMLElement = QueryBuilderFunctions.getQueryBuilderExpressionsContainer(fix) as HTMLElement;
const exprContainerRect = exprContainer.getBoundingClientRect();
expect(elementRect.top >= exprContainerRect.top).toBe(true, 'top is not in view');
expect(elementRect.bottom <= exprContainerRect.bottom).toBe(true, 'bottom is not in view');
expect(elementRect.left >= exprContainerRect.left).toBe(true, 'left is not in view');
expect(elementRect.right <= exprContainerRect.right).toBe(true, 'right is not in view');
};
-
-const verifyContextMenuVisibility = (fix, shouldBeVisible: boolean) => {
- const contextMenu: HTMLElement = GridFunctions.getAdvancedFilteringContextMenu(fix);
- const contextMenuRect = contextMenu.getBoundingClientRect();
- expect(contextMenu.classList.contains('igx-toggle--hidden')).toBe(!shouldBeVisible, 'incorrect context menu visibility');
- expect(contextMenuRect.width === 0 && contextMenuRect.height === 0).toBe(!shouldBeVisible, 'incorrect context menu dimensions');
-};
-
-/**
- * Verifies the type of the context menu (menu for specific group or menu for combining expressions).
- * If contextual group is expected, the context menu should contain buttons for operator change, ungroup and delete.
- * If contextual group is not expected, the context menu should contain buttons for creating new group by combining expressions.
- */
-const verifyContextMenuType = (fix, shouldBeContextualGroup: boolean) => {
- const contextMenuButtons = GridFunctions.getAdvancedFilteringContextMenuButtons(fix);
- expect(GridFunctions.getAdvancedFilteringContextMenuButtonGroup(fix) !== null).toBe(shouldBeContextualGroup);
-
- if (shouldBeContextualGroup) {
- expect(contextMenuButtons.length).toBe(5, 'incorrect buttons count in context menu');
- expect(contextMenuButtons[0].innerText.toLowerCase()).toBe('close');
- expect(contextMenuButtons[3].querySelector('span').innerText.toLowerCase()).toBe('ungroup');
- expect(contextMenuButtons[4].querySelector('span').innerText.toLowerCase()).toBe('delete');
- } else {
- expect(contextMenuButtons.length).toBe(4, 'incorrect buttons count in context menu');
- expect(contextMenuButtons[0].innerText.toLowerCase()).toBe('close');
- expect(contextMenuButtons[1].innerText.toLowerCase().trim()).toBe('create "and" group');
- expect(contextMenuButtons[2].innerText.toLowerCase().trim()).toBe('create "or" group');
- expect(contextMenuButtons[3].innerText.toLowerCase().trim()).toBe('delete filters');
- }
-};
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
index b065673afae..c84074b4e36 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -547,12 +547,14 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const expression = {
fieldName: 'ProductName',
searchVal: 'g',
- condition: IgxStringFilteringOperand.instance().condition('contains')
+ condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains'
};
const expression1 = {
fieldName: 'ProductName',
searchVal: 'I',
- condition: IgxStringFilteringOperand.instance().condition('contains')
+ condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains'
};
filteringExpressionsTree.filteringOperands.push(expression);
filteringExpressionsTree.filteringOperands.push(expression1);
@@ -596,7 +598,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const expression = {
fieldName: 'ProductName',
searchVal: 'Ignite',
- condition: IgxStringFilteringOperand.instance().condition('startsWith')
+ condition: IgxStringFilteringOperand.instance().condition('startsWith'),
+ conditionName: 'startsWith'
};
filteringExpressionsTree.filteringOperands.push(expression);
@@ -668,12 +671,14 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const expression = {
fieldName: 'ProductName',
searchVal: 'Ignite',
- condition: IgxStringFilteringOperand.instance().condition('startsWith')
+ condition: IgxStringFilteringOperand.instance().condition('startsWith'),
+ conditionName: 'startsWith'
};
const expression1 = {
fieldName: 'ProductName',
searchVal: 'Angular',
- condition: IgxStringFilteringOperand.instance().condition('contains')
+ condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains'
};
filteringExpressionsTree.filteringOperands.push(expression);
filteringExpressionsTree.filteringOperands.push(expression1);
@@ -832,7 +837,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const expression = {
fieldName: 'ProductName',
searchVal: 'I',
- condition: IgxStringFilteringOperand.instance().condition('startsWith')
+ condition: IgxStringFilteringOperand.instance().condition('startsWith'),
+ conditionName: 'startsWith'
};
filteringExpressionsTree.filteringOperands.push(expression);
}
@@ -898,13 +904,15 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const expression1 = {
fieldName: 'ProductName',
searchVal: 'Ignite',
- condition: IgxStringFilteringOperand.instance().condition('startsWith')
+ condition: IgxStringFilteringOperand.instance().condition('startsWith'),
+ conditionName: 'startsWith'
};
const expression2 = {
fieldName: 'ProductName',
searchVal: 'test',
- condition: IgxStringFilteringOperand.instance().condition('contains')
+ condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains'
};
filteringExpressionsTree.filteringOperands.push(expression1);
@@ -1064,12 +1072,14 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const expression = {
fieldName: 'ProductName',
searchVal: 'Ignite',
- condition: IgxStringFilteringOperand.instance().condition('startsWith')
+ condition: IgxStringFilteringOperand.instance().condition('startsWith'),
+ conditionName: 'startsWith'
};
const expression1 = {
fieldName: 'ProductName',
searchVal: 'Angular',
- condition: IgxStringFilteringOperand.instance().condition('contains')
+ condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains'
};
filteringExpressionsTree.filteringOperands.push(expression);
filteringExpressionsTree.filteringOperands.push(expression1);
@@ -1100,12 +1110,14 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const expression = {
fieldName: 'ProductName',
searchVal: 'Ignite',
- condition: IgxStringFilteringOperand.instance().condition('startsWith')
+ condition: IgxStringFilteringOperand.instance().condition('startsWith'),
+ conditionName: 'startsWith'
};
const expression1 = {
fieldName: 'ProductName',
searchVal: 'for',
- condition: IgxStringFilteringOperand.instance().condition('contains')
+ condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains'
};
filteringExpressionsTree.filteringOperands.push(expression);
filteringExpressionsTree.filteringOperands.push(expression1);
@@ -1147,8 +1159,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'o', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'o', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -1466,9 +1478,9 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'z', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'n', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'g', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'z', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'n', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'g', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -1492,9 +1504,9 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'n', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'z', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'g', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'n', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'z', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'g', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -1550,9 +1562,9 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'e', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'i', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'e', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'i', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -1749,9 +1761,9 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'e', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'i', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'e', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'i', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -1783,9 +1795,9 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'e', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'i', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'e', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'i', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -1821,9 +1833,9 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'e', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'i', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'e', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'i', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -1858,8 +1870,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'e', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'e', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -1949,10 +1961,10 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'e', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'i', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'n', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'e', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'i', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'n', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -2441,11 +2453,11 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'x', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'y', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'i', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'g', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'n', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'x', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'y', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'i', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'g', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'n', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -2517,8 +2529,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'o', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'o', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -2605,8 +2617,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.And, 'Downloads');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'Downloads', searchVal: 25, condition: IgxNumberFilteringOperand.instance().condition('greaterThan') },
- { fieldName: 'Downloads', searchVal: 200, condition: IgxNumberFilteringOperand.instance().condition('lessThan') }
+ { fieldName: 'Downloads', searchVal: 25, condition: IgxNumberFilteringOperand.instance().condition('greaterThan'), conditionName: 'greaterThan' },
+ { fieldName: 'Downloads', searchVal: 200, condition: IgxNumberFilteringOperand.instance().condition('lessThan'), conditionName: 'lessThan' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -2729,7 +2741,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const expression = {
fieldName: 'ProductName',
searchVal: 'Ignite',
- condition: IgxStringFilteringOperand.instance().condition('startsWith')
+ condition: IgxStringFilteringOperand.instance().condition('startsWith'),
+ conditionName: 'startsWith'
};
filteringExpressionsTree.filteringOperands.push(expression);
grid.filteringExpressionsTree = filteringExpressionsTree;
@@ -3019,16 +3032,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
);
}));
- it('Should emit filteringDone when we clicked reset - Boolean column type', fakeAsync(() => {
- emitFilteringDoneOnResetClick(
- fix,
- grid,
- true,
- 'Released',
- IgxBooleanFilteringOperand.instance().condition('true')
- );
- }));
-
it('Should emit filteringDone when we clicked reset - DateTime column type', fakeAsync(() => {
emitFilteringDoneOnResetClick(
fix,
@@ -3079,16 +3082,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
);
}));
- it('Should emit filteringDone when clear the input of filteringUI - Boolean column type', fakeAsync(() => {
- emitFilteringDoneOnInputClear(
- fix,
- grid,
- true,
- 'Released',
- IgxBooleanFilteringOperand.instance().condition('true')
- );
- }));
-
it('Should emit filteringDone when clear the input of filteringUI - DateTime column type', fakeAsync(() => {
emitFilteringDoneOnInputClear(
fix,
@@ -3440,8 +3433,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.And, 'Downloads');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals') },
- { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals') }
+ { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals' },
+ { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -3460,7 +3453,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.Or, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'Angular', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'Angular', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -3494,7 +3487,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.Or, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'Angular', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'Angular', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -3528,8 +3521,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.Or, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'Angular', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'Ignite', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'Angular', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'Ignite', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -3557,8 +3550,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.Or, 'Downloads');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'Downloads', searchVal: 254, condition: IgxNumberFilteringOperand.instance().condition('equals') },
- { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals') }
+ { fieldName: 'Downloads', searchVal: 254, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals' },
+ { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -3583,8 +3576,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.Or, 'Downloads');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'Downloads', searchVal: 254, condition: IgxNumberFilteringOperand.instance().condition('equals') },
- { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals') }
+ { fieldName: 'Downloads', searchVal: 254, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals' },
+ { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -3616,8 +3609,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.Or, 'Downloads');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'Downloads', searchVal: 254, condition: IgxNumberFilteringOperand.instance().condition('equals') },
- { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals') }
+ { fieldName: 'Downloads', searchVal: 254, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals' },
+ { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -3672,8 +3665,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.Or, 'Downloads');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'Downloads', searchVal: 254, condition: IgxNumberFilteringOperand.instance().condition('equals') },
- { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('lessThan') }
+ { fieldName: 'Downloads', searchVal: 254, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals' },
+ { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('lessThan'), conditionName: 'lessThan' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -3716,8 +3709,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.Or, 'Downloads');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'Downloads', searchVal: 254, condition: IgxNumberFilteringOperand.instance().condition('equals') },
- { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals') }
+ { fieldName: 'Downloads', searchVal: 254, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals' },
+ { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -3735,8 +3728,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.Or, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'Angular', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'Ignite', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'Angular', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'Ignite', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -3763,8 +3756,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.Or, 'ProductName');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'ProductName', searchVal: 'Angular', condition: IgxStringFilteringOperand.instance().condition('contains') },
- { fieldName: 'ProductName', searchVal: 'Ignite', condition: IgxStringFilteringOperand.instance().condition('contains') }
+ { fieldName: 'ProductName', searchVal: 'Angular', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' },
+ { fieldName: 'ProductName', searchVal: 'Ignite', condition: IgxStringFilteringOperand.instance().condition('contains'), conditionName: 'contains' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -3862,8 +3855,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.Or, 'Downloads');
columnsFilteringTree.filteringOperands = [
- { fieldName: 'Downloads', searchVal: 254, condition: IgxNumberFilteringOperand.instance().condition('equals') },
- { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals') }
+ { fieldName: 'Downloads', searchVal: 254, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals' },
+ { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('equals'), conditionName: 'equals' }
];
gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
grid.filteringExpressionsTree = gridFilteringExpressionsTree;
@@ -6552,7 +6545,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const displayContainer = searchComponent.querySelector('igx-display-container');
const displayContainerRect = displayContainer.getBoundingClientRect();
const parentContainerRect = displayContainer.parentElement.getBoundingClientRect();
-
+
expect(displayContainerRect.top - parentContainerRect.top <= 1).toBe(true, 'search scrollbar did not reset');
});
});
@@ -7228,8 +7221,8 @@ const verifyExcelStyleFilteringSize = (fix: ComponentFixture
, expectedSize:
expect(getComponentSize(list)).toBe(expectedSize);
// Verify size of all flat and contained buttons in excel stlye dialog.
- const flatButtons: HTMLElement[] = excelMenu.querySelectorAll('.igx-button--flat');
- const containedButtons: HTMLElement[] = excelMenu.querySelectorAll('.igx-button--contained');
+ const flatButtons: HTMLElement[] = excelMenu.querySelectorAll('.igx-button--flat:not(.igx-excel-filter__secondary *):not(.igx-excel-filter__menu-footer)');
+ const containedButtons: HTMLElement[] = excelMenu.querySelectorAll('.igx-button--contained:not(.igx-excel-filter__secondary *):not(.igx-excel-filter__menu-footer)');
const buttons: HTMLElement[] = Array.from(flatButtons).concat(Array.from(containedButtons));
buttons.forEach((button) => {
expect(getComponentSize(button)).toBe(expectedSize);
@@ -7332,10 +7325,12 @@ const verifySortMoveSize = (fix: ComponentFixture, expectedSize: Size) => {
const verifyExcelCustomFilterSize = (fix: ComponentFixture, expectedSize: Size) => {
// Excel style filtering custom filter dialog
const customFilterMenu = GridFunctions.getExcelStyleCustomFilteringDialog(fix);
+ // Main container of custom filter dialog
+ const container = customFilterMenu.querySelector('.igx-excel-filter__secondary-main');
// Verify size of all flat and contained buttons in custom filter dialog.
- const flatButtons = customFilterMenu.querySelectorAll('.igx-button--flat');
- const containedButtons = customFilterMenu.querySelectorAll('.igx-button--contained');
+ const flatButtons = container.querySelectorAll('.igx-button--flat');
+ const containedButtons = container.querySelectorAll('.igx-button--contained');
const buttons = Array.from(flatButtons).concat(Array.from(containedButtons));
buttons.forEach((button) => {
expect(getComponentSize(button)).toBe(expectedSize);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering.spec.ts
index 9cea1761943..ea11c13df6a 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering.spec.ts
@@ -770,8 +770,8 @@ describe('IgxGrid - Filtering actions #grid', () => {
const gridExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
gridExpressionsTree.filteringOperands = [
- { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo') },
- { fieldName: 'ID', searchVal: 4, condition: IgxNumberFilteringOperand.instance().condition('greaterThan') }
+ { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), conditionName: 'greaterThanOrEqualTo' },
+ { fieldName: 'ID', searchVal: 4, condition: IgxNumberFilteringOperand.instance().condition('greaterThan'), conditionName: 'greaterThan' }
];
grid.filteringExpressionsTree = gridExpressionsTree;
@@ -839,14 +839,14 @@ describe('IgxGrid - Filtering actions #grid', () => {
it('Should correctly apply two conditions to two columns at once.', fakeAsync(() => {
const colDownloadsExprTree = new FilteringExpressionsTree(FilteringLogic.And, 'Downloads');
colDownloadsExprTree.filteringOperands = [
- { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo') },
- { fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('lessThanOrEqualTo') }
+ { fieldName: 'Downloads', searchVal: 20, condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), conditionName: 'greaterThanOrEqualTo' },
+ { fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('lessThanOrEqualTo'), conditionName: 'lessThanOrEqualTo' }
];
const colIdExprTree = new FilteringExpressionsTree(FilteringLogic.And, 'ID');
colIdExprTree.filteringOperands = [
- { fieldName: 'ID', searchVal: 1, condition: IgxNumberFilteringOperand.instance().condition('greaterThan') },
- { fieldName: 'ID', searchVal: 5, condition: IgxNumberFilteringOperand.instance().condition('lessThan') }
+ { fieldName: 'ID', searchVal: 1, condition: IgxNumberFilteringOperand.instance().condition('greaterThan'), conditionName: 'greaterThan' },
+ { fieldName: 'ID', searchVal: 5, condition: IgxNumberFilteringOperand.instance().condition('lessThan'), conditionName: 'lessThan' }
];
const gridExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
@@ -870,12 +870,14 @@ describe('IgxGrid - Filtering actions #grid', () => {
const expression = {
fieldName: 'Downloads',
searchVal: 50,
- condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
+ condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
+ conditionName: 'greaterThan'
};
const expression1 = {
fieldName: 'Downloads',
searchVal: 500,
- condition: IgxNumberFilteringOperand.instance().condition('lessThan')
+ condition: IgxNumberFilteringOperand.instance().condition('lessThan'),
+ conditionName: 'lessThan'
};
filteringExpressionsTree.filteringOperands.push(expression);
filteringExpressionsTree.filteringOperands.push(expression1);
@@ -892,12 +894,14 @@ describe('IgxGrid - Filtering actions #grid', () => {
const expression = {
fieldName: 'ProductName',
searchVal: 'Ignite',
- condition: IgxStringFilteringOperand.instance().condition('startsWith')
+ condition: IgxStringFilteringOperand.instance().condition('startsWith'),
+ conditionName: 'startsWith'
};
const expression1 = {
fieldName: 'ProductName',
searchVal: 'Angular',
- condition: IgxStringFilteringOperand.instance().condition('contains')
+ condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains'
};
filteringExpressionsTree.filteringOperands.push(expression);
filteringExpressionsTree.filteringOperands.push(expression1);
@@ -916,12 +920,14 @@ describe('IgxGrid - Filtering actions #grid', () => {
const expression = {
fieldName: 'ReleaseDate',
searchVal: null,
- condition: IgxDateFilteringOperand.instance().condition('yesterday')
+ condition: IgxDateFilteringOperand.instance().condition('yesterday'),
+ conditionName: 'yesterday'
};
const expression1 = {
fieldName: 'ReleaseDate',
searchVal: today,
- condition: IgxDateFilteringOperand.instance().condition('after')
+ condition: IgxDateFilteringOperand.instance().condition('after'),
+ conditionName: 'after'
};
filteringExpressionsTree.filteringOperands.push(expression);
filteringExpressionsTree.filteringOperands.push(expression1);
@@ -939,7 +945,8 @@ describe('IgxGrid - Filtering actions #grid', () => {
const expression = {
fieldName: 'ReleaseDate',
searchVal: null,
- condition: IgxDateFilteringOperand.instance().condition('yesterday')
+ condition: IgxDateFilteringOperand.instance().condition('yesterday'),
+ conditionName: 'yesterday'
};
filteringExpressionsTree.filteringOperands.push(expression);
gridExpressionsTree.filteringOperands.push(filteringExpressionsTree);
@@ -974,29 +981,34 @@ describe('IgxGrid - Filtering actions #grid', () => {
const expression = {
fieldName: 'ProductName',
searchVal: 'Ignite',
- condition: IgxStringFilteringOperand.instance().condition('startsWith')
+ condition: IgxStringFilteringOperand.instance().condition('startsWith'),
+ conditionName: 'startsWith'
};
const expression1 = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
const expression11 = {
fieldName: 'ProductName',
searchVal: 'Angular',
- condition: IgxStringFilteringOperand.instance().condition('contains')
+ condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains'
};
const expression12 = {
fieldName: 'ProductName',
searchVal: 'jQuery',
- condition: IgxStringFilteringOperand.instance().condition('contains')
+ condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains'
};
const expression2 = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
const expression21 = {
fieldName: 'ProductName',
searchVal: 'Angular',
- condition: IgxStringFilteringOperand.instance().condition('contains')
+ condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains'
};
const expression22 = {
fieldName: 'ProductName',
searchVal: 'jQuery',
- condition: IgxStringFilteringOperand.instance().condition('contains')
+ condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains'
};
expression1.filteringOperands.push(expression11);
expression1.filteringOperands.push(expression12);
@@ -1063,7 +1075,8 @@ describe('IgxGrid - Filtering actions #grid', () => {
const expression11 = {
fieldName: 'ProductName',
searchVal: 'Angular',
- condition: IgxStringFilteringOperand.instance().condition('contains')
+ condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains'
};
// Verify results after filtering.
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts
index b7bbfe08bfc..5a6605b5334 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts
@@ -12,7 +12,6 @@ import { IgxGridGroupByRowComponent } from './groupby-row.component';
import { GridFunctions, GRID_MRL_BLOCK } from '../../test-utils/grid-functions.spec';
import { CellType } from '../common/grid.interface';
import { IgxColumnLayoutComponent } from '../columns/column-layout.component';
-import { NgFor } from '@angular/common';
import { IGridCellEventArgs, IgxColumnComponent } from '../public_api';
const DEBOUNCETIME = 30;
@@ -2623,14 +2622,18 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
@Component({
template: `
-
-
-
+ @for (group of colGroups; track group) {
+
+ @for (col of group.columns; track col) {
+
+ }
+
+ }
`,
- imports: [IgxGridComponent, IgxColumnComponent, IgxColumnLayoutComponent, NgFor]
+ imports: [IgxGridComponent, IgxColumnComponent, IgxColumnLayoutComponent]
})
export class ColumnLayoutTestComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
index 41886530de4..bb08b5b7e06 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
@@ -1,5 +1,4 @@
import { ViewChild, Component, DebugElement, OnInit, QueryList } from '@angular/core';
-import { NgFor, NgIf } from '@angular/common';
import { TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -1413,10 +1412,12 @@ describe('Row Pinning #grid', () => {
[height]='"500px"'
[data]="data"
[autoGenerate]="true">
-
+ @if (paging) {
+
+ }
`,
- imports: [IgxGridComponent, IgxPaginatorComponent, NgIf]
+ imports: [IgxGridComponent, IgxPaginatorComponent]
})
export class GridRowPinningComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1435,14 +1436,18 @@ export class GridRowPinningComponent {
template: `
-
-
-
+ @for (group of colGroups; track group) {
+
+ @for (col of group.columns; track col) {
+
+ }
+
+ }
`,
- imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, NgFor]
+ imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent]
})
export class GridRowPinningWithMRLComponent extends GridRowPinningComponent {
public cols: Array = [
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts
index e2e73766d13..d842c41ab56 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts
@@ -2091,11 +2091,13 @@ describe('IgxGrid - Row Selection #grid', () => {
fieldName: 'UnitsInStock',
searchVal: 0,
condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
+ conditionName: 'greaterThan'
});
tree.filteringOperands.push({
fieldName: 'ProductName',
searchVal: 'a',
condition: IgxStringFilteringOperand.instance().condition('contains'),
+ conditionName: 'contains',
ignoreCase: true
});
grid.advancedFilteringExpressionsTree = tree;
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
index f262a09e0cc..7289bc16f29 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
@@ -6,75 +6,77 @@