test(esf): add load on demand test #5448

Author: tachojelev

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html

@@ -38,7 +38,7 @@
     </div>
 
     <ng-template igxDataLoading>        
-        <div style="display: flex; align-items: center;" class="esf-loading-indicator">
+        <div class="igx-excel-filter-loading">
             <ng-container *ngTemplateOutlet="valuesLoadingTemplate">
             </ng-container>
         </div>

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

@@ -41,7 +41,8 @@ import {
     IgxGridFilteringMCHComponent,
     IgxTestExcelFilteringDatePickerComponent,
     IgxGridFilteringTemplateComponent,
-    IgxGridFilteringESFTemplatesComponent
+    IgxGridFilteringESFTemplatesComponent,
+    IgxGridFilteringESFLoadOnDemandComponent
 } from '../../test-utils/grid-samples.spec';
 
 const FILTER_UI_ROW = 'igx-grid-filtering-row';
@@ -3504,7 +3505,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
             declarations: [
                 IgxGridFilteringComponent,
                 IgxTestExcelFilteringDatePickerComponent,
-                IgxGridFilteringESFTemplatesComponent
+                IgxGridFilteringESFTemplatesComponent,
+                IgxGridFilteringESFLoadOnDemandComponent
             ],
             imports: [
                 NoopAnimationsModule,
@@ -5578,6 +5580,38 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
             // expect(datePicker.componentInstance.templateDropDownTarget).toBeTruthy();
         }));
     });
+
+    describe('Load values on demand', () => {
+        let fix, grid;
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(IgxGridFilteringESFLoadOnDemandComponent);
+            grid = fix.componentInstance.grid;
+            fix.detectChanges();
+        }));
+
+        fit('TEST', fakeAsync(() => {
+            // Open excel style custom filtering dialog and wait a bit.
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            fix.detectChanges();
+            tick(400);
+
+            // Verify items in search have not loaded yet and that the loading indicator is visible.
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
+            let listItems = searchComponent.querySelectorAll('igx-list-item');
+            expect(listItems.length).toBe(0, 'incorrect rendered list items count');
+            let loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix);
+            expect(loadingIndicator).not.toBeNull('esf loading indicator is not visible');
+
+            // Wait for items to load.
+            tick(650);
+
+            // Verify items in search have loaded and that the loading indicator is not visible.
+            listItems = searchComponent.querySelectorAll('igx-list-item');
+            expect(listItems.length).toBe(6, 'incorrect rendered list items count');
+            loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix);
+            expect(loadingIndicator).toBeNull('esf loading indicator is visible');
+        }));
+    });
 });
 
 const expectedResults = [];

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

@@ -744,6 +744,12 @@ export class GridFunctions {
         return excelMenu.querySelector('igx-excel-style-column-moving');
     }
 
+    public static getExcelFilteringLoadingIndicator(fix: ComponentFixture<any>) {
+        const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
+        const loadingIndicator = searchComponent.querySelector('.igx-excel-filter-loading');
+        return loadingIndicator;
+    }
+
     public static getColumnCells(fix, columnKey) {
         const allCells = fix.debugElement.queryAll(By.css('igx-grid-cell'));
         return allCells.filter((cell) => cell.componentInstance.column.field === columnKey);

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

@@ -11,6 +11,8 @@ import { IgxColumnComponent } from '../grids/column.component';
 import { IgxTransactionService } from '../services';
 import { IgxFilteringOperand } from '../data-operations/filtering-condition';
 import { ExpressionUI } from '../grids/filtering/grid-filtering.service';
+import { IFilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
+import { FilteringStrategy } from '../data-operations/filtering-strategy';
 
 @Component({
     template: `<div style="width: 800px; height: 600px;">
@@ -933,6 +935,32 @@ export class IgxGridFilteringComponent extends BasicGridComponent {
     }
 }
 
+@Component({
+    template: `<igx-grid [data]="data" height="500px" [allowFiltering]='true'
+                         [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy">
+        <igx-column width="100px" [field]="'ID'"></igx-column>
+        <igx-column width="100px" [field]="'ProductName'" dataType="string"></igx-column>
+        <igx-column width="100px" [field]="'Downloads'" dataType="number"></igx-column>
+        <igx-column width="100px" [field]="'Released'" dataType="boolean"></igx-column>
+        <igx-column width="100px" [field]="'ReleaseDate'" dataType="date">
+        </igx-column>
+    </igx-grid>`
+})
+export class IgxGridFilteringESFLoadOnDemandComponent extends BasicGridComponent {
+    private _filteringStrategy = new FilteringStrategy();
+    public data = SampleTestData.excelFilteringData();
+
+    public columnValuesStrategy = (column: IgxColumnComponent,
+                                   columnExprTree: IFilteringExpressionsTree,
+                                   done: (uniqueValues: any[]) => void) => {
+        setTimeout(() => {
+            const filteredData = this._filteringStrategy.filter(this.data, columnExprTree);
+            const columnValues = filteredData.map(record => record[column.field]);
+            done(columnValues);
+        }, 1000);
+    }
+}
+
 @Component({
     template: `<igx-grid [data]="data" height="500px" [allowFiltering]='true' [filterMode]="'excelStyleFilter'">
         <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"

src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.html

@@ -10,10 +10,8 @@
       </div>
       <igx-grid #grid1 [data]="data" [width]="'900px'" [height]="'800px'" [displayDensity]="density"
                 [showToolbar]="true" [columnHiding]="true" [allowFiltering]="true" [rowSelectable]="true"
-                [filterMode]="'excelStyleFilter'" 
-                
-                [uniqueColumnValuesStrategy]="columnValuesStrategy"
-                >
+                [filterMode]="'excelStyleFilter'"
+                [uniqueColumnValuesStrategy]="columnValuesStrategy">
 
         <igx-column [field]="'ID'" [filterable]="true" [sortable]="true" [movable]="true" [dataType]="'string'"></igx-column>
         <igx-column [field]="'CompanyName'" [filterable]="true" [sortable]="true" [movable]="true" [dataType]="'string'"></igx-column>