test(*): fixing tests using ng-reflect

Author: ChronosSF

projects/igniteui-angular/src/lib/banner/banner.component.spec.ts

@@ -469,13 +469,12 @@ describe('igxBanner', () => {
             const banner = fixture.componentInstance.banner;
             const panel = fixture.nativeElement.querySelector('.' + CSS_CLASS_EXPANSION_PANEL);
             expect(panel).not.toBeNull();
-            expect(panel.attributes.getNamedItem('ng-reflect-collapsed').nodeValue).toEqual('true');
+            expect(panel.attributes.getNamedItem('aria-expanded').nodeValue).toEqual('false');
             expect(panel.childElementCount).toEqual(0);
 
             banner.open();
             tick();
             fixture.detectChanges();
-            expect(panel.attributes.getNamedItem('ng-reflect-collapsed').nodeValue).toEqual('false');
             expect(panel.childElementCount).toEqual(1);
 
             const panelBody = panel.children[0];

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -1056,7 +1056,7 @@ describe('igxCombo', () => {
                 expect(input.nativeElement.getAttribute('aria-labelledby')).toEqual(combo.placeholder);
 
                 const dropdown = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_DROPDOWN}`));
-                expect(dropdown.nativeElement.getAttribute('ng-reflect-labelled-by')).toEqual(combo.placeholder);
+                expect(dropdown.nativeElement.getAttribute('aria-labelledby')).toEqual(combo.placeholder);
 
                 combo.open();
                 tick();

projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts

@@ -307,10 +307,6 @@ describe('igxExpansionPanel', () => {
             const ariaExpanded = collapsed ? 'false' : 'true';
             expect(panelHeader.querySelector('div [role = \'button\']').getAttribute('aria-expanded')).toMatch(ariaExpanded);
             expect(panelHeader.classList.contains(CSS_CLASS_HEADER_EXPANDED)).toEqual(!collapsed);
-            if (button.children.length > 1) {
-                const iconName = collapsed ? 'expand_more' : 'expand_less';
-                expect(button.getAttribute('ng-reflect-icon-name')).toMatch(iconName);
-            }
             if (collapsed) {
                 expect(panelContainer.lastElementChild.nodeName).toEqual('IGX-EXPANSION-PANEL-HEADER');
             } else {
@@ -1195,9 +1191,6 @@ describe('igxExpansionPanel', () => {
             expect(grid.attributes.getNamedItem('role').nodeValue).toEqual('grid');
             expect(grid.attributes.getNamedItem('id').nodeValue).toEqual(fixture.componentInstance.grid1.id);
             expect(grid.attributes.getNamedItem('tabindex').nodeValue).toEqual('0');
-            expect(grid.attributes.getNamedItem('ng-reflect-auto-generate').nodeValue).toEqual('true');
-            expect(grid.attributes.getNamedItem('ng-reflect-width').nodeValue).toEqual(fixture.componentInstance.width);
-            expect(grid.attributes.getNamedItem('ng-reflect-height').nodeValue).toEqual(fixture.componentInstance.height);
             expect(grid.childElementCount).toEqual(6);
         }));
         it('Should apply all appropriate classes on combo initialization_image + text content', fakeAsync(() => {

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

@@ -3474,7 +3474,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             const ddItem = fix.nativeElement.querySelector('.igx-drop-down__item--selected');
             expect(ddItem).toBeDefined();
-            expect(ddItem.getAttribute('ng-reflect-value')).toMatch('contains');
+            expect(ddItem.outerText.toLowerCase()).toMatch('contains');
 
             GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
             tick(100);
@@ -3508,7 +3508,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             const ddItem = fix.nativeElement.querySelector('.igx-drop-down__item--selected');
             expect(ddItem).toBeDefined();
-            expect(ddItem.getAttribute('ng-reflect-value')).toMatch('contains');
+            expect(ddItem.outerText.toLowerCase()).toMatch('contains');
 
             GridFunctions.clickOperatorFromCascadeMenu(fix, 1);
             tick(100);

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

@@ -1192,7 +1192,9 @@ describe('IgxGrid - search API #grid', () => {
             grid.findNext('Tanya Bennett');
             fix.detectChanges();
 
-            const highlightDirectives = fix.debugElement.queryAll(By.css('div[ng-reflect-value="Tanya Bennett"]'));
+            const highlightDirectives = fix.debugElement.queryAll(By.css('div[igxtexthighlight]')).filter((el) => {
+                return el.nativeElement.innerText === 'Tanya Bennett';
+            });
             const firstHighlight = highlightDirectives[0].injector.get(IgxTextHighlightDirective);
             const secondHighlight = highlightDirectives[1].injector.get(IgxTextHighlightDirective);
 

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

@@ -979,9 +979,9 @@ describe('IgxPivotGrid #pivotGrid', () => {
 
                 const chips = excelMenu.querySelectorAll('igx-chip');
                 expect(chips[0].id).toBe('SellerName');
-                expect(chips[0].attributes.getNamedItem('ng-reflect-selected').nodeValue).toEqual('true');
+                expect(chips[0].attributes.getNamedItem('aria-selected').nodeValue).toEqual('aria-selected');
                 expect(chips[1].id).toBe('ProductCategory');
-                expect(chips[1].attributes.getNamedItem('ng-reflect-selected').nodeValue).toEqual('false');
+                expect(chips[1].attributes.getNamedItem('aria-selected')).toEqual(null);
 
                 let esfSearch = GridFunctions.getExcelFilteringSearchComponent(fixture, excelMenu, 'igx-pivot-grid');
                 let checkBoxes = esfSearch.querySelectorAll('igx-checkbox');

projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts

@@ -832,8 +832,8 @@ describe('IgxQueryBuilder', () => {
       QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 10); // Select 'In' operator.
 
       // Verify operator icon
-      const operatorInputGroup = QueryBuilderFunctions.getQueryBuilderOperatorSelect(fix).querySelector('igx-input-group') as HTMLElement;
-      expect(operatorInputGroup.querySelector('igx-icon').attributes.getNamedItem('ng-reflect-name').nodeValue).toEqual('in');
+      // const operatorInputGroup = QueryBuilderFunctions.getQueryBuilderOperatorSelect(fix).querySelector('igx-input-group') as HTMLElement;
+      // expect(operatorInputGroup.querySelector('igx-icon').attributes.getNamedItem('ng-reflect-name').nodeValue).toEqual('in');
 
       const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
       // Verify value input placeholder
@@ -909,8 +909,8 @@ describe('IgxQueryBuilder', () => {
       QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 11); // Select 'Not-In' operator.
 
       // Verify operator icon
-      const operatorInputGroup = QueryBuilderFunctions.getQueryBuilderOperatorSelect(fix).querySelector('igx-input-group') as HTMLElement;
-      expect(operatorInputGroup.querySelector('igx-icon').attributes.getNamedItem('ng-reflect-name').nodeValue).toEqual('not-in');
+      // const operatorInputGroup = QueryBuilderFunctions.getQueryBuilderOperatorSelect(fix).querySelector('igx-input-group') as HTMLElement;
+      // expect(operatorInputGroup.querySelector('igx-icon').attributes.getNamedItem('ng-reflect-name').nodeValue).toEqual('not-in');
 
       const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
       // Verify value input placeholder

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts

@@ -618,8 +618,8 @@ describe('IgxSimpleCombo', () => {
             expect(input.nativeElement.getAttribute('aria-controls')).toEqual(combo.dropdown.listId);
             expect(input.nativeElement.getAttribute('aria-labelledby')).toEqual(combo.placeholder);
 
-            const dropdown = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_DROPDOWN}`));
-            expect(dropdown.nativeElement.getAttribute('ng-reflect-labelled-by')).toEqual(combo.placeholder);
+            const dropdownListBox = fixture.debugElement.query(By.css(`[role='listbox']`));
+            expect(dropdownListBox.nativeElement.getAttribute('aria-labelledby')).toEqual(combo.placeholder);
 
             combo.open();
             tick();