Ionic 2 ViewController单元测试

mIve得到了以下单元测试，测试了我用Ionic 2编写的组件。单元测试给出了Ionic库中的一个错误，我假设我没有正确地模拟它或作为Ionic 2 ViewController单元测试

import { ComponentFixture, async } from '@angular/core/testing'; 
import { TestUtils }    from '../../test'; 
import {} from 'jasmine'; 

import { LocationSearchModal } from './LocationSearchModal'; 
import { LocationService } from '../../services/LocationService'; 
import { PouchDbService } from '../../services/common/PouchDbService'; 

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { TestBed } from '@angular/core/testing'; 
import { App, MenuController, NavController, Platform, Config, Keyboard, Form, IonicModule, ViewController, GestureController, NavParams } from 'ionic-angular'; 
import { ConfigMock } from '../../mocks'; 
import { TranslateModule } from 'ng2-translate'; 
import { LoadingController } from 'ionic-angular'; 

let fixture: ComponentFixture<LocationSearchModal> = null; 
let instance: any = null; 

describe('LocationSearchModal',() => { 
    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     LocationSearchModal 
     ], 
     providers: [ 
     App, Platform, Form, Keyboard, MenuController, NavController, GestureController, LocationService, LoadingController, 
     { provide: ViewController, useClass: class { ViewController = jasmine.createSpy("viewController"); } }, 
     { provide: NavParams, useClass: class { NavParams = jasmine.createSpy("navParams"); } }, 
     { provide: PouchDbService, useClass: class { PouchDbService = jasmine.createSpy("pouchDbService"); } }, 
     {provide: Config, useClass: ConfigMock} 
     ], 
     imports: [ 
     FormsModule, 
     IonicModule, 
     ReactiveFormsModule, 
     TranslateModule.forRoot(), 
     ], 
    }) 
    .compileComponents() 
    .then(() => { 
     fixture = TestBed.createComponent(LocationSearchModal); 
     instance = fixture.debugElement.componentInstance; 
     fixture.autoDetectChanges(true); 
    }); 
    })); 

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

    it('loads',() => { 
    expect(fixture).not.toBeNull(); 
    expect(instance).not.toBeNull(); 
    }) 
})

这是使用正在测试的组件的ViewController的相关摘录。

this.locationService.getLocationById(this.selectedLocation) 
     .subscribe((location: any) => { 
     this.viewController.dismiss(location.doc) 
     });

测试失败，我得到了下面的堆栈跟踪

