refactor(ripple): Use AnimationBuilder for the animation

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();

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();
     }));

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();

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();
+
     }
 }
 /**

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,13 +49,15 @@ describe('IgxGrid - search API', () => {
             expect(count).toBe(5);
 
             grid.clearSearch();
+            fix.detectChanges();
 
             spans = fixNativeElement.querySelectorAll('.' + component.highlightClass);
             expect(spans.length).toBe(0);
         });
 
         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);

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();
     }));

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();
     }));

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();
     }));

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();
     }));
@@ -373,7 +374,7 @@ class TabsTestComponent {
 
 @Component({
     template: `
-        <div #wrapperDiv>
+        <div #wrapperDiv style="display:flex">
             <igx-tabs (onTabSelected)="tabSelectedHandler($event)">
                 <igx-tabs-group *ngFor="let tab of collection" [label]="tab.name"></igx-tabs-group>
             </igx-tabs>