Testing Geolocation Apps Without Moving in Ionic

Ionic Native Geolocation is great, however, when we need to test different use cases on a real device it becomes a bit complicated.
In this tutorial we will create a special mock that will allow us to stay at home while easily spoofing to other places.

Mock Selection

Let’s get the party started:

The classic Ionic & Cordova plugins:

As you might know, everything is bootstrapped in the app.module.ts file, that’s where the magic will start:

We start by importing the Geolocation Class and the GeolocationMock Class (no worry for this one, we will create it later).
When bootstrapping the application, the providers property will stock a list of the available Services.
We can use one trick to redirect every call from one Service to another and that’s what is done here. Instead of using the Geolocation Class, the application will use the GeolocationMock Class.

Mock Creation

We can now create the geolocation.mock.ts file in a new geolocation folder:

We start by extending the Geolocation Class to keep everything consistent.

This class has two property that will allow us to move: latitude and longitude.
Those property will be modified using the setters: setLatitude and setLongitude.
Finally the application will need the getCurrentPosition method so we implement our own.

We need to respect the behavior of the Geolocation, when having a look at the getCurrentPosition method in VisualStudio:

Ionic Geolocation mock typeA Promise is supposed to be returned, an ES6 Promise will do the job. The data that is resolved also matches the Geoposition structure (latitude and longitude inside of a coords object).
The latitude and longitude will depend on the latitude and longitude properties.

And … that’s it, the mock is ready and loaded.

Mock Usage

We now create our navigating interface in the home.html file:

Starting with two inputs that will change the longitude and latitude.

Followed by displaying the coords property where the position data will be received:

And three buttons:

Allowing us to set a new latitude, longitude and updating the coords property.

Great!

The missing piece here is the home.ts file which links the template to the Geolocation mock:

We start by importing and injecting the Geolocation Service. Remember when we say:

Hey give me the Geolocation Service.

We get the Geolocation Mock class.
Note that the coords property is also declared.

The getCurrentPosition method is used in the constructor, which is this one:

Using the geolocation property, the coords property is set once the Promise is resolved.
By default, the latitude and longitude values are set to 1.

To modify those values, we can now add the following methods:

Receiving the values from the home.html file, the geolocation service will update its latitude and longitude values.
The (true) Geolocation Service doesn’t have the setLatitude and setLongitude methods so TypeScript will shout if we do nothing.
The type of the geolocation object is quickly changed to any to prevent this.

And voila!
ionic geolocation mock resultWe can modify the Geolocation and fly all around the world!

BONUS CONTENT
Enter your email address in the box below to get access to this tutorial (and others) source code.

Conclusion

Mocking in Ionic is very easy.
It all starts in the app.module.ts file notifying the app to replace the real class by our mock.
Once this is done, importing the real class will result in acquiring the mock. I chose the Geolocation plugin for example because the next tutorial will need this feature, but any Service can be mocked in Ionic especially for Unit Testing so keep this solution in the back of your mind, it’s highly likely you will need it.

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *

3 Shares