title: Ionic 2 Unit Testing: "Uncaught TypeError: Cannot read property '_getPortal' of undefined throw"
body: <p>I am a beginner to ionic 2 unit testing.I am stuck in an error and couldn't able to resolve:
  "Uncaught TypeError: Cannot read property '_getPortal' of undefined throw"</p>
  
  <p>Here is my ts file:</p>
  
  <pre><code>//Angular Module Import
  import { Component, OnInit } from '@angular/core';
  import { NavController, NavParams } from 'ionic-angular';
  import { ConfigService } from '../../../providers/config.service';
  import { Http, Response, RequestOptions, Headers } from '@angular/http';
  import { ViewController } from 'ionic-angular';
  
  //App Services Imports
  import { Globals } from '../../../providers/globals';
  import { GetPaymentusService } from '../../../providers/getPaymentusUrl.service';
  
  //App Component Imports
  import { PolicyDocumentPage } from '../document/policydocument';
  
  @Component({
      selector: 'page-watercraft-policy',
      templateUrl: 'watercraftpolicy.html'
  })
  export class WaterCraftPolicyPage implements OnInit {
  
      watercraftPolicyData: any;
      index: number;
      customerName: any;
  
      constructor(public navCtrl: NavController, 
                  public navParams: NavParams, 
                  public global: Globals, 
                  public http: Http,
                  public _config: ConfigService, 
                  public paymentusService: GetPaymentusService,
                  public viewCtrl: ViewController) {
      }
  
      ionViewDidLoad() {
          this.viewCtrl.setBackButtonText('My Policy');
      }
  
      ngOnInit() {
          this.watercraftPolicyData = this.navParams.get('param1');
          this.index = this.navParams.get('param2');
          this.customerName = this.navParams.get('param3');
          this.watercraftPolicyData.csppolicyNickName = "WATERCRAFT";
      }
  
      policyDocumentPage() {
          this.navCtrl.push(PolicyDocumentPage, {
              param1: this.watercraftPolicyData,
              param2: this.index,
              param3: this.customerName
          });
      }
  
      myBillsPage() {
          let text: string;
          this.paymentusService.getPolicy(this.watercraftPolicyData)
              .map((policyRequest) =&gt; {
                   if (policyRequest.header.error.errorCode === '0001'){
                      this._config.showError();
                  } else if(policyRequest.header.status === 'UNAUTHORIZED'){
                               this._config.showUnathorisedError();
                          }else if(policyRequest.header.error.errorCode === '1001'){
                               this._config.showUnexpectedError();
                           }else if(policyRequest.status === '403' ||
                                   policyRequest.header.status === 'FORBIDDEN'){
                               this._config.showSessionTimeOutError();
                        }else{
                  this.global.payBill(policyRequest.customerPayment.paymentusURL);
              }
              }).subscribe(response =&gt; { },
                      error =&gt; {
                          this._config.showError();
                      });
  
  
  
      }
  
  }
  </code></pre>
  
  <p>Unit test File:</p>
  
  <pre><code>  import { TestBed, ComponentFixture, async } from '@angular/core/testing';
  import { By } from '@angular/platform-browser';
  import { DebugElement } from '@angular/core';
  import { IonicModule } from 'ionic-angular';
  import { NavController,NavParams} from 'ionic-angular';
  import { ViewController } from 'ionic-angular';
  import { AlertController } from 'ionic-angular';
  import { File } from '@ionic-native/file';
  import { FileOpener } from '@ionic-native/file-opener';
  import { PdfViewerPage } from '../viewer/pdfviewer';
  
  import { HanoverApp } from '../../../app/app';
  import { WaterCraftPolicyPage } from './watercraftpolicy';
  
  import { ViewControllerMock } from '../../../mocks';
  import { MockNavParams } from '../../../mocks';
  import { NavMock } from '../../../mocks';
  import { MockAlertController } from '../../../mocks';
  
  import { Globals } from '../../../providers/globals';
  import { GetPaymentusService } from '../../../providers/getPaymentusUrl.service';
  import { GetIdCardService } from '../../../providers/getIdCard.service';
  import { ConfigService } from '../../../providers/config.service';
  import { Http, Response, RequestOptions, Headers } from '@angular/http';
  
  
  let comp: WaterCraftPolicyPage;
  let fixture: ComponentFixture&lt;WaterCraftPolicyPage&gt;;
  let de: DebugElement;
  let el: HTMLElement;
  
  
  
  describe('Page: WaterCraftPolicyPage', () =&gt; {
  
      beforeEach(async(() =&gt; {
  
          TestBed.configureTestingModule({
  
              declarations: [HanoverApp, WaterCraftPolicyPage],
  
              providers: [NavController,{provide: NavParams, useClass: MockNavParams},
              {provide: ViewController, useClass: ViewControllerMock},
              Globals,GetPaymentusService,GetIdCardService,ConfigService],
  
              imports: [
                  IonicModule.forRoot(HanoverApp)
              ]
  
          }).compileComponents();
  
      }));
  
      beforeEach(() =&gt; {
  
          fixture = TestBed.createComponent(WaterCraftPolicyPage);
          comp    = fixture.componentInstance;
  
      });
  
      afterEach(() =&gt; {
          fixture.destroy();
          comp = null;
          de = null;
          el = null;
      });
  
      it('is created', () =&gt; {
          expect(fixture).toBeTruthy();
          expect(comp).toBeTruthy();
      });
  
  });
  </code></pre>
  
  <p>mocks.ts:</p>
  
  <pre><code>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;
    }
  }
  
  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;
      }
  
  }
  
  
  export class MockNavParams{
  
     public get(param): any{
      return {'csppolicyNickName':'data'};
    }
  }
  
  
  
  export class MockAlertController{
   create(): any{
     return true;
   };
  
  }
  </code></pre>