Ionic 2: Error testing with Karma/Jasmine/TestBed

Question

I'm new with Ionic2 and I was following this tutorial and a simple test like

describe('Dummy test', () => {

it('should do nothing', () => {

    expect(true).toBeTruthy();
    expect(1 + 1).toBe(2);

});

});

works fine, but for some reason I keep getting this error when I try to follow the rest of the tutorial.

Component: Root Component
✖ initialises with a root page of LoginPage
  Firefox 45.0.0 (Linux 0.0.0)
TypeError: win is undefined in src/test.ts (line 937)

My src/test.ts is the same as the tutorial and it doesn't have any win in it. My app.spec.ts is this

import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { IonicModule } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { UserData } from '../providers/user-data';
import { LoginPage } from '../pages/login/login';
import { Platform } from 'ionic-angular';
import { MyApp } from './app.component';
import { LoginPage } from '../pages/login/login';

let comp: MyApp;
let fixture: ComponentFixture<MyApp>;

describe('Component: Root Component', () => {

beforeEach(async(() => {

    TestBed.configureTestingModule({

        declarations: [MyApp],

        providers: [
            StatusBar,
            SplashScreen,
            UserData,
            Platform
        ],

        imports: [
            IonicModule.forRoot(MyApp)
        ]

    }).compileComponents();

}));

beforeEach(() => {

    fixture = TestBed.createComponent(MyApp);
    comp    = fixture.componentInstance;

});

afterEach(() => {
    fixture.destroy();
    comp = null;
});

it('initialises with a root page of LoginPage', () => {
    expect(comp['rootPage']).toBe(LoginPage);
});

});

And my app.component.ts is this

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { MenuSidePage } from '../pages/menu-side/menu-side';
import { LoginPage } from '../pages/login/login';
import { UserData } from '../providers/user-data';


@Component({
  template: `<ion-nav #nav [root]="rootPage"></ion-nav>`
})
export class MyApp {

  rootPage: any;

  constructor(
    public platform: Platform,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen,
    private userData: UserData,
  ) {
    platform
      .ready()
      .then(() => {
        //First - check if user is logged
        if(this.userData.currentUser) { 
          this.rootPage = MenuSidePage;
        } else {
          this.rootPage = LoginPage;
        }
        statusBar.styleDefault();
        splashScreen.hide();

    });
  }
}

score 0 · Answer 1 · answered Dec 11 '17 at 15:24

I don't have yet the solution, but you shouldn't use compileComponents() 'cause you are using a template and not a templateUrl like said in this tutorial :

"We need to use compileComponents when we need to asynchronously compile a component, such as one that has an external template (one that is loaded through templateUrl and isn’t inlined with template). This is why the beforeEach block that this code runs in uses an async parameter – it sets up an asynchronous test zone for the compileComponents to run inside."

Hope it's a kind of helping :)

score 0 · Answer 2 · answered Dec 11 '17 at 17:12

The win() function come from the Plaftorm, you have to mock it as follow :

export class PlatformMock {
  public ready(): Promise<string> {
    return new Promise((resolve) => {
      resolve('READY');
    });
  }

  public getQueryParam() {
    return true;
  }

  public registerBackButtonAction(fn: Function, priority?: number): Function {
    return (() => true);
  }

  public hasFocus(ele: HTMLElement): boolean {
    return true;
  }

  public doc(): HTMLDocument {
    return document;
  }

  public is(): boolean {
    return true;
  }

  public getElementComputedStyle(container: any): any {
    return {
      paddingLeft: '10',
      paddingTop: '10',
      paddingRight: '10',
      paddingBottom: '10',
    };
  }

  public onResize(callback: any) {
    return callback;
  }

  public registerListener(ele: any, eventName: string, callback: any): Function {
    return (() => true);
  }

  public win(): Window {
    return window;
  }

  public raf(callback: any): number {
    return 1;
  }

  public timeout(callback: any, timer: number): any {
    return setTimeout(callback, timer);
  }

  public cancelTimeout(id: any) {
    // do nothing
  }

  public getActiveElement(): any {
    return document['activeElement'];
  }
}

Here is the link to see a project for real integration of this mock class.

Hope it helps :)

Ionic 2: Error testing with Karma/Jasmine/TestBed

2 Answers2