Properly Testing Your Ionic Framework Mobile Application

I am very active on StackOverflow, 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 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:

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:

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:

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 Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Tobias Kausch

    Hi, I would also recommend running the application with ionic run -l -c -s
    Like this you have automatic file reload on the device when you change something in the code + you have all the logs/errors (like in the browser console) to do more debugging/testing
    Cheers

    • Yes this is very useful!

      Thanks for sharing 🙂

    • Great @tobiaskausch:disqus (Y)

  • therealjamesg

    I just get an error:

    Invalid APK file: /Users/james/xdev/MyApp/platforms/android/ant-build/CordovaApp-debug.apk

    • I assume you get the error when you run the following?:

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

      Are you sure that the file truly exists at that path?

      Careful with live reload. It could be the best thing that has ever happened for your development needs as well as the worst.

      Regards,

      • therealjamesg

        Exactly – I’ve followed everything but that .apk isn’t in that location, nor anywhere on my Mac.

        • What .APK file exists at platforms/android/ant-build? In older versions of Cordova the binary files took the name of the project rather than CordovaApp. It is possible your APK is just named something different.

          Regards,

  • A UX framework to easily add features common to mobile apps, like “pull to refresh.” I also write blog on mobile application testing and debugging enhancements to more easily test your apps on devices.

  • Keval

    Why doesn’t cordova/ionic run android simply work like before? I am not able to install the application directly on my device. I have to build first and then install using the adb.

    • I have no idea if Ionic fixed this since writing my article. I know ionic serve, ionic view, and live-reload have plenty of other problems as their still beta.

      • Keval

        Not fixed with the latest release for sure. I first thought it was something with my phone (cause I still use Gingerbread one with low memory), but when I was going through your blogs, I found you used adb to install; so I came here to know what’s up with it.

        • Yea, you might want to bring it up to the development team. Otherwise, just do it how I do 🙂

          • Keval

            Yeah, I will write about this to them. It is a major concern and many already are reporting this lately.

          • Report back with whatever you find out 🙂

          • Keval

            https://github.com/driftyco/ionic-cli/issues/441

            The issue can temporarily be solved by modifying the emulator.js and device.js in platformsandroidcordovalib directory.

            Find this line:

            adb -s ‘ + resolvedTarget.target + ‘ install -r -d “‘ + apk_path + ‘”

            and remove the -d option

          • Thanks for sharing!

  • Mahesh

    i started Ionic framework by referring all your articles and youtub videos. But in testing i am struckked at

    adb install -r platforms/android/ant-build/CordovaApp-debug.apk
    Invalid APK file: platforms/android/ant-build/CordovaApp-debug.apk

    In my system Emulator is very slow so i am using my android phone, but it is a bit time taken.

    help me!
    Thanks.

    • It depends on your Apache Cordova version.

      The file will be *-debug.apk where * represents some name. Could be CordovaApp, MainActivity, android, etc.

      You should also switch to Genymotion for your simulator. It is much quicker.

      Regards,

      • Mahesh

        I am using Cordova 5.0.0 and ionic 1.4.4. in my project i dont have ant-build folder. so how can i debug ?

        • I think newer versions use Gradle, so you would find it in the build/output/apk directory.

  • Ítalo Ayres

    Hey, I’m having a bad time doing Unit Tests with Ionic, since I’m never did it before (I know I should). Could you do some clarification about this subject, or indicate the best tools to do it properly?
    I hear a lot about jasmine, and karma, and casterjs, and many others, but I’m not sure which one to focus on.
    Thanks man.

  • designscripting

    Hi Tobias,

    Thanks for the tutorial, I am trying to build the sample through phonegap. It is working fine with browser. But not firing the login or register on actual device.
    Source:
    https://github.com/designscripting/deals/

    What could be the issue. Thanks again- Sara

  • Greg Ruddell

    Hey Nic: Great tutorial! But I cannot seem to get it to install. Guess I’m not alone and hate to bug you with the same question as the others….hopefully you can point me in the right direction.

    From the bash shell: adb logcat command runs fine so I got the past the first hurdle by setting the environment variable pointed to where my android-sdksplatform-tools are located. :<)
    This is where i’m stuck. :<(

    When search my system for *debug.apk it finds the “android-debug.apk” file for the camera app project. However when I run “adb install -r android-debug.apk” I get the following error “Invalid APK file: android-debug.apk. By the way this is the only apk file in the project.

    By the way I do not have a “/ant-build” folder.

    Ideas?

    Thanks in advance for your help!

    Greg

    • In Apache Cordova 5.x, they dropped Ant. Now they are using Gradle. Your APK path is now at the following:

      platforms/android/build/outputs/apk/android-debug.apk

      If you can’t install it, maybe try updating all your Android dependencies via the Android SDK manager, do a project clean for all Android build resources, and then try to build again.

      Sounds like maybe just a configuration issue with Android or the device / simulator you’re trying to install to.

      Regards,

    • kkai316

      Hey Greg,
      I came across this issue and found your post. I wonder if you found the solution to solve it?
      Thank you!