Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

migration rejected from stackoverflow.com Sep 9 '15 at 16:19

This question came from our site for professional and enthusiast programmers. Votes, comments, and answers are locked due to the question being closed here, but it may be eligible for editing and reopening on the site where it originated.

closed as primarily opinion-based by gnat, durron597, Ixrec, Snowman, enderland Sep 9 '15 at 16:19

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise.If this question can be reworded to fit the rules in the help center, please edit the question.

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

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
    
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'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
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

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