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

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

import {
    ComponentFixture,
    fakeAsync,
    TestBed,
    tick,
    waitForAsync,
} from "@angular/core/testing";
import { By } from "@angular/platform-browser";
import { NoopAnimationsModule } from "@angular/platform-browser/animations";
import {
    FilteringExpressionsTree,
    FilteringLogic,
    GridColumnDataType,
    IgxPivotGridComponent,
    IgxStringFilteringOperand,
} from "igniteui-angular-sovn";
import { IgxChipComponent } from "../../chips/chip.component";
import { IgxChipsAreaComponent } from "../../chips/chips-area.component";
import { DefaultPivotSortingStrategy } from "../../data-operations/pivot-sort-strategy";
import {
    DimensionValuesFilteringStrategy,
    NoopPivotDimensionsStrategy,
} from "../../data-operations/pivot-strategy";
import {
    ISortingExpression,
    SortingDirection,
} from "../../data-operations/sorting-strategy";
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, wait } from "../../test-utils/ui-interactions.spec";
import {
    IgxPivotDateAggregate,
    IgxPivotNumericAggregate,
} from "./pivot-grid-aggregate";
import { IgxPivotDateDimension } from "./pivot-grid-dimensions";
import {
    IPivotGridColumn,
    IPivotGridRecord,
    PivotDimensionType,
} from "./pivot-grid.interface";
import { IgxPivotHeaderRowComponent } from "./pivot-header-row.component";
import { IgxPivotRowDimensionHeaderComponent } from "./pivot-row-dimension-header.component";
import { IgxPivotRowComponent } from "./pivot-row.component";
import { IgxPivotRowDimensionHeaderGroupComponent } from "./pivot-row-dimension-header-group.component";

const CSS_CLASS_LIST = "igx-drop-down__list";
const CSS_CLASS_ITEM = "igx-drop-down__item";
describe("IgxPivotGrid #pivotGrid", () => {
    configureTestSuite();

    beforeAll(waitForAsync(() => {
        TestBed.configureTestingModule({
            imports: [
                NoopAnimationsModule,
                IgxPivotGridTestBaseComponent,
                IgxPivotGridTestComplexHierarchyComponent,
            ],
        }).compileComponents();
    }));

    describe("Basic IgxPivotGrid #pivotGrid", () => {
        let fixture: ComponentFixture<IgxPivotGridTestBaseComponent>;

        beforeEach(waitForAsync(() => {
            fixture = TestBed.createComponent(IgxPivotGridTestBaseComponent);
            fixture.detectChanges();
        }));

        it("should show empty template when there are no dimensions and values", () => {
            // whole pivotConfiguration is undefined
            const pivotGrid = fixture.componentInstance
                .pivotGrid as IgxPivotGridComponent;
            pivotGrid.pivotConfiguration = undefined;
            fixture.detectChanges();

            // no rows, just empty message
            expect(pivotGrid.rowList.length).toBe(0);
            expect(pivotGrid.tbody.nativeElement.textContent).toBe(
                "Pivot grid has no dimensions and values."
            );

            // configuration is defined but all collections are empty
            pivotGrid.pivotConfiguration = {
                columns: [],
                rows: [],
                values: [],
            };
            fixture.detectChanges();

            // no rows, just empty message
            expect(pivotGrid.rowList.length).toBe(0);
            expect(pivotGrid.tbody.nativeElement.textContent).toBe(
                "Pivot grid has no dimensions and values."
            );

            // has dimensions and values, but they are disabled
            pivotGrid.pivotConfiguration = {
                columns: [
                    {
                        enabled: false,
                        memberName: "Country",
                    },
                ],
                rows: [
                    {
                        enabled: false,
                        memberName: "ProductCategory",
                    },
                ],
                values: [
                    {
                        enabled: false,
                        member: "UnitsSold",
                        aggregate: {
                            aggregator: IgxPivotNumericAggregate.sum,
                            key: "SUM",
                            label: "Sum",
                        },
                    },
                ],
            };
            fixture.detectChanges();

            // no rows, just empty message
            expect(pivotGrid.rowList.length).toBe(0);
            expect(pivotGrid.tbody.nativeElement.textContent).toBe(
                "Pivot grid has no dimensions and values."
            );
        });

        it("should show allow setting custom empty template.", () => {
            const pivotGrid = fixture.componentInstance
                .pivotGrid as IgxPivotGridComponent;
            pivotGrid.emptyPivotGridTemplate =
                fixture.componentInstance.emptyTemplate;
            pivotGrid.pivotConfiguration = undefined;
            fixture.detectChanges();

            // no rows, just empty message
            expect(pivotGrid.rowList.length).toBe(0);
            expect(pivotGrid.tbody.nativeElement.textContent).toBe(
                "Custom empty template."
            );
        });

        it("should allow setting custom chip value template", () => {
            const pivotGrid = fixture.componentInstance
                .pivotGrid as IgxPivotGridComponent;
            pivotGrid.valueChipTemplate =
                fixture.componentInstance.chipValueTemplate;
            fixture.detectChanges();

            const headerRow = fixture.nativeElement.querySelector(
                "igx-pivot-header-row"
            );
            const valueChip = headerRow.querySelector(
                'igx-chip[id="UnitsSold"]'
            );
            const content = valueChip.querySelector(".igx-chip__content");
            expect(content.textContent.trim()).toBe("UnitsSold");
        });

        it("should apply formatter and dataType from measures", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            pivotGrid.width = "1500px";
            fixture.detectChanges();

            const actualFormatterValue =
                pivotGrid.rowList.first.cells.first.title;
            expect(actualFormatterValue).toEqual("774$");
            const actualDataTypeValue =
                pivotGrid.rowList.first.cells.last.title;
            expect(actualDataTypeValue).toEqual("$71.89");
        });

        it("should apply css class to cells from measures", () => {
            fixture.detectChanges();
            const pivotGrid = fixture.componentInstance.pivotGrid;
            const cells = pivotGrid.rowList.first.cells;
            expect(cells.first.nativeElement.classList).toContain("test");
            expect(cells.last.nativeElement.classList).not.toContain("test");
        });

        it("should remove row dimensions from chip", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            pivotGrid.pivotConfiguration.rows.push({
                memberName: "SellerName",
                enabled: true,
            });
            pivotGrid.pipeTrigger++;
            fixture.detectChanges();
            expect(pivotGrid.rowDimensions.length).toBe(2);
            let pivotRecord = (pivotGrid.rowList.first as IgxPivotRowComponent)
                .data;
            expect(
                pivotRecord.dimensionValues.get("SellerName")
            ).not.toBeUndefined();

            const headerRow = fixture.nativeElement.querySelector(
                "igx-pivot-header-row"
            );
            const rowChip = headerRow.querySelector(
                'igx-chip[id="SellerName"]'
            );
            const removeIcon = rowChip.querySelectorAll("igx-icon")[2];
            removeIcon.click();
            fixture.detectChanges();
            expect(pivotGrid.pivotConfiguration.rows[1].enabled).toBeFalse();
            expect(pivotGrid.rowDimensions.length).toBe(1);
            pivotRecord = (pivotGrid.rowList.first as IgxPivotRowComponent)
                .data;
            expect(
                pivotRecord.dimensionValues.get("SellerName")
            ).toBeUndefined();
        });

        it("should remove column dimensions from chip", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            expect(pivotGrid.columns.length).toBe(9);
            pivotGrid.pivotConfiguration.columns.push({
                memberName: "SellerName",
                enabled: true,
            });
            pivotGrid.pipeTrigger++;
            pivotGrid.setupColumns();
            fixture.detectChanges();
            expect(pivotGrid.columnDimensions.length).toBe(2);
            expect(pivotGrid.columns.length).not.toBe(9);

            const headerRow = fixture.nativeElement.querySelector(
                "igx-pivot-header-row"
            );
            const rowChip = headerRow.querySelector(
                'igx-chip[id="SellerName"]'
            );
            const removeIcon = rowChip.querySelectorAll("igx-icon")[2];
            removeIcon.click();
            fixture.detectChanges();
            expect(pivotGrid.pivotConfiguration.columns[1].enabled).toBeFalse();
            expect(pivotGrid.columnDimensions.length).toBe(1);
            expect(pivotGrid.columns.length).toBe(9);
        });

        it("should remove value from chip", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            pivotGrid.pivotConfiguration.values[1].displayName = "Units Price";
            pivotGrid.notifyDimensionChange(true);
            fixture.detectChanges();

            expect(pivotGrid.columns.length).toBe(9);
            expect(pivotGrid.values.length).toBe(2);

            const headerRow = fixture.nativeElement.querySelector(
                "igx-pivot-header-row"
            );
            let rowChip = headerRow.querySelector('igx-chip[id="UnitsSold"]');
            let removeIcon = rowChip.querySelectorAll("igx-icon")[2];
            removeIcon.click();
            fixture.detectChanges();
            expect(pivotGrid.pivotConfiguration.values[0].enabled).toBeFalse();
            expect(pivotGrid.values.length).toBe(1);
            expect(pivotGrid.columns.length).not.toBe(9);

            // should remove the second one as well
            rowChip = headerRow.querySelector('igx-chip[id="Units Price"]');
            removeIcon = rowChip.querySelectorAll("igx-icon")[2];
            removeIcon.click();
            fixture.detectChanges();
            expect(pivotGrid.pivotConfiguration.values[1].enabled).toBeFalse();
            expect(pivotGrid.values.length).toBe(0);
            expect(pivotGrid.columns.length).toBe(3);
        });

        it("should remove filter dimension from chip", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;

            const filteringExpressionTree = new FilteringExpressionsTree(
                FilteringLogic.And
            );
            filteringExpressionTree.filteringOperands = [
                {
                    condition:
                        IgxStringFilteringOperand.instance().condition(
                            "equals"
                        ),
                    fieldName: "SellerName",
                    searchVal: "Stanley",
                },
            ];
            const filterDimension = {
                memberName: "SellerName",
                enabled: true,
                filter: filteringExpressionTree,
            };
            pivotGrid.pivotConfiguration.filters = [filterDimension];
            pivotGrid.pipeTrigger++;
            fixture.detectChanges();
            expect(pivotGrid.pivotConfiguration.filters[0].enabled).toBeTrue();
            expect(pivotGrid.rowList.length).toBe(2);

            const headerRow = fixture.nativeElement.querySelector(
                "igx-pivot-header-row"
            );
            const rowChip = headerRow.querySelector(
                'igx-chip[id="SellerName"]'
            );
            const removeIcon = rowChip.querySelectorAll("igx-icon")[1];
            removeIcon.click();
            fixture.detectChanges();
            expect(pivotGrid.pivotConfiguration.filters[0].enabled).toBeFalse();
            expect(pivotGrid.rowList.length).toBe(5);
        });

        it("should correctly remove chip from filters dropdown", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            pivotGrid.pivotConfiguration = {
                columns: [],
                rows: [
                    {
                        memberName: "SellerName",
                        enabled: true,
                    },
                ],
                filters: [
                    {
                        memberName: "Date",
                        enabled: true,
                    },
                    {
                        memberName: "ProductCategory",
                        enabled: true,
                    },
                    {
                        memberName: "Country",
                        enabled: true,
                    },
                ],
                values: null,
            };
            pivotGrid.pipeTrigger++;
            pivotGrid.setupColumns();
            fixture.detectChanges();

            const headerRow = fixture.nativeElement.querySelector(
                "igx-pivot-header-row"
            );
            const dropdownIcon = headerRow
                .querySelector(".igx-grid__tr-pivot--filter")
                .querySelectorAll("igx-icon")[2];
            expect(dropdownIcon).not.toBeUndefined();
            expect(headerRow.querySelector("igx-badge").innerText).toBe("2");
            dropdownIcon.click();
            fixture.detectChanges();

            const excelMenu = GridFunctions.getExcelStyleFilteringComponents(
                fixture,
                "igx-pivot-grid"
            )[0];
            const chip = excelMenu.querySelectorAll("igx-chip")[0];
            const removeIcon = chip.querySelectorAll("igx-icon")[1];
            removeIcon.click();
            fixture.detectChanges();

            const filtersChip = headerRow.querySelector('igx-chip[id="Date"]');
            expect(filtersChip).toBeDefined();
            expect(
                headerRow.querySelector('igx-chip[id="ProductCategory"]')
            ).toBeNull();
        });

        it("should collapse column with 1 value dimension", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            pivotGrid.pivotConfiguration.values.pop();
            pivotGrid.pivotConfiguration.columns = [
                {
                    memberName: "AllCountries",
                    memberFunction: () => "All Countries",
                    enabled: true,
                    childLevel: {
                        memberName: "Country",
                        enabled: true,
                    },
                },
            ];
            pivotGrid.pivotConfiguration.rows[0] = new IgxPivotDateDimension(
                {
                    memberName: "Date",
                    enabled: true,
                },
                {
                    total: false,
                }
            );
            pivotGrid.notifyDimensionChange(true);
            expect(pivotGrid.columns.length).toBe(5);
            expect(pivotGrid.columnGroupStates.size).toBe(0);
            const headerRow = fixture.nativeElement.querySelector(
                "igx-pivot-header-row"
            );
            const header = headerRow.querySelector("igx-grid-header-group");
            const expander = header.querySelectorAll("igx-icon")[0];
            expander.click();
            fixture.detectChanges();
            expect(pivotGrid.columnGroupStates.size).toBe(1);
            const value = pivotGrid.columnGroupStates.entries().next().value;
            expect(value[0]).toEqual("All Countries");
            expect(value[1]).toBeTrue();
        });

        it("should collapse column with 2 value dimension", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            pivotGrid.pivotConfiguration.columns = [
                {
                    memberName: "AllCountries",
                    memberFunction: () => "All Countries",
                    enabled: true,
                    childLevel: {
                        memberName: "Country",
                        enabled: true,
                    },
                },
                {
                    memberName: "SellerName",
                    enabled: true,
                },
            ];
            pivotGrid.notifyDimensionChange(true);
            fixture.detectChanges();
            expect(pivotGrid.columnGroupStates.size).toBe(0);
            let headerRow = fixture.nativeElement.querySelector(
                "igx-pivot-header-row"
            );
            let header = headerRow.querySelector("igx-grid-header-group");
            let expander = header.querySelectorAll("igx-icon")[0];
            expander.click();
            fixture.detectChanges();
            expect(pivotGrid.columnGroupStates.size).toBe(1);
            let value = pivotGrid.columnGroupStates.entries().next().value;
            expect(value[0]).toEqual("All Countries");
            expect(value[1]).toBeTrue();

            headerRow = fixture.nativeElement.querySelector(
                "igx-pivot-header-row"
            );
            header = headerRow.querySelector("igx-grid-header-group");
            expander = header.querySelectorAll("igx-icon")[0];
            expander.click();
            fixture.detectChanges();
            value = pivotGrid.columnGroupStates.entries().next().value;
            expect(value[0]).toEqual("All Countries");
            expect(value[1]).toBeFalse();
        });

        it("should collapse row", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;

            expect(pivotGrid.rowList.length).toEqual(5);
            expect(pivotGrid.expansionStates.size).toEqual(0);
            const headerRow = fixture.nativeElement.querySelector(
                "igx-pivot-row-dimension-content"
            );
            const header = headerRow.querySelector(
                "igx-pivot-row-dimension-header"
            );
            const expander = header.querySelectorAll("igx-icon")[0];
            expander.click();
            fixture.detectChanges();
            expect(pivotGrid.rowList.length).toEqual(1);
            expect(pivotGrid.expansionStates.size).toEqual(1);
            expect(pivotGrid.expansionStates.get("All")).toBeFalse();
        });

        it("should display aggregations when no row dimensions are enabled", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            pivotGrid.pivotConfiguration.columns = [
                new IgxPivotDateDimension(
                    {
                        memberName: "Date",
                        enabled: true,
                    },
                    {
                        months: false,
                    }
                ),
            ];
            pivotGrid.pivotConfiguration.rows = [];
            pivotGrid.notifyDimensionChange(true);
            fixture.detectChanges();
            expect(pivotGrid.rowList.first.cells.length).toBeGreaterThanOrEqual(
                1
            );
            expect(pivotGrid.rowList.first.cells.first.title).toEqual("282$");
        });

        it("should display aggregations when no col dimensions are enabled", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            pivotGrid.pivotConfiguration.rows = [
                {
                    memberName: "City",
                    enabled: true,
                },
            ];
            pivotGrid.pivotConfiguration.columns = [];
            pivotGrid.notifyDimensionChange(true);
            fixture.detectChanges();
            expect(pivotGrid.rowList.first.cells.length).toEqual(
                pivotGrid.values.length
            );
            expect(pivotGrid.rowList.first.cells.first.title).toEqual("2127$");
        });

        it("should display aggregations when neither col nor row dimensions are set", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            pivotGrid.pivotConfiguration.rows = [];
            pivotGrid.pivotConfiguration.columns = [];
            pivotGrid.notifyDimensionChange(true);
            fixture.detectChanges();

            expect(pivotGrid.rowList.first.cells.length).toEqual(
                pivotGrid.values.length
            );
            expect(pivotGrid.rowList.first.cells.first.title).toEqual("2127$");
        });

        it("should reevaluate aggregated values when all row dimensions are removed", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            pivotGrid.height = "700px";
            pivotGrid.width = "1000px";
            pivotGrid.pivotConfiguration.columns = [
                new IgxPivotDateDimension(
                    {
                        memberName: "Date",
                        enabled: true,
                    },
                    {
                        months: false,
                    }
                ),
            ];
            pivotGrid.pivotConfiguration.rows = [
                {
                    memberName: "AllSeller",
                    memberFunction: () => "All Sellers",
                    enabled: true,
                    childLevel: {
                        enabled: true,
                        memberName: "SellerName",
                    },
                },
            ];
            pivotGrid.notifyDimensionChange(true);
            fixture.detectChanges();

            const uniqueVals = Array.from(
                new Set(pivotGrid.data.map((x) => x.SellerName))
            ).length;
            expect(pivotGrid.rowList.length).toEqual(uniqueVals + 1);
            expect(pivotGrid.rowList.first.cells.first.title).toEqual("282$");
            expect(pivotGrid.rowDimensions.length).toEqual(1);

            pivotGrid.pivotConfiguration.rows = [];
            pivotGrid.notifyDimensionChange(true);
            fixture.detectChanges();
            expect(pivotGrid.rowList.length).toEqual(1);
            expect(pivotGrid.rowDimensions.length).toEqual(0);
        });

        it("should reevaluate aggregated values when all col dimensions are removed", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            pivotGrid.height = "700px";
            pivotGrid.width = "1000px";
            pivotGrid.pivotConfiguration.columns = [
                new IgxPivotDateDimension(
                    {
                        memberName: "Date",
                        enabled: true,
                    },
                    {
                        months: false,
                    }
                ),
            ];
            pivotGrid.pivotConfiguration.rows = [
                {
                    memberName: "AllSeller",
                    memberFunction: () => "All Sellers",
                    enabled: true,
                    childLevel: {
                        enabled: true,
                        memberName: "SellerName",
                    },
                },
            ];
            pivotGrid.notifyDimensionChange(true);
            fixture.detectChanges();

            const uniqueVals = Array.from(
                new Set(pivotGrid.data.map((x) => x.SellerName))
            ).length;
            expect(pivotGrid.rowList.length).toEqual(uniqueVals + 1);
            expect(pivotGrid.rowList.first.cells.first.title).toEqual("282$");
            expect(pivotGrid.rowList.first.cells.length).toEqual(5);
            expect(pivotGrid.columnDimensions.length).toEqual(1);

            pivotGrid.pivotConfiguration.columns = [];
            pivotGrid.notifyDimensionChange(true);
            fixture.detectChanges();

            expect(pivotGrid.rowList.first.cells.length).toEqual(
                pivotGrid.values.length
            );
            expect(pivotGrid.columnDimensions.length).toEqual(0);
        });

        it("should change display density", fakeAsync(() => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            const minWidthComf = "80";
            const minWidthSupercompact = "56";
            const cellHeightComf = 50;
            const cellHeightSuperCompact = 24;

            pivotGrid.superCompactMode = true;
            tick();
            fixture.detectChanges();

            expect(pivotGrid.displayDensity).toBe("compact");
            const dimensionContents = fixture.debugElement.queryAll(
                By.css(".igx-grid__tbody-pivot-dimension")
            );
            let rowHeaders = dimensionContents[0].queryAll(
                By.directive(IgxPivotRowDimensionHeaderGroupComponent)
            );
            expect(rowHeaders[0].componentInstance.column.minWidth).toBe(
                minWidthSupercompact
            );
            expect(pivotGrid.rowList.first.cellHeight).toBe(
                cellHeightSuperCompact
            );

            pivotGrid.superCompactMode = false;
            fixture.detectChanges();

            pivotGrid.displayDensity = "comfortable";
            tick();
            fixture.detectChanges();

            expect(pivotGrid.displayDensity).toBe("comfortable");
            rowHeaders = dimensionContents[0].queryAll(
                By.directive(IgxPivotRowDimensionHeaderGroupComponent)
            );
            expect(rowHeaders[0].componentInstance.column.minWidth).toBe(
                minWidthComf
            );
            expect(pivotGrid.rowList.first.cellHeight).toBe(cellHeightComf);
        }));

        it("should render correct auto-widths for dimensions with no width", () => {
            const pivotGrid = fixture.componentInstance
                .pivotGrid as IgxPivotGridComponent;
            pivotGrid.data = [
                {
                    ProductCategory: "Clothing",
                    UnitPrice: 12.81,
                    SellerName: "Stanley",
                    Country: "Bulgaria",
                    Date: "01/01/2021",
                    UnitsSold: 282,
                },
            ];
            fixture.detectChanges();

            // there should be just 1 dimension column and 2 value columns and they should auto-fill the available space
            expect(pivotGrid.columns.length).toBe(3);
            const dimColumn = pivotGrid.columns.find(
                (x) => x.field === "Bulgaria"
            );
            expect(dimColumn.width).toBe(
                pivotGrid.calcWidth - pivotGrid.featureColumnsWidth() + "px"
            );
            const unitPriceCol = pivotGrid.columns.find(
                (x) => x.field === "Bulgaria-UnitPrice"
            );
            const unitsSoldCol = pivotGrid.columns.find(
                (x) => x.field === "Bulgaria-UnitsSold"
            );
            expect(unitPriceCol.width).toBe(
                parseInt(dimColumn.width, 10) / 2 + "px"
            );
            expect(unitsSoldCol.width).toBe(
                parseInt(dimColumn.width, 10) / 2 + "px"
            );

            // change data to have many columns so that they no longer fit in the grid
            pivotGrid.data = [
                {
                    ProductCategory: "Clothing",
                    UnitPrice: 12.81,
                    SellerName: "Stanley",
                    Country: "Bulgaria",
                    Date: "01/01/2021",
                    UnitsSold: 282,
                },
                {
                    ProductCategory: "Clothing",
                    UnitPrice: 12.81,
                    SellerName: "Stanley",
                    Country: "USA",
                    Date: "01/01/2021",
                    UnitsSold: 282,
                },
                {
                    ProductCategory: "Clothing",
                    UnitPrice: 12.81,
                    SellerName: "Stanley",
                    Country: "Spain",
                    Date: "01/01/2021",
                    UnitsSold: 282,
                },
                {
                    ProductCategory: "Clothing",
                    UnitPrice: 12.81,
                    SellerName: "Stanley",
                    Country: "Italy",
                    Date: "01/01/2021",
                    UnitsSold: 282,
                },
                {
                    ProductCategory: "Clothing",
                    UnitPrice: 12.81,
                    SellerName: "Stanley",
                    Country: "Greece",
                    Date: "01/01/2021",
                    UnitsSold: 282,
                },
                {
                    ProductCategory: "Clothing",
                    UnitPrice: 12.81,
                    SellerName: "Stanley",
                    Country: "Uruguay",
                    Date: "01/01/2021",
                    UnitsSold: 282,
                },
                {
                    ProductCategory: "Clothing",
                    UnitPrice: 12.81,
                    SellerName: "Stanley",
                    Country: "Mexico",
                    Date: "01/01/2021",
                    UnitsSold: 282,
                },
            ];
            fixture.detectChanges();

            // all should take density default min-width (200 for default density) as they exceed the size of the grid
            const colGroups = pivotGrid.columns.filter((x) => x.columnGroup);
            const childCols = pivotGrid.columns.filter((x) => !x.columnGroup);
            expect(colGroups.every((x) => x.width === "400px")).toBeTrue();
            expect(childCols.every((x) => x.width === "200px")).toBeTrue();
        });

        it("should render correct grid with noop strategies", () => {
            const pivotGrid = fixture.componentInstance.pivotGrid;
            pivotGrid.data = [
                {
                    AllProducts: "All Products",
                    All: 2127,
                    Bulgaria: 774,
                    USA: 829,
                    Uruguay: 524,
                    AllProducts_records: [
                        {
                            ProductCategory: "Clothing",
                            All: 1523,
                            Bulgaria: 774,
                            USA: 296,
                            Uruguay: 456,
                        },
                        { ProductCategory: "Bikes", All: 68, Uruguay: 68 },
                        { ProductCategory: "Accessories", All: 293, USA: 293 },
                        { ProductCategory: "Components", All: 240, USA: 240 },
                    ],
                },
            ];

            pivotGrid.pivotConfiguration = {
                columnStrategy: NoopPivotDimensionsStrategy.instance(),
                rowStrategy: NoopPivotDimensionsStrategy.instance(),
                columns: [
                    {
                        memberName: "Country",
                        enabled: true,
                    },
                ],
                rows: [
                    {
                        memberFunction: () => "All",
                        memberName: "AllProducts",
                        enabled: true,
                        width: "25%",
                        childLevel: {
                            memberName: "ProductCategory",
                            enabled: true,
                        },
                    },
                ],
                values: [
                    {
                        member: "UnitsSold",
                        aggregate: {
                            aggregator: IgxPivotNumericAggregate.sum,
                            key: "sum",
                            label: "Sum",
                        },
                        enabled: true,
                    },
                ],
                filters: null,
            };

            pivotGrid.notifyDimensionChange(true);
            fixture.detectChanges();

            expect(
                pivotGrid.rowList.first.cells.toArray().map((x) => x.value)
            ).toEqual([2127, 774, 829, 524]);
        });

        describe("IgxPivotGrid Features #pivotGrid", () => {
            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];
                const headerRow = fixture.nativeElement.querySelector(
                    "igx-pivot-header-row"
                );
                const rowChip = headerRow.querySelector('igx-chip[id="All"]');
                const filterIcon = rowChip.querySelectorAll("igx-icon")[1];

                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 Select All checkbox
                expect(
                    excelMenu.parentElement.parentElement.attributes.hidden
                ).toBeUndefined();
                expect(
                    (
                        checkBoxes[0].querySelector(
                            ".igx-checkbox__label"
                        ) as HTMLElement
                    ).innerText
                ).toEqual("Select All");

                // 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.", 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")[1];
                filterIcon.click();
                await wait(100);
                fixture.detectChanges();

                // 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[4].click();
                fixture.detectChanges();

                // uncheck Bikes
                checkboxes[3].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 rowHeaders = fixture.debugElement.queryAll(
                    By.directive(IgxPivotRowDimensionHeaderComponent)
                );
                const rowDimensionHeaders = rowHeaders.map(
                    (x) => x.componentInstance.column.header
                );
                expect(rowDimensionHeaders).toEqual(expectedHeaders);
            });

            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")[1];
                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"
                    )
                );

                // uncheck Bulgaria
                checkboxes[1].click();
                fixture.detectChanges();

                // uncheck Uruguay
                checkboxes[3].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);
            });

            it("should show filters chips", async () => {
                const pivotGrid = fixture.componentInstance.pivotGrid;
                pivotGrid.pivotConfiguration.rows = [
                    {
                        memberName: "All",
                        memberFunction: () => "All",
                        enabled: true,
                        width: "300px",
                        childLevel: {
                            memberName: "ProductCategory",
                            memberFunction: (data) => data.ProductCategory,
                            enabled: true,
                        },
                    },
                ];
                pivotGrid.pivotConfiguration.filters = [
                    {
                        memberName: "SellerName",
                        enabled: true,
                    },
                ];
                pivotGrid.pipeTrigger++;
                pivotGrid.setupColumns();
                fixture.detectChanges();
                const excelMenu =
                    GridFunctions.getExcelStyleFilteringComponents(
                        fixture,
                        "igx-pivot-grid"
                    )[1];
                const headerRow = fixture.nativeElement.querySelector(
                    "igx-pivot-header-row"
                );
                const filtersChip = headerRow.querySelector(
                    'igx-chip[id="SellerName"]'
                );
                const filterIcon = filtersChip.querySelectorAll("igx-icon")[0];

                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("Stanley");
                expect(
                    (
                        checkBoxes[2].querySelector(
                            ".igx-checkbox__label"
                        ) as HTMLElement
                    ).innerText
                ).toEqual("Elisa");
                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", async () => {
                const pivotGrid = fixture.componentInstance.pivotGrid;
                pivotGrid.pivotConfiguration.filters = [
                    {
                        memberName: "SellerName",
                        enabled: true,
                    },
                    {
                        memberName: "ProductCategory",
                        enabled: true,
                    },
                ];
                pivotGrid.pipeTrigger++;
                pivotGrid.setupColumns();
                fixture.detectChanges();
                const excelMenu =
                    GridFunctions.getExcelStyleFilteringComponents(
                        fixture,
                        "igx-pivot-grid"
                    )[0];
                const headerRow = fixture.nativeElement.querySelector(
                    "igx-pivot-header-row"
                );
                const dropdownIcon = headerRow
                    .querySelector(".igx-grid__tr-pivot--filter")
                    .querySelectorAll("igx-icon")[0];

                expect(
                    excelMenu.parentElement.parentElement.attributes.hidden
                ).not.toBeUndefined();
                dropdownIcon.click();
                await wait(100);
                fixture.detectChanges();

                const chips = excelMenu.querySelectorAll("igx-chip");
                expect(chips[0].id).toBe("SellerName");
                expect(
                    chips[0].attributes.getNamedItem("ng-reflect-selected")
                        .nodeValue
                ).toEqual("true");
                expect(chips[1].id).toBe("ProductCategory");
                expect(
                    chips[1].attributes.getNamedItem("ng-reflect-selected")
                        .nodeValue
                ).toEqual("false");

                let esfSearch = GridFunctions.getExcelFilteringSearchComponent(
                    fixture,
                    excelMenu,
                    "igx-pivot-grid"
                );
                let 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("Stanley");
                expect(
                    (
                        checkBoxes[2].querySelector(
                            ".igx-checkbox__label"
                        ) as HTMLElement
                    ).innerText
                ).toEqual("Elisa");
                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)
                );
                const chipComponents = chipAreaElement[4].queryAll(
                    By.directive(IgxChipComponent)
                );
                chipComponents[1].triggerEventHandler("chipClick", {
                    owner: {
                        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("Clothing");
                expect(
                    (
                        checkBoxes[2].querySelector(
                            ".igx-checkbox__label"
                        ) as HTMLElement
                    ).innerText
                ).toEqual("Bikes");
                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", async () => {
                const pivotGrid = fixture.componentInstance.pivotGrid;
                pivotGrid.pivotConfiguration.filters = [
                    {
                        memberName: "SellerName",
                        enabled: true,
                    },
                    {
                        memberName: "ProductCategory",
                        enabled: true,
                    },
                ];
                pivotGrid.pipeTrigger++;
                pivotGrid.setupColumns();
                fixture.detectChanges();
                const excelMenu =
                    GridFunctions.getExcelStyleFilteringComponents(
                        fixture,
                        "igx-pivot-grid"
                    )[0];