Ionic 2:使用 Karma/Jasmine/TestBed 进行错误测试

Question

我是Ionic2的新手，我正在遵循本教程和一个简单的测试，例如

describe('Dummy test', () => {
it('should do nothing', () => {
    expect(true).toBeTruthy();
    expect(1 + 1).toBe(2);
});
});

工作正常，但由于某种原因，当我尝试按照本教程的其余部分进行操作时，我不断收到此错误。

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)

我的 src/test.ts 与教程相同，它没有任何胜利。我的应用程序规范是这个

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

我的应用程序组件是这个

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

Answer 1

我还没有解决方案，但你不应该使用compileComponents()因为你使用的是template而不是本教程中所说的templateUrl：

">当我们需要异步编译一个组件时，我们需要使用 compileComponents，例如具有外部模板的组件(通过 templateUrl 加载并且未与模板内联的组件(。这就是为什么运行此代码的 beforeEach 块使用异步参数 - 它为编译组件设置了一个异步测试区域以在内部运行。

希望这是一种帮助:)

Answer 2

win() 函数来自 Plaftorm，你必须模拟如下：

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'];
  }
}

这是查看此模拟类真正集成项目的链接。

希望对:)有所帮助