Announcing Ionic Native Mocks!

I am excited to announce the first initial release of my Ionic Native Mocks! Recently I was prototyping an Ionic app that required the use of the barcode scanner as part of the initial user flow. But by adding the Ionic Native module and the companion Cordova plugin, I would no longer be able easily to preview and debug the application locally within my browser. I often caution my students and workshop attendees to refrain from adding Cordova plugins until later in the development to avoid this slowdown.

To resolve this issue, I quickly created a mock provider for the barcode scanner, that would match the methods and properties of the actual Ionic Native wrapper. With this mock injected into my app, I could simulate interaction with the barcode scan plugin, and continue my local development.So, I then thought to myself, why create a library of mocks for the Ionic Natives that I could quickly inject into my app? This first release covers the Cordova plugins that included within the Ionic View app.

So, I then thought to myself, why create a library of mocks for the Ionic Natives that I could quickly inject into my app? This first release covers the Cordova plugins that included within the Ionic View app.

Ionic Native Mocks are designed to be used as placeholders during development for the actual Ionic Native modules. If you don’t know what Ionic Native is, here is the official summary:

Ionic Native is a curated set of wrappers for Apache Cordova plugins that make adding any native functionality you need to your Ionic mobile application easier.

Ionic Native wraps plugin callbacks in a Promise or Observable, providing a common interface for all plugins and making it easy to use plugins with Angular change detection.

Currently Available Mocks

  • actions-sheets
  • barcode-scanner
  • ble
  • bluetooth-serial
  • calendar
  • camera
  • contacts
  • date-picker
  • db-meter
  • device-motion
  • device-orientation
  • device
  • dialog
  • email-composer
  • geolocation
  • globalization
  • image-picker
  • keyboard
  • network
  • social-sharing
  • splash-screen
  • sqlite
  • status-bar
  • toast
  • touch-id
  • vibration

Installation

This project allows developers to use Ionic Native Mocks in place of the actual Ionic Native modules. They can be installed in via to methods.

  1. via npm: Installing these prebuilt mocks is easy but they are not easily customized.
  2. via GitHub and manually added to your Ionic project: Installing this way means the mocks can be customized to return specific data, like a specific parsing of a QR code.

Installation via npm

Run the following command to install an Ionic Native Mock into your project.

npm install @ionic-native-mocks/[plug-in] --save

For instance, to install the camera mock:

npm install @ionic-native-mocks/camera --save

You also need to install the Ionic Native package for each plugin you want to add. Please see the Ionic Native documentation for complete instructions on how to add and use the plugins.

Documentation

For the full Ionic Native documentation, please visit https://ionicframework.com/docs/native/.

Basic Usage

To use a plugin, import and add the plugin provider to your @NgModule, and then inject it where you wish to use it.

// app.module.ts
import { Camera } from '@ionic-native/camera';
import { CameraMock } from '@ionic-native-mocks/camera';
...

@NgModule({
  ...

  providers: [
    ...
    { provide: Camera, useClass: CameraMock }
    ...
  ]
  ...
})
export class AppModule { }
import { Platform } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

@Component({ ... })
export class MyComponent {

  constructor(private camera: Camera, private platform: Platform) {

    platform.ready().then(() => {

      const options: CameraOptions = {
        quality: 100,
        destinationType: this.camera.DestinationType.DATA_URL,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE
      }

      this.camera.getPicture(options).then((imageData) => {
        // imageData is either a base64 encoded string or a file URI
        // If it's base64:
        console.log(imageData);
        let base64Image = 'data:image/jpeg;base64,' + imageData;
      }, (err) => {
        // Handle error
      });
    });
  }
}

Missing a mock? Found a problem?

Let us know or submit a PR! We will be working to add in the rest of the Ionic Native collection in the near future.

Credits

Chris Griffith – @chrisgriffith

Leif Wells – @leifwells

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s