Properly Testing Your Ionic Framework Mobile Application

I am very active on Stack Overflow, the Ionic Framework forums, Twitter, and even my own blog. I like helping people and I like seeing that everyone who seeks my help becomes successful in their work.

A common thing I see with the people that I help is they are unfamiliar with how to properly troubleshoot their code. Previously I had written an article regarding how to view the ADB debug logs when testing, but even that has proven to have loose ends. It did a wonderful job on educating everyone how to access the logs, but not so much in the realm of testing and understanding what is seen.

The following will help you rid your project of common errors and problems.

To prove everything, lets go through a fresh Ionic project together. Start by running the following from your Terminal or command prompt:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

Ionic Serve

The most common thing I see is people using the ionic serve feature of the CLI and thinking it is the miracle solution for app testing. This is fine for testing UI pieces of your Ionic application, but nothing more. What ionic serve does is creates a simple server that processes the HTML, JavaScript, and CSS of your project.

If you run ionic serve right now, our project will run fine because we only have HTML, CSS, and JavaScript. Any web browser, mobile or desktop can run basic UI components.

This is where I think people get thrown off. What happens if you want to add some complexity to the application? For example, what if you want to use an Apache Cordova plugin such as Toast notifications? If you’ve ever visited the source code of an Apache Cordova plugin, you’ll see there are native class files involved. For Android it will be Java and for iOS it will be Objective-C. These are two languages that must be first compiled on the device, not to mention a web browser is going to have no idea what to do with them.

The moment you start adding components beyond JavaScript, HTML, and CSS to your project, is when you’re no longer going to be successful with the ionic serve command because mobile and desktop browsers aren’t going to know what to do.

So let’s give it a try. From the Terminal with your project as the current directory, run the following:

cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git

Now proceed to following the tutorial I had made for Toast notifications. When you’re ready to test it, run ionic serve and check it out in your browser. You should notice the following error:

TypeError: Cannot read property 'toast' of undefined
   at Object.show (http://localhost:8100/js/ng-cordova.min.js:9:15751)
   at Scope.$scope.showToast (http://localhost:8100/js/app.js:23:23)
   at $parseFunctionCall (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20124:18)
   at http://localhost:8100/lib/ionic/js/ionic.bundle.js:50863:9
   at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22178:28)
   at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22276:23)
   at HTMLButtonElement.<anonymous> (http://localhost:8100/lib/ionic/js/ionic.bundle.js:50862:13)
   at HTMLButtonElement.eventHandler (http://localhost:8100/lib/ionic/js/ionic.bundle.js:10823:21)
   at triggerMouseEvent (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2811:7)
   at tapClick (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2800:3)

toast is undefined because the browser can’t process native code. You can also immediately determine I’m using ionic serve based on the http://localhost:8100 found in the log contents. If you turn around and do the following it will work fine:

ionic build android
adb install -r platforms/android/ant-build/CordovaApp-debug.apk

The above will build a binary file and install it to the device.

Conclusion

You’re developing mobile applications, not web applications. Save yourself the hassle of these trivial errors by testing directly on your device with a compiled version of your application. Short-cutting the testing process is going to create a mess that can easily be avoided.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.