Ionic Native Mocks are designed to be used as placeholders during development for the actual Ionic Native modules. 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.
However, once you integrate these plugins into your Ionic application, use of a device or emulator is required for development and testing which can slow your workflow.
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.
- via npm: Installing these prebuilt mocks is easy but they are not easily customized.
- 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.
Run following command to install a Ionic Native Mock into your project.
npm install @ionic-native-mocks/[plug-in] --saveFor instance, to install the camera mock:
npm install @ionic-native-mocks/camera --saveYou 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.
For the full Ionic Native documentation, please visit https://ionicframework.com/docs/native/.
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
});
});
}
}To learn how to customize an Ionic Native Mock, see the guide at: https://chrisgriffith.wordpress.com/2017/08/21/customizing-ionic-native-mocks/ (https://chrisgriffith.wordpress.com/2017/08/21/customizing-ionic-native-mocks/)
Let us know or submit a PR!
Chris Griffith - @chrisgriffith
Leif Wells - @leifwells