Merge pull request #6967 from IgniteUI/dkamburov/row-pin-hiding

test(row-pinning): Add test for row pinning and hiding #6640

Author: ChronosSF

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

@@ -699,6 +699,50 @@ describe('Row Pinning #grid', () => {
             verifyDOMMatchesLayoutSettings(gridUnpinnedRow, fix.componentInstance.colGroups);
         });
     });
+    describe(' Hiding', () => {
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(GridRowPinningComponent);
+            fix.detectChanges();
+            grid = fix.componentInstance.instance;
+            tick();
+            fix.detectChanges();
+        }));
+
+        it('should hide columns in pinned and unpinned area', () => {
+            // pin 2nd data row
+            grid.pinRow(fix.componentInstance.data[1]);
+            fix.detectChanges();
+            const hiddenCol = grid.columns[1];
+            hiddenCol.hidden = true;
+            fix.detectChanges();
+
+            const pinnedCells = grid.pinnedRows[0].cells;
+            expect(pinnedCells.filter(cell => cell.column.field === hiddenCol.field).length).toBe(0);
+
+            const unpinnedCells = grid.rowList.first.cells;
+            expect(unpinnedCells.filter(cell => cell.column.field === hiddenCol.field).length).toBe(0);
+
+            expect(pinnedCells.length).toBe(unpinnedCells.length);
+
+            const headerCells = grid.headerCellList;
+            expect(headerCells.filter(cell => cell.column.field === hiddenCol.field).length).toBe(0);
+
+            expect(grid.pinnedRows.length).toBe(1);
+            const pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
+            expect(pinRowContainer.length).toBe(1);
+            expect(pinRowContainer[0].children.length).toBe(1);
+            expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]);
+            expect(pinRowContainer[0].children[0].nativeElement).toBe(grid.getRowByIndex(0).nativeElement);
+
+            expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[0]);
+            expect(grid.getRowByIndex(2).rowID).toBe(fix.componentInstance.data[2]);
+
+            // 1 records pinned + 2px border
+            expect(grid.pinnedRowHeight).toBe(grid.renderedRowHeight + 2);
+            const expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
+            expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
+        });
+    });
 });
 
 @Component({

src/app/grid-column-pinning/grid-column-pinning.sample.ts

@@ -103,7 +103,7 @@ export class GridColumnPinningSampleComponent implements OnInit {
 
     togglePinRow(index) {
         const rec = this.data[index];
-        this.grid1.isRecordPinned(rec) ?
+        !this.grid1.isRecordPinned(rec) ?
          this.grid1.pinRow(rec) :
          this.grid1.unpinRow(rec)
     }

src/app/grid-row-pinning/grid-row-pinning.sample.html

@@ -9,7 +9,7 @@
                 <igx-switch (change)='onRowChange()' style="padding-left: 10px"> Bottom Row Pinning toggle</igx-switch>
                 <igx-switch (change)='onChange()' style="padding-left: 10px"> Right Column Pinning toggle</igx-switch>
             </div>
-        <igx-grid [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false">
+        <igx-grid [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig" [showToolbar]='true' [columnHiding]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false">
             <igx-column width='70px' [filterable]='false'>
                 <ng-template igxCell let-cell="cell" let-val>
                     <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">