test(IgxGrid): new column is added to the correct position #8294

Author: ddincheva

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

@@ -5,7 +5,7 @@ import { IgxGridComponent } from './grid.component';
 import { IgxGridModule } from './public_api';
 import { GridTemplateStrings, ColumnDefinitions } from '../../test-utils/template-strings.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
-import { ColumnHiddenFromMarkupComponent, ColumnCellFormatterComponent, DynamicColumnsComponent } from '../../test-utils/grid-samples.spec';
+import { ColumnHiddenFromMarkupComponent, ColumnCellFormatterComponent, DynamicColumnsComponent, GridAddColumnComponent } from '../../test-utils/grid-samples.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
@@ -27,7 +27,8 @@ describe('IgxGrid - Column properties #grid', () => {
                 ColumnCellFormatterComponent,
                 ColumnHaederClassesComponent,
                 ColumnHiddenFromMarkupComponent,
-                DynamicColumnsComponent
+                DynamicColumnsComponent,
+                GridAddColumnComponent
             ],
             imports: [IgxGridModule, NoopAnimationsModule]
         })
@@ -167,6 +168,36 @@ describe('IgxGrid - Column properties #grid', () => {
         expect(grid.columnList.last.field).toMatch('Name');
     }));
 
+    it('should add new column at the correct visible index', fakeAsync(() => {
+        const fix = TestBed.createComponent(GridAddColumnComponent);
+        fix.detectChanges();
+        const grid = fix.componentInstance.grid;
+        const maxVindex = fix.componentInstance.columns.length - 1;
+
+        // add to unpinned area
+        fix.componentInstance.columns.push({ field: 'City', width: 150, movable: true, type: 'string' });
+        fix.detectChanges();
+
+        let cityCol = grid.getColumnByName('City');
+        expect(cityCol.visibleIndex).toEqual(maxVindex + 1);
+
+        // remove the newly added column
+        fix.componentInstance.columns.pop();
+        fix.detectChanges();
+
+        cityCol = grid.getColumnByName('City');
+        expect(cityCol).not.toBeDefined();
+
+         // add to pinned area
+         fix.componentInstance.columns.push({ field: 'City', width: 150, movable: true, type: 'string', pinned: true });
+         fix.detectChanges();
+
+        fix.detectChanges();
+
+        cityCol = grid.getColumnByName('City');
+        expect(cityCol.visibleIndex).toEqual( 1);
+    }));
+
     it('should apply columnWidth on columns that don\'t have explicit width', () => {
         const fix = TestBed.createComponent(ColumnCellFormatterComponent);
         fix.componentInstance.grid.columnWidth = '200px';

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -121,6 +121,33 @@ export class ColumnHiddenFromMarkupComponent extends BasicGridComponent {
     data = SampleTestData.personIDNameData();
 }
 
+@Component({
+    template: `
+        <igx-grid #grid1 [data]="data" [columnPinning]='true' [width]="'900px'" [height]="'600px'">
+            <igx-column *ngFor="let c of columns" [field]="c.field"
+                [header]="c.field"
+                [movable]="c.movable"
+                [width]="c.width"
+                [editable]="true"
+                [pinned]="c.pinned"
+                [dataType]="c.type">
+            </igx-column>
+        </igx-grid>
+    `
+})
+export class GridAddColumnComponent extends BasicGridComponent implements OnInit {
+    public columns: Array<any>;
+    data = SampleTestData.contactInfoDataFull()
+    public ngOnInit(): void {
+        this.columns = [
+            { field: 'ID', width: 150, movable: true, type: 'string', pinned: true },
+            { field: 'CompanyName', width: 150, movable: true, type: 'string'},
+            { field: 'ContactName', width: 150, movable: true, type: 'string' },
+            { field: 'ContactTitle', width: 150, movable: true, type: 'string' },
+            { field: 'Address', width: 150, movable: true, type: 'string' }];
+    }
+}
+
 @Component({
     template: GridTemplateStrings.declareGrid('', '',
                 ColumnDefinitions.idNameFormatter)