Comments on Writing Testable JavaScript

32 Reader Comments

Back to the Article
  1. Another great article with perfect timing, when “Write Unit Tests” just so happens to be near the top of my TODO list.  Thanks ALA!

    Copy & paste the code below to embed this comment.
  2. Great article.  I think its important to note that a lot of the success in this kind of testing is by partitioning the web page into small, independently operating ‘modules’ of functionality.  Doing so not only makes the code small, removes complexity and reduces the cost of testing that ‘module’ but also affords the necessary isolation…  isolation for the purposes of integration testing yes but also for the purposes of design, QA, user testing, and delivery (really the full life cycle can be completed on each) of that ‘module’ independent of the other ‘modules’ of the application.  For example, its common practice to want to design all the ‘modules’ up front to see how they’ll layout and interact but there is value in building the ‘modules’ independently.  The completion of each doesn’t just mature the app incrementally but also the understanding and long term success of the steps involved in the creation of each ‘module’.  The great thing is that the ‘modules’ can be in various stages in the life cycle and you can correct course as necessary, and if you do not much lost.  We’ve had a lot of success with developing, testing and delivering like this.  And while the app, not be entirely complete at any given stage, its always operational and IMHO shippable.

    Copy & paste the code below to embed this comment.
  3. Outro artigo muito bom do A List Apart! Vale a pena pra quem gosta ou trabalha com javascript.

    Copy & paste the code below to embed this comment.
  4. I agree that the second coding style presented in the article is a huge improvement. For complex Web Apps however, you might consider a client-side MVC framework like AngularJS, which incidentally has built-in support for unit tests.

    Copy & paste the code below to embed this comment.
  5. @Rebecca, I see :)

    Copy & paste the code below to embed this comment.
  6. I don’t understand what the colored bars that appear under the heading “Organizing our code” refer to?

    Copy & paste the code below to embed this comment.
  7. Great article and fantastic ideology! The only thing that bugged me was that the code samples don’t have syntax highlighting, which makes for a terrible reading experience. Of course that’s a A List Apart bug and not related directly to this article - just thought I should put it out there.

    Copy & paste the code below to embed this comment.
  8. Thank you for a fantastic article! Have used QUnit quite a bit and just this week trying out Mocha/Chai with Grunt. Seeing a practical example of how to refactor/approach unit testing and not just write unit tests themselves is incredibly helpful!

    Copy & paste the code below to embed this comment.
  9. It’s very rare to see articles that discuss testing (particularly browser JavaScript) in such an approachable way. I think this often happens because example code is written in a testable way, however provides no bridge to help fix existing problems. It is refreshing to see an article that makes this connection.

    Great post, Rebecca!

    Copy & paste the code below to embed this comment.
  10. Cool. Very cool. I love the mocha/chai/sinon combo.

    Do you have any advice for testing RequireJS / AMD?

    Copy & paste the code below to embed this comment.
  11. Any chance you could publish the code? I’ve tried to follow along with this and Mocha just isn’t playing. Their site doesn’t particularly help because its favoured “describe” syntax seems unintuitive, is explained badly, and doesn’t match your test construction. When I try running mocha using “setup” and “test” it just complains that they’re not defined…

    Copy & paste the code below to embed this comment.
  12. Great article.

    Biggest problem I’ve had with searching on Javascript testing is they are lots of examples on how tests work, various frameworks, assertions with trivial examples etc etc which is all easy but non seem to go further in to the real world on how to design frontend components as you described in a testable way.

    Copy & paste the code below to embed this comment.
  13. Performance is typically the reason I segregate “unit” tests from “functional” tests
    - by melissa from LionLeaf

    Copy & paste the code below to embed this comment.
  14. great article!
    one remark though, in snippet#11 you use deferred.pipe() which is deprecated as of jQuery 1.8 - should use .then() instead.
    http://api.jquery.com/deferred.pipe/
    cheers

    Copy & paste the code below to embed this comment.
  15. Good read!
    Here’s my remix of your post, test driven style. Please share your thoughts about it! http://davidvujic.blogspot.se/2013/06/from-streets-of-test-driven-development.html

    Copy & paste the code below to embed this comment.
  16. Love the article! LOVE IT!! That is probably the best piece on JavaScript I have read in recent months. I also totally agree with your comments that people jump into Backbone etc without understanding, not a good idea. IMO this article is a must read for someone with (lower) intermediate JS knowledge like myself. also love the colored bars explanation. I had no problems understanding but maybe small “legend” would help as I understand if someone reads it in a hurry might get confused with colors

    Copy & paste the code below to embed this comment.
  17. Gianna. I agree that Clifford`s st0rry is shocking… on sunday I got a great new Acura since I been making $7686 this-past/month an would you believe 10-k last-munth. it’s by-far the most-financially rewarding Ive had. I actually started five months/ago and right away began to earn minimum $84 per/hr. I follow instructions here,, http://m3mi.com/3621CHECK IT OUT

    Copy & paste the code below to embed this comment.
  18. Beautifully articlated! Recently, I have been authoring a light weight Dependency Injection framework called WinterJS with the primary objective to allow developers to author testable code. It would be great to get some feedback on this.

    Copy & paste the code below to embed this comment.
  19. Perfect! To be honest, I’m not good with JavaScript, but after reading I can’t also say that I’m good. You just give me a picture of how does it works. Thank so much! http://www.launchevity.com/home

    Copy & paste the code below to embed this comment.
  20. This is a well written article, but I feel that if you are going to write an article about javascript you should write the examples in javascript. Not everyone is going to be using the same framework/library as you, so for universal understanding it would be best to write examples in vanilla javascript.

    Copy & paste the code below to embed this comment.
  21. I like the event sharing across $document part, have event handle delegate is the key to js component decoupling.

    Copy & paste the code below to embed this comment.
  22. How to distinguish the private methods or public methods?  Although some methods have ‘_’ underline tag, but in fact, all of these are public method. For example “SearchResults.prototype._handleClick = function (evt) {**}”. Can you give some suggestions, thank very much!

    Copy & paste the code below to embed this comment.
  23. I think what has been demonstrated here is something pragmatic and practial not entirely elegant. Because, the test codes here are kinda unit & integration test married together. I prefer to write my unit tests without DOM and CSS selectors; this needs dom/css isolated code, **mostly**. But, I still could not find a great way to do that. If any of you already did that please let me know.

    Copy & paste the code below to embed this comment.
  24. This is probable the best article out there about write JS tests for far.

    Copy & paste the code below to embed this comment.
  25. Thanks for the great article!

    My only problem is that it’s not only obviously a good intro to testing, but also a good introduction to deferreds, RSVP and how to better structure your code. It’s a bit of a jump from the procedural way (I would have written it) to the uncoupled way.


    I’ve done my own non-backbone version and got it to a point where I understand all the parts except for what’s going on here

    Anyone get why this is needed? I’ve put a break on it and it doesn’t seem like the contents of the ‘if’ ever gets run.


    Also, does anyone understand why ‘ajax’ works but using ‘get’ instead returns an empty results object?

     {"results":[]}


    btw, anyone using input type ‘search’ instead of ‘text’ might find that 2 results are returned, the first being empty. In Chrome at least. Was driving me mad for a quite some time!

    Copy & paste the code below to embed this comment.
  26. Sorry, commenting is closed on this article.