joseoncode.com

Hide passed tests by default in Qunit

jfromaniello@gmail.com (José F. Romaniello) — Wed, 25 Jan 2012 14:37:00 +0000

If you are using qunit and you are tired of the 392019321 passed tests output in your browser, there is a checkbox at the top to hide all passed tests. Unfortunately after you refresh the page you will lose this.

Don't worry I have a snippet for you, insert this at the botton of your test harness page (inside a script block):

$(document)
    .ready(function(){
        $('#qunit-tests').addClass('hidepass');
    })
    .delegate("#qunit-testrunner-toolbar", "DOMNodeInserted", function(e){
        $("#qunit-filter-pass").attr("checked", true)   
    })
    .delegate("#qunit-filter-pass", "click", function(e){
        e.stopPropagation();
        var newValue = $(this).is(":checked");
        $('#qunit-tests').toggleClass('hidepass', newValue);
    });

Extending jQuery with QUnit assertions

jfromaniello@gmail.com (José F. Romaniello) — Thu, 19 Jan 2012 11:25:00 +0000

QUnit come out of the box with some very basic assertions; ok, equal, notequal, deepequal, raises and few others. In this post I will show how to extend the jQuery object with some useful assertions for qunit.

When I was working in Moesion I saw that I was writing having many times test like this:

test("some test", function() {
    //do something
    //mock ajax call

    $(".a-button").click();

    //assert
    ok($(".some-element", $(".container")).length > 0, 
        "it should contains some-element");
    
    ok($(".some-other-element", $(".container")).length > 0,
        "it should contains some-other-element");

    ok($(".container").is(":contains('some text')"),
        "it should contains 'some text'");
});

So, I wrote some extensions to the jquery object and now I can write the assertions like this:

test("some test", function() {
    //do something
    //mock ajax call

    $(".a-button").click();

    //assert
    $(".container")
        .assertContains(".some-element")
        .assertContains(".some-other-element")
        .assertContainsText("some text");
});

The implementation is quite easy:

(function( $ ){

  function escapeHtml(s) {
      if (!s) {
          return "";
      }
      s = s + "";
      return s.replace(/[\&"<>\\]/g, function(s) {
          switch(s) {
              case "&": return "&amp;";
              case "\\": return "\\\\";
              case '"': return '\"';
              case "<": return "&lt;";
              case ">": return "&gt;";
              default: return s;
          }
      }).replace(/(\r\n|\n|\r)/gm, "<br />");
  }

  function pushSelectorAssertToQunit(result, message, c
                                    ontent, expectedMessage, 
                                    expectedValue){
      QUnit.log({
            result: result,
            message: message,
            actual: content,
            expected: expectedMessage + " " + expectedValue
        });

      QUnit.config.current.assertions.push({
          result: !!result,
          message: message || ("<code><pre>" + escapeHtml(style_html(content)) 
                        + "</pre></code> <br /> <div class=\"test-expected\">" 
                        + expectedMessage + " " + expectedValue + "</div>")
      });  
  }

  $.fn.assertContains = function(selector, message) {
    pushSelectorAssertToQunit($(selector, this).length > 0, 
                        message, 
                        this.html(), 
                        "should contains", 
                        selector);
    return this;
  };

  $.fn.assertNotContains = function(selector, message) {
    pushSelectorAssertToQunit($(selector, this).length === 0, 
                        message, 
                        this.html(), 
                        "should not contains", 
                        selector);
    return this;
  };

  $.fn.assertContainsText = function(text, message) {
    pushSelectorAssertToQunit(this.is(":contains('" + text + "')"), 
                        message, 
                        this.html(), 
                        "should contains text", 
                        text);
    return this;
  };

  $.fn.assertNotContainsText = function(text, message) {
    pushSelectorAssertToQunit(!this.is(":contains('" + text + "')"), 
                        message, 
                        this.html(), 
                        "should not contains text", 
                        text);
    return this;
  };
})( jQuery );

There is only one dependency, the style_html function comes from beutify_html.js. You can remove the function call, but it allows me to see beutiful errors when a test fail:

SinonJs: mocks for javascript

jfromaniello@gmail.com (José F. Romaniello) — Wed, 18 Jan 2012 07:58:00 +0000

Sinon.Js is a mock/stub/spy framework created by Christian Johansen author of the book Test-Driven Javascript Development . It has a very handy syntax once you get used and some really useful features.

Do I need a mock framework in javascript?

Since javascript is a dynamic language and weak typed language a newcomer might don't feel the need of a mock framework for javascript. For instance if I can write a test like this:

test("when clicking the loadMore button then block the ui", function() {
    var called, message;
    $.blockUI = function(msg){
        called = true;
        message = msg;
    }

    $(".load-more").click();

    ok(called);
    equal(message, "Loading more tweets...");
});

Here, I replaced the $.blockUI method with a new method that stores two things; if the method was called and the message. And it will work but it has a problem since we are completely overwriting the method I am changing the environment where all test run.

Sinon.JS has the concept of "sandbox". You can create as many mocks and stubs inside the sandbox, but onces you dispose the sandbox everything will be restored to the original state. I use a sandbox per unit test always.

So the previous test with sinon.js will look as:

test("when clicking the loadMore button then block the ui", function() {
    var blockUI = this.stub($, "blockUI");

    $(".load-more").click();

    ok(blockUI.called);
    equal(blockUI.args[0][0], "Loading more tweets...");
});

Which will work like the previous one, but the main difference is after the test has finished $.blockUI will be restored. Here I am using the Sinon.Js-qunit integration, but in the main website of Sinon.Js there are some other .js files to integrated with some other test frameworks. I have seen some people using Sinon.Js in node.js as well.

Mock ajax calls

Sinon.JS has a way to mock ajax calls (and it also follows the sandboxes rules). Here is an example test:

test("when loading an empty inbox then show a message", function() {
    this.server.respondWith("/getLatestMails",
                            [200, { "Content-Type": "application/json" }, JSON.stringify([])]);
    
    jmail.inbox.loadPage();

    this.server.respond();

    $("div#inbox")
        .assertNotContains("li.mail", "it should contains a li.mail");

    $("div#inbox")
        .assertContainsText("The inbox is empty");
});

The first parameter in respondWith is the relative url, then an array with the status code result, headers and the body payload.

Stub method calls

Often we need to stub a function and set the result values for different arguments, with sinon we can do something like this:

test("when changing the hash to target=inbox then call the inbox.loadPage", function() {
    //arrange
    var getState = this.stub($.bbq, "getState"),
        jmailLoadPage = this.stub(jmail.inbox, "loadPage");

    getState.withArgs("target").returns("inbox");

    //act
    $(window).triggerHandler("hashchange");

    //assert
    ok(jmailLoadPage.called);
});

When calling $.bbq.getState("target") it will returns "inbox". You can set as many withArgs/returns as you want.

Using Mocks

According to Sinon.Js documentation,

Mocks (and mock expectations) are fake methods (like spies) with pre-programmed behavior (like stubs) as well as pre-programmed expectations. A mock will fail your test if it is not used as expected.

In an example before I shown the usage of called and args in stubs. We can set the expectation upfront (instead of asserting after the fact) as follows:

test("when clicking the loadMore button then block the ui", function() {
    var $mock = this.mock($);

    $mock.expects("blockUI")
         .once()
         .withArgs("Loading more tweets...");

    $(".load-more").click();

});

After the test is finished (and the sandbox disposed) if we didn't fulfill the expectation the test will fail.

I don't know why but I vaguely use this method, I prefer sinon.js stubs.

Test Spies

Spy objects works as stubs but the only difference is that the underlying method is called normally. To use this, instead of this.stub you will use this.spy.

Another useful usage of spy is when you want to test how a method will use a callback. An example of this (from sinon docs) is:

"test should call subscribers on publish": function () {
    var callback = sinon.spy();
    PubSub.subscribe("message", callback);

    PubSub.publishSync("message");

    assertTrue(callback.called);
}

As you can see here we are creating an spy without args.

About the QUnit Integration

In the Sinon.Js main page there is a sinon-qunit adapter. Unfortunately we found some problems with it, I think it was something with async tests.

So, Gustavo Machado and I wrote a new adapter for qunit based on the module setup/teardown of qunit. I already published this file in my JMail repository so you can download it here. There is only one drawback with this method and is that you need to set a qunit "module" for your tests.

Final thoughts

Sinon.Js is a must-have when doing TDD in javascript and I haven't found any other alternative. The documentation of Sinon.Js is very clear and easy to follow.

Most of the examples in this blog post are from my Singe Page Application example called Jmail.

Slido: markdown to html5 slideshow

jfromaniello@gmail.com (José F. Romaniello) — Thu, 29 Dec 2011 09:57:00 +0000

Slido is an experiment I did in node.js based on Google's Html5 Rocks and inspired by Ruby S9 project.

Basically you write your presentation in markdown right in the page, and you get an html5 presentation that looks like a ppt but is better. You can edit it has many times as you want.

If you save the presentation while you are authenticated (only facebook for now), you can share the link to view the presentation but no one can edit it except you.

I did some improvements to Google's javascript client-side code, for instance now it works properly on IE9 (without the fancy CSS3 animations) and I also added a very hot new theme; "Windows Metro". This is an example of my CodeCamp presentation (spanish).

The code is opensource and it is here. Any feedback is welcome, don't hesitate to send me a pull request and I will push to the heroku app.

Continuous Testing scripts with Growl

jfromaniello@gmail.com (José F. Romaniello) — Fri, 09 Dec 2011 17:36:00 +0000

Few days ago I discover Growl in twitter thanks to Will Green. Growl is an open source notification system for Mac OS X. Basically it runs in the background and show the notifications sent by other programs.

I was thinking to add something like this few month ago to my continuous testing scripts for javascript but I didn't know about this software and even less than there is a version for windows.

So, I start playing with an powershell script I found from an old post of Joel Bennett changed to work with latest version of Growl, and published in PsGet.

If you install Growl, you can use this script as follow:

#Install PsGet
#run this line only if you don't have PsGet.Net already installed in order.
(new-object Net.WebClient).DownloadString("http://psget.net/GetPsGet.ps1") | iex

#Install Send-Growl
#run this line if you don't have Send-Growl yet 
Import-Module PsGet
Install-Module Send-Growl

#Register the application and add a notice type
Register-GrowlType MyApp NoticeType

#Send a message
Send-Growl MyApp NoticeType "A Title" "Some description" "http://a.link.callback.com"

And as a result, you will see something like this:

I use this module in my continuous testing script, when I save a file, the tests suite is executed and it shows me the results as you can see in this mini screencast:

If you want to see how test this or see my javascript continuous testing script looks in my jmail project.

How I use Jing to add screenshots in markdown

jfromaniello@gmail.com (José F. Romaniello) — Fri, 09 Dec 2011 00:35:00 +0000

Since I started to use Jekyll for this blog, one of the things that I miss was the way I was "pasting" screenshots in my posts:

Take a screenshot with Jing
Save it locally
Insert it in the blog post (with Windows live writer)

The first posts that I wrote in markdown, I did something crazy: I uploaded the file using filezilla to my old ftp and then figure out what was the url to that image, and then the markdown syntax.

Now, Jing has a very handy option to add a new button, first I went to Preferences and then to Customize Buttons:

Next I added a new button with these settings:

Button type: FTP
My FTP settings connection settings
After the screenshot is uploaded, I want the piece of markdown in my clipboard ready to paste. This include the markdown syntax with the full url to the image.

And now I can take a screenshot with a key combination, then click a button and get the markdown code ready to paste! I think is even easier than with the old WLW :).

PsGet.Net a repository of reusable powershell modules

jfromaniello@gmail.com (José F. Romaniello) — Thu, 08 Dec 2011 23:02:00 +0000

I love internet. Few MINUTES after I published one of my previous posts Sharing powershell scrtips easily I received a comment from Mike Chaliy ;

Hello, if you do not mind I added PsWatch to PsGet ;). Now if somebody have psget installed, Install-Module pswatch will do job.

Of course I didn't mind! In fact I love to discover things in this way.

This is something really needed in the powershell echosystem; a centralized place to share reusable things.

PsGet is a powershell pure-module you can easily install it with one line:

(new-object Net.WebClient).DownloadString("http://psget.net/GetPsGet.ps1") | iex

And then you have to import the module as any other powershell module before using it:

Import-Module PsGet

and then you can start using it. There is only one important command for now which is Install-Module. For instance if you want to install my PsWatch script, you do:

Install-Module PsWatch

and you are done!

Another interesting thing about PsGet is that you don't need to publish something to the repository in order to install it. You can use the modifiers -ModuleName to set the name of the module, and -ModuleUrl to provide an url where the module content is served as plain text:

Install-Module -ModuleUrl https://mydomain.com/mymodule.psm1 -ModuleName my-module

If you want to take a look to the scripts already published you can look here.

Things to improve

One of the things that needs more work I think is to descentralize the directory. Right now the only way to publish something is to fork Mike repository, edit the directory.xml file and push-request him.

But so far is looking really good, well done Mike!

Posh-Git and Posh-Hg in the same machine

jfromaniello@gmail.com (José F. Romaniello) — Wed, 30 Nov 2011 14:30:00 +0000

Git and Mercurial have powerfull command line interfaces besides GUIs like TortoiseGit, GitExtensions and TortoiseHg.

There are two projects that I like Posh-Git and Posh-Hg. These projects add to the Powersherll terminal TAB completion and some usefull information in the prompt as shown here:

The problem that I had is that even if it is well documented how to install each one, I couldn't make both work in the same machine. There is an answer in stackoverflow which is a very good starting point, but it has a problem with the path variables used and TAB completion in mercurial seems broken after.

This is how I installed and I have both working now. First you will need to download the two repositorios to My Documents\WindowsPowerShell\Modules\ and then in My Documents\WindowsPowerShell add a file named profile.ps1 with the following content:

function isCurrentDirectoryARepository($type) {

    if ((Test-Path $type) -eq $TRUE) {
        return $TRUE
    }

    # Test within parent dirs
    $checkIn = (Get-Item .).parent
    while ($checkIn -ne $NULL) {
        $pathToTest = $checkIn.fullname + '/' + $type;
        if ((Test-Path $pathToTest) -eq $TRUE) {
            return $TRUE
        } else {
            $checkIn = $checkIn.parent
        }
    }
    return $FALSE
}

# Posh-Hg and Posh-git prompt

. $Home\Documents\WindowsPowerShell\Modules\posh-git\profile.example.ps1
. $Home\Documents\WindowsPowerShell\Modules\posh-hg\profile.example.ps1

function prompt(){
    # Reset color, which can be messed up by Enable-GitColors
    $Host.UI.RawUI.ForegroundColor = $GitPromptSettings.DefaultForegroundColor

    Write-Host($pwd) -nonewline

    if (isCurrentDirectoryARepository(".git")) {
        # Git Prompt
        $Global:GitStatus = Get-GitStatus
        Write-GitStatus $GitStatus
    } elseif (isCurrentDirectoryARepository(".hg")) {
        # Mercurial Prompt
        $Global:HgStatus = Get-HgStatus
        Write-HgStatus $HgStatus
    }

    return "> "
}

Generating monthly archives with Jekyll

jfromaniello@gmail.com (José F. Romaniello) — Sun, 27 Nov 2011 21:23:00 +0000

Continuing my series of posts about Jekyll I will show in this post how to generate monthly archives. This is the index you see when you enter this url:

http://joseoncode.com/2011/11

The difference between Jekyll and any other blog system is that Jekyll generate the site at build time, while the others generate the page at runtime with data coming from a database.

The first thing you will need is a jekyll plugin in the "_plugins" folder as follow:

module Jekyll
  class ArchiveIndex < Page
    def initialize(site, base, dir, period, posts)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'archive_index.html')
      self.data['period'] = period
      self.data['period_posts'] = posts
      archive_title_prefix = site.config['archive_title_prefix'] || 'Archive: &ldquo;'
      archive_title_suffix = site.config['archive_title_suffix'] || '&rdquo;'
      self.data['title'] = "#{archive_title_prefix}#{period["month"]}-#{period["year"]}#{archive_title_suffix}"
    end
  end
  class ArchiveGenerator < Generator
    safe true
    def generate(site)
      if site.layouts.key? 'archive_index'
        site.posts.group_by{ |c| {"month" => c.date.month, "year" => c.date.year} }.each do |period, posts|
          archive_dir = File.join(period["year"].to_s(), "%02d" % period["month"].to_s())
          write_archive_index(site, archive_dir, period, posts)
        end
      end
    end
    def write_archive_index(site, dir, period, posts)
      index = ArchiveIndex.new(site, site.source, dir, period, posts)
      index.render(site.layouts, site.site_payload)
      index.write(site.dest)
      site.pages << index
    end
  end
end

Shame on me!! please pardon my ruby skills.

This will generate an html file index.html in the folder /YYYY/MM.

And then in the "layout" folder I wrote a template for this archive_index.html (you can set another name in _config.yml):

---
layout: default
meta-robots: "noodp, noydir, noindex, noarchive, follow"
---

<h1> Posts archive: {{ page.period["month"] }} - {{page.period["year"]}} </h1><br>
<ul>
{% for post in page.period_posts %}
<li> 
    <a href="">{{ post.title }}</a><br>
    <span class="entry-meta">Published: {{ post.date | date: "%B %d, %Y" }}</span>
</li>
{% endfor %}
</ul>

Solving UTF problem with Jekyll on Windows

jfromaniello@gmail.com (José F. Romaniello) — Sun, 27 Nov 2011 10:48:00 +0000

As I mention before I am running this blog with Jekyll. I noticed a problem while trying to execute the blog from windows:

Liquid Exception: incompatible character encodings: UTF-8 and IBM437 in index.html

After further investigation I found that this problem means that the console you are trying to run ruby doesn't work with UTF characters ( ? ). The way you can fix this is to set the code-page before running the jekyll command, simple execute this:

chcp 65001

Beaware that I tried to set this globally by changing a registry key, and I broke my windows installation... seems that 65001 is not something that you can use globally, so don't do it.

Instead I added a new rake task as follows:

task :runwindows do
    puts '* Changing the codepage'
    `chcp 65001`
    puts '* Running Jekyll'
    `jekyll --server --auto`
end

and now I can execute jekyll with:

rake runwindows