diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts index 1ced1afc365..09151197d58 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts @@ -1,5 +1,5 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, DebugElement, ViewChild } from '@angular/core'; import { TestBed, ComponentFixture, tick, fakeAsync, waitForAsync } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxExpansionPanelComponent } from './expansion-panel.component'; @@ -296,13 +296,17 @@ describe('igxExpansionPanel', () => { panel: IgxExpansionPanelComponent, panelContainer: any, panelHeader: HTMLElement, - button: HTMLElement, + button: DebugElement, timesCollapsed = 0, timesExpanded = 0) => { expect(panel.collapsed).toEqual(collapsed); 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.componentInstance.iconName).toMatch(iconName); + } if (collapsed) { expect(panelContainer.lastElementChild.nodeName).toEqual('IGX-EXPANSION-PANEL-HEADER'); } else { @@ -322,7 +326,7 @@ describe('igxExpansionPanel', () => { const header = fixture.componentInstance.header; const panelContainer = fixture.nativeElement.querySelector('.' + CSS_CLASS_EXPANSION_PANEL); const panelHeader = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_HEADER) as HTMLElement; - const button = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_ICON) as HTMLElement; + const button = fixture.debugElement.query(By.css('.' + CSS_CLASS_PANEL_ICON)) as DebugElement; let timesCollapsed = 0; let timesExpanded = 0; @@ -383,7 +387,7 @@ describe('igxExpansionPanel', () => { const header = fixture.componentInstance.header; const panelContainer = fixture.nativeElement.querySelector('.' + CSS_CLASS_EXPANSION_PANEL); const panelHeader = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_HEADER) as HTMLElement; - let button = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_ICON) as HTMLElement; + let button = fixture.debugElement.query(By.css('.' + CSS_CLASS_PANEL_ICON)) as DebugElement; let timesCollapsed = 0; let timesExpanded = 0; @@ -392,7 +396,7 @@ describe('igxExpansionPanel', () => { spyOn(header.interaction, 'emit'); verifyPanelExpansionState(true, panel, panelContainer, panelHeader, button, timesCollapsed, timesExpanded); - button.click(); + button.nativeElement.click() tick(); fixture.detectChanges(); tick(); @@ -400,7 +404,7 @@ describe('igxExpansionPanel', () => { verifyPanelExpansionState(false, panel, panelContainer, panelHeader, button, timesCollapsed, timesExpanded); expect(header.interaction.emit).toHaveBeenCalledTimes(1); - button.click(); + button.nativeElement.click() tick(); fixture.detectChanges(); tick(); @@ -408,7 +412,7 @@ describe('igxExpansionPanel', () => { verifyPanelExpansionState(true, panel, panelContainer, panelHeader, button, timesCollapsed, timesExpanded); expect(header.interaction.emit).toHaveBeenCalledTimes(2); - button.click(); + button.nativeElement.click() tick(); fixture.detectChanges(); tick(); @@ -422,8 +426,8 @@ describe('igxExpansionPanel', () => { fixture.detectChanges(); tick(); - button = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_ICON) as HTMLElement; - button.click(); + button = fixture.debugElement.query(By.css('.' + CSS_CLASS_PANEL_ICON)) as DebugElement; + button.nativeElement.click() tick(); fixture.detectChanges(); tick(); @@ -431,7 +435,7 @@ describe('igxExpansionPanel', () => { verifyPanelExpansionState(true, panel, panelContainer, panelHeader, button, timesCollapsed, timesExpanded); expect(header.interaction.emit).toHaveBeenCalledTimes(4); - button.click(); + button.nativeElement.click() tick(); fixture.detectChanges(); tick(); @@ -439,7 +443,7 @@ describe('igxExpansionPanel', () => { verifyPanelExpansionState(false, panel, panelContainer, panelHeader, button, timesCollapsed, timesExpanded); expect(header.interaction.emit).toHaveBeenCalledTimes(5); - button.click(); + button.nativeElement.click() tick(); fixture.detectChanges(); tick(); @@ -453,7 +457,7 @@ describe('igxExpansionPanel', () => { const panel = fixture.componentInstance.expansionPanel; const panelContainer = fixture.nativeElement.querySelector('.' + CSS_CLASS_EXPANSION_PANEL); const panelHeader = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_HEADER) as HTMLElement; - const button = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_ICON) as HTMLElement; + const button = fixture.debugElement.query(By.css('.' + CSS_CLASS_PANEL_ICON)) as DebugElement; spyOn(panel.contentCollapsed, 'emit').and.callThrough(); spyOn(panel.contentExpanded, 'emit').and.callThrough(); verifyPanelExpansionState(true, panel, panelContainer, panelHeader, button); @@ -482,7 +486,7 @@ describe('igxExpansionPanel', () => { const panel = fixture.componentInstance.expansionPanel; const panelContainer = fixture.nativeElement.querySelector('.' + CSS_CLASS_EXPANSION_PANEL); const panelHeader = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_HEADER) as HTMLElement; - const button = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_ICON) as HTMLElement; + const button = fixture.debugElement.query(By.css('.' + CSS_CLASS_PANEL_ICON)) as DebugElement; let timesCollapsed = 0; let timesExpanded = 0; @@ -524,7 +528,7 @@ describe('igxExpansionPanel', () => { const panel = fixture.componentInstance.expansionPanel; const panelContainer = fixture.nativeElement.querySelector('.' + CSS_CLASS_EXPANSION_PANEL); const panelHeader = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_HEADER) as HTMLElement; - const button = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_ICON) as HTMLElement; + const button = fixture.debugElement.query(By.css('.' + CSS_CLASS_PANEL_ICON)) as DebugElement; let timesCollapsed = 0; let timesExpanded = 0; @@ -571,7 +575,7 @@ describe('igxExpansionPanel', () => { const header = fixture.componentInstance.header; const panelContainer = fixture.nativeElement.querySelector('.' + CSS_CLASS_EXPANSION_PANEL); const panelHeader = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_HEADER) as HTMLElement; - const button = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_ICON) as HTMLElement; + const button = fixture.debugElement.query(By.css('.' + CSS_CLASS_PANEL_ICON)) as DebugElement; let timesCollapsed = 0; let timesExpanded = 0; @@ -684,7 +688,7 @@ describe('igxExpansionPanel', () => { const header = fixture.componentInstance.header; const panelContainer = fixture.nativeElement.querySelector('.' + CSS_CLASS_EXPANSION_PANEL); const panelHeader = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_HEADER) as HTMLElement; - const button = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_ICON) as HTMLElement; + const button = fixture.debugElement.query(By.css('.' + CSS_CLASS_PANEL_ICON)) as DebugElement; let timesCollapsed = 0; let timesExpanded = 0; @@ -708,7 +712,7 @@ describe('igxExpansionPanel', () => { verifyPanelExpansionState(true, panel, panelContainer, panelHeader, button, timesCollapsed, timesExpanded); expect(header.interaction.emit).toHaveBeenCalledTimes(1); - button.click(); + button.nativeElement.click() tick(); fixture.detectChanges(); tick(); @@ -759,7 +763,7 @@ describe('igxExpansionPanel', () => { const header = fixture.componentInstance.header; const panelContainer = fixture.nativeElement.querySelector('.' + CSS_CLASS_EXPANSION_PANEL); const panelHeader = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_HEADER) as HTMLElement; - const button = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_ICON) as HTMLElement; + const button = fixture.debugElement.query(By.css('.' + CSS_CLASS_PANEL_ICON)) as DebugElement; const headerButton = panelHeader.querySelector('div [role = \'button\']'); let timesCollapsed = 0; @@ -788,7 +792,7 @@ describe('igxExpansionPanel', () => { verifyPanelExpansionState(false, panel, panelContainer, panelHeader, button, timesCollapsed, timesExpanded); expect(header.interaction.emit).toHaveBeenCalledTimes(0); - button.click(); + button.nativeElement.click() tick(); fixture.detectChanges(); tick(); @@ -817,7 +821,7 @@ describe('igxExpansionPanel', () => { verifyPanelExpansionState(true, panel, panelContainer, panelHeader, button, timesCollapsed, timesExpanded); expect(header.interaction.emit).toHaveBeenCalledTimes(0); - button.click(); + button.nativeElement.click() tick(); fixture.detectChanges(); tick(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts index d90ed1542e0..f3ce8cc7890 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts @@ -151,7 +151,7 @@ describe('IgxGrid - Cell component #grid', () => { }); }); - xdescribe('Cells in virtualized grid ', () => { + describe('Cells in virtualized grid ', () => { let fix; let grid: IgxGridComponent; @@ -260,8 +260,8 @@ describe('IgxGrid - Cell component #grid', () => { const gridContent = GridFunctions.getGridContent(fix); UIInteractions.triggerEventHandlerKeyDown('arrowup', gridContent); + await wait(16); fix.detectChanges(); - await wait(30); expect(grid.getCellByColumn(2, 'value').selected).toBeTruthy(); })); diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts index 38f0578a17e..bca74571c50 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts @@ -1,5 +1,5 @@ import { waitForAsync, TestBed, ComponentFixture, fakeAsync, tick, flush } from '@angular/core/testing'; -import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxChipComponent, IgxComboComponent, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective } from 'igniteui-angular'; +import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxChipComponent, IgxComboComponent, IgxDateFilteringOperand, IgxIconComponent, IgxInputGroupComponent, IgxNumberFilteringOperand, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective, IgxSelectComponent } from 'igniteui-angular'; import { Component, OnInit, ViewChild } from '@angular/core'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; @@ -837,8 +837,10 @@ 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 operatorSelectDebugElement = fix.debugElement.queryAll(By.directive(IgxSelectComponent))[2]; + const inputDebugElement = operatorSelectDebugElement.query(By.directive(IgxInputGroupComponent)); + const iconDebugElem = inputDebugElement.query(By.directive(IgxIconComponent)); + expect(iconDebugElem.componentInstance.name).toEqual('in'); const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input'); // Verify value input placeholder @@ -914,8 +916,10 @@ 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 operatorSelectDebugElement = fix.debugElement.queryAll(By.directive(IgxSelectComponent))[2]; + const inputDebugElement = operatorSelectDebugElement.query(By.directive(IgxInputGroupComponent)); + const iconDebugElem = inputDebugElement.query(By.directive(IgxIconComponent)); + expect(iconDebugElem.componentInstance.name).toEqual('not-in'); const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input'); // Verify value input placeholder