test(grid): fix, tests for state persistence #5460

Author: hanastasov

projects/igniteui-angular/src/lib/grids/state.directive.spec.ts

@@ -0,0 +1,246 @@
+import { TestBed, async } from '@angular/core/testing';
+import { IgxGridModule, IgxGridComponent } from './grid';
+import { Component, ViewChild } from '@angular/core';
+import { SampleTestData } from '../test-utils/sample-test-data.spec';
+import { IgxGridStateDirective, IGridState, IColumnState } from './state.directive';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ISortingExpression, SortingDirection } from '../data-operations/sorting-expression.interface';
+import { IGroupingExpression } from '../data-operations/grouping-expression.interface';
+import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
+import { IPagingState } from '../data-operations/paging-state.interface';
+import { GridSelectionRange } from './selection/selection.service';
+import { FilteringLogic, DefaultSortingStrategy } from 'igniteui-angular';
+import { IgxBooleanFilteringOperand } from '../data-operations/filtering-condition';
+import { IGroupingState } from '../data-operations/groupby-state.interface';
+import { IGroupByExpandState } from '../data-operations/groupby-expand-state.interface';
+
+describe('IgxGridState - input properties', () => {
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                IgxGridStateComponent,
+                IgxGridStateWithOptionsComponent
+            ],
+            imports: [ NoopAnimationsModule, IgxGridModule ]
+        }).compileComponents();
+    }));
+
+    it('should initialize an IgxGridState with default options object', () => {
+        const defaultOptions = {
+            columns: true,
+            filtering: true,
+            advancedFiltering: true,
+            sorting: true,
+            groupBy: true,
+            paging: true,
+            cellSelection: true,
+            rowSelection: true
+        };
+
+        const fix = TestBed.createComponent(IgxGridStateComponent);
+        fix.detectChanges();
+
+        const state = fix.componentInstance.state;
+
+        expect(state).toBeDefined('IgxGridState directive is initialized');
+        expect(state.options).toEqual(jasmine.objectContaining(defaultOptions));
+    });
+
+    it('should initialize an IgxGridState with correct options input', () => {
+        const optionsInput = {
+            columns: true,
+            filtering: false,
+            advancedFiltering: true,
+            sorting: false,
+            groupBy: true,
+            paging: true,
+            cellSelection: true,
+            rowSelection: true
+        };
+
+        const fix = TestBed.createComponent(IgxGridStateWithOptionsComponent);
+        fix.detectChanges();
+
+        const state = fix.componentInstance.state;
+        expect(state.options).toEqual(jasmine.objectContaining(optionsInput));
+    });
+
+    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":"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},{"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":{"filteringOperands":[],"operator":0},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[]}';
+        const fix = TestBed.createComponent(IgxGridStateComponent);
+        fix.detectChanges();
+
+        const state = fix.componentInstance.state;
+
+        const gridState = state.getState();
+        expect(gridState).toBe(initialGridState, 'JSON string representation of the initial grid state is not correct');
+    });
+
+    it('getState should return corect IGridState object', () => {
+        const fix = TestBed.createComponent(IgxGridStateComponent);
+        fix.detectChanges();
+        const grid  = fix.componentInstance.grid;
+        const state = fix.componentInstance.state;
+
+        const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
+        const productFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
+        const productExpression = {
+            condition: IgxBooleanFilteringOperand.instance().condition('true'),
+            fieldName: 'InStock',
+            ignoreCase: true
+        };
+        productFilteringExpressionsTree.filteringOperands.push(productExpression);
+        gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree);
+
+        const groupingExpressions = [
+            { dir: SortingDirection.Asc, fieldName: 'ProductID', ignoreCase: false,
+              strategy: DefaultSortingStrategy.instance() },
+            { dir: SortingDirection.Asc, fieldName: 'OrderDate', ignoreCase: false,
+              strategy: DefaultSortingStrategy.instance() }
+        ];
+
+        grid.filteringExpressionsTree = gridFilteringExpressionsTree;
+        grid.groupingExpressions = groupingExpressions;
+        fix.detectChanges();
+
+        const columns = fix.componentInstance.columns;
+        const paging = grid.pagingState;
+        const sorting = grid.sortingExpressions;
+        const groupBy = grid.groupingExpressions;
+        const groupByExpansion = grid.groupingExpansionState;
+        const filtering = grid.filteringExpressionsTree;
+        const advancedFiltering = grid.advancedFilteringExpressionsTree;
+
+        const gridState = state.getState(false) as IGridState;
+        HelperFunctions.verifyColumns(columns, gridState);
+        HelperFunctions.verifyPaging(paging, gridState);
+        HelperFunctions.verifySortingExpressions(sorting, gridState);
+        HelperFunctions.verifyGroupingExpressions(groupBy, gridState);
+        HelperFunctions.verifyGroupingExpansion(groupByExpansion, gridState.groupBy);
+        HelperFunctions.verifyFilteringExpressions(filtering, gridState);
+        // HelperFunctions.verifyAdvancedFilteringExpressions(advancedFiltering, gridState);
+    });
+});
+
+class HelperFunctions {
+    public static verifyColumns(columns: IColumnState[], gridState: IGridState) {
+        columns.forEach((c, index) => {
+            expect(gridState.columns[index]).toEqual(jasmine.objectContaining(c));
+        });
+    }
+
+    public static verifySortingExpressions(sortingExpressions: ISortingExpression[], gridState: IGridState) {
+        sortingExpressions.forEach((expr, i) => {
+            expect(expr).toEqual(jasmine.objectContaining(gridState.sorting[i]));
+        });
+    }
+
+    public static verifyGroupingExpressions(groupingExpressions: IGroupingExpression[], gridState: IGridState) {
+        groupingExpressions.forEach((expr, i) => {
+            expect(expr).toEqual(jasmine.objectContaining(gridState.groupBy.expressions[i]));
+        });
+    }
+
+    public static verifyGroupingExpansion(groupingExpansion: IGroupByExpandState[], groupBy: IGroupingState) {
+        groupingExpansion.forEach((exp, i) => {
+            expect(exp).toEqual(jasmine.objectContaining(groupBy.expansion[i]));
+        });
+    }
+
+    public static verifyFilteringExpressions(expressions: IFilteringExpressionsTree, gridState: IGridState) {
+        expect(expressions.fieldName).toBe(gridState.filtering.fieldName, 'Filtering expression field name is not correct');
+        expect(expressions.operator).toBe(gridState.filtering.operator, 'Filtering expression operator value is not correct');
+        expressions.filteringOperands.forEach((expr, i) => {
+            expect(expr).toEqual(jasmine.objectContaining(gridState.filtering.filteringOperands[i]));
+        });
+    }
+
+    public static verifyAdvancedFilteringExpressions(expressions: IFilteringExpressionsTree, gridState: IGridState) {
+        expect(expressions.fieldName).toBe(gridState.filtering.fieldName, 'Filtering expression field name is not correct');
+        expect(expressions.operator).toBe(gridState.filtering.operator, 'Filtering expression operator value is not correct');
+        expressions.filteringOperands.forEach((expr, i) => {
+            expect(expr).toEqual(jasmine.objectContaining(gridState.filtering.filteringOperands[i]));
+        });
+    }
+
+    public static verifyPaging(paging: IPagingState, gridState: IGridState) {
+        expect(paging).toEqual(jasmine.objectContaining(gridState.paging));
+    }
+
+    public static verifyRowSelection(selectedRows: any[], gridState: IGridState) {
+
+    }
+
+    public static verifyCellSelection(selectedCells: GridSelectionRange, gridState: IGridState) {
+
+    }
+}
+
+@Component({
+    template: `
+        <igx-grid #grid [data]="data" [paging]="true" [autoGenerate]="false" igxGridState>
+            <igx-column *ngFor="let c of columns"
+                [width]="c.width"
+                [sortable]="c.sortable"
+                [movable]="c.movable"
+                [editable]="c.editable"
+                [sortingIgnoreCase]="c.sortingIgnoreCase"
+                [filteringIgnoreCase]="c.sortingIgnoreCase"
+                [maxWidth]="c.maxWidth"
+                [hasSummary]="c.hasSummary"
+                [filterable]="c.filterable"
+                [searchable]="c.searchable"
+                [resizable]="c.resizable"
+                [headerClasses]="c.headerClasses"
+                [headerGroupClasses]="c.headerGroupClasses"
+                [groupable]="c.groupable"
+                [field]="c.field"
+                [header]="c.header"
+                [dataType]="c.dataType"
+                [pinned]="c.pinned"
+                [hidden]="c.hidden">
+            </igx-column>
+        </igx-grid>
+    `
+})
+export class IgxGridStateComponent {
+    public data = SampleTestData.foodProductData();
+
+    public columns: any[] = [
+        // tslint:disable:max-line-length
+        { field: 'ProductID', 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: 'Prodyct 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: 'InStock', header: 'In Stock', 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: 'OrderDate', header: 'Date ordered', 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
+      ];
+
+    @ViewChild('grid', { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+
+    @ViewChild(IgxGridStateDirective, { static: true })
+    public state: IgxGridStateDirective;
+}
+
+@Component({
+    template: `
+        <igx-grid #grid [data]="data" [paging]="true" [autoGenerate]="true" [igxGridState]="options">
+        </igx-grid>
+    `
+})
+export class IgxGridStateWithOptionsComponent {
+    public data = SampleTestData.foodProductData();
+    public options = {
+        filtering: false,
+        advancedFiltering: true,
+        sorting: false,
+        groupBy: true
+    };
+
+    @ViewChild('grid', { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+
+    @ViewChild(IgxGridStateDirective, { static: true })
+    public state: IgxGridStateDirective;
+}

projects/igniteui-angular/src/lib/grids/state.directive.ts

@@ -163,6 +163,7 @@ export class IgxGridStateDirective {
         }
         this.state = state as IGridState;
         this.restoreGridState();
+        this.grid.cdr.detectChanges();
     }
 
     /**
@@ -336,8 +337,9 @@ export class IgxGridStateDirective {
             delete expr.strategy;
         });
         const expansionState = this.grid.groupingExpansionState;
+        const groupsExpanded = this.grid.groupsExpanded;
 
-        return { groupBy: { expressions: groupingExpressions, expansion: expansionState, defaultExpanded: true}  };
+        return { groupBy: { expressions: groupingExpressions, expansion: expansionState, defaultExpanded: groupsExpanded}  };
     }
 
     private getRowSelection(): IGridState {
@@ -402,7 +404,11 @@ export class IgxGridStateDirective {
      */
     private restoreGroupBy(state: IGroupingState) {
         (this.grid as IgxGridComponent).groupingExpressions = state.expressions as IGroupingExpression[];
-        (this.grid as IgxGridComponent).groupingExpansionState = state.expansion as IGroupByExpandState[];
+        if ((this.grid as IgxGridComponent).groupsExpanded !== state.defaultExpanded) {
+            this.grid.toggleAllGroupRows();
+        } else {
+            (this.grid as IgxGridComponent).groupingExpansionState = state.expansion as IGroupByExpandState[];
+        }
     }
 
     /**
@@ -414,7 +420,6 @@ export class IgxGridStateDirective {
             this.grid.cdr.detectChanges();
         }
         this.grid.page = state.index;
-        this.grid.cdr.detectChanges();
     }
 
     private restoreRowSelection(state: any[]) {