From 01bce6da6efa89ee7521d8c29864933c02532a27 Mon Sep 17 00:00:00 2001 From: Hristo Anastasov Date: Wed, 24 Jun 2020 15:07:47 +0300 Subject: [PATCH] test(state): refactor test to generate state #7025 --- .../src/lib/grids/state.directive.spec.ts | 7 +- .../src/lib/grids/state.directive.ts | 8 +- .../lib/grids/state.hierarchicalgrid.spec.ts | 273 ++++++++---------- .../src/lib/grids/state.treegrid.spec.ts | 5 +- 4 files changed, 129 insertions(+), 164 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts index 2534143f55d..25b01c1d066 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts @@ -79,7 +79,7 @@ describe('IgxGridState - input properties #grid', () => { }); it('getState should return corect JSON string', () => { - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true}],"filtering":{"filteringOperands":[],"operator":0},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[]}'; const fix = TestBed.createComponent(IgxGridStateComponent); fix.detectChanges(); @@ -131,7 +131,6 @@ describe('IgxGridState - input properties #grid', () => { HelperFunctions.verifyGroupingExpressions(groupBy, gridState); HelperFunctions.verifyGroupingExpansion(groupByExpansion, gridState.groupBy); HelperFunctions.verifyFilteringExpressions(filtering, gridState); - HelperFunctions.verifyAdvancedFilteringExpressions(advancedFiltering, gridState); }); it('getState should return corect IGridState object when options are not default', () => { @@ -474,7 +473,7 @@ describe('IgxGridState - input properties #grid', () => { const state = fix.componentInstance.state; // tslint:disable-next-line:max-line-length const advFilteringState = '{"advancedFiltering":{"filteringOperands":[{"fieldName":"InStock","condition":{"name":"true","isUnary":true,"iconName":"is_true"},"searchVal":null,"ignoreCase":true},{"fieldName":"ProductID","condition":{"name":"greaterThan","isUnary":false,"iconName":"greater_than"},"searchVal":"3","ignoreCase":true}],"operator":0,"type":1}}'; - const initialState = '{}'; + const initialState = '{"advancedFiltering":{}}'; let gridState = state.getState(true, 'advancedFiltering'); expect(gridState).toBe(initialState); @@ -493,7 +492,7 @@ describe('IgxGridState - input properties #grid', () => { const state = fix.componentInstance.state; // tslint:disable-next-line:max-line-length const advFilteringState = '{"advancedFiltering":{"filteringOperands":[{"fieldName":"InStock","condition":{"name":"true","isUnary":true,"iconName":"is_true"},"searchVal":null,"ignoreCase":true},{"fieldName":"ProductID","condition":{"name":"greaterThan","isUnary":false,"iconName":"greater_than"},"searchVal":"3","ignoreCase":true}],"operator":0,"type":1}}'; - const initialState = '{}'; + const initialState = '{"advancedFiltering":{}}'; const advFilteringStateObject = JSON.parse(advFilteringState); let gridState = state.getState(true, 'advancedFiltering'); diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.ts b/projects/igniteui-angular/src/lib/grids/state.directive.ts index b377c129c7a..6c2b9c345b4 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.ts @@ -383,13 +383,17 @@ namespace Features { public getFeatureState(context: IgxGridStateDirective): IGridState { const filteringState = context.currGrid.advancedFilteringExpressionsTree; + let advancedFiltering: any; if (filteringState) { delete filteringState.owner; for (const item of filteringState.filteringOperands) { delete (item as IFilteringExpressionsTree).owner; } + advancedFiltering = filteringState; + } else { + advancedFiltering = {}; } - return { advancedFiltering: filteringState }; + return { advancedFiltering: advancedFiltering }; } public restoreFeatureState(context: IgxGridStateDirective, state: FilteringExpressionsTree): void { @@ -520,6 +524,7 @@ namespace Features { } public restoreFeatureState(context: IgxGridStateDirective, state: string[]): void { + context.currGrid.deselectAllColumns(); context.currGrid.selectColumns(state); } } @@ -613,7 +618,6 @@ namespace Features { grid = grid.parent; } return grid.hgridAPI.getParentRowId(childGrid); - // return (childRow.hGridApi as IgxHierarchicalGridAPIService).getParentRowId(childGrid); } } diff --git a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts index 4f4fe09e22c..034645c2bf5 100644 --- a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts @@ -2,7 +2,7 @@ import { TestBed, async } from '@angular/core/testing'; import { Component, ViewChild } from '@angular/core'; import { IgxGridStateDirective, IGridState, IColumnState } from './state.directive'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { ISortingExpression } from '../data-operations/sorting-expression.interface'; +import { ISortingExpression, SortingDirection } from '../data-operations/sorting-expression.interface'; import { IGroupingExpression } from '../data-operations/grouping-expression.interface'; import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree'; import { IPagingState } from '../data-operations/paging-state.interface'; @@ -90,7 +90,7 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { }); it('getState should return corect JSON string', () => { - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"expansion":[],"rowIslands":[]}}]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"expansion":[],"rowIslands":[]}}]}'; fix.detectChanges(); const state = fix.componentInstance.state; @@ -126,7 +126,6 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { HelperFunctions.verifyColumns(columns, gridState); HelperFunctions.verifySortingExpressions(sorting, gridState); HelperFunctions.verifyFilteringExpressions(filtering, gridState); - HelperFunctions.verifyAdvancedFilteringExpressions(advancedFiltering, gridState); }); it('getState should return corect IGridState object when options are not default', () => { @@ -153,13 +152,12 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { HelperFunctions.verifySortingExpressions(sorting, gridState); }); - it('getState should return corect filtering state', () => { + it('getState should return correct filtering state', () => { const state = fix.componentInstance.state; const filtering = grid.filteringExpressionsTree; - const rowIslandId = 'igx-row-island-childData'; - const emptyFiltering = '"filtering":{"filteringOperands":[],"operator":0}'; - const initialState = HelperFunctions.buildStateString(emptyFiltering, emptyFiltering, rowIslandId); + const emptyFiltering = '{"filteringOperands":[],"operator":0}'; + const initialState = HelperFunctions.buildStateString(grid, 'filtering', emptyFiltering, emptyFiltering); let gridState = state.getState(true, ['filtering', 'inheritance']); expect(gridState).toBe(initialState); @@ -171,11 +169,12 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { it('setState should correctly restore grid filtering state from string', () => { const state = fix.componentInstance.state; - const rowIslandId = 'igx-row-island-childData'; - const emptyFiltering = '"filtering":{"filteringOperands":[],"operator":0}'; - const initialState = HelperFunctions.buildStateString(emptyFiltering, emptyFiltering, rowIslandId); - const filtering = '"filtering":{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"contains","isUnary":false,"iconName":"contains"},"fieldName":"ProductName","ignoreCase":true,"searchVal":"A0"}],"operator":0,"fieldName":"ProductName"}],"operator":0,"type":0}'; - const filteringState = HelperFunctions.buildStateString(filtering, filtering, rowIslandId); + const emptyFiltering = '{"filteringOperands":[],"operator":0}'; + const initialState = HelperFunctions.buildStateString(grid, 'filtering', emptyFiltering, emptyFiltering); + + const filtering = '{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"contains","isUnary":false,"iconName":"contains"},"fieldName":"ProductName","ignoreCase":true,"searchVal":"A0"}],"operator":0,"fieldName":"ProductName"}],"operator":0,"type":0}'; + const filteringState = HelperFunctions.buildStateString(grid, 'filtering', filtering, filtering); + const filteringStateObject = JSON.parse(filteringState) as IGridState; filteringStateObject.columns = fix.componentInstance.childColumns; @@ -196,12 +195,11 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { it('setState should correctly restore grid filtering state from object', () => { const state = fix.componentInstance.state; - const rowIslandId = 'igx-row-island-childData'; - const emptyFiltering = '"filtering":{"filteringOperands":[],"operator":0}'; - const emptyChildFiltering = '"filtering":{"filteringOperands":[],"operator":0,"type":0}'; - const initialState = HelperFunctions.buildStateString(emptyFiltering, emptyFiltering, rowIslandId); - const filtering = '"filtering":{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"contains","isUnary":false,"iconName":"contains"},"fieldName":"ProductName","ignoreCase":true,"searchVal":"A0"}],"operator":0,"fieldName":"ProductName"}],"operator":0,"type":0}'; - const filteringState = HelperFunctions.buildStateString(filtering, emptyChildFiltering, rowIslandId); + const emptyFiltering = '{"filteringOperands":[],"operator":0}'; + const initialState = HelperFunctions.buildStateString(grid, 'filtering', emptyFiltering, emptyFiltering); + + const filtering = '{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"contains","isUnary":false,"iconName":"contains"},"fieldName":"ProductName","ignoreCase":true,"searchVal":"A0"}],"operator":0,"fieldName":"ProductName"}],"operator":0,"type":0}'; + const filteringState = HelperFunctions.buildStateString(grid, 'filtering', filtering, filtering); const filteringStateObject = JSON.parse(filteringState) as IGridState; filteringStateObject.columns = fix.componentInstance.childColumns; @@ -223,15 +221,25 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { it('setState should correctly restore grid sorting state from string', () => { const state = fix.componentInstance.state; - const rowIslandId = 'igx-row-island-childData'; - const emptySorting = '"sorting":[]'; - const initialState = HelperFunctions.buildStateString(emptySorting, emptySorting, rowIslandId); - const sorting = '"sorting":[{"fieldName":"ID","dir":2,"ignoreCase":true}]'; - const sortingState = HelperFunctions.buildStateString(sorting, sorting, rowIslandId); + let sorting = grid.sortingExpressions; + const emptySorting = '[]'; + let initialState = HelperFunctions.buildStateString(grid, 'sorting', emptySorting, emptySorting); let gridState = state.getState(true, ['sorting', 'inheritance']); expect(gridState).toBe(initialState); + grid.sortingExpressions = [ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true } + ]; + fix.detectChanges(); + + sorting = '[{"fieldName":"ProductName","dir":1,"ignoreCase":true}]'; + initialState = HelperFunctions.buildStateString(grid, 'sorting', sorting, emptySorting, emptySorting); + const sortingState = HelperFunctions.buildStateString(grid, 'sorting', sorting, sorting); + + gridState = state.getState(true, ['sorting', 'inheritance']); + expect(gridState).toBe(initialState); + state.setState(sortingState); gridState = state.getState(false, ['sorting', 'inheritance']) as IGridState; HelperFunctions.verifySortingExpressions(grid.sortingExpressions, gridState); @@ -245,12 +253,15 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { it('setState should correctly restore grid sorting state from object', () => { const state = fix.componentInstance.state; + grid.sortingExpressions = [ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true } + ]; + fix.detectChanges(); - const rowIslandId = 'igx-row-island-childData'; - const emptySorting = '"sorting":[]'; - const initialState = HelperFunctions.buildStateString(emptySorting, emptySorting, rowIslandId); - const sorting = '"sorting":[{"fieldName":"ID","dir":2,"ignoreCase":true}]'; - const sortingState = HelperFunctions.buildStateString(sorting, sorting, rowIslandId); + const emptySorting = '[]'; + const sorting = '[{"fieldName":"ProductName","dir":1,"ignoreCase":true}]'; + const initialState = HelperFunctions.buildStateString(grid, 'sorting', sorting, emptySorting, emptySorting); + const sortingState = HelperFunctions.buildStateString(grid, 'sorting', sorting, sorting); const sortingStateObject = JSON.parse(sortingState) as IGridState; let gridState = state.getState(true, ['sorting', 'inheritance']); @@ -270,13 +281,8 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { it('setState should correctly restore grid paging state from string', () => { const state = fix.componentInstance.state; - const rowIslandId = 'igx-row-island-childData'; - const initialPaging = '"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}}'; - const initialChiildPaging = '"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}}'; - const initialState = HelperFunctions.buildStateString(initialPaging, initialChiildPaging, rowIslandId); - const paging = '"paging":{"index":0,"recordsPerPage":10,"metadata":{"countPages":2,"countRecords":20,"error":0}}'; - const childPaging = '"paging":{"index":0,"recordsPerPage":10,"metadata":{"countPages":1,"countRecords":7,"error":0}}'; - const pagingState = HelperFunctions.buildStateString(paging, childPaging, rowIslandId); + const initialState = '{"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"rowIslands":[]}}]}'; + const pagingState = '{"paging":{"index":0,"recordsPerPage":20,"metadata":{"countPages":1,"countRecords":20,"error":0}},"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"paging":{"index":0,"recordsPerPage":20,"metadata":{"countPages":1,"countRecords":7,"error":0}},"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"paging":{"index":0,"recordsPerPage":20,"metadata":{"countPages":1,"countRecords":14,"error":0}},"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"paging":{"index":0,"recordsPerPage":20,"metadata":{"countPages":1,"countRecords":7,"error":0}},"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"paging":{"index":0,"recordsPerPage":20,"metadata":{"countPages":1,"countRecords":14,"error":0}},"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"paging":{"index":0,"recordsPerPage":20,"metadata":{"countPages":1,"countRecords":7,"error":0}},"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"5","state":{"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"6","state":{"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"rowIslands":[]}}]}'; let gridState = state.getState(true, ['paging', 'inheritance']); expect(gridState).toBe(initialState); @@ -295,10 +301,10 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { it('setState should correctly restore grid advanced filtering state from string', () => { const state = fix.componentInstance.state; - const rowIslandId = 'igx-row-island-childData'; - const initialState = '{"rowIslands":[{"id":"igx-row-island-childData","state":{"rowIslands":[]}}]}'; - const filtering = '"advancedFiltering":{"filteringOperands":[{"fieldName":"ProductName","condition":{"name":"contains","isUnary":false,"iconName":"contains"},"searchVal":"A0","ignoreCase":true},{"fieldName":"ID","condition":{"name":"lessThan","isUnary":false,"iconName":"less_than"},"searchVal":3,"ignoreCase":true}],"operator":0,"type":1}'; - const filteringState = HelperFunctions.buildStateString(filtering, filtering, rowIslandId); + const emptyFiltering = '{}'; + const initialState = HelperFunctions.buildStateString(grid, 'advancedFiltering', emptyFiltering, emptyFiltering); + const filtering = '{"filteringOperands":[{"fieldName":"ProductName","condition":{"name":"contains","isUnary":false,"iconName":"contains"},"searchVal":"A0","ignoreCase":true},{"fieldName":"ID","condition":{"name":"lessThan","isUnary":false,"iconName":"less_than"},"searchVal":3,"ignoreCase":true}],"operator":0,"type":1}'; + const filteringState = HelperFunctions.buildStateString(grid, 'advancedFiltering', filtering, filtering); let gridState = state.getState(true, ['advancedFiltering', 'inheritance']); expect(gridState).toBe(initialState); @@ -318,10 +324,10 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { it('setState should correctly restore grid advanced filtering state from object', () => { const state = fix.componentInstance.state; - const rowIslandId = 'igx-row-island-childData'; - const initialState = '{"rowIslands":[{"id":"igx-row-island-childData","state":{"rowIslands":[]}}]}'; - const filtering = '"advancedFiltering":{"filteringOperands":[{"fieldName":"ProductName","condition":{"name":"contains","isUnary":false,"iconName":"contains"},"searchVal":"A0","ignoreCase":true},{"fieldName":"ID","condition":{"name":"lessThan","isUnary":false,"iconName":"less_than"},"searchVal":3,"ignoreCase":true}],"operator":0,"type":1}'; - const filteringState = HelperFunctions.buildStateString(filtering, filtering, rowIslandId); + const emptyFiltering = '{}'; + const initialState = HelperFunctions.buildStateString(grid, 'advancedFiltering', emptyFiltering, emptyFiltering); + const filtering = '{"filteringOperands":[{"fieldName":"ProductName","condition":{"name":"contains","isUnary":false,"iconName":"contains"},"searchVal":"A0","ignoreCase":true},{"fieldName":"ID","condition":{"name":"lessThan","isUnary":false,"iconName":"less_than"},"searchVal":3,"ignoreCase":true}],"operator":0,"type":1}'; + const filteringState = HelperFunctions.buildStateString(grid, 'advancedFiltering', filtering, filtering); const filteringStateObject = JSON.parse(filteringState) as IGridState; let gridState = state.getState(true, ['advancedFiltering', 'inheritance']); @@ -342,11 +348,10 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { grid.rowSelection = GridSelectionMode.none; const state = fix.componentInstance.state; - const rowIslandId = 'igx-row-island-childData'; - const emptyCellSelection = '"cellSelection":[]'; - const initialState = HelperFunctions.buildStateString(emptyCellSelection, emptyCellSelection, rowIslandId); - const cellSelection = '"cellSelection":[{"rowStart":0,"rowEnd":2,"columnStart":1,"columnEnd":3}]'; - const cellSelectionState = HelperFunctions.buildStateString(cellSelection, cellSelection, rowIslandId); + const emptyCellSelection = '[]'; + const initialState = HelperFunctions.buildStateString(grid, 'cellSelection', emptyCellSelection, emptyCellSelection); + const cellSelection = '[{"rowStart":0,"rowEnd":2,"columnStart":1,"columnEnd":3}]'; + const cellSelectionState = HelperFunctions.buildStateString(grid, 'cellSelection', cellSelection, cellSelection); let gridState = state.getState(true, ['cellSelection', 'inheritance']); expect(gridState).toBe(initialState); @@ -365,12 +370,11 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { it('setState should correctly restore grid row selection state from string', () => { const state = fix.componentInstance.state; - const rowIslandId = 'igx-row-island-childData'; - const emptyRowSelection = '"rowSelection":[]'; - const initialState = HelperFunctions.buildStateString(emptyRowSelection, emptyRowSelection, rowIslandId); - const rowSelection = '"rowSelection":["0","1"]'; - const childRowSelection = '"rowSelection":["00","01"]'; - const rowSelectionState = HelperFunctions.buildStateString(rowSelection, childRowSelection, rowIslandId); + const emptyRowSelection = '[]'; + const initialState = HelperFunctions.buildStateString(grid, 'rowSelection', emptyRowSelection, emptyRowSelection); + const rowSelection = '["0","1"]'; + const childRowSelection = '["00","01"]'; + const rowSelectionState = HelperFunctions.buildStateString(grid, 'rowSelection', rowSelection, childRowSelection); let gridState = state.getState(true, ['rowSelection', 'inheritance']); expect(gridState).toBe(initialState); @@ -392,19 +396,17 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { const state = fix.componentInstance.state; - const rowIslandId = 'igx-row-island-childData'; - const emptyExpansionState = '"expansion":[]'; - const initialState = HelperFunctions.buildStateString(emptyExpansionState, emptyExpansionState, rowIslandId); - const expansion = '"expansion":[["0",true]]'; - const childExpansion = '"expansion":[["00",true]]'; - let expansionState = HelperFunctions.buildStateString(expansion, childExpansion, rowIslandId); + const emptyExpansionState = '[]'; + const initialState = HelperFunctions.buildStateString(grid, 'expansion', emptyExpansionState, emptyExpansionState); + const expansion = '[["0",true]]'; + const childExpansion = '[["00",true]]'; + let expansionState = HelperFunctions.buildStateString(grid, 'expansion', expansion, childExpansion, emptyExpansionState); let gridState = state.getState(true, ['expansion', 'inheritance']); expect(gridState).toBe(initialState); state.setState(expansionState); - // after expanding, there will be 2nd level grid available, add its state to expansion state for later check - expansionState = '{"expansion":[["0",true]],"rowIslands":[{"id":"igx-row-island-childData","state":{"expansion":[["00",true]],"rowIslands":[]}},{"id":"igx-row-island-childData-childData","state":{"expansion":[],"rowIslands":[]}}]}'; + expansionState = HelperFunctions.buildStateString(grid, 'expansion', expansion, childExpansion, emptyExpansionState); gridState = state.getState(false, ['expansion', 'inheritance']); HelperFunctions.verifyExpansionStates(grid.expansionStates, gridState as IGridState); const gridsCollection = HelperFunctions.getChildGridsCollection(grid, gridState); @@ -419,12 +421,11 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { fix.detectChanges(); const state = fix.componentInstance.state; - const rowIslandId = 'igx-row-island-childData'; - const rootGridColumns = '"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true}]'; - const childGridColumns = '"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}]'; - const initialState = HelperFunctions.buildStateString(rootGridColumns, childGridColumns, rowIslandId); - const newColumns = '"columns":[{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"363px","header":"Product Name","resizable":false,"searchable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"363px","header":"ID","resizable":false,"searchable":true}]'; - const newColumnsState = HelperFunctions.buildStateString(newColumns, newColumns, rowIslandId); + const rootGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true}]'; + const childGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}]'; + const initialState = HelperFunctions.buildStateString(grid, 'columns', rootGridColumns, childGridColumns); + const newColumns = '[{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"363px","header":"Product Name","resizable":false,"searchable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"363px","header":"ID","resizable":false,"searchable":true}]'; + const newColumnsState = HelperFunctions.buildStateString(grid, 'columns', newColumns, newColumns); let gridState = state.getState(true, ['columns', 'inheritance']); expect(gridState).toBe(initialState); @@ -495,12 +496,16 @@ class HelperFunctions { const rowIslands = (grid as any).allLayoutList; if (rowIslands) { rowIslands.forEach(rowIslandComponent => { - const childGrid = rowIslandComponent.rowIslandAPI.getChildGrids()[0]; - const rowIslandState = state.rowIslands.find(st => st.id === rowIslandComponent.id); - if (rowIslandState) { - const childGridState = { grid: childGrid, state: rowIslandState.state }; - gridStatesCollection.push(childGridState); - } + const childGrids = rowIslandComponent.rowIslandAPI.getChildGrids(); + + childGrids.forEach(chGrid => { + const parentRowId = this.getParentRowID(chGrid); + const rowIslandState = state.rowIslands.find(st => st.id === rowIslandComponent.id && st.parentRowID === parentRowId); + if (rowIslandState) { + const childGridState = { grid: chGrid, state: rowIslandState.state }; + gridStatesCollection.push(childGridState); + } + }); }); } return gridStatesCollection; @@ -522,91 +527,49 @@ class HelperFunctions { }); } - public static buildStateString(featureString: string, childFeatureString, rowIslandId: string): string { - const state = `{${featureString},"rowIslands":[{"id":"${rowIslandId}","state":{${childFeatureString},"rowIslands":[]}}]}`; + + public static buildStateString(grid: IgxHierarchicalGridComponent, feature: string, level0State: string, level1State: string, level2State?: string): string { + const level0featureState = this.buildFeatureString(feature, level0State); + const level1featureState = this.buildFeatureString(feature, level1State); + const level2featureState = level2State ? this.buildFeatureString(feature, level2State) : this.buildFeatureString(feature, level1State); + const rowIslandsString = this.buildRowIslandsString(grid.allLayoutList, level1featureState, level2featureState); + const state = `{${level0featureState},${rowIslandsString}`; return state; } -} -@Component({ - template: ` - - - - - - - - - - ` -}) -export class IgxHierarchicalGridTestBaseComponent { - public data; - public width = '500px'; - public columns: any[] = [ - // tslint:disable:max-line-length - { field: 'ID', header: 'ID', width: '150px', dataType: 'number', pinned: true, movable: true, sortable: true, filterable: true, groupable: false, hasSummary: false, hidden: false, maxWidth: '300px', searchable: false, sortingIgnoreCase: true, filteringIgnoreCase: true, editable: false, headerClasses: 'testCss', headerGroupClasses: '', resizable: true }, - { field: 'ProductName', header: 'Product Name', width: '150px', dataType: 'string', pinned: false, movable: true, sortable: true, filterable: true, groupable: true, hasSummary: false, hidden: false, maxWidth: '300px', searchable: true, sortingIgnoreCase: true, filteringIgnoreCase: true, editable: false, headerClasses: '', headerGroupClasses: '', resizable: true } - ]; + public static buildFeatureString(feature: string, stateString: string): string { + const state = `"${feature}":${stateString}`; + return state; + } - public childColumns: any[] = [ - { field: 'ID', header: 'Product ID', width: '150px', dataType: 'number', pinned: true, movable: true, sortable: true, filterable: true, groupable: false, hasSummary: false, hidden: false, maxWidth: '300px', searchable: false, sortingIgnoreCase: true, filteringIgnoreCase: true, editable: false, headerClasses: 'testCss', headerGroupClasses: '', resizable: true }, - { field: 'ProductName', header: 'Product Name', width: '150px', dataType: 'string', pinned: false, movable: true, sortable: true, filterable: true, groupable: true, hasSummary: false, hidden: false, maxWidth: '300px', searchable: true, sortingIgnoreCase: true, filteringIgnoreCase: true, editable: false, headerClasses: '', headerGroupClasses: '', resizable: true }, - { field: 'Col1', header: 'Col 1', width: '140px', dataType: 'boolean', pinned: false, movable: false, sortable: false, filterable: true, groupable: false, hasSummary: true, hidden: false, maxWidth: '300px', searchable: true, sortingIgnoreCase: true, filteringIgnoreCase: true, editable: true, headerClasses: '', headerGroupClasses: '', resizable: true }, - { field: 'Col2', header: 'Col 2', width: '110px', dataType: 'date', pinned: false, movable: false, sortable: true, filterable: false, groupable: true, hasSummary: false, hidden: false, maxWidth: '300px', searchable: true, sortingIgnoreCase: true, filteringIgnoreCase: true, editable: true, headerClasses: '', headerGroupClasses: '', resizable: false }, - { field: 'Col3', header: 'Col 3', width: '110px', dataType: 'date', pinned: false, movable: false, sortable: true, filterable: false, groupable: true, hasSummary: false, hidden: false, maxWidth: '300px', searchable: true, sortingIgnoreCase: true, filteringIgnoreCase: true, editable: true, headerClasses: '', headerGroupClasses: '', resizable: false }, - // tslint:enable:max-line-length - ]; + public static buildRowIslandsString(rowIslands, level1State: string, level2State: string): string { + const rowIslandsStates = []; + rowIslands.forEach(rowIsland => { + const featureState = rowIsland.level === 1 ? level1State : level2State; + const childGrids = rowIsland.rowIslandAPI.getChildGrids(); + childGrids.forEach(chGrid => { + const parentRowId = this.getParentRowID(chGrid); + rowIslandsStates.push(this.buildRowIslandStateString(rowIsland.id, parentRowId, featureState)); + }); + }); + const rowIslandsState = rowIslandsStates.join(','); + const state = `"rowIslands":[${rowIslandsState}]}`; + return state; + } - @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true }) public hgrid: IgxHierarchicalGridComponent; - @ViewChild('rowIsland', { read: IgxRowIslandComponent, static: true }) public rowIsland: IgxRowIslandComponent; - @ViewChild('rowIsland2', { read: IgxRowIslandComponent, static: true }) public rowIsland2: IgxRowIslandComponent; - @ViewChild(IgxGridStateDirective, { static: true }) - public state: IgxGridStateDirective; + public static buildRowIslandStateString(rowIslandId: string, parentRowId: string, featureState): string { + const state = `{"id":"${rowIslandId}","parentRowID":"${parentRowId}","state":{${featureState},"rowIslands":[]}}`; + return state; + } - constructor() { - // 3 level hierarchy - this.data = generateDataUneven(20, 3); + private static getParentRowID(grid: IgxHierarchicalGridComponent) { + let childGrid, childRow; + while (grid.parent) { + childRow = grid.childRow; + childGrid = grid; + grid = grid.parent; + } + return grid.hgridAPI.getParentRowId(childGrid); } } @@ -697,12 +660,12 @@ export class IgxHierarchicalGridTestExpandedBaseComponent { } } -export function generateDataUneven(count: number, level: number, parendID: string = null) { +export function generateDataUneven(count: number, level: number, parentID: string = null) { const prods = []; const currLevel = level; let children; for (let i = 0; i < count; i++) { - const rowID = parendID ? parendID + i : i.toString(); + const rowID = parentID ? parentID + i : i.toString(); if (level > 0 ) { // Have child grids for row with even id less rows by not multiplying by 2 children = generateDataUneven((i % 2 + 1) * Math.round(count / 3) , currLevel - 1, rowID); diff --git a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts index 9134ca54242..847d5461dba 100644 --- a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts @@ -59,7 +59,7 @@ describe('IgxTreeGridState - input properties #tGrid', () => { it('getState should return corect JSON string', () => { // tslint:disable-next-line:max-line-length - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"expansion":[],"rowIslands":[]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"expansion":[],"rowIslands":[]}'; fix.detectChanges(); const state = fix.componentInstance.state; @@ -94,7 +94,6 @@ describe('IgxTreeGridState - input properties #tGrid', () => { HelperFunctions.verifyPaging(paging, gridState); HelperFunctions.verifySortingExpressions(sorting, gridState); HelperFunctions.verifyFilteringExpressions(filtering, gridState); - HelperFunctions.verifyAdvancedFilteringExpressions(advancedFiltering, gridState); }); it('getState should return corect filtering state', () => { @@ -216,7 +215,7 @@ describe('IgxTreeGridState - input properties #tGrid', () => { const state = fix.componentInstance.state; // tslint:disable-next-line:max-line-length const advFilteringState = '{"advancedFiltering":{"filteringOperands":[{"fieldName":"Age","condition":{"name":"greaterThan","isUnary":false,"iconName":"greater_than"},"searchVal":25,"ignoreCase":true},{"fieldName":"ID","condition":{"name":"greaterThan","isUnary":false,"iconName":"greater_than"},"searchVal":"3","ignoreCase":true}],"operator":0,"type":1}}'; - const initialState = '{}'; + const initialState = '{"advancedFiltering":{}}'; let gridState = state.getState(true, 'advancedFiltering'); expect(gridState).toBe(initialState);