TERSUBSCRIBE. E s s e n t i a l f o r s o f t w a r e t e s t e r s. It s FREE for testers. June / 5 v2.0 number 27

Transcription

1 TE It s FREE for testers TERSUBSCRIBE E s s e n t i a l f o r s o f t w a r e t e s t e r s June / 5 v2.0 number 27 Including articles by: Bogdan Bereza VictO Jim Pelech and Gregory Solovey Alcatel-Lucent Sakis Ladopoulos Intrasoft International Buu Nguyen QASymphony

2 Promises, promises by Buu Nguyen In JavaScript, callbacks are now test incidents of the program that called the subprogram must continue while the subprogram is waiting. Otherwise, to take a crude example, nothing else on a page will work when a movie is loading or playing. In this article I will explain why code that achieves this by the most common method, callback functions, is prone to defect and failure, as a guide to testers using code review, static/dynamic analysis and code-based test design techniques. Then I will explain a new, I think better, approach to doing the same thing, which developers, testers and test automators of web applications need, I believe, to understand and adopt now. Callbacks and cyclomatic complexity Figure 1 shows a program that downloads and displays (figure 2 my Github repositories. Buu Nguyen s topical tutorial on web apps code quality JavaScript programs are especially prone to failure. Although they are an integral part of any non-trivial web application, and the language is loved by many, the experience of most people who have written, tested or debugged them, whether for production or for test automation purposes, bears this out. The reason is probably that JavaScript is single-threaded yet is frequently needed to behave asynchronously. When invoking a method or function, it often cannot be allowed to wait for the invoked code to complete execution and return its result, because the invoked code may need to wait a long time for something else to happen, for example data to download or a web service to respond. The execution The first call to getjson( downloads, asynchronously, the list of repositories then invokes the passed-in callback. Subsequent calls to getjson(, nested in the first callback, download the details of individual repository and invoke their own callbacks. The program has two levels of nested callbacks. Now imagine two additional requirements: as well as the html_url, for each repository, the contributors url is to be displayed. And while the document is being downloaded an animated GIF is displayed. These make the code shape look like figure 3. So: the depth of nesting increases with the number of requirements. JavaScript programmers call this code shape the pyramid of doom. Now imagine what happens when further additional requirements create a need for 20 PT - June professionaltester.com

3 function showerror(err { var errelm = document.getelementbyid( error errelm.innertext = err function addrepo(repo { if (repo.source return // ignore forked repo var reposelm = document.getelementbyid( repos reposelm.innerhtml += <li><a href= + (repo.homepage repo.html_url + >; + repo.name + </a>: + repo.description + </li> function getjson(url, cb { var xhr = new XMLHttpRequest( xhr.open( GET, url, true xhr.onreadystatechange = function( { if (xhr.readystate!== 4 return if (xhr.status === 200 cb(null, JSON.parse(xhr.responseText else cb(xhr.statustext xhr.send( // callback hell starts here getjson( function(err, repos { if (err return showerror(err repos.foreach(function(repo { getjson(repo.url, function(err, repodetails { if (err return showerror(err addrepo(repodetails Figure 1: program with callbacks bike: Interpreted language built on.net/mono grunt-mindirect: Grunt task to perform in-place JS minification combres: ASP.NET and MVC performance optimization library jcr: jquery Carousel evtify: Event emitter for Node & browser jundo: JavaScript Undo Library local-server: Minimal static server memento: Lightweight and extensible undo framework for.net LeapPhoto: Sample app: control iphoto with Leap Motion misc-js: Miscellaneous JavaScript notify: Change tracking library for.net qdds: Quick & dirty map and set data structures promise: Minimal promise implementation qtrace-samples: Sample code for qtrace publishers semicolon: Semicolon interpreter in Python starx: Generator executor for ECMAScript 6 Figure 2: output of program PT - June professionaltester.com 21

4 showanim(..., function( { // animation getjson(..., function( { // repos getjson(..., function( { // repo getjson(function( { // contributor Figure 3: callback nesting depth var p1 = getjson(someurl var p2 = p1.then( function onfulfilled1(value { return value.number * 2, function onrejected1(reason { // recover or throw p2.then( function onfulfilled2(value { console.log(value, function onrejected2(reason { // recover or throw Figure 4: promise chaining var p1 = getjson(someurl var p2 = p1.then( function onfulfilled1(value { return value.number * 2 p2.then( function onfulfilled2(value { console.log(value, function onrejected2(reason { // handle error Figure 5: handler is undefined or not a function decisions in the invoking code: for example if the repository is a fork, the content of forks_url is to be displayed. This requires, or does not, a further callback, depending on the result and status of a callback. Cyclomatic complexity has just gone through the roof. JavaScript programmers call this phenomenon callback hell, with good reason. It is extremely difficult to fix or maintain. Callbacks and error handling What if one of the invoked functions reports an error (including a timeout it is necessary to define a mechanism to propagate errors occurred in asynchronous operations and handle them in callbacks. In figure 1, getjson( passes any error as the first argument of its callback, which has to look at the value of that error to decide what to do next. If multiple callbacks are active, they must all propagate errors the same way, or CC will be multiplied again. Handling errors in asynchronous operations is one thing: if any error is thrown inside a callback itself, that error is left unhandled. Adding a big try-catch around the first call to getjson( won t work because each callback is executed in its separate call stack. Instead, a trycatch must be added to every callback! Doing this is a daunting and onerous task even for this small program and usually left undone. In production web applications, failures caused by this issue are often simply tolerated; it is hoped that the user will try again. Callbacks and performance and functionality The code to display repository information has to be executed multiple times, each time with a different repository object as soon as it is downloaded. This is inefficient; real applications would probably benefit from updating the DOM in batch. A corollary of this problem is that the order in which repositories are added to the DOM is not the same as the order of the repos array. Therefore the repos array cannot be sorted, for example by number of stars or forks, before invoking foreach( on it, or the result will be random. Hanging up on callbacks Naming the anonymous functions, encapsulating (modularizing exception handlers or utilizing modules such as async can 22 PT - June professionaltester.com

5 help developers to write asynchronous JavaScript faster and more simply. But they do nothing to help testers by reducing cyclomatic complexity or improving testability. In fact they make both worse by, approximately, an order of magnitude. An alternative approach to callbacks, promises, has been proven in use with third-party libraries that implement it. But it will soon be in the JavaScript standard (that is, ECMAScript 6 and therefore part of native JavaScript. This will make the use of callbacks redundant and wrong. Testers detecting their use, now, should raise an incident. The promises of the (near future A promise represents an eventual result of an invocation (usually asynchronous, but it doesn t have to be. A promise is always in one of three states: pending, fulfilled and rejected. Pending means the operation has not completed (including, has not started. When the operation completes successfully, the promise is fulfilled with the value, that is the output. Otherwise, if there s an error in the process, the promise is rejected with a reason. Once a promise is fulfilled or rejected, it cannot be transitioned to another state and its value (or reason cannot be changed. Imagine this call to a promise-aware version of the getjson( function: var p1 = getjson( someurl The variable p1 is a promise. It is not the JSON object itself, because the code to download the JSON is executed asynchronously and not completed by the time p1 is assigned. Instead, p1 represents the JSON object that will, perhaps, be available at some point. Now, p1 is a first-class JavaScript object, so we can pass it around to other functions or return it from the current function. Anything interested in the value of p1 can invoke a special method on p1, for example p1.then(, and pass it in an onfulfilled or onrejected handler, for example: p1.then(onfulfilled, onrejected If getjson( successfully downloads the JSON, onfulfilled will be invoked. If there is any error, onrejected will be invoked. If multiple handlers are needed, p1.then( can be called multiple times. Promise chaining The then( method returns a new promise, making it possible to chain operations. In the example in figure 4, assume the JSON retrieved by getjson( is an object with a property called number. Now p1. then( returns a promise, p2. We register handlers to both promises, p1 and p2. With this wiring, the following behaviours are made possible: once the code in getjson( finishes downloading the JSON, onfulfilled1 is invoked with the JSON object. If there is any error in getjson(, onrejected1 is invoked as soon as onfulfilled1 (or onrejected1 is invoked and if there s no error thrown, p2 will be fulfilled with the returned value of onfulfilled1 (or of onrejected1, causing onfulfilled2 to be invoked with that value. On the other hand, if there is any error thrown in onfulfilled1 (or in onrejected1, p2 is rejected and onrejected2 will be invoked with the error. Effectively, the value returned or error thrown by every onfulfilled or onrejected is bubbled to the next handler in the then( chain. If you want to handle any potential error thrown by onfulfilled2 and onrejected2, simply chain another then top2. then(, like this: p2.then(onfulfilled2, onrejected2.then(null, onrejected3. This brings us to a special case: if a handler is undefined or not a function, as the fulfillment handler of the final then( above, the next handler of the same type in the chain, if any, will be invoked with the PT - June professionaltester.com 23

6 ;(function( { function Promise( { var state = pending, callbacks = [], value function then(onfulfilled, onrejected { var p = new Promise( function callback( { var cb = state === resolved? onfulfilled : onrejected if (typeof cb === function { try { var ret = cb(value if (ret === p return p.reject(new TypeError( Cannot resolve itself if (ret instanceof Promise return ret.then(p.resolve, p.reject p.resolve(ret catch (e { p.reject(e else p[state === resolved? resolve : reject ](value if (state === pending callbacks.push(callback else nexttick(callback return p function complete(_state { return function(_value { if (state!== pending return state = _state value = _value nexttick(function( { for (var cb; cb = callbacks.shift(; cb( this.then = then this.resolve = complete( resolved this.reject = complete( rejected Promise.all = function(promises { var cp = new Promise(, values = [], remain = promises.length for (var i = 0; promises[i]; i++ { ;(function(i { promises[i].then(function(value { values[i] = value if (--remain === 0 cp.resolve(values, cp.reject (i return cp if (typeof module!== undefined && module.exports { module.exports = Promise var nexttick = process.nexttick else { window.promise = Promise var nexttick = window.setimmediate window.settimeout ( Figure 6: promise library 24 PT - June professionaltester.com

7 function addrepos(repos { var reposelm = document.getelementbyid( repos var parts = repos.map(function(repo { return repo.source? : <li> <a href= + (repo.homepage repo.html_url + > + repo.name + </a>: + repo.description + </li> reposelm.innerhtml = parts.join( function showerror(err { var errelm = document.getelementbyid( error errelm.innertext = err function getjson(url { var p = new Promise( try { var xhr = new XMLHttpRequest( xhr.open( GET, url, true xhr.onreadystatechange = function( { if (xhr.readystate!== 4 return if (xhr.status === 200 p.resolve(json.parse(xhr.responsetext else p.reject(xhr.statustext xhr.send( catch (e { p.reject(e return p getjson( repos.then( function(repos { return Promise.all(repos.map(function(repo { return getjson(repo.url.then(addrepos.then(null, showerror Figure 7: program rewritten using the library current value or error. For example, if onrejected2 is missing, onrejected3 will be invoked with the error that was meant for the missing onrejected2. In other words, if we don t need special error handling for getjson(, we can rewrite our program as in figure 5. Another special case is when a handler returns a promise instead of a normal value. For example, if onfulfilled1 returns a new promise as in figure 6, p2 will share the state with p3, so p2 will be fulfilled or rejected when p3 is fulfilled or rejected respectively. Promise aggregation Multiple promises can be aggregated to form a composite promise. For example: var cp = Promise.all(p1, p2, p3 cp.then(function(results { If p1, p2 and p3 are promises, cp represents the aggregation of the eventual values they will eventually represent. When cp is fulfilled, its onfulfill handlers will be invoked with an array of values of p1, p2 and p3 in the right order. On the other hand, if one of the child promises is rejected, cp will be rejected. A promise library Figure 6 shows the full code of a promise library that addresses all the problems described above and allows the program shown in figure 1 to be rewritten as in figure 7. Now there is no need for nesting level/cyclomatic complexity to increase; error handling is straightforward; results are aggregated in order; and the DOM is updated all at once. The program is now also highly extensible: to perform additional transformations to the data, asynchronously or not, simply chain more then(s to the returned promise Buu Nguyen is director of technology at QASymphony ( a leading provider of test management platforms for agile development teams PT - June professionaltester.com 25