QUnit and implementing string reverse

Very recently, jQuery introduced their Unit Testing framework QUnit as a top level project. It’s simple but maybe good for me as a Unit Testing another-giving-a-shot-er to start with because not many methods to worry about(!). Though it aims to help jQuery plugin development, we can use for normal not-jQuery javascript development. So I tried a few things here.

Introduction.

It’s very simple. In order to run QUnit testing, what you need are 1) one html file, 2) basic jQuery setup (jQuery and jQuery-ui) and 3) QUnit specific files (testrunner.js and testsuite.css). The html file doesn’t have to be complex since testrunner will add the result automatically and dynamically. Only element you need is <div id="main"></div>. That’s it. But well, you may just wanna use the one they use.

By looking at some examples at jQuery.com, it seems like you can use QUnit for testing HTML structure and other stuff, which sounds pretty cool, but I haven’t tried that yet. I just started to build my own javascript library a while ago, so today, I implement one idea and tried TDD (Test Driven Development).

The example I built is on the last of this entry. On that page, besides what I explained before, I added 3 more javascript files. reverse.js is the actual implementation. test_reverse.js is the holder for test cases. Json.js is an utility, which is used in test case (well, i will explain about it on the future entry).

String.reverse()

What it does? reverse () is an extension to built-in String class and is a class (static) method. It receives one argument, a String instance and will return it with reverse order. For example, if you pass “dog” to String.reverse(), it will gives you back “god”. (I realized that I should do input checking).

Before start it, I had a few ideas of how to implement it. So first I wrote test cases based on induction. This is the point I am still not quite sure about. Anybody knows basic ideas or good tips of building test cases, let me know! What I did this time is:

1. Test the minimum input
   if the input is “a”, then it should return “a”
2. Test the minimum + 1 input
   if the input is “ab”, then it should return “ba”
3. And test random input
   and do random string.

by QUnit code, it describes as follows.

  ok(String.reverse, 'String.reverse exists');
  equals('a',     String.reverse('a'),     'the one char');
  equals('ba',    String.reverse('ab'),    'the two chars');
  var rand = gen_random();
  equals(rand[1], String.reverse(rand[0]), 'and random string');

QUnit::ok() evaluates boolean value for the first argument, is equivalent to JUnit.assertTrue(). QUnit::equals() compares the first argument and the second argument, is equivalent to JUnit.assertEquals().

gen_random() is a function that I build for this test case, which will return a pair of strings, which are reverse order to each other.

String.reverse() implementation

Then, I started to write real codes. First, pick up a character from the last of the passed string, and added it to the result by String concatination. As you know, String in JavaScript is immutable, so every time, it calls a new String().

Then second, pick up a characeter from the last of the passed string, and added it to an array, then just join(”), to concatinate all chars by once.

Third one is a bit complex. It prepares two arrays, and it runs for-loop half number to the length of the passed string. One array pick up a character from the beginnning of the passed string, the other pick up a character from the last of the String. Then do join at very end.

They all passed the test cases, then I realize maybe I should do speed testing for each implementation. So here’s the test.

String Reverse Test: If you are using Internet Explorer, it looks like hang-up… I gave you a warning!!

While I was writing this entry, I suddenly remember that there is an instance method Array.reverse(). And I added to it. I was about to give a comment like… “Hmm, the (2) array join method is pretty first… But the difference between (2) and (3) may get shorter when the given string got a longer because it will make it half of counter of for-loop”… But now it found the much faster implementation… Have no comments on it… just use built-in methods.

Conclusion

• re-creatable number can be very persuasive
• test cases make it easier to do more test
• the first try may be a bit bother.
• and use the built-in methods.