Jasmine-karma：如何检查 Ionic 中的导航功能？答案

【问题标题】：Jasmine-karma : how to check navigation functionality in Ionic?Jasmine-karma：如何检查 Ionic 中的导航功能？
【发布时间】：2018-09-10 07:17:20
【问题描述】：

我使用 spyOn 为 navController 编写了一个测试用例，出现错误：

Error: <spyOn> : push() method does not exist
Usage: spyOn(<object>, <methodName>)

exp.ts：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Injectable } from '@angular/core' ;
import { HttpClient, HttpResponse, HttpErrorResponse, HttpHeaders } from '@angular/common/http' ;
import { SubmittingHc } from '../submitting-conditions/submitting-conditions';

@Injectable()
@Component({
     selector: 'page-hc-entry',
     templateUrl: 'hc-entry.html'
})
export class HcEntryPage {

      private hc = {
        id: null,
        memberid: null,
        one:null,
        two:null
      };

      constructor(public navCtrl: NavController) {  }

      goToSubmittingConditions(){
        this.navCtrl.push(SubmittingHc, this.hc);
      }
}

exp.spec.ts：

 import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IonicModule, Platform, NavController} from 'ionic-angular/index';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 import { HcEntryPage } from './hc-entry';
 import { SubmittingHc } from '../submitting-conditions/submitting-conditions';

        describe('hc component' () => {
            let comp: HcEntryPage;
            let fixture: ComponentFixture<HcEntryPage>;

            beforeEach(async(()=>{
                TestBed.configureTestingModule({
                    declarations:[HcEntryPage],
                    imports:[
                        IonicModule.forRoot(HcEntryPage)
                    ],
                    providers:[
                        NavController,
                        SubmittingHc
                    ]
                });
            }));
            beforeEach(()=>{
                fixture = TestBed.createComponent(HcEntryPage);
                comp = fixture.componentInstance;
            });

            it('should create component', () => expect(comp).toBeDefined());

            it('should navigate to submitting condition page', () =>{
                spyOn(comp.navCtrl, 'push').and.stub();
                comp.goToSubmittingConditions();
                expect(comp.navCtrl.push).toHaveBeenCalledWith(SubmittingHc);
            });
        });

尝试了下面的代码，但给出了同样的错误：

it('should be able to launch SubmittingHc page', () => {

        let navCtrl = fixture.debugElement.injector.get(NavController);
        spyOn(navCtrl, 'push');
        comp.goToMyCare({});
        expect(navCtrl.push).toHaveBeenCalledWith(SubmittingHc);

    });

【问题讨论】：

在这种情况下什么是 navCtrl？需要更多细节来回答您的问题。请详细说明如何在您的实际代码和测试代码中初始化 navCtrl。
@ZohaibJawaid - 已更新。
看来你应该在构造函数constructor(public navCtrl: NavController) { }中初始化navCtrl。您的测试用例 navCtrl 没有方法 push。
@ZohaibJawaid - 我可以在规范文件中添加构造函数吗？，已经在提供程序中添加了 navController 那么为什么？

标签： angular unit-testing ionic-framework karma-jasmine

【解决方案1】：

尝试制作一个文件“project/test-config/mocks-ionic.ts”，其中包含：

export class NavMock {

   public pop(): any {
     return new Promise(function(resolve: Function): void {
        resolve();
     });
    }

    public push(): any {
        return new Promise(function(resolve: Function): void {
            resolve();
      });
    }

    public getActive(): any {
        return {
            'instance': {
                'model': 'something',
            },
        };
    }

    public setRoot(): any {
        return true;
    }

    public registerChildNav(nav: any): void {
        return ;
    }
}

现在导入 NavMock 并重新定义提供程序，例如：

import {
  NavMock
} from '../test-config/mocks-ionic'

providers: [
    { provide: NavController, useClass: NavMock}
  ]

示例测试用例：

it('should be able to launch wishlist page', () => {

    let navCtrl = fixture.debugElement.injector.get(NavController);
    spyOn(navCtrl, 'push');

    de = fixture.debugElement.query(By.css('ion-buttons button'));

    de.triggerEventHandler('click', null);

    expect(navCtrl.push).toHaveBeenCalledWith(WishlistPage);

});

更多帮助请参考此项目：https://github.com/ionic-team/ionic-unit-testing-example

【讨论】：