Testing the app

« Previous Next »

App testing is of immense importance, especially when supporting multiple platforms and devices. The number of tests and types of testing needed depend on the devices and platforms supported. Test types include:

Speed
Performance efficiency
Input and output validation
Touch and interactivity

While those are the basic test types, there are more ideas to consider while testing.

Web environment differences

The following are some things to keep in mind when dealing with different web environments.

Vendor prefixes

Both advanced JavaScript and CSS features in browsers can be vendor-prefixed with -webkit, -moz, -o, or -ms. Know the environments you plan to use and prefix features appropriately.

Note: You should try to avoid using features that are only available on certain devices, unless you either provide appropriate fallbacks or specifically intend your app to be used on a more limited set of devices.

Feature detection

Some environments will support a specific feature, others may not. Feature detection is the best way of knowing which tools are available for a given platform. For example, to detect support of the Geolocation API, you would code:

if("geolocation" in navigator) {
  // Geolocation available, use it!
}

CanIUse.com provides detailed tables of browser and device support for specific features. A helping library like Modernizr automatically detects features upon page load and provides that information accordingly.

Responsive design

Using media queries and foresight in design will prevent design problems. Common pitfalls include not using vector graphics for elements that can grow or shrink, using fixed-dimension elements on all devices, not testing different orientations, and simply not looking at your app at different resolutions. Services like Screenfly and responsivepx help aid in testing an app at different sizes, but there's no substitute for having a supported device handy for manual testing.

Consider also the problems that can arise when different devices have different screen resolutions. A case in point: the problems that cropped up when Apple introduced the third-generation iPad, with its new 2048x1536 display:

New York Times: Is The New iPad Screen Too Good For The Web?
Net Magazine: Web devs battle new iPad's Retina Display

Unit testing

Unit testing is a common practice in all walks of development, and web app testing is no different. Unit testing of CSS and JavaScript is also very easy when an application is coded in a modular fashion. Popular JavaScript unit testing frameworks include Jasmine, QUnit, and YUI Test. Each unit testing website provides code samples for how to use their test framework.

Performance

Performance testing can be difficult to prescribe since it's wholly dependent upon the tasks performed by the app. Basic web coding principles like minimizing HTTP requests (JavaScript concatenation or CSS sprites help), JS and CSS minification, placing scripts at the bottom of the page, and properly setting Expires headers all apply. The YSlow team provides more helpful web performance best practices to follow, all of which will enhance your web app. The HTML5Rocks website also provides a list of performance best practices.