RubyMine is a real gem

Pawel Pabich — Thu, 26 Aug 2010 13:28:39 GMT

Today I had to fix a piece of custom code inside of Redmine. I have very little experience with Ruby on Rails but I was able to get the app up and running with a debugger attached within 15 minutes.

I downloaded the latest version of RubyMine 2.5 EAP, installed it, pointed it to the folder with the app, selected production configuration and hit Debug. RubyMine analysed my Ruby setup and popped up a window with a notification that I’m missing some gems and the IDE can download and install them for me. I hit Ok and 5 minutes later I was debugging the app. Ruby on Rails experience on Windows is far from being perfect but RubyMine is simply awesome.

Tags: Ruby, RubyMine, Debugging

Java Script unit testing with YUI Test and Jack mocking framework

Pawel Pabich — Thu, 22 Jul 2010 11:03:28 GMT

I strongly believe in unit testing and recently I spent a bit of time trying to apply this technique to Java Script code.

The first problem that I had to solve was which framework to use. From what I’ve read it looks like JSSpec, qUnit and YUI Test get most of the attention nowadays. YUI is the most mature from them and offers by far the most functionality out of the box. On the other hand it is the most complex one to setup but still the whole process takes only a few copy/paste clicks. At the end of the day I decided to go with YUI Test because I wanted to check if I really need its rich capabilities.

In C# world to make unit testing easy we use mocking frameworks. In Java Script world mocking frameworks are not needed because Java Script is a dynamic language and every method/object can be overwritten at any time at runtime. Still mocking might take a bit of effort because you have to keep the original method somewhere around to put it back to where it was at the end of a test. Otherwise you end up with state that is shared between tests which is a bad thing. Jack is a mocking framework that helps solve this problem. It’s not perfect but it is good enough for what I wanted to do.

Enough introduction, let’s start with the story that I’ve implemented. The link to the complete source code is located at the bottom of this post.

There is a simple form and we have to write client side validation logic for it. The rules are as follows:

The user can select either one or more predefined reasons or can provide a custom reason. The user can not use both.
If the form validation succeeds then the user gets a popup with “Correct” message
If the form validation fails then the user gets a popup with “Wrong” message.

This is how the form looks like:

and this is the HTML behind it:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/Form.js" type="text/javascript"></script>
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
    </script>
</head>
<body>
    <form method="post" action="">
        <p>Why did you decided to submit this form?</p>
        <fieldset>
            <legend>Reasons</legend>
            <ul>
                <li>
                    <label for="dontKnowReason">
                    I don't know:
                    </label>
                    <input type="checkbox" name="dontKnowReason" 
                    id="dontKnowReason" />                    
                </li>
                <li>
                    <label for="likeTheFormReason">
                    I like the form:
                    </label>
                    <input type="checkbox" name="likeTheFormReason" 
                    id="likeTheFormReason" />                    
                </li>
                <li>
                    <label for="wasToldReason">
                    Someone told me to do so:
                    </label>
                    <input type="checkbox" name="wasToldReason" 
                    id="wasToldReason" />                    
                </li>        
                <li>
                    <label for="customReason">
                    Other reason:
                    </label>
                    <input type="text" name="customReason" 
                    id="customReason" />                    
                </li>                                              
            </ul>            
        </fieldset>
        <input type="submit" value="Submit" />    
    </form>

    <script type="text/javascript">

        $(function () {
            JSUnitTesting.init();
        });
       
    </script>
</body>
</html>

To be able to run the unit tests we have to have an HTML page that simply loads all required Java Script code and executes it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>

    <link rel="stylesheet" type="text/css" 
    href="http://developer.yahoo.com/yui/3/assets/yui.css"/>
    <link rel="stylesheet" type="text/css" 
    href="http://yui.yahooapis.com/3.1.1/build/cssfonts/fonts-min.css"/>
    <script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js" 
    type="text/javascript" ></script>
    <script src="Scripts/jack.js" type="text/javascript" ></script>
    <script src="Scripts/Form.js" type="text/javascript" ></script>
    <script src="Scripts/UnitTests.js" type="text/javascript" ></script>
