diff --git a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts index a0f284d395d..678bd2b47dd 100644 --- a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts +++ b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts @@ -1,9 +1,10 @@ -import { PivotGridType } from '../grids/common/grid.interface'; +import { ColumnType, PivotGridType } from '../grids/common/grid.interface'; import { DEFAULT_PIVOT_KEYS, IPivotDimension, IPivotDimensionStrategy, IPivotGridRecord, IPivotKeys, IPivotValue, PivotDimensionType } from '../grids/pivot-grid/pivot-grid.interface'; import { PivotUtil } from '../grids/pivot-grid/pivot-util'; -import { FilteringStrategy } from './filtering-strategy'; +import { FilteringStrategy, IgxFilterItem } from './filtering-strategy'; import { cloneArray } from '../core/utils'; +import { IFilteringExpressionsTree } from './filtering-expressions-tree'; export class NoopPivotDimensionsStrategy implements IPivotDimensionStrategy { private static _instance: NoopPivotDimensionsStrategy = null; @@ -141,10 +142,53 @@ export class DimensionValuesFilteringStrategy extends FilteringStrategy { protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false, isTime: boolean = false, grid?: PivotGridType): any { - const config = grid.pivotConfiguration; const allDimensions = grid.allDimensions; const enabledDimensions = allDimensions.filter(x => x && x.enabled); - const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === fieldName); - return PivotUtil.extractValueFromDimension(dim, rec); + const dim :IPivotDimension = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === fieldName); + const value = dim.childLevel ? this._getDimensionValueHierarchy(dim, rec).map(x => `[` + x +`]`).join('.') : PivotUtil.extractValueFromDimension(dim, rec); + return value; + } + + public getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise { + const grid = (column.grid as any); + const enabledDimensions = grid.allDimensions.filter(x => x && x.enabled); + let data = column.grid.gridAPI.filterDataByExpressions(tree); + const dim = enabledDimensions.find(x => x.memberName === column.field); + const allValuesHierarchy = PivotUtil.getFieldsHierarchy( + data, + [dim], + PivotDimensionType.Column, + grid.pivotKeys + ); + const isNoop = grid.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy || grid.pivotConfiguration.rowStrategy instanceof NoopPivotDimensionsStrategy; + const items: IgxFilterItem[] = !isNoop ? this._getFilterItems(allValuesHierarchy, grid.pivotKeys) : [{value : ''}]; + return Promise.resolve(items); + } + + private _getFilterItems(hierarchy: Map, pivotKeys: IPivotKeys) : IgxFilterItem[] { + const items: IgxFilterItem[] = []; + hierarchy.forEach((value) => { + const val = value.value; + const path = val.split(pivotKeys.columnDimensionSeparator); + const hierarchicalValue = path.length > 1 ? path.map(x => `[` + x +`]`).join('.') : val; + const text = path[path.length -1]; + items.push({ + value: hierarchicalValue, + label: text, + children: this._getFilterItems(value.children, pivotKeys) + }); + }); + return items; + } + + private _getDimensionValueHierarchy(dim: IPivotDimension, rec: any) : string[] { + let path = []; + let value = PivotUtil.extractValueFromDimension(dim, rec); + path.push(value); + if (dim.childLevel) { + const childVals = this._getDimensionValueHierarchy(dim.childLevel, rec); + path = path.concat(childVals); + } + return path; } } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 41708382c3e..4af4c79f82f 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -885,7 +885,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni public ngOnInit() { // pivot grid always generates columns automatically. this.autoGenerate = true; - this.uniqueColumnValuesStrategy = this.uniqueColumnValuesStrategy || this.uniqueDimensionValuesStrategy; const config = this.pivotConfiguration; this.filteringExpressionsTree = PivotUtil.buildExpressionTree(config); super.ngOnInit(); @@ -922,15 +921,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni this.cdr.detectChanges(); } - public uniqueDimensionValuesStrategy(column: IgxColumnComponent, exprTree: IFilteringExpressionsTree, - done: (uniqueValues: any[]) => void) { - const enabledDimensions = this.allDimensions.filter(x => x && x.enabled); - const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === column.field); - if (dim) { - this.getDimensionData(dim, exprTree, uniqueValues => done(uniqueValues)); - } - } - /** * Gets the full list of dimensions. * @@ -944,33 +934,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni return (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); } - /** - * @hidden @internal - */ - public getDimensionData(dim: IPivotDimension, - dimExprTree: IFilteringExpressionsTree, - done: (colVals: any[]) => void) { - let columnValues = []; - const data = this.gridAPI.get_data(); - const state = { - expressionsTree: dimExprTree, - strategy: this.filterStrategy || new DimensionValuesFilteringStrategy(), - advancedFilteringExpressionsTree: this.advancedFilteringExpressionsTree - }; - const filtered = FilterUtil.filter(data, state, this); - const allValuesHierarchy = PivotUtil.getFieldsHierarchy( - filtered, - [dim], - PivotDimensionType.Column, - this.pivotKeys - ); - const flatData = Array.from(allValuesHierarchy.values()); - // Note: Once ESF supports tree view, we should revert this back. - columnValues = flatData.map(record => record['value']); - done(columnValues); - return; - } - /** @hidden @internal */ public createFilterESF(dropdown: any, column: ColumnType, options: OverlaySettings, shouldReatach: boolean) { options.outlet = this.outlet; @@ -1904,10 +1867,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } protected generateDimensionColumns(): IgxColumnComponent[] { - const leafFields = PivotUtil.flatten(this.allDimensions, 0).filter(x => !x.childLevel).map(x => x.memberName); + const rootFields = this.allDimensions.map(x => x.memberName); const columns = []; const factory = this.resolver.resolveComponentFactory(IgxColumnComponent); - leafFields.forEach((field) => { + rootFields.forEach((field) => { const ref = factory.create(this.viewRef.injector); ref.instance.field = field; ref.changeDetectorRef.detectChanges(); @@ -1969,16 +1932,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } currentFields.forEach((value) => { let shouldGenerate = true; - if (value.dimension && value.dimension.filter) { - const state = { - expressionsTree: value.dimension.filter.filteringOperands[0], - strategy: this.filterStrategy || new DimensionValuesFilteringStrategy(), - advancedFilteringExpressionsTree: this.advancedFilteringExpressionsTree - }; - const filtered = FilterUtil.filter(cloneArray(value.records), state, this); - if (filtered.length === 0) { - shouldGenerate = false; - } + if (data.length === 0) { + shouldGenerate = false; } if (shouldGenerate && (value.children == null || value.children.length === 0 || value.children.size === 0)) { const col = this.createColumnForDimension(value, data, parent, this.hasMultipleValues); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index 9cb6d0ae8d6..e6c5074a35b 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -11,7 +11,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { GridFunctions, GridSelectionFunctions } from '../../test-utils/grid-functions.spec'; import { PivotGridFunctions } from '../../test-utils/pivot-grid-functions.spec'; import { IgxPivotGridTestBaseComponent, IgxPivotGridTestComplexHierarchyComponent, IgxTotalSaleAggregate } from '../../test-utils/pivot-grid-samples.spec'; -import { UIInteractions } from '../../test-utils/ui-interactions.spec'; +import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec'; import { IgxPivotDateAggregate, IgxPivotNumericAggregate } from './pivot-grid-aggregate'; import { IgxPivotDateDimension } from './pivot-grid-dimensions'; import { IPivotGridRecord, PivotDimensionType } from './pivot-grid.interface'; @@ -423,7 +423,7 @@ describe('IgxPivotGrid #pivotGrid', () => { describe('IgxPivotGrid Features #pivotGrid', () => { - it('should show excel style filtering via dimension chip.', () => { + it('should show excel style filtering via dimension chip.', async () => { const pivotGrid = fixture.componentInstance.pivotGrid; expect(pivotGrid.filterStrategy).toBeInstanceOf(DimensionValuesFilteringStrategy); const excelMenu = GridFunctions.getExcelStyleFilteringComponents(fixture, 'igx-pivot-grid')[1]; @@ -433,35 +433,51 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(excelMenu.parentElement.parentElement.attributes.hidden).not.toBeUndefined(); filterIcon.click(); + await wait(100); fixture.detectChanges(); const esfSearch = GridFunctions.getExcelFilteringSearchComponent(fixture, excelMenu, 'igx-pivot-grid'); + const checkBoxes = esfSearch.querySelectorAll('igx-checkbox'); - // should show and should display correct checkboxes. + // should show Select All checkbox expect(excelMenu.parentElement.parentElement.attributes.hidden).toBeUndefined(); expect((checkBoxes[0].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Select All'); - expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Accessories'); - expect((checkBoxes[2].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Bikes'); - expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Clothing'); - expect((checkBoxes[4].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Components'); + + // expand tree hierarchy + GridFunctions.clickExcelTreeNodeExpandIcon(fixture, 0); + await wait(100); + fixture.detectChanges(); + // should show correct tree items + const treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fixture, excelMenu, 'igx-pivot-grid'); + expect(treeItems.length).toBe(5); + + expect(treeItems[1].innerText).toBe('Clothing'); + expect(treeItems[2].innerText).toBe('Bikes'); + expect(treeItems[3].innerText).toBe('Accessories'); + expect(treeItems[4].innerText).toBe('Components'); }); - it('should filter rows via excel style filtering dimension chip.', () => { + it('should filter rows via excel style filtering dimension chip.', async () => { const pivotGrid = fixture.componentInstance.pivotGrid; const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row'); const rowChip = headerRow.querySelector('igx-chip[id="All"]'); const filterIcon = rowChip.querySelectorAll('igx-icon')[2]; filterIcon.click(); + await wait(100); fixture.detectChanges(); - const excelMenu = GridFunctions.getExcelStyleFilteringComponents(fixture, 'igx-pivot-grid')[1]; - const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-pivot-grid')); + // expand tree hierarchy + GridFunctions.clickExcelTreeNodeExpandIcon(fixture, 0); + await wait(100); + fixture.detectChanges(); + const excelMenu = GridFunctions.getExcelStyleFilteringComponents(fixture, 'igx-pivot-grid')[1]; + const checkboxes = GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-tree-grid'); // uncheck Accessories - checkboxes[1].click(); + checkboxes[4].click(); fixture.detectChanges(); // uncheck Bikes - checkboxes[2].click(); + checkboxes[3].click(); fixture.detectChanges(); // Click 'apply' button to apply filter. @@ -478,12 +494,13 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(rowDimensionHeaders).toEqual(expectedHeaders); }); - it('should filter columns via excel style filtering dimension chip.', () => { + it('should filter columns via excel style filtering dimension chip.', async () => { const pivotGrid = fixture.componentInstance.pivotGrid; const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row'); const rowChip = headerRow.querySelector('igx-chip[id="Country"]'); const filterIcon = rowChip.querySelectorAll('igx-icon')[2]; filterIcon.click(); + await wait(100); fixture.detectChanges(); const excelMenu = GridFunctions.getExcelStyleFilteringComponents(fixture, 'igx-pivot-grid')[1]; const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-pivot-grid')); @@ -493,7 +510,7 @@ describe('IgxPivotGrid #pivotGrid', () => { fixture.detectChanges(); // uncheck Uruguay - checkboxes[2].click(); + checkboxes[3].click(); fixture.detectChanges(); @@ -507,7 +524,7 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(colHeaders).toEqual(expected); }); - it('should show filters chips', () => { + it('should show filters chips', async () => { const pivotGrid = fixture.componentInstance.pivotGrid; pivotGrid.pivotConfiguration.filters = [{ memberName: 'SellerName', @@ -523,19 +540,20 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(excelMenu.parentElement.parentElement.attributes.hidden).not.toBeUndefined(); filterIcon.click(); + await wait(100); fixture.detectChanges(); const esfSearch = GridFunctions.getExcelFilteringSearchComponent(fixture, excelMenu, 'igx-pivot-grid'); const checkBoxes = esfSearch.querySelectorAll('igx-checkbox'); // should show and should display correct checkboxes. expect(excelMenu.parentElement.parentElement.attributes.hidden).toBeUndefined(); expect((checkBoxes[0].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Select All'); - expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('David'); + expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Stanley'); expect((checkBoxes[2].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Elisa'); - expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('John'); - expect((checkBoxes[4].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Larry'); + expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Lydia'); + expect((checkBoxes[4].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('David'); }); - it('should show filters in chips dropdown button', () => { + it('should show filters in chips dropdown button', async () => { const pivotGrid = fixture.componentInstance.pivotGrid; pivotGrid.pivotConfiguration.filters = [ { @@ -556,6 +574,7 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(excelMenu.parentElement.parentElement.attributes.hidden).not.toBeUndefined(); dropdownIcon.click(); + await wait(100); fixture.detectChanges(); const chips = excelMenu.querySelectorAll('igx-chip'); @@ -569,10 +588,10 @@ describe('IgxPivotGrid #pivotGrid', () => { // should show and should display correct checkboxes. expect(excelMenu.parentElement.parentElement.attributes.hidden).toBeUndefined(); expect((checkBoxes[0].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Select All'); - expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('David'); + expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Stanley'); expect((checkBoxes[2].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Elisa'); - expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('John'); - expect((checkBoxes[4].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Larry'); + expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Lydia'); + expect((checkBoxes[4].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('David'); // switch to the `ProductCategory` filters const chipAreaElement = fixture.debugElement.queryAll(By.directive(IgxChipsAreaComponent)); @@ -582,18 +601,19 @@ describe('IgxPivotGrid #pivotGrid', () => { id: chips[1].id } }); + await wait(500); fixture.detectChanges(); esfSearch = GridFunctions.getExcelFilteringSearchComponent(fixture, excelMenu, 'igx-pivot-grid'); checkBoxes = esfSearch.querySelectorAll('igx-checkbox'); expect((checkBoxes[0].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Select All'); - expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Accessories'); + expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Clothing'); expect((checkBoxes[2].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Bikes'); - expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Clothing'); + expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Accessories'); expect((checkBoxes[4].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Components'); }); - it('should be able to filter from chips dropdown button', () => { + it('should be able to filter from chips dropdown button', async () => { const pivotGrid = fixture.componentInstance.pivotGrid; pivotGrid.pivotConfiguration.filters = [ { @@ -614,16 +634,16 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(excelMenu.parentElement.parentElement.attributes.hidden).not.toBeUndefined(); dropdownIcon.click(); + await wait(100); fixture.detectChanges(); const checkBoxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-pivot-grid')); - // uncheck David - checkBoxes[1].click(); + checkBoxes[4].click(); fixture.detectChanges(); - // uncheck Elisa - checkBoxes[5].click(); + // uncheck Lydia + checkBoxes[3].click(); fixture.detectChanges(); // Click 'apply' button to apply filter. @@ -667,6 +687,130 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(filtersChip).not.toBeUndefined(); }); + it('should show complex tree and allow filtering for Date dimension', async () => { + const pivotGrid = fixture.componentInstance.pivotGrid; + pivotGrid.pivotConfiguration.rows = [new IgxPivotDateDimension( + { + memberName: 'Date', + enabled: true + }, + { + months: true, + quarters: true, + years: true, + fullDate: true, + total: true + } + )]; + + pivotGrid.pipeTrigger++; + pivotGrid.setupColumns(); + fixture.detectChanges(); + + const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row'); + const rowChip = headerRow.querySelector('igx-chip[id="AllPeriods"]'); + const filterIcon = rowChip.querySelectorAll('igx-icon')[2]; + filterIcon.click(); + await wait(100); + fixture.detectChanges(); + + const excelMenu = GridFunctions.getExcelStyleFilteringComponents(fixture, 'igx-pivot-grid')[1]; + + // expand tree hierarchy + GridFunctions.clickExcelTreeNodeExpandIcon(fixture, 0); + await wait(100); + fixture.detectChanges(); + // should show correct tree items + let treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fixture, excelMenu, 'igx-pivot-grid'); + + expect(treeItems.length).toBe(4); + expect(treeItems[0].querySelector('.igx-tree-node__content').textContent).toBe('All Periods'); + expect(treeItems[1].querySelector('.igx-tree-node__content').textContent).toBe('2021'); + expect(treeItems[2].querySelector('.igx-tree-node__content').textContent).toBe('2019'); + expect(treeItems[3].querySelector('.igx-tree-node__content').textContent).toBe('2020'); + + + // expand tree hierarchy 2021 + GridFunctions.clickExcelTreeNodeExpandIcon(fixture, 1); + await wait(100); + fixture.detectChanges(); + + treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fixture, excelMenu, 'igx-pivot-grid'); + + expect(treeItems.length).toBe(7); + expect(treeItems[0].querySelector('.igx-tree-node__content').textContent).toBe('All Periods'); + expect(treeItems[1].querySelector('.igx-tree-node__content').textContent).toBe('2021'); + expect(treeItems[2].querySelector('.igx-tree-node__content').textContent).toBe('Q1'); + expect(treeItems[3].querySelector('.igx-tree-node__content').textContent).toBe('Q2'); + expect(treeItems[4].querySelector('.igx-tree-node__content').textContent).toBe('Q4'); + expect(treeItems[5].querySelector('.igx-tree-node__content').textContent).toBe('2019'); + expect(treeItems[6].querySelector('.igx-tree-node__content').textContent).toBe('2020'); + + // expand tree hierarchy Q1 + GridFunctions.clickExcelTreeNodeExpandIcon(fixture, 2); + await wait(100); + fixture.detectChanges(); + + treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fixture, excelMenu, 'igx-pivot-grid'); + expect(treeItems.length).toBe(8); + expect(treeItems[0].querySelector('.igx-tree-node__content').textContent).toBe('All Periods'); + expect(treeItems[1].querySelector('.igx-tree-node__content').textContent).toBe('2021'); + expect(treeItems[2].querySelector('.igx-tree-node__content').textContent).toBe('Q1'); + expect(treeItems[3].querySelector('.igx-tree-node__content').textContent).toBe('January'); + expect(treeItems[4].querySelector('.igx-tree-node__content').textContent).toBe('Q2'); + expect(treeItems[5].querySelector('.igx-tree-node__content').textContent).toBe('Q4'); + expect(treeItems[6].querySelector('.igx-tree-node__content').textContent).toBe('2019'); + expect(treeItems[7].querySelector('.igx-tree-node__content').textContent).toBe('2020'); + + // expand tree hierarchy January + GridFunctions.clickExcelTreeNodeExpandIcon(fixture, 3); + await wait(100); + fixture.detectChanges(); + + treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fixture, excelMenu, 'igx-pivot-grid'); + expect(treeItems.length).toBe(9); + expect(treeItems[0].querySelector('.igx-tree-node__content').textContent).toBe('All Periods'); + expect(treeItems[1].querySelector('.igx-tree-node__content').textContent).toBe('2021'); + expect(treeItems[2].querySelector('.igx-tree-node__content').textContent).toBe('Q1'); + expect(treeItems[3].querySelector('.igx-tree-node__content').textContent).toBe('January'); + expect(treeItems[4].querySelector('.igx-tree-node__content').textContent).toBe('01/01/2021'); + expect(treeItems[5].querySelector('.igx-tree-node__content').textContent).toBe('Q2'); + expect(treeItems[6].querySelector('.igx-tree-node__content').textContent).toBe('Q4'); + expect(treeItems[7].querySelector('.igx-tree-node__content').textContent).toBe('2019'); + expect(treeItems[8].querySelector('.igx-tree-node__content').textContent).toBe('2020'); + + + const checkBoxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-pivot-grid')); + // uncheck Q1 + checkBoxes[3].click(); + fixture.detectChanges(); + + // uncheck Q2 + checkBoxes[6].click(); + fixture.detectChanges(); + + // uncheck 2019 + checkBoxes[8].click(); + fixture.detectChanges(); + + // uncheck 2020 + checkBoxes[9].click(); + fixture.detectChanges(); + + // Click 'apply' button to apply filter. + GridFunctions.clickApplyExcelStyleFiltering(fixture, excelMenu, 'igx-pivot-grid'); + fixture.detectChanges(); + + // check rows + const rows = pivotGrid.rowList.toArray(); + expect(rows.length).toBe(5); + const expectedHeaders = ['All Periods', '2021', 'Q4', 'December', '12/08/2021']; + const rowHeaders = fixture.debugElement.queryAll( + By.directive(IgxPivotRowDimensionHeaderComponent)); + const rowDimensionHeaders = rowHeaders.map(x => x.componentInstance.column.header); + expect(rowDimensionHeaders).toEqual(expectedHeaders); + }); + it('should apply sorting for dimension via row chip', () => { fixture.detectChanges(); const pivotGrid = fixture.componentInstance.pivotGrid; @@ -692,8 +836,8 @@ describe('IgxPivotGrid #pivotGrid', () => { // should have emitted event expect(pivotGrid.dimensionsSortingExpressionsChange.emit).toHaveBeenCalledTimes(2); const expectedExpressions: ISortingExpression[] = [ - { dir: SortingDirection.Desc, fieldName: 'All', strategy: DefaultPivotSortingStrategy.instance()}, - { dir: SortingDirection.Desc, fieldName: 'ProductCategory', strategy: DefaultPivotSortingStrategy.instance()}, + { dir: SortingDirection.Desc, fieldName: 'All', strategy: DefaultPivotSortingStrategy.instance() }, + { dir: SortingDirection.Desc, fieldName: 'ProductCategory', strategy: DefaultPivotSortingStrategy.instance() }, ]; expect(pivotGrid.dimensionsSortingExpressionsChange.emit).toHaveBeenCalledWith(expectedExpressions); });