Mocking a native plugin

component.spec.ts

import { NativeKeyboardMock } from './../native/services/native-keyboard.service.mock';
import { Events, Platform, AlertController } from 'ionic-angular';
import { MockGenerator } from './../mocks/mock-generator.helper';
import { TabsPageComponent } from './tabs-page';
import { NativeKeyboard } from '../native/services/native-keyboard.service';
import { Observable } from 'rxjs/Observable';

describe('Tabs tests', function () {

  let sut: TabsPageComponent = null;
  let mockAlertController: AlertController;
  let mockPlatform: Platform;
  let mockKeyboard: NativeKeyboard;

  beforeEach(function () {
    mockAlertController = MockGenerator.getMockAlertController();
    mockKeyboard = new NativeKeyboardMock();
    mockPlatform = <any>{
      ready: () => Promise.resolve()
    };
    sut = new TabsPageComponent(mockAlertController, mockPlatform, mockKeyboard);
  });

  it('sets isKeyboardOpen to true when keyboard is opened', function () {
    expect(sut.isKeyboardOpen).toEqual(false);
    mockKeyboard.show();
    expect(sut.isKeyboardOpen).toEqual(true);
  });

  it('sets isKeyboardOpen to false when keyboard is close', function () {
    sut.isKeyboardOpen = true;
    mockKeyboard.close();
    expect(sut.isKeyboardOpen).toEqual(false);
  });

  it('does something else', function () {
    sut.isKeyboardOpen = false;
    spyOn(mockKeyboard, 'onKeyboardShow').and.callFake(() => Observable.throw(new Error('Oops')));
    mockKeyboard.show();
    expect(sut.isKeyboardOpen).toEqual(false);
  });
});

component.ts

import { Events, AlertController, Platform } from 'ionic-angular';
import { Component } from '@angular/core';
import { NativeKeyboard } from './../native/services/native-keyboard.service';

@Component({
  templateUrl: 'tabs.html',
  selector: 'cv-tabs-page'
})
export class TabsPageComponent {

  public isKeyboardOpen: boolean = false;

  constructor(private _alert: AlertController,
    platform: Platform, keyboard: NativeKeyboard) {

    platform.ready().then(() => {
      keyboard.onKeyboardShow().subscribe(() => {
        this.isKeyboardOpen = true;
      });

      keyboard.onKeyboardHide().subscribe(() => {
        this.isKeyboardOpen = false;
      });
    });
  }
}

native-keyboard.wrapper.mock.ts

import { Observable, Subject } from 'rxjs/Rx';

export class NativeKeyboardMock {
  private _open: Subject<any> = new Subject<any>();
  private _close: Subject<any> = new Subject<any>();

  public onKeyboardShow(): Observable<any> {
    return this._open.asObservable();
  }

  public onKeyboardHide(): Observable<any> {
    return this._close.asObservable();
  }

  public show() {
    this._open.next(null);
  }

  public close() {
    this._close.next(null);
  }
}

native-keyboard.wrapper.ts

import { Observable } from 'rxjs/Observable';
import { Keyboard } from 'ionic-native';
import { Platform } from 'ionic-angular';

export class NativeKeyboard {
  public onKeyboardShow(): Observable<any> {
    return Keyboard.onKeyboardShow();
  }

  public onKeyboardHide(): Observable<any> {
    return Keyboard.onKeyboardHide();
  }

  public show() {
    Keyboard.show();
  }

  public close() {
    Keyboard.close();
  }
}

The tests are really silly but you get the point on how you can use the wrapper to work with native plugins as with any other service. Having a mock implementation of the wrapper is not necessary but it makes testing more robust.