</head>
<body class="yui3-skin-sam  yui-skin-sam">
    <div id="testLogger"></div> 
</body>
</html>

As you can see the HTML page is very simple. It loads a few files that belong to YUI framework, then it loads code under test from Form.js and the actual unit tests from UnitTests.js.

Below is the content of UnitTest.js file.

/// <reference path="jack.js" />

JST = JSUnitTesting;

YUI().use("node", "console", "test", function (Y) {

    var validation_tests = new Y.Test.Case({

        name: "Validation tests",

       "validation should fail when both custom and
        "predefined reasons are selected": function () {

            var reasons = [true, false, true];
            var result = JST.validate(reasons, "content");

            Y.Assert.isFalse(result);
        },

        "validation should succeed when only custom reason is selected": function () {

            var reasons = [false, false, false];
            var result = JST.validate(reasons, "content");

            Y.Assert.isTrue(result);
        },

        "validation should fail when none of the reasons is selected": function () {

            var reasons = [false, false, false];
            var result = JST.validate(reasons, "");

            Y.Assert.isFalse(result);
        },

        "validation should succeed when only predefined reasons are selected": function () {

            var reasons = [true, true, true];
            var result = JST.validate(reasons, "");

            Y.Assert.isTrue(result);
        }
    });

    var submission_tests = new Y.Test.Case({

        name: "Submission tests",

        "confirmation should be shown to the user when validation passes and form is about to be submitted": function () {

            jack(function () {

                jack.expect("JST.getCustomReason").atLeast(0).returnValue(null);
                jack.expect("JST.getPredefinedReasons").atLeast(0).returnValue(null);
                jack.expect("JST.validate").atLeast(0).returnValue(true);
                jack.expect("JST.notify").once().mock(function (arg) {
                    Y.Assert.areNotEqual(arg.indexOf("Correct"), -1);
                });

                JST.submitForm();
            });
        }
    });

    var console = new Y.Console({
        verbose: true,
        newestOnTop: false,
        style: "block",
        height:"500px"
    });

    console.render('#testLogger');

    Y.Test.Runner.add(validation_tests);
    Y.Test.Runner.add(submission_tests);
    Y.Test.Runner.run();
});

and the end result in a web browser:

The only thing that requires explanation here is the difference between Validation and Submission tests. The validate method is a standalone method that does not have any dependencies hence its unit testing is very simple and boils down to passing different sets of input parameters and asserting the correct results.

The unit testing of the submitForm method on the other hand is not that simple because the method relies on getPredefinedReasons and getCustomReason methods that grab data from the DOM and validate method that ensures that the user provided data is valid. We are not interested in the way those methods work while unit testing submitForm method. They actually gets in the way. What we need to do is to mock them and focus on making sure the submitForm method shows correct messages to the user.

The mocking framework takes care of that. All we have to do is create an anonymous method that encapsulate all our mocking logic. The mocking framework will make sure that once the test is done the global state gets rolled back to where it was before the test was executed. The way Jack is designed reminds me of using and IDisposable in C#.

As you can see the jQuery based code is encapsulated into getXXX methods which makes easy to mock them. Some people don’t mock jQuery and instead try to recreate enough DOM elements on the test page to satisfy the tests. I don’t like this approach because changes to either HTML or jQuery might force us to change the unit tests which makes them brittle. It is like using L2S in a unit test. It’s not a unit test, it is an integration test. Other approach I’ve seen is to mock jQuery methods one by one. This is a slightly better approach but still changes to jQuery queries can break the tests. It is like trying to mock a sequence of Linq extension methods. It’s way easier to mock the whole method that simply encapsulates the query.

If this was a C# code then getXXX methods would be defined on some kind of repository and validate method would belong to a validation component. Both of them would be injected to the main logic that handles the form submission. If this was an ASP.NET MVC app that would be a controller. It was not my intention to structure the code in this way but that’s what I ended up with writing the tests first.

You might wonder why I haven’t shown the actual code yet. Well, I did it on purpose. The unit tests should be enough to understand what the client side code does and what its desired behaviour is. If this is still not clear then it means that either the code is not structured properly or that the names are not descriptive enough.

