Network plugin issue

[ap1969]

Hi, I'm trying to mock the Network plugin, but have encountered issues getting the network.type property. I created a clean project to test the plugin in an isolated mode, and I'm getting the same issue.

The app.component.ts is:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Network } from '@ionic-native/network';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
    rootPage:any = HomePage;
    networktype:string = "<none defined>";

    constructor(
        platform: Platform,
        statusBar: StatusBar,
        splashScreen: SplashScreen,
        network: Network
    ) {
        this.networktype = network.type;
        console.log("Network: ", network.type);
        console.log("Network: ", network);
        platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            statusBar.styleDefault();
            splashScreen.hide();

        });
    }
}

App.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { Network } from '@ionic-native/network';
import { NetworkMock } from '@ionic-native-mocks/network';

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

package.json:

{
  "name": "networktest",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native-mocks/network": "^2.0.6",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/network": "^4.5.3",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project"
}

The console.log("Network: ", network.type); logs null

console.log("Network: ", network); line logs an object with the following structure (apologies for this format, I can't uploage images behind my corp firewall):

Object:
    _proto: Object
    _constructor: NetworkMock()
    onConnect: NetworkMock.prototype.onConnect()
    onDisconnect: NetworkMock.prototype.onDisconnect()
    onchange: NetworkMock.prototype.onchange()
    __proto__: Object
        constructor: Network()
        downllinkMax: 
        onConnect
        onDisconnect
        onchange
        type:
            get: CordovaProperty/<.get()
            set: CordovaProperty<.set()

As you can see, the 'type' property is part of the proto, not the prototype. I'm using Firefox, if that helps.

Any ideas how I can access the 'type' property succesfully?

Regards, Andy

[ap1969]

One further update: the console does also present the following warning:

"Native: tried calling Network.type, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator"

I'm guessing this implies it's still somehow referencing the non-mocked class?

Andy

[ap1969]

Hi,

OK, I think I got this sorted. There were two issues:

1. I was using the network.d.ts file, not the source .ts file.

2. I had to add proper getters to mock the properties:

export class NetworkMock extends Network {
    /**
     * Connection type 
     * The `type` property will return one of the following connection types: `unknown`, `ethernet`, `wifi`, `2g`, `3g`, `4g`, `cellular`, `none`
     * @return {string}
     */
    type: '3g';

    get type():string {
        return '4g';
    }
 ....

[ap1969]

Closing issue