Test Driven JavaScript Development- P15

Test Driven JavaScript Development- P15:This book is about programming JavaScript for the real world, using the techniquesand workflow suggested by Test-Driven Development. It is about gaining confidencein your code through test coverage, and gaining the ability to fearlessly refactor andorganically evolve your code base. It is about writing modular and testable code. Itis about writing JavaScript that works in a wide variety of environments and thatdoesn’t get in your user’s way.
Nội dung trích xuất từ tài liệu:
Test Driven JavaScript Development- P15 12.5 Using the Ajax API 273 requestComplete(transport, options); transport.onreadystatechange = tddjs.noop; } }; transport.send(null); }; /* ... */ }()); Adding these two lines makes the tests pass again. Re-running the massive re- quest integration test in Internet Explorer confirms that the memory leak is now gone. 12.5.4 Local Requests The last issue with the current implementation is that it is unable to make local requests. Doing so results in no errors, yet “nothing happens.” The reason for this is that the local file system has no concept of HTTP status codes, so the status code is 0 when readyState is 4. Currently our implementation only accepts status code 200, which is insufficient in any case. We will add support for local requests by checking if the script is running locally and that the status code is not set, as the test in Listing 12.44 shows. Listing 12.44 Making sure the success handler is called for local requests test should call success handler for local requests: function () { this.xhr.readyState = 4; this.xhr.status = 0; var success = stubFn(); tddjs.isLocal = stubFn(true); ajax.get(file.html, { success: success }); this.xhr.onreadystatechange(); assert(success.called); } The test assumes a helper method tddjs.isLocal to check if the script is running locally. Because we are stubbing it, a reference to it is saved in the setUp, allowing it to be restored in tearDown as we did before.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. From the Library of WoweBook.Com 274 Abstracting Browser Differences: Ajax To pass the test, we will call the success callback whenever the request is for a local file and the status code is not set. Listing 12.45 shows the updated ready state change handler. Listing 12.45 Allow local requests to succeed function requestComplete(transport, options) { var status = transport.status; if (status == 200 || (tddjs.isLocal() && !status)) { if (typeof options.success == function) { options.success(transport); } } } The implementation passes the test. In order to have this working in a browser as well, we need to implement the helper that determines if the script is running locally, as seen in Listing 12.46. Add it to the lib/tdd.js file. Listing 12.46 Checking current URL to decide if request is local tddjs.isLocal = (function () { function isLocal() { return !!(window.location && window.location.protocol.indexOf(file:) === 0); } return isLocal; }()); With this helper in place we can re-run the integration test locally, and observe that it now loads the HTML fragment. 12.5.5 Testing Statuses We finished another step—a test and a few lines of production code—it’s time to review and look for duplication. Even with the stub helpers we added previously, the tests that verify behavior for different sets of readyState and status codes look awfully similar. And still we haven’t tested for other 2xx status codes, or any error codes at all. To reduce the duplication, we will add a method to the fakeXMLHttp- Request object that allows us to fake its ready state changing. Listing 12.47 adds a method that changes the ready state and calls the onreadystatechange handler.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. From the Library of WoweBook.Com 12.5 Using the Ajax API 275 Listing 12.47 Completing the fake request var fakeXMLHttpRequest = { open: stubFn(), send: stubFn(), readyStateChange: function (readyState) { this.readyState = readyState; this.onreadystatechange(); } }; Using this method, we can extract a helper method that accepts as arguments a status code and a ready state, and returns an object with properties success and failure, both indicating if the corresponding callback was called. This is a bit of a leap because we haven’t yet written any tests for the failure callback, but in order to move along we will make a run for it. Listing 12.48 shows the new helper function. Listing 12.48 Request helper for tests function forceStatusAndReadyState(xhr, status, rs) { var success = stubFn(); var failure = stubFn(); ajax.get(/url, { success: success, failure: failure }); xhr.status = status; xhr.readyStateChange(rs); return { success: success.called, ...