Posts Tagged ‘TDD’

Announcing: Debugging and TDDing Ajax with jQuery just got easier with ajaxMonitor

August 6, 2010

I am freakin’ excited!

I got tired of switching between tabs and firebug when trying to figure out what the hell was going on with my ajax requests.

The worst is when I tried finding anything about my requests in Internet Explorer. Forget it!

So I wrote a jQuery Plug-in. You attach it to your page and it will monitor all your Ajax requests [1].

One Click —-> Get the plug-in ajaxMonitor <—- One Click

The running unit tests for the source.

The running unit tests validating with jQuery 1.4.2 Ajax tests with the plug in. [2]

Two feature that are becoming a must have for this plug in

1> Mocking Ajax request by specifying your Ajax settings like this: { /*other settings*/ mock: true }

2> What I’m going to call single-shot.

  • Fire an AJAX request once
  • For all repeat requests will be  mocked with the response data.

Presently the way I TDD a client, is I retrieve content using the normal Ajax call to get the presentation HTML.

Then I make another Ajax call in my normal code and store it into a string. At the start of each test I load this string into my: $(‘#contentContainer’).html(myPreloadedPresentationHTML);

Then remove it. So for all the unit tests I make a total of TWO Ajax calls. That’s one too many calls (latency can be up to 1~2 seconds OUCH!).

Since the monitor already controls the success callback of the original Ajax request why not replace it with my own.

First Ajax request success supplies the response data.
Hang onto it.
Any other calls to this request will get the stored response data.

I would welcome any comments.

Good or Bad!

…even requests.

Please help push against this software. I think it is a great tool and could be better with your help.

[1] Because jQuery 1.4.2 executes the complete callback twice during the request. If you want you can include my modified jQuery 1.4.2 library that fixes this use it. See here for bug tick #5383 .

[2] Two failing tests dealing with preserving the context. It is caused by XPC Cross Origin Wrapper. If anybody has a fix, post on

Thanks from the ajaxMonitor Team.


As a programmer do you want to work on operational programs or do you want comabat training?

April 22, 2010

Tank: We’re supposed to start with these operation programs first. That’s major boring shit. Let’s do something a little more fun. How about… combat training.
Neo : Ju jitsu? I’m gonna learn Ju jitsu.
[Tank winks and loads the program]
Neo : Holy shit!
Tank : Hey Mikey, I think he likes it. How about some more?
Neo : Hell, yes. Hell yeah.

Well I can tell you that I prefer comabt training…


RU A Developer Using Firefox?

March 27, 2010


This program is for you!

I want you image

It does an automatic refresh of the pages that are being served by your development work. Whenever you save it will automatically do a refresh on the the web page.

How it works, is it has two programs. One is an add-on to Firefox. The other is an application you run from your desktop.

The application on the desktop monitors your development work directories. If any saves are done on the files in those directories, it will let the add-on for Firefox know to do a refresh on any pages for those directories.


Joe Sofwarer TDDs his code using qunit.

  1. So he writes a test (RED).
  2. Ctl-s.
  3. Loads up the unit-test page in Firefox.
  4. Gets his results.
  5. Writes code to make his (RED) test a (GREEN) test.
  6. Ctl-s.
  7. Goes to Firefox.
  8. Refresh button pressed.
  9. Reruns unit-test page.
  10. All is (GREEN).

Ten steps required for development.

Add XRefresh

  1. So he writes a test (RED).
  2. Ctl-s.
  3. Loads up the unit-test page in Firefox.
  4. Gets his results.
  5. Writes code to make his (RED) test a (GREEN) test.
  6. Ctl-s.
  7. All is (GREEN).

Seven steps required for development.

Faster feedback. Now there is more time to design and write code.

Or even blog about saving some time.

Recommend you check out there page, XRefresh.

Ugly Developing!

JavaScript Test First Presentation Patterns Part 1

October 17, 2009

Why Presentation Patterns?

Presentation patterns can give separation, between display elements and logic performed on the elements, reducing accidental complexity. Mixing display elements with logic leads to a pattern called Big Ball of Mud. This pattern is very common, because as more time goes by you end up adding more and more mud to the code base. Now you may say Oh, but the code I write isn’t complex and the more JavaScript I add the longer it takes to load my pages’. I would argue that the minute you hit CTL-S on your code, it has the potential for complexity in the future. Maintenance is the key ingredient that adds complexity. Code bases can spend more time in maintenance; bug-fixes and new features. As more bug-fixes and features are added to the code-base, more complex the code becomes. By using separation between display elements and logic, accidental complexity is decreased.

The future of web design is to use even more scripting in web pages. The visual presentations that JavaScript offers is too good a thing to pass up. It isn’t the 80s any more. It is the 21st century. Dynamic pages are here to stay.

Load speed can be ameliorated to a certain certain point by compressing the JavaScript file that gets served to the web browser. Compression consists of removing whitespace (spaces and carriage returns), and replacing variable names and functions names with minimal sized tokens.

Why Test First?

I’m an ordinary programmer. I can’t dream up this wonderful and beautiful super kick-ass application. I can’t keep of track of 400,000 states the application is in, when executing. I just can’t. Test First helps me handle all the above deficiencies that I have as a programmer.

There are some advantages for following the TDD way. One, it creates a regression test for your code base. Two, it allows you to refactor your code safely. Three, it drives the code base to a good design.

One thing, I personally think is very important, is it helps you to write in a more functional style. In JavaScript you have first-class functions. These functions (named or anonymous) can be assigned to variables and passed around. This can be a powerful abstraction tool.

The unit testing framework I use is called js_runit. My web development right now is done from Ruby on Rails.

What Are Some of the Presentation Patterns?

Humble Dialog/Passive View
Presenter First


Please feel free to disagree with some of opinions. Debate is good.

Javascript Complexity

October 14, 2009

Javascript is a language used in web development. I would argue that it is Object Oriented (OO). And due to this the principles guiding development in an OO language apply.

When developing software, at its basic level, you have three responsibilities that need to be managed.

  1. Input: consist of user actions.
  2. Output: change to the web browser.
  3. Logic: any piece of code where a decision is made.

To manage this complexity, you should be Unit Testing if not testing-first.

A simple Javascript unit testing framework used for Rails.