無法讀取屬性'_getPortal'中未定義的離子2單元測試

我是初學者離子2單元測試。我遵循角2文檔（https://angular.io/docs/ts/latest/guide/testing.html）來測試我的離子2應用與業力和茉莉花。無法讀取屬性'_getPortal'中未定義的離子2單元測試

但現在我被困在一個名爲

'不能讀取屬性 '錯誤_getPortal' 未定義'

這裏是我的LocationSearchModal.ts文件

import { Component } from '@angular/core'; 
import { NavController, ViewController } from 'ionic-angular'; 
import { Location } from '../../services/domain/Location'; 
import { LocationService } from '../../services/LocationService'; 
import { LoadingController } from 'ionic-angular'; 

@Component({ 
    selector: 'location-search-modal', 
    templateUrl: 'location-search-modal.html' 
}) 
export class LocationSearchModal { 
    locationList: Array<Location> = new Array<Location>(); 
    selectedLocation: number; 
    temp: any = "test"; 

    constructor(public navCtrl: NavController, public locationService: LocationService, public viewController: ViewController, public loadingController: LoadingController) { 
    this.filterLocationsForString(); 
    } 

    filterLocations(event: any): void { 
    const searchString: string = event.target.value; 
    this.filterLocationsForString(searchString); 
    console.log(this.filterLocationsForString(searchString)); 
    } 

    filterLocationsForString(searchString?: string) { 
    let loader = this.loadingController.create({ 
     content: "loading" 
    }); 
    loader.present(); 
    this.locationService.getLocationsForLikeSearchString(searchString) 
     .subscribe((result) => { 
     loader.dismissAll(); 
     this.locationList = result 
     }); 
    console.log(this.locationList); 
    } 

    closeLocationSearch() { 
    this.locationService.getLocationById(this.selectedLocation) 
     .subscribe((location) => this.viewController.dismiss(location[0])); 
    } 

}

，我用服務名爲locationService.ts那裏，這是服務

import { Injectable } from '@angular/core'; 
import { Location } from './domain/Location'; 

import { DatabaseAccessor } from '../database/DatabaseAccessor'; 
import { Observable } from 'rxjs/Rx'; 

@Injectable() 
export class LocationService { 
    locationList:Array<Location> = new Array<Location>(); 

    constructor(public databaseAccessor: DatabaseAccessor) {} 

    getLocationsForLikeSearchString(searchString: string) : Observable<Array<Location>> { 
    const searchValue = (searchString == null) ? '%' : searchString.trim() + '%'; 
    return <Observable<Array<Location>>> Observable.fromPromise(this.databaseAccessor.runSelectQuery(Location, new Location(), 'WHERE name LIKE ?', [searchValue])); 
    } 

    getLocationById(id: number): Observable<Location> { 
    return <Observable<Location>> Observable.fromPromise(this.databaseAccessor.runSelectQuery(Location, new Location(), 'WHERE id = ?', [id])); 
    } 

    saveLocations(locations: Array<Location>){ 
    this.databaseAccessor.runInsertBatchQuery(Location.prototype, locations); 
    } 


}

最後，我寫了一個spec.ts文件，單元測試和這裏要說的是，

import { ComponentFixture, async } from '@angular/core/testing'; 
import { LocationSearchModal } from './LocationSearchModal'; 
import { LocationService } from '../../services/LocationService'; 
import { TestUtils } from '../../test'; 
import { TestBed } from '@angular/core/testing'; 
import { App, NavController, Platform, Config, Keyboard, Form, IonicModule, GestureController, ViewController, LoadingController } from 'ionic-angular'; 
import { ConfigMock } from '../../mocks'; 
import { TranslateModule } from 'ng2-translate'; 
import { DatabaseAccessor } from '../../database/DatabaseAccessor'; 

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

