Sunday, 22 July 2012

JavaScript Unit Testing.

(Thanks Mrs Pop for the image, would've asked first but then you wouldn't have seen it in context. If you want I'll take it down?)
My Coding is, if I do say so myself, bloody brilliant. I test and test and test but that testing isn't done in a formal manner and I'm coming to realise that this has got to change. I've been doing the odd bit of unit testing in SalesForce and Andy at work mentioned JsUnit last week when he suggested I write the coding standards for JavaScript, so I guessed I should learn a little about what it means.
I did a little unit testing whilst doing my Java course at the OU so I knew a little bit about the whole Test Driven Development thing. I also use the jQuery JavaScript extensively and I guess that that has already been tested extensively - at least I hope it has. So the only things left to test are the functions I write myself and JsUnit is perfect for that.
For a friend who lives and works in France I'm developing an invoicing system which has to read and write out French currency formats. For those that don't know: the French use a space for a thousand separator and a comma rather than a full stop for the decimal separator, they also have the Euro symbol at the end rather than at the beginning of the amount. So a million Euros and twenty-five Cents would be written out as “1 000 000,25 €". Complicated ehh?
So I've two functions: one which take a float and outputs it as a French formatted currency string and another that takes a French currency string and returns a float.
I won't bore you with the functions, needless to say they involve shed loads of conversions between numbers and string s and then splits etc...
I will bore you with how I tested them using JsUnit though.
I downloaded JsUnit from github and placed the extracted folder on my server. I then created the following file:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Unit Tests for my Functions</title>
    <script src="./resources/jsunit/app/jsUnitCore.js"></script>
    <script src="./resources/js/toEuro.js"></script>
  </head>
  <body>
    <script>
      function testToFloat() {
        assertEquals("0,50 € should result in 0.5", 0.5, toFloat("0,50 €"));
        assertEquals("1 000 000,25 € should result in 1000000.25", 1000000.25, toFloat("1 000 000,25 €"));
      }
      function testToEuro() {
        assertEquals("0.5 should result in '0,50 €'", "0,50 €", toEuro(0.5));
        assertEquals("1000000.25 should result in '1 000 000,25 €'", "1 000 000,25 €", toEuro(1000000.25));
      }
    </script>
  </body>
</html>
I then opened up the included testRunner.html using my browser and pointed it at the file I created above and, after a little playing with the functions, managed to get the tests to pass.
It's an interesting approach to coding TBH but one that I think I could get used to it!
The people behind JsUnit now no longer use it but prefer Jasmine. I've had a wee squint but really don't have time to investigate it further this weekend. I code all week at work and most of the weekend at home and really need to do something else this afternoon. I'm 40% through Gary Gibson's The Thousand Emperors and can't justify buying Neal Asher's Zero Point until I'm done... and browsing for SodaStreams is doing my poor nut in.