mock web animations in tests

core/src/components.d.ts

@@ -30,6 +30,7 @@ import {
   LoadingOptions,
   MenuChangeEventDetail,
   MenuControllerI,
+  MenuI,
   ModalOptions,
   NavComponent,
   NavOptions,
@@ -1388,7 +1389,7 @@ export namespace Components {
     /**
     * Registers a new animation that can be used with any `ion-menu` by passing the name of the animation in its `type` property.
     */
-    'registerAnimation': (name: string, animation: IonicAnimation | AnimationBuilder) => Promise<void>;
+    'registerAnimation': (name: string, animation: ((menu: MenuI) => IonicAnimation) | AnimationBuilder) => Promise<void>;
     /**
     * Enable or disable the ability to swipe open the menu.
     */

core/src/components/menu-controller/menu-controller.ts

@@ -14,7 +14,7 @@ import { menuRevealAnimation } from './animations/reveal';
 export class MenuController implements MenuControllerI {
 
   private menus: MenuI[] = [];
-  private menuAnimations = new Map<string, IonicAnimation | AnimationBuilder>();
+  private menuAnimations = new Map<string, ((menu: MenuI) => IonicAnimation) | AnimationBuilder>();
 
   constructor() {
     this.registerAnimation('reveal', menuRevealAnimation);
@@ -226,7 +226,7 @@ export class MenuController implements MenuControllerI {
    * @param animation The animation function to register.
    */
   @Method()
-  async registerAnimation(name: string, animation: IonicAnimation | AnimationBuilder) {
+  async registerAnimation(name: string, animation: ((menu: MenuI) => IonicAnimation) | AnimationBuilder) {
     this.menuAnimations.set(name, animation);
   }
 

core/src/components/nav/test/nav-controller.spec.ts

@@ -119,8 +119,9 @@ describe('NavController', () => {
       mockViews(nav, [view1]);
 
       const view2 = mockView(MockView2);
+      
       await nav.push(view2, null, null, trnsDone);
-
+      
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
@@ -923,6 +924,27 @@ describe('NavController', () => {
   const MockView3 = 'mock-view3';
   const MockView4 = 'mock-view4';
   const MockView5 = 'mock-view5';
+  
+  const mockWebAnimation = (el: HTMLElement) => {
+    window.Animation = true;
+    
+    el.animate = () => {
+      const animation = {
+        stop: () => {},
+        pause: () => {},
+        cancel: () => {},
+        onfinish: undefined
+      }
+      
+      animation.play = () => {
+        if (animation.onfinish) {
+          animation.onfinish();
+        }
+      }
+      
+      return animation;
+    }
+  }
 
   function mockView(component?: any, params?: ComponentProps) {
     if (!component) {
@@ -931,6 +953,9 @@ describe('NavController', () => {
 
     const view = new ViewController(component, params);
     view.element = document.createElement(component) as HTMLElement;
+    
+    mockWebAnimation(view.element);
+    
     return view;
   }