問題描述

我是 ionic 2 單元測試的初學(xué)者.我遵循了 Angular 2 文檔(https://angular.io/docs/ts/latest/guide/testing.html) 用 karma 和 jasmine 測試我的 ionic 2 應(yīng)用程序.

I am a beginner to ionic 2 unit testing. I followed angular 2 documentation (https://angular.io/docs/ts/latest/guide/testing.html) to test my ionic 2 application with karma and jasmine.

但現(xiàn)在我陷入了一個(gè)名為

But now I am stuck in an error called

'無法讀取未定義的屬性'_getPortal'

'Cannot read property '_getPortal' of undefined'

這是我的 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 的服務(wù)，這就是該服務(wù)

and I used service called locationService.ts there and this is that service

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


}

最后，我寫了一個(gè) spec.ts 文件來進(jìn)行單元測試，就是這樣，

Finally, I wrote a spec.ts file to unit testing and here is that,

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

當(dāng)我運(yùn)行以下錯(cuò)誤來自終端.(我的單元測試配置是正確的，我用另一個(gè)簡單的 .spec.ts 文件對其進(jìn)行了測試)

when I am running the following error comes from the terminal. (my unit testing configuration are correct and I tested it with another simple .spec.ts file)

錯(cuò)誤

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)

推薦答案

我終于解決了這個(gè)問題.我使用了一個(gè)模擬并在該模擬中定義了所需的方法.然后它工作:)
這是一個(gè)模擬示例.

I Solved this problem finally. I used a mock and defined required methods in that mock. Then It works :)
here is an example for a mock.

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

然后必須將該模擬導(dǎo)入您的 .spec.ts 文件，如下所示

then have to import that mock into your .spec.ts file as follows

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

然后必須在 spec.ts 文件中的提供程序中定義該模擬，如下所示

then have to define that mock in your providers in spec.ts file as follows

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

這篇關(guān)于無法讀取離子 2 單元測試中未定義的屬性“_getPortal"的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！