AngularJS: A JavaScript framework built with software testing in mind

For server side developers, the idea of building an application mostly in JavaScript may seem pretty foreign. However, this appears to be a burgeoning trend on the client side. More and more businesses are seeking to offer end users a feature-rich application with native-like functionality—and JavaScript helps deliver the desired experience. With front-end and back-end as well as Dev and Ops becoming ever more interdependent in the era of continuous integration and continuous delivery, it doesn't hurt to know a little bit about how testing works in the JavaScript world.

Is testing JavaScript really difficult?

Angular was built from the ground up with testing in mind.

Mark Bates

Software specialist Mark Bates asserts that JavaScript is one of the easiest things to test—not one of the most difficult. Coming from a former enterprise Java developer, that's a comforting revelation. "I think people get concerned that it's one of the harder things to test because of the DOM and the window. But when you start using Angular and you are no longer dealing with those things because of the way the code is written, it actually becomes very easy to write tests."

Simply put, today's frameworks facilitate testing. That's probably one of the reasons these frameworks are catching on in the JavaScript community. According to Mark, "Angular was built from the ground up with testing in mind. That was one of the core requirements of the Angular team—and it shows. If you look at their code, the Angular test suite itself is very impressive. On the site when you're looking at code snippets, they'll show you the HTML, the JavaScript, and the test that goes with it." Basically, the tools are baked in.

Brian Holt, Reddit's front-end development director, agreed that popular JavaScript frameworks are designed to make debugging simple. "Angular and Ember both have Chrome extensions that plug in and permit direct inspection of what's going on in the framework. Angular Batarang, in particular, offers an inspect element tool that lets you dive into the scope of the element. This means Angular permits scoping on block level elements just like developers would expect with Java. Backbone is a looser framework and not much is hidden, so traditional browser debugging like you would do in jQuery works fine."

What are the best testing tools for JavaScript?

Bates said he typically uses Jasmine for testing since the Angular team has inserted nice hooks into their framework to make this easier. Another favorite is Lineman JavaScript for front-end applications that talk to remote servers. Lineman's Test'em tool-suite has made testing easy for all JavaScript frameworks. Mocha and Chai also got good reviews.

However, Mark had a less favorable opinion about another major testing tool. "I'm not a fan of QUnit, which I think is one of the ugliest testing units I've ever seen. If people start out testing there, that may be one of the reasons they aren't very happy." It does the job and does it fast. However, having a clean interface and a test suite that's readable and easy to parse is just as important. If the tests can serve as living documentation to mesh with today's BDD style of development, that's ideal.

JavaScript's development and testing ecosystem has room to grow

Mike Hostetler, appendTo CEO and former jQuery project team member, pointed out that there's still room for improvement. "JavaScript as a craft and as a mature language with an ecosystem of tools is still getting there. But more and more tools are getting developed and pushed out every day. The influx of node.js has brought an explosion of really great tooling on the server side that is now bleeding into the front-end. Testing, especially, is growing in importance. QUnit, Jasmine, and Mocha will all plug into CI systems that do the kind of Continuous Integration and Deployment you are used to in a more statically typed language."Other exciting developments include the use of Dart and TypeScript to add syntactical sugar that enforces type checking at compile time.

Mike concluded that this is an exciting era for the JavaScript ecosystem. People are experimenting and creativity is at an all-time high as programmers and architects test the boundaries of the language. Tools will be rapidly developed to catch up with the new capabilities of the JavaScript language once things settle down. Until then, development teams are in for a wild ride.

What is your favorite JavaScript testing framework? Let us know.