ionic-framework Testing Ionic App in a Browser

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Remarks

Testing of native device features like Camera, Vibration and others, many of which are found in the documentation of Ionic Native, cannot be done in the browser. This is an inherent limitation of the fact that Cordova, the platform on which Ionic depends to be able to access native Android, iOS, and Windows Mobile APIs of a device, cannot run on the browser.

One can work around this issue by mocking the functionality of the native plugin.

Example

Here's an example on how to mock the Camera plugin:

Go ahead and create an optional folder in your project root folder.

cd src
mkdir mocks 
cd mocks 
touch camera-mock.ts 

Open camera-mock.ts and copy paste the following code:

export class CameraMock {
    getPicture(params) {
        return new Promise((resolve, reject) => {
            resolve("BASE_64_IMAGE_DATA");
        });
    }
}

Next open src/app.module.ts and import the mock class"

import { CameraMock } from "../mocks/camera-mock";

Then add it to module providers array:

@NgModule({
declarations: [
    MyApp,
    HomePage
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    CameraMock,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Now you can use it in any component after importing it.



Got any ionic-framework Question?