describe('LocationSearchModal',() => { 

    beforeEach(async(() => { 

    TestBed.configureTestingModule({ 
     declarations: [LocationSearchModal], // declare the test component 
     providers: [App, Platform, Form, Keyboard, NavController, GestureController, LoadingController, LocationService, DatabaseAccessor, 
     { provide: ViewController, useClass: class { ViewController = jasmine.createSpy("viewController"); } }, 
     { provide: Config, useClass: ConfigMock }, 
     ], 
     imports: [ 
     IonicModule, 
     TranslateModule.forRoot(), 
     ], 
    }); 
    fixture = TestBed.createComponent(LocationSearchModal); 
    comp = fixture.componentInstance; 
    })); 

    console.log(comp); 
    it('Testing Location Component',() => { 
    expect(comp.temp).toBe('test'); 
    }) 
});

當我運行下面的錯誤來自於終端。（我的單元測試的配置是正確的，我和另一個簡單.spec.ts文件測試它）

錯誤

SUMMARY: 
✔ 1 test completed 
✖ 1 test failed 

FAILED TESTS: 
    LocationSearchModal 
    ✖ Testing Location Component 
     Chrome 54.0.2840 (Linux 0.0.0) 
    Failed: Error in ./LocationSearchModal class LocationSearchModal_Host - inline template:0:0 caused by: Cannot read property '_getPortal' of undefined 
    TypeError: Cannot read property '_getPortal' of undefined 
     at App.present (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/~/ionic-angular/components/app/app.js:78:0 <- src/test.ts:2091:35) 
     at Loading.present (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/~/ionic-angular/components/loading/loading.js:31:0 <- src/test.ts:38779:26) 
     at LocationSearchModal.filterLocationsForString (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/src/pages/location-search/LocationSearchModal.ts:9:4184 <- src/test.ts:18993:4170) 
     at new LocationSearchModal (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/src/pages/location-search/LocationSearchModal.ts:9:3407 <- src/test.ts:18993:3391) 
     at new Wrapper_LocationSearchModal (/DynamicTestModule/LocationSearchModal/wrapper.ngfactory.js:7:18) 
     at _View_LocationSearchModal_Host0.createInternal (/DynamicTestModule/LocationSearchModal/host.ngfactory.js:16:35) 
     at _View_LocationSearchModal_Host0.AppView.create (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/~/@angular/core/src/linker/view.js:84:0 <- src/test.ts:52350:21) 
     at _View_LocationSearchModal_Host0.DebugAppView.create (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/~/@angular/core/src/linker/view.js:294:0 <- src/test.ts:52560:44) 
     at ComponentFactory.create (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/~/@angular/core/src/linker/component_factory.js:152:0 <- src/test.ts:32035:36) 
     at initComponent (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/~/@angular/core/bundles/core-testing.umd.js:855:0 <- src/test.ts:7416:53)

來源

2016-11-24 Dilanka Rathnayake

你最終找到解決這個？> –

是的，我做了實際。我在那個模擬中使用了一個模擬和定義的必要方法。這工作 –

我終於解決了這個問題。我在那個模擬中使用了一個模擬和定義的必要方法。那麼它的作品:)
這裏是一個模擬的例子。

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

則必須導入模擬到您的.spec.ts文件如下

import {ViewControllerMock} from '../../mocks';

則必須定義spec.ts文件在你的提供商模擬如下

providers: [{ provide: ViewController, useClass: ViewControllerMock}],

來源

2016-12-02 05:29:48

我對視圖控制器非常模擬，但它似乎並沒有擺脫與模式工作_getPortal錯誤。 –

我已經分離出問題來自吐司的'.present（）'方法......我可以模擬ToastController，但是在測試期間出現的吐司行爲將會消失。我只是假設.present（）方法被調用，並且沒有實際檢查的情況下顯示的是toast。 –

嘲笑LoadingController如果問題來自LoadingController

export class LoadingControllerMock { 
    _getPortal(): any { return {} }; 
    create(options?: any) { 
     return new LoadingMock() 
    }; 
} 

class LoadingMock { 
    present() { }; 
    dismiss() { }; 
    dismissAll() { }; 
}

導入模擬和地方

import { LoadingController } from 'ionic-angular'; 

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

替代

providers: [ 
    { provide: LoadingController, useClass: LoadingControllerMock } 
]

來源

2017-07-26 17:10:48

無法讀取屬性'_getPortal'中未定義的離子2單元測試

回答

相關問題