Previous: Starting your app
Chapter 4: Testing your app
Now, since we actually have something to look at, we need to talk about the testing and development process for our app. There are four ways to test your app as you develop: in a desktop WebKit browser, in the iOS or Android simulator, in a mobile browser on your phone, or as a native app on the phone.
Desktop browser testing
Testing your app in a browser is as simple as running the serve command in your project’s root folder.
$ ionic serve
This will start a live-reload server for your project. When changes are made to any HTML, CSS, or JavaScript files, the browser will automatically reload when the files are saved.
Try dragging the center content to the right (works with the mouse as well) to expose the left menu. Smooth like butter!
Simulator testing
You can also test right in the simulator using the cordova commands from the previous chapter. For example, to test in the iOS simulator, run:
$ ionic cordova build ios
$ ionic cordova emulate ios
Substitute ios with android for Android testing. If you want to get advanced, you can also open up the project file for a specific platform by opening the required Xcode or Android Eclipse project in platforms/PLATFORM inside the root of your project. Then, you can build and test from inside the platform-specific IDE. Note: if you go this route, I recommend still working inside of the root www folder, and when you’ve made changes to this folder, run the command:
$ ionic cordova prepare ios
Which will update the ios specific project with the code from the www folder. Note: this will overwrite any changes you’ve made to the platforms/ios/www and other platform-specific folders.
Mobile browser testing
You can also test the app directly in a mobile browser. For OS X users, Safari on OS X can directly debug websites and simulator applications. First you have to enable the remote web inspector on both the device and Safari on desktop. To do this with iOS 7 and OS X Mavericks, enable the Web Inspector option in the iOS Settings -> Safari -> Advanced section, and also enable the Developer Menu in the Advanced section of the Safari OS X settings.
Android apps supporting Android 4.4 or above can also use Chrome for remote debugging. Check out the Android docs for more info.
If you are using the local server method from the Desktop testing section and you are on the same network as the desktop computer, you can connect to the ip address of the desktop computer to test. So, if our desktop is running a test server at 192.168.1.123:8000, we can just load that address into our mobile Chrome or Safari to test it.
One problem with testing in a mobile browser is that it’s probably the furthest of the three options from the actual app experience. This is largely because the browser app is meant for browsing websites, so it often adds functionality that conflicts with your app. For example, Chrome and Safari both listen for drag events on the sides of the app which let you switch between open tabs. They also have issues with the URL bars getting in the way, and some scrolling behavior is not the same as it is in the web view running in Cordova. It is fine for small tests, but not recommended for more complex apps.
Testing as a native app
Since we are building a native (or “hybrid”) app, we can (and should!) test it as one. There are several ways to do this. If you are building for iOS, you’ll need to sign up for an Apple Developer account to test as a native app on an iPhone or iPad. Unfortunately, this costs $99 per year (don’t blame us!). Once you have an account and you have set up Xcode with your certificates to enable device testing, you’ll want to open the Xcode project from platforms/ios/ and do your testing from Xcode.
Testing on Android is much easier and faster. To test on the device, simply plug it in, and run
$ ionic cordova run android
If this doesn’t work, make sure you have USB debugging enabled on your device, as described on the Android developer site.
Building it out
Now that we have a shell to test and we know how to test our app, let’s start building out the guts of the app!