test(elements): add test for grid columns dom manipulation

Author: damyanpetev

projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts

@@ -11,6 +11,7 @@ import {
     IgcColumnComponent,
     IgcPaginatorComponent,
     IgcGridStateComponent,
+    IgcColumnLayoutComponent,
 } from './components';
 import { defineComponents } from '../utils/register';
 
@@ -23,6 +24,7 @@ describe('Elements: ', () => {
             IgcHierarchicalGridComponent,
             IgcPivotGridComponent,
             IgcColumnComponent,
+            IgcColumnLayoutComponent,
             IgcPaginatorComponent,
             IgcGridStateComponent,
         );
@@ -181,5 +183,52 @@ describe('Elements: ', () => {
             await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
             expect(() => stateComponent.getStateAsString()).not.toThrow();
         });
+
+        it(`should allow manipulating projected columns through the DOM`, async () => {
+            const innerHtml = `
+            <igc-grid id="testGrid" primary-key="ProductID">
+                <igc-column-layout header="Product ID">
+                    <igc-column row-start="1" col-start="1" row-end="3" field="ProductID" header="Product ID" width="25%"></igc-column>
+                </igc-column-layout>
+                <igc-column-layout header="Product Details">
+                    <igc-column row-start="1" col-start="1" col-end="3" field="ProductName" header="Product Name"></igc-column>
+                    <igc-column row-start="2" col-start="1" col-end="2" field="CategoryName" header="Category Name" groupable="true"></igc-column>
+                    <igc-column row-start="2" col-start="2" col-end="3" field="ImageUrl"></igc-column>
+                </igc-column-layout>
+                <igc-column-layout header="Product Stock">
+                    <igc-column row-start="1" col-start="1" col-end="3" field="InStock" header="In Stock" width="25%"></igc-column>
+                </igc-column-layout>
+            </igc-grid>`;
+            testContainer.innerHTML = innerHtml;
+
+            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            const grid = document.querySelector<IgcNgElement & InstanceType<typeof IgcGridComponent>>('#testGrid');
+            const thirdGroup = document.querySelector<IgcNgElement>('igc-column-layout[header="Product Stock"]');
+            const secondGroup = document.querySelector<IgcNgElement>('igc-column-layout[header="Product Details"]');
+
+            expect(grid.columns.length).toEqual(8);
+            expect(grid.getColumnByName('ProductID')).toBeTruthy();
+            expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');
+
+            grid.removeChild(secondGroup);
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 5));
+
+            expect(grid.columns.length).toEqual(4);
+            expect(grid.getColumnByName('ProductID')).toBeTruthy();
+            expect(grid.getColumnByVisibleIndex(1).field).toEqual('InStock');
+
+            // TODO: secondGroup can't be re-used
+            const newGroup = document.createElement('igc-column-layout');
+            const newColumn = document.createElement('igc-column');
+            newColumn.setAttribute('field', 'ProductName');
+            newGroup.appendChild(newColumn);
+            grid.insertBefore(newGroup, thirdGroup);
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 7));
+
+            expect(grid.columns.length).toEqual(6);
+            expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');
+        });
     });
 });