Add basic ESF tests for rows/columns.

Author: MKirova

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

@@ -2,6 +2,7 @@ import { fakeAsync, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxPivotGridModule } from 'igniteui-angular';
 import { configureTestSuite } from '../../test-utils/configure-suite';
+import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { IgxPivotGridTestBaseComponent } from '../../test-utils/pivot-grid-samples.spec';
 
 describe('Basic IgxPivotGrid #pivotGrid', () => {
@@ -37,4 +38,85 @@ describe('Basic IgxPivotGrid #pivotGrid', () => {
         expect(cells.first.nativeElement.classList).toContain('test');
         expect(cells.last.nativeElement.classList).not.toContain('test');
     });
+    describe('IgxPivotGrid Features #pivotGrid', () => {
+        it('should show excel style filtering via dimension chip.', () => {
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fixture, 'igx-pivot-grid');
+            const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
+            const rowChip = headerRow.querySelector('igx-chip[id="All"]');
+            const filterIcon = rowChip.querySelectorAll('igx-icon')[2];
+
+            expect(excelMenu.parentElement.parentElement.attributes.hidden).not.toBeUndefined();
+            filterIcon.click();
+            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('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');
+        });
+
+        it('should filter rows via excel style filtering dimension chip.', () => {
+            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();
+            fixture.detectChanges();
+
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fixture, 'igx-pivot-grid');
+            const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-pivot-grid'));
+
+            // uncheck Accessories
+            checkboxes[1].click();
+            fixture.detectChanges();
+
+             // uncheck Bikes
+            checkboxes[2].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(3);
+            const expectedHeaders = ['All', 'Clothing', 'Components'];
+            const rowDimensionHeaders = rows.map(x => x.rowDimension).flat().map(x => x.header);
+            expect(rowDimensionHeaders).toEqual(expectedHeaders);
+        });
+
+        it('should filter columns via excel style filtering dimension chip.', () => {
+            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();
+            fixture.detectChanges();
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fixture, 'igx-pivot-grid');
+            const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-pivot-grid'));
+
+            // uncheck Bulgaria
+            checkboxes[1].click();
+            fixture.detectChanges();
+
+             // uncheck Uruguay
+            checkboxes[2].click();
+            fixture.detectChanges();
+
+
+             // Click 'apply' button to apply filter.
+             GridFunctions.clickApplyExcelStyleFiltering(fixture, excelMenu, 'igx-pivot-grid');
+             fixture.detectChanges();
+
+             // check columns
+             const colHeaders = pivotGrid.columns.filter(x => x.level === 0).map(x => x.header);
+             const expected = ['USA'];
+             expect(colHeaders).toEqual(expected);
+        });
+    });
 });