Chrome 53.0.2785 (Linux 0.0.0) 
TypeError: viewCtrl._setHeader is not a function 
    at new Header (webpack:///home/milinda/workspaces/eclipse/inspection/addedinspection/Inspection-Upgrade/~/ionic-angular/components/toolbar/toolbar.js:14:0 <- src/test.ts:11833:30) 
    at new Wrapper_Header (/IonicModule/Header/wrapper.ngfactory.js:7:18)

这关系到我已经创建了一个茉莉花间谍为

{ provide: ViewController, useClass: class { ViewController = jasmine.createSpy("viewController"); } },

有后ViewController线看看代码库我在这里找到了_setHeader方法

https://github.com/driftyco/ionic/blob/6b3e2ed447340cdd35c328c96aa7cfa5f34eb214/src/navigation/view-controller.ts#L364

我也试过编写自定义提供程序，但也得到了相同的错误。任何关于什么是测试ViewController的正确方法的想法。

此外，有时解决问题的ViewController后可以从NavParams也许

来源

2016-11-29 MilindaD

建立在Marky Sparky的答案上。由于离子3+：

export class ViewControllerMock{ 
    readReady = { 
    subscribe(){ 

    } 
    }; 
    writeReady = { 
    subscribe(){ 

    } 
    }; 

    dismiss(){ 
    console.log('View Controller Dismiss Called'); 
    } 
    _setHeader(){ 

    } 
    _setNavbar(){ 

    } 
    _setIONContent(){ 

    } 
    _setIONContentRef(){ 

    } 
}

版本上工作：

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1 
Ionic CLI Version: 3.0.0-beta7 
ios-deploy version: 1.9.1 
ios-sim version: Not installed 
OS: macOS Sierra 
Node Version: v7.8.0 
Xcode version: Xcode 8.3.2 Build version 8E2002

来源

2017-04-28 08:59:42

来自于yesotung，在离子模拟中也有内建：来自“ionic-angular/util/mock-providers”的import {mockApp，mockConfig，mockPlatform，mockView};并使用它像{提供：ViewController，useValue：mockView（）}， – eesdil

在单元测试中提到的ViewController当我有同样的问题出现的问题。我刚刚解决了它。像这样创建

class ViewControllerMock { 
    public _setHeader(): any { 
    return {} 
    }; 
    public _setIONContent(): any { 
    return {} 
    }; 
    public _setIONContentRef(): any { 
    return {} 
    }; 
}

一个模拟然后在调用添加到您的供应商TestBed.configureTestingModule这样的：

TestBed.configureTestingModule({ 
    declarations: [ 
    ...components, 
    OrdinalPipe, 
    IgnoreNulls 
    ], 
    providers: [ 
    NavController, 
    ChartsService, FundsService, Utils, BlogService 
    , Payment, PlanHelper, Storage, PalIdle, SimpleExpiry, ContentService, PlansService, 
    App, Platform, Form, Keyboard, MenuController, 
    { provide: ModalController, useClass: ModalControllerMock }, 
    { provide: ViewController, useClass: ViewControllerMock }, 
    { provide: Config, useClass: ConfigMock } 
    ], 
    imports: [ 
    FormsModule, 
    IonicModule, 
    ReactiveFormsModule, 
    ], 
})

这为我工作，当我有viewCtrl._setHeader不是功能错误今天提前。希望能帮助到你。

来源

2016-11-30 16:42:53

新的Ionic 2.0 FINAL打破了这个模拟。具体而言，这些函数调用this._viewCtrlReadSub = viewCtrl.readReady.subscribe（function（）{ _this._viewCtrlReadSub.unsubscribe（）; _this._readDimensions（）; }）; –

接受的答案并没有为离子版本3.9.2工作，但是下面固定的问题：

export class ViewControllerMock { 

    public readReady: any = { 
    emit(): void { 

    }, 
    subscribe(): any { 

    } 
    }; 

    public writeReady: any = { 
    emit(): void { 

    }, 
    subscribe(): any { 

    } 
    }; 

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

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

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

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

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

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

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

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

    public dismiss(): any { 
    return true; 
    } 

    public enableBack(): any { 
    return true; 
    } 

    public getContent(): any { 
    return true; 
    } 

    public hasNavbar(): any { 
    return true; 
    } 

    public index(): any { 
    return true; 
    } 

    public isFirst(): any { 
    return true; 
    } 

    public isLast(): any { 
    return true; 
    } 

    public pageRef(): any { 
    return true; 
    } 

    public setBackButtonText(): any { 
    return true; 
    } 

    public showBackButton(): any { 
    return true; 
    } 

    public _setHeader(): any { 
    return true; 
    } 

    public _setIONContent(): any { 
    return true; 
    } 

    public _setIONContentRef(): any { 
    return true; 
    } 

    public _setNavbar(): any { 
    return true; 
    } 

    public _setContent(): any { 
    return true; 
    } 

    public _setContentRef(): any { 
    return true; 
    } 

    public _setFooter(): any { 
    return true; 
    } 

}

Ionic Info

cli packages: 

    @ionic/cli-plugin-proxy : 1.5.6 
    @ionic/cli-utils  : 1.14.0 
    ionic (Ionic CLI)  : 3.14.0 

local packages: 

    @ionic/app-scripts : 3.1.0 
    Ionic Framework : ionic-angular 3.9.2

来源

2018-01-15 10:34:32 Maverick09

Ionic 2 ViewController单元测试

回答

相关问题