Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I really need your advice. I'm reading a few articles about TDD in JavaScript but I'm really struggling to understand how to use it in my daily work. For instance I'm currently working on a page that has an accordion and each item of the accordion has dynamic contents populated through a JSON object. The JSON object is provided by a third party. I'm using jQuery. My way of testing so far is called console.log :)

  • What kind of tests should I write?
  • Does TDD make sense for this kind of application of is meant for something else?

Sorry for the noob question but I'd really appreciate your opinion

share|improve this question

migrated from stackoverflow.com Jan 26 '12 at 21:19

This question came from our site for professional and enthusiast programmers.

1  
Great question; but probably belongs on Programmers.SE. This question will likely get migrated there. –  vcsjones Jan 26 '12 at 20:48
    
TDD for javascript is simple enough, TDD for the adhoc weird wiring using multiple frameworks is a PITA –  Keith Nicholas Jan 26 '12 at 20:53

3 Answers 3

The ideal solution is to write your code as modules that are seperate from your page.

This way you can just load the module into a subbed unit testing html page or into a headless browser and run your unit tests on it.

Preferably unit test libraries include mocha

The important part here is not unit testing the entire page because the entire page is not a unit.

The other important part here is writing your code so that it is loosely coupled. The looser your coupling the easier it is to unit test your module and the less you have to mock for your test to just work.

For instance I'm currently working on a page that has an accordion and each item of the accordion has dynamic contents populated through a JSON object. The JSON object is provided by a third party. I'm using jQuery. My way of testing so far is called console.log :)

Take your accordian widget and ensure it either has unit tests or write unit tests for them.

Then make a dummy page you can drop your accordian into and inject the mocked out version of the third party data into it. Then unit test that the accordian renders properly and things just work with the mocked third party JSON.

The difficult part is automating the running of your unit tests on all 20 browsers you support. (I really hope you only support 5!)

share|improve this answer
    
thanks a lot for your answer, I guess I need to re-factor my code first, there are few dependencies now like ids, widths,margins –  sergio Jan 26 '12 at 21:45

I'd look into QUnit. After all, it's what the jQuery team uses for unit testing.

a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself...

share|improve this answer

I'm not sure that TDD is well suited to this use case. I'v a java background, and I use TDD for business layer testing. I also develop UIs but with GWT and it's just a mess to consider testing the UI. There's a bunch of solutions to integrate UI testing during build time for example (Selinium, GwtUnitTest, etc.) but then you've to consider that you just added code to test your code and each line must be maintained as if it's a production code.

In my point of view, the use case (the story if you prefer) of a UI must be clearly & simply defined (use clicks on XX, a popup appears, etc.) testers (obviously developers) have only to follow the use case and don't go beyond (make generic widgets for example).

Hope it helps a little.

share|improve this answer
1  
since my answer a bunch of things happened, there's AngularJS/Testacular and Yeoman which reinvented the way we develop UIs. Considering that, I can say that now we've the possibility to TDD the UIs as part of the development process. –  mbtdoor Mar 1 '13 at 17:03

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.