Implement robust waiting mechanisms for Element tests to fix sporadic failures

- Add waitForQueryUpdates() and waitForQueryUpdate() methods to IgxCustomNgElementStrategy
- Replace hard-coded timer delays with proper async waiting mechanisms
- Update all failing tests to use new robust waiting patterns
- Fix type compatibility issues in test code
- Make tests deterministic instead of relying on timing assumptions

Co-authored-by: Lipata <[email protected]>

Author: Copilot

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

@@ -15,6 +15,42 @@ import {
 } from './components';
 import { defineComponents } from '../utils/register';
 
+/**
+ * Wait for all elements to be fully initialized and their query updates to complete
+ * @param elements Array of IgcNgElement instances to wait for
+ * @param timeoutMs Optional timeout in milliseconds (default: 5000)
+ */
+async function waitForElementsReady(elements: IgcNgElement[], timeoutMs: number = 5000): Promise<void> {
+    const timeout = timer(timeoutMs).toPromise();
+    const initPromises = elements.map(async (element) => {
+        try {
+            // Wait for component ref to be ready
+            await element.ngElementStrategy[ComponentRefKey];
+            // Wait for any pending query updates
+            if (typeof (element.ngElementStrategy as any).waitForQueryUpdates === 'function') {
+                await (element.ngElementStrategy as any).waitForQueryUpdates();
+            }
+        } catch (error) {
+            // Element might not have the strategy or methods, just continue
+            console.warn('Element initialization warning:', error);
+        }
+    });
+    
+    await Promise.race([
+        Promise.all(initPromises),
+        timeout.then(() => { throw new Error(`Elements initialization timed out after ${timeoutMs}ms`); })
+    ]);
+}
+
+/**
+ * Wait for a single element to be fully initialized and its query updates to complete
+ * @param element IgcNgElement instance to wait for
+ * @param timeoutMs Optional timeout in milliseconds (default: 5000)
+ */
+async function waitForElementReady(element: IgcNgElement, timeoutMs: number = 5000): Promise<void> {
+    await waitForElementsReady([element], timeoutMs);
+}
+
 describe('Elements: ', () => {
     let testContainer: HTMLDivElement;
 
@@ -48,15 +84,16 @@ describe('Elements: ', () => {
             const columnEl = document.createElement("igc-column") as IgcNgElement;
             gridEl.appendChild(columnEl);
 
-            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
-            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+            // Wait for both elements to be fully initialized and query updates to complete
+            await waitForElementsReady([gridEl, columnEl]);
 
             const gridComponent = (await gridEl.ngElementStrategy[ComponentRefKey]).instance as IgxGridComponent;
             const columnComponent = (await columnEl.ngElementStrategy[ComponentRefKey]).instance as IgxColumnComponent;
             expect(gridComponent.columnList.toArray()).toContain(columnComponent);
 
             columnEl.remove();
-            await firstValueFrom(timer(10 /* SCHEDULE_DELAY: DESTROY + QUERY */ * 3));
+            // Wait for the query update after removal
+            await (gridEl.ngElementStrategy as any).waitForQueryUpdates();
             expect(gridComponent.columnList.toArray()).toEqual([]);
         });
 
@@ -73,12 +110,12 @@ describe('Elements: ', () => {
                 </div>`;
             }
 
-            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
-            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+            // Wait for grid and column to be fully initialized
+            await waitForElementsReady([gridEl as unknown as IgcNgElement, columnEl]);
 
             // sigh (。﹏。*)
             (gridEl as any).toggleRow('1');
-            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+            await waitForElementReady(gridEl as unknown as IgcNgElement);
 
             let detailGrid = document.querySelector<IgcNgElement>('#child1');
             expect(detailGrid).toBeDefined();
@@ -87,9 +124,9 @@ describe('Elements: ', () => {
 
             // close and re-expand row detail:
             (gridEl as any).toggleRow('1');
-            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+            await waitForElementReady(gridEl as unknown as IgcNgElement);
             (gridEl as any).toggleRow('1');
-            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+            await waitForElementReady(gridEl as unknown as IgcNgElement);
 
             detailGrid = document.querySelector<IgcNgElement>('#child1');
             expect(detailGrid).toBeDefined();
@@ -116,8 +153,8 @@ describe('Elements: ', () => {
             const hgridComponent = (await hgridEl.ngElementStrategy[ComponentRefKey]).instance as IgxHierarchicalGridComponent;
             hgridComponent.data = hgridData;
 
-            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
-            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+            // Wait for all elements to be fully initialized and query updates to complete
+            await waitForElementsReady([hgridEl, columnProjectId, columnName, columnStartDate]);
 
             expect(hgridComponent.dataView.length).toBeGreaterThan(0);
         });
@@ -163,8 +200,8 @@ describe('Elements: ', () => {
             });
             testContainer.appendChild(gridEl);
 
-            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
-            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+            // Wait for all elements to be fully initialized and query updates to complete
+            await waitForElementsReady([gridEl as unknown as IgcNgElement, columnID as unknown as IgcNgElement, columnName as unknown as IgcNgElement]);
 
             const header = document.getElementsByTagName("igx-grid-header").item(0) as HTMLElement;
             expect(header.innerText).toEqual('Templated ProductID');
@@ -179,8 +216,8 @@ describe('Elements: ', () => {
 
             testContainer.appendChild(gridEl);
 
-            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
-            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+            // Wait for all elements to be fully initialized and query updates to complete
+            await waitForElementsReady([gridEl as unknown as IgcNgElement, stateComponent as unknown as IgcNgElement]);
             expect(() => stateComponent.getStateAsString()).not.toThrow();
         });
 
@@ -201,19 +238,21 @@ describe('Elements: ', () => {
             </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"]');
+            
+            // Wait for all elements to be fully initialized
+            const allElements = [grid, thirdGroup, secondGroup, ...Array.from(document.querySelectorAll<IgcNgElement>('igc-column'))];
+            await waitForElementsReady(allElements.filter(el => el) as IgcNgElement[]);
 
             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 */ * 3));
+            // Wait for query updates after removal
+            await (grid.ngElementStrategy as any).waitForQueryUpdates();
 
             expect(grid.columns.length).toEqual(4);
             expect(grid.getColumnByName('ProductID')).toBeTruthy();
@@ -225,7 +264,8 @@ describe('Elements: ', () => {
             newColumn.setAttribute('field', 'ProductName');
             newGroup.appendChild(newColumn);
             grid.insertBefore(newGroup, thirdGroup);
-            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+            // Wait for new elements to be initialized and query updates to complete
+            await waitForElementsReady([newGroup as unknown as IgcNgElement, newColumn as unknown as IgcNgElement]);
 
             expect(grid.columns.length).toEqual(6);
             expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');

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

@@ -288,6 +288,7 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
 
     //#region schedule query update
     private schedule = new Map<string, () => void>();
+    private queryUpdatePromises = new Map<string, Promise<void>>();
 
     /**
      * Schedule an update for a content query for the component
@@ -298,12 +299,47 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
             this.schedule.get(queryName)();
         }
 
-        const id = setTimeout(() => this.updateQuery(queryName), SCHEDULE_DELAY);
-        this.schedule.set(queryName, () => clearTimeout(id));
+        // Create a promise that resolves when the query update completes
+        const updatePromise = new Promise<void>((resolve) => {
+            const id = setTimeout(() => {
+                this.updateQuery(queryName);
+                resolve();
+            }, SCHEDULE_DELAY);
+            this.schedule.set(queryName, () => {
+                clearTimeout(id);
+                resolve();
+            });
+        });
+
+        this.queryUpdatePromises.set(queryName, updatePromise);
+    }
+
+    /**
+     * Wait for all pending query updates to complete
+     * @returns Promise that resolves when all scheduled query updates are finished
+     */
+    public async waitForQueryUpdates(): Promise<void> {
+        const pendingPromises = Array.from(this.queryUpdatePromises.values());
+        if (pendingPromises.length > 0) {
+            await Promise.all(pendingPromises);
+        }
+    }
+
+    /**
+     * Wait for a specific query update to complete
+     * @param queryName The name of the query to wait for
+     * @returns Promise that resolves when the query update is finished
+     */
+    public async waitForQueryUpdate(queryName: string): Promise<void> {
+        const promise = this.queryUpdatePromises.get(queryName);
+        if (promise) {
+            await promise;
+        }
     }
 
     private updateQuery(queryName: string) {
         this.schedule.delete(queryName);
+        this.queryUpdatePromises.delete(queryName);
         const componentRef = (this as any).componentRef as ComponentRef<any>;
         if (componentRef) {
             const componentConfig = this.config?.find(x => x.component === this._componentFactory.componentType);