And that would be it. The last thing to do is to show the actual code:

JSUnitTesting = {

    getPredefinedReasons: function () {
        var values = [];
        $("input[type='checkbox']").each(function () {
            values.push($(this).is(":checked"));
        });

        return values;
    },

    getCustomReason: function () {
        return $("input[type='text']:first").val();
    },

    validate: function (predefinedReasons, customReason) {

        var numberOfSelectedPredefiniedReasons = 0;
        for (var i = 0; i < predefinedReasons.length; i++) {
            if (predefinedReasons[i]) {
                numberOfSelectedPredefiniedReasons++;
            }
        }

        var isCustomResonSelected = customReason.length > 0;

        if (numberOfSelectedPredefiniedReasons > 0 && 
            isCustomResonSelected) return false;
        if (numberOfSelectedPredefiniedReasons == 0 && 
            !isCustomResonSelected) return false;
        return true;
    },

    init: function () {

        var self = this;
        $("form").submit(function () {
            self.formSubmission();
            return false;
        });
    },

    submitForm: function () {

        var predefinedReasons = this.getPredefinedReasons();
        var customReason = this.getCustomReason();

        if (!this.validate(predefinedReasons, customReason)) {
            this.notify("Wrong ! Select either one (or more checkboxes) " +
                        "or type a custom reason.");
        } else {
            this.notify("Correct !");
        }
    },

    notify: function (message) {
        alert(message);
    }
};

JSUnitTesting.zip

Tags: Java Script, Unit Testing, TDD, HTML, jQuery

Blog upgraded from Subtext 2.1 to Subtext 2.5

Pawel Pabich — Mon, 28 Jun 2010 12:42:47 GMT

No problems so far and I really like the new dashboard. Good job guys!

Tags: Subtext

Generic retry logic in PowerShell

Pawel Pabich — Sun, 20 Jun 2010 10:59:57 GMT

I spent recently a bit of time writing PowerShell scripts that deploy a system that I’m working on both locally and to QA. Basically, you get the latest code from TFS, run single PowerShell script and press F5 :). Why? Have a look at The Joel Test.

Anyway, while writing those scripts I needed to implement a basic retry logic in multiple places. It turned out that PowerShell supports closures and that you can pass any part of the script to a function as an argument. Having all of that at my disposal made my task very easy:

function Execute-Command($Command,$CommandName)
{
    $currentRetry = 0;
    $success = $false;
    
    do
    {
        try
        {
            & $Command;
            $success = $true;            
            Log-Debug "Successfully executed [$CommandName] command. 
            Number of retries: $currentRetry";
        }
        catch [System.Exception]
        {
            $message = 'Exception occurred while trying to execute 
                        [$CommandName] command:' + 
                        $_.Exception.ToString();
            Log-Error $message;             
            if ($currentRetry -gt 5)
            {                             
                $message = "Can not execute [$CommandName] command. 
                            The error: " + $_.Exception.ToString();
                throw $message;
            }
            else
            {
               Log-Debug "Sleeping before $currentRetry retry 
                             of [$CommandName] command"; 
               Start-Sleep -s 1;
            }      
             
            $currentRetry = $currentRetry + 1;
        }
    } 
    while (!$success);   
}

And this is how you can use it:

$command = {Get-ChildItem $Folder -Recurse | Remove-Item -Recurse  -Force};
$commandName = "Delete content of [$Folder]";
Execute-Command -Command $command -CommandName $commandName;

Tags: PowerShell, Scripting

CloudCamp is coming again to Sydney!

Pawel Pabich — Sun, 20 Jun 2010 03:48:27 GMT

This time you need to take half a day off to attend it but I believe it’s well worth your time and I really enjoyed the previous camp.

Tags: Cloud computing

Pawel Pabich's blog

RubyMine is a real gem

Java Script unit testing with YUI Test and Jack mocking framework

Blog upgraded from Subtext 2.1 to Subtext 2.5

Generic retry logic in PowerShell

CloudCamp is coming again to Sydney!