Ionic 2 ViewController unit testing

Question

mIve got the following unit tests that tests a Component I have written in Ionic 2. The unit tests gives an error from one of the Ionic libraries, I assume that I am not mocking it out properly or as such

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

This is the relevant excerpt which uses the ViewController from the component that is being tested.

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

The test fails and I get the following stack trace

  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)

This is related to the ViewController line which I have created a jasmine spy for

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

After having a look at the code base I found the _setHeader method in here

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

I also tried writing a custom provider but got the same error as well. Any idea on what is the correct method of testing the ViewController.

Additionally sometimes after resolving the ViewController issue an issue may occur from NavParams perhaps

James Macmillan · Accepted Answer · 2017-04-28 08:59:42Z

16

Building on Marky Sparky's answer. As of ionic 3+:

export class ViewControllerMock{
  readReady = {
    subscribe(){

    }
  };
  writeReady = {
    subscribe(){

    }
  };

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

  }
  _setNavbar(){

  }
  _setIONContent(){

  }
  _setIONContentRef(){

  }
}

Working on version:

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

answered Apr 28, 2017 at 8:59

James Macmillan

1761 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

eesdil Over a year ago

From beenotung, there is built in mocks in ionic also: import {mockApp, mockConfig, mockPlatform, mockView} from "ionic-angular/util/mock-providers"; and use it like {provide: ViewController, useValue: mockView()},

Stan Kurdziel Over a year ago

ionic-angular/util/mock-providers should be an answer and not just a comment

Marky Sparky · Accepted Answer · 2016-11-30 16:42:53Z

4

I had the same issue when referring to ViewController in unit tests. I just solved it. Create a mock like this

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

Then add it to your providers in the call to TestBed.configureTestingModule like this:

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,
  ],
})

This worked for me when I had the viewCtrl._setHeader is not a function error earlier today. Hope it helps.

answered Nov 30, 2016 at 16:42

Marky Sparky

613 bronze badges

1 Comment

Ka Mok Over a year ago

the new Ionic 2.0 FINAL breaks this mock. Specifically, these function calls this._viewCtrlReadSub = viewCtrl.readReady.subscribe(function () { _this._viewCtrlReadSub.unsubscribe(); _this._readDimensions(); });

Maverick09 · Accepted Answer · 2018-01-15 10:34:32Z

Accepted answer did not work for ionic version 3.9.2, however following fixed the issue:

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

Christopher · Accepted Answer · 2018-07-06 17:56:44Z

1

In case someone doesn't notice the comments on James Macmillan's answer:

@eesdil wrote:

From beenotung, there is built in mocks in ionic also: import {mockApp, mockConfig, mockPlatform, mockView} from "ionic-angular/util/mock-providers"; and use it like {provide: ViewController, useValue: mockView()}, – Sep 26 '17 at 9:40

This is the solution that worked for me.

answered Jul 6, 2018 at 17:56

Christopher

1,0291 gold badge7 silver badges12 bronze badges

1 Comment

ciekawy Over a year ago

definitely this is a correct answer (with kudos to beenotung)

Yuvraj Patil · Accepted Answer · 2018-05-27 12:33:32Z

0

1. Create Jasmine spy of ViewController.

let viewCtrlSpy = jasmine.createSpyObj('ViewController', 
                          ['data', 'readReady', 'writeReady', 'dismiss', '_setHeader', '_setNavbar', '_setIONContent', '_setIONContentRef']);

2. Use `viewCtrlSpy` spy in providers array as follow:

providers: [
.......
          {
            provide: ViewController,
            useValue: viewCtrlSpy
          }
..........

Spying is more efficient in this case than mocking.

answered May 27, 2018 at 12:33

Yuvraj Patil

8,8605 gold badges63 silver badges62 bronze badges

Comments

vimuth · Accepted Answer · 2019-06-18 06:44:26Z

0

add

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

to provides

edited Jun 18, 2019 at 6:44

vimuth

5,87355 gold badges98 silver badges128 bronze badges

answered Jun 18, 2019 at 6:19

Santosh nayak

2333 silver badges10 bronze badges

Collectives™ on Stack Overflow

Ionic 2 ViewController unit testing

6 Answers 6

2 Comments

1 Comment

Comments

1 Comment

1. Create Jasmine spy of ViewController.

2. Use `viewCtrlSpy` spy in providers array as follow:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

1 Comment

1. Create Jasmine spy of ViewController.

2. Use viewCtrlSpy spy in providers array as follow:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

2. Use `viewCtrlSpy` spy in providers array as follow: