diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts index 38dee584dda..bdab318efbc 100644 --- a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts +++ b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts @@ -6,6 +6,7 @@ import { import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonGroupModule } from './buttonGroup.component'; import { IgxButtonModule } from '../directives/button/button.directive'; import { configureTestSuite } from '../test-utils/configure-suite'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; interface IButton { type?: string; @@ -55,7 +56,8 @@ describe('IgxButtonGroup', () => { ], imports: [ IgxButtonGroupModule, - IgxButtonModule + IgxButtonModule, + NoopAnimationsModule ] }) .compileComponents(); diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts index b0316738f9e..8f635ff1250 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts +++ b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts @@ -9,6 +9,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive'; import { IgxCheckboxComponent } from './checkbox.component'; import { configureTestSuite } from '../test-utils/configure-suite'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('IgxCheckbox', () => { configureTestSuite(); @@ -25,7 +26,7 @@ describe('IgxCheckbox', () => { CheckboxDisabledTransitionsComponent, IgxCheckboxComponent ], - imports: [FormsModule, IgxRippleModule] + imports: [FormsModule, IgxRippleModule, NoopAnimationsModule] }) .compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts index 6b676dd1f9d..05935e58a15 100644 --- a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts @@ -4,6 +4,7 @@ import { IgxRadioModule, IgxRadioGroupDirective } from './radio-group.directive' import { FormsModule, ReactiveFormsModule, FormGroup, FormBuilder } from '@angular/forms'; import { configureTestSuite } from '../../test-utils/configure-suite'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('IgxRadioGroupDirective', () => { configureTestSuite(); @@ -17,7 +18,8 @@ describe('IgxRadioGroupDirective', () => { imports: [ IgxRadioModule, FormsModule, - ReactiveFormsModule + ReactiveFormsModule, + NoopAnimationsModule ] }) .compileComponents(); diff --git a/projects/igniteui-angular/src/lib/directives/ripple/ripple.directive.ts b/projects/igniteui-angular/src/lib/directives/ripple/ripple.directive.ts index b2c9792d93c..b4cf23ca09f 100644 --- a/projects/igniteui-angular/src/lib/directives/ripple/ripple.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/ripple/ripple.directive.ts @@ -1,4 +1,5 @@ import { Directive, ElementRef, HostListener, Input, NgModule, NgZone, Renderer2 } from '@angular/core'; +import { AnimationBuilder, style, animate } from '@angular/animations'; @Directive({ selector: '[igxRipple]' @@ -85,17 +86,11 @@ export class IgxRippleDirective { private rippleElementClass = 'igx-ripple__inner'; private rippleHostClass = 'igx-ripple'; - - private animationFrames = [ - { opacity: 0.5, transform: 'scale(.3)' }, - { opacity: 0, transform: 'scale(2)' } - ]; - - private _centered = false; private animationQueue = []; constructor( + protected builder: AnimationBuilder, protected elementRef: ElementRef, protected renderer: Renderer2, private zone: NgZone) { } @@ -146,16 +141,23 @@ export class IgxRippleDirective { this.renderer.addClass(target, this.rippleHostClass); this.renderer.appendChild(target, rippleElement); - const animation = rippleElement.animate(this.animationFrames, { duration: this.rippleDuration, fill: 'forwards' }); + const animation = this.builder.build([ + style({ opacity: 0.5, transform: 'scale(.3)' }), + animate(this.rippleDuration, style({ opacity: 0, transform: 'scale(2)' })) + ]).create(rippleElement); + this.animationQueue.push(animation); - animation.onfinish = () => { + animation.onDone(() => { this.animationQueue.splice(this.animationQueue.indexOf(animation), 1); target.removeChild(rippleElement); if (this.animationQueue.length < 1) { this.renderer.removeClass(target, this.rippleHostClass); } - }; + }); + + animation.play(); + } } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts index a21d32f7431..f3bada047db 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts @@ -10,6 +10,7 @@ import { IgxStringFilteringOperand } from '../../data-operations/filtering-condi import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { wait } from '../../test-utils/ui-interactions.spec'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('IgxGrid - search API', () => { configureTestSuite(); @@ -24,7 +25,7 @@ describe('IgxGrid - search API', () => { GroupableGridSearchComponent, ScrollableGridSearchComponent ], - imports: [IgxGridModule.forRoot()] + imports: [IgxGridModule.forRoot(), NoopAnimationsModule] }).compileComponents(); })); @@ -48,6 +49,7 @@ describe('IgxGrid - search API', () => { expect(count).toBe(5); grid.clearSearch(); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); expect(spans.length).toBe(0); @@ -55,6 +57,7 @@ describe('IgxGrid - search API', () => { it('findNext highlights the correct cells', () => { let count = grid.findNext('developer'); + fix.detectChanges(); let spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); expect(spans.length).toBe(4); @@ -64,24 +67,28 @@ describe('IgxGrid - search API', () => { expect(activeSpan).toBe(spans[0]); count = grid.findNext('developer'); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); activeSpan = fixNativeElement.querySelector('.' + component.activeClass); expect(activeSpan).toBe(spans[1]); count = grid.findNext('developer'); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); activeSpan = fixNativeElement.querySelector('.' + component.activeClass); expect(activeSpan).toBe(spans[2]); count = grid.findNext('developer'); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); activeSpan = fixNativeElement.querySelector('.' + component.activeClass); expect(activeSpan).toBe(spans[3]); count = grid.findNext('developer'); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); activeSpan = fixNativeElement.querySelector('.' + component.activeClass); @@ -128,6 +135,7 @@ describe('IgxGrid - search API', () => { fix.detectChanges(); let count = grid.findNext('Developer', true); + fix.detectChanges(); let spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); expect(spans.length).toBe(3); @@ -137,24 +145,28 @@ describe('IgxGrid - search API', () => { expect(activeSpan).toBe(spans[0]); count = grid.findPrev('Developer', true); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); activeSpan = fixNativeElement.querySelector('.' + component.activeClass); expect(activeSpan).toBe(spans[2]); count = grid.findNext('Developer', true); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); activeSpan = fixNativeElement.querySelector('.' + component.activeClass); expect(activeSpan).toBe(spans[0]); count = grid.findNext('Developer', true); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); activeSpan = fixNativeElement.querySelector('.' + component.activeClass); expect(activeSpan).toBe(spans[1]); count = grid.findPrev('developer', true); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); activeSpan = fixNativeElement.querySelector('.' + component.activeClass); @@ -192,12 +204,14 @@ describe('IgxGrid - search API', () => { it('findNext and findPrev highlight only exact matches when searching by exact match', () => { let count = grid.findNext('Software Developer', false, false); + fix.detectChanges(); let spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); expect(spans.length).toBe(4); expect(count).toBe(4); count = grid.findNext('Software Developer', false, true); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); let activeSpan = fixNativeElement.querySelector('.' + component.activeClass); @@ -206,12 +220,14 @@ describe('IgxGrid - search API', () => { expect(count).toBe(1); count = grid.findPrev('Software Developer', false, false); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); expect(spans.length).toBe(4); expect(count).toBe(4); count = grid.findPrev('Software Developer', false, true); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); activeSpan = fixNativeElement.querySelector('.' + component.activeClass); @@ -226,6 +242,7 @@ describe('IgxGrid - search API', () => { // Case INsensitive and exact match let count = grid.findNext('director', false, true); + fix.detectChanges(); let spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); let activeSpan = fixNativeElement.querySelector('.' + component.activeClass); @@ -243,12 +260,14 @@ describe('IgxGrid - search API', () => { // Case sensitive and exact match count = grid.findNext('director', true, true); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); expect(spans.length).toBe(0); expect(count).toBe(0); count = grid.findPrev('director', true, true); + fix.detectChanges(); spans = fixNativeElement.querySelectorAll('.' + component.highlightClass); expect(spans.length).toBe(0); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts index 1abdd073991..6657bed327b 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts @@ -10,6 +10,7 @@ import { UIInteractions } from '../../test-utils/ui-interactions.spec'; import { DropPosition } from '../grid'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('IgxTreeGrid - Indentation', () => { configureTestSuite(); @@ -22,7 +23,7 @@ describe('IgxTreeGrid - Indentation', () => { IgxTreeGridSimpleComponent, IgxTreeGridPrimaryForeignKeyComponent ], - imports: [IgxTreeGridModule] + imports: [IgxTreeGridModule, NoopAnimationsModule] }) .compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/radio/radio.component.spec.ts b/projects/igniteui-angular/src/lib/radio/radio.component.spec.ts index b72be13a049..fd769898997 100644 --- a/projects/igniteui-angular/src/lib/radio/radio.component.spec.ts +++ b/projects/igniteui-angular/src/lib/radio/radio.component.spec.ts @@ -11,6 +11,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive'; import { IgxRadioComponent } from './radio.component'; import { configureTestSuite } from '../test-utils/configure-suite'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('IgxRadio', () => { configureTestSuite(); @@ -26,7 +27,7 @@ describe('IgxRadio', () => { RadioExternalLabelComponent, RadioInvisibleLabelComponent ], - imports: [FormsModule, IgxRippleModule] + imports: [FormsModule, IgxRippleModule, NoopAnimationsModule] }) .compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts b/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts index d03ba8df02b..2d0f7c650a7 100644 --- a/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts +++ b/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts @@ -9,6 +9,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive'; import { IgxSwitchComponent } from './switch.component'; import { configureTestSuite } from '../test-utils/configure-suite'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('IgxSwitch', () => { configureTestSuite(); @@ -23,7 +24,7 @@ describe('IgxSwitch', () => { SwitchInvisibleLabelComponent, IgxSwitchComponent ], - imports: [FormsModule, IgxRippleModule] + imports: [FormsModule, IgxRippleModule, NoopAnimationsModule] }) .compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/tabs/tabs.component.spec.ts b/projects/igniteui-angular/src/lib/tabs/tabs.component.spec.ts index c0fd0dbc69c..c0205d9271e 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs.component.spec.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs.component.spec.ts @@ -5,13 +5,14 @@ import { IgxTabsGroupComponent } from './tabs-group.component'; import { IgxTabsComponent, IgxTabsModule } from './tabs.component'; import { configureTestSuite } from '../test-utils/configure-suite'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('IgxTabs', () => { configureTestSuite(); beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [TabsTestComponent, TabsTest2Component, TemplatedTabsTestComponent, TabsTestSelectedTabComponent], - imports: [IgxTabsModule] + imports: [IgxTabsModule, NoopAnimationsModule] }) .compileComponents(); })); @@ -147,6 +148,7 @@ describe('IgxTabs', () => { it('check select selection when tabs collection is modified', fakeAsync(() => { const fixture = TestBed.createComponent(TabsTest2Component); + fixture.detectChanges(); const tabs = fixture.componentInstance.tabs; let tabItems; let tab1: IgxTabItemComponent; @@ -177,8 +179,8 @@ describe('IgxTabs', () => { expect(tab3.isSelected).toBeTruthy(); fixture.componentInstance.resetCollectionFourTabs(); - tick(100); fixture.detectChanges(); + tick(100); expect(tabs.selectedIndex).toBe(2); fixture.componentInstance.resetCollectionOneTab(); @@ -373,7 +375,7 @@ class TabsTestComponent { @Component({ template: ` -
+