feat(*): Add tests. Fix intial horizontal scrollbar.

Author: mddragnev

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

@@ -291,6 +291,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 columns = columns.concat(allChildren);
             }
         });
+        this.reflow();
         return columns;
     }
 

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

@@ -0,0 +1,108 @@
+import { Component, ViewChild } from '@angular/core';
+import { fakeAsync, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxNumberSummaryOperand, IgxPivotGridComponent, IgxPivotGridModule, IPivotConfiguration } from 'igniteui-angular';
+import { configureTestSuite } from '../../test-utils/configure-suite';
+
+describe('Basic IgxPivotGrid #pivotGrid', () => {
+    let fixture;
+    configureTestSuite((() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                IgxPivotGridTestBaseComponent
+            ],
+            imports: [
+                NoopAnimationsModule, IgxPivotGridModule]
+        });
+    }));
+
+    beforeEach(fakeAsync(() => {
+        fixture = TestBed.createComponent(IgxPivotGridTestBaseComponent);
+        fixture.detectChanges();
+    }));
+
+    it('should apply formatter and dataType from measures', () => {
+        const pivotGrid = fixture.componentInstance.pivotGrid;
+        const actualFormatterValue = pivotGrid.rowList.first.cells.first.title;
+        expect(actualFormatterValue).toEqual('774$');
+        const actualDataTypeValue = pivotGrid.rowList.first.cells.last.title;
+        expect(actualDataTypeValue).toEqual('$28.86');
+    });
+
+    it('should apply css class to cells from measures', () => {
+        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');
+    });
+});
+
+
+@Component({
+    template: `
+    <igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
+    </igx-pivot-grid>`
+})
+export class IgxPivotGridTestBaseComponent {
+    public data;
+
+    public callback = (rowData: any, columnKey: any) => rowData[columnKey] >= 5;
+    public callback1 = (rowData: any, columnKey: any) => rowData[columnKey] < 5;
+
+    public cellClasses = {
+        test: this.callback,
+        test2: this.callback1
+    };
+
+    @ViewChild('grid', { read: IgxPivotGridComponent, static: true }) public pivotGrid: IgxPivotGridComponent;
+
+    public pivotConfigHierarchy: IPivotConfiguration = {
+        columns: [{
+            member: 'Country',
+            enabled: true,
+            childLevels: []
+        },
+        ],
+        rows: [{
+            member: () => 'All',
+            enabled: true,
+            childLevels: [
+                {
+                    fieldName: 'ProductCategory',
+                    member: (data) => data.ProductCategory,
+                    enabled: true,
+                    childLevels: []
+                }
+            ]
+        }],
+        values: [
+            {
+                member: 'UnitsSold',
+                aggregate: IgxNumberSummaryOperand.sum,
+                enabled: true,
+                // dataType: 'currency',
+                formatter: (value) => value ? value + '$' : undefined,
+                styles: this.cellClasses
+            },
+            {
+                member: 'UnitPrice',
+                aggregate: IgxNumberSummaryOperand.sum,
+                enabled: true,
+                dataType: 'currency'
+            }
+        ],
+        filters: null
+    };
+
+    constructor() {
+        this.data = [{ ProductCategory: 'Clothing', UnitPrice: 12.81, SellerName: 'Stanley', Country: 'Bulgaria', Date: '01/01/2021', UnitsSold: 282 },
+        { ProductCategory: 'Clothing', UnitPrice: 49.57, SellerName: 'Elisa', Country: 'USA', Date: '01/05/2019', UnitsSold: 296 },
+        { ProductCategory: 'Bikes', UnitPrice: 3.56, SellerName: 'Lydia', Country: 'Uruguay', Date: '01/06/2020', UnitsSold: 68 },
+        { ProductCategory: 'Accessories', UnitPrice: 85.58, SellerName: 'David', Country: 'USA', Date: '04/07/2021', UnitsSold: 293 },
+        { ProductCategory: 'Components', UnitPrice: 18.13, SellerName: 'John', Country: 'USA', Date: '12/08/2021', UnitsSold: 240 },
+        { ProductCategory: 'Clothing', UnitPrice: 68.33, SellerName: 'Larry', Country: 'Uruguay', Date: '05/12/2020', UnitsSold: 456 },
+        { ProductCategory: 'Clothing', UnitPrice: 16.05, SellerName: 'Walter', Country: 'Bulgaria', Date: '02/19/2020', UnitsSold: 492 }];
+
+
+    }
+}

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html

@@ -20,6 +20,7 @@
 
     <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForSizePropName]='"calcPixelWidth"' [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
         <igx-grid-cell
+            #cell
             class="igx-grid__td igx-grid__td--fw"
             [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
             [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"