Articles tagged with "testing".

Introducing Scupper, the JavaScript library for easily dealing with HTML snippets in test suites

Posted 2 months

I came across a problem today while writing tests in JavaScript. The code I was testing required a snippet of HTML to work with. A user list needed to be reordered depending on their status. No problem I thought, I’ll create div to store an HTML snippet, then before my test I’ll duplicate and copy it into a test div.

<div id="snippets" style="display:none">
  <ul id="user-list-snippet">
    <li id="user-0">Shaun White<span class='user-0-status'>busy</span></li>
    <li id="user-1">Jeremy Jones<span class='user-1-status'>online</span></li>
    <li id="user-2">Jake Burton<span class='user-2-status'>offline</span></li>
    <li id="user-3">Tara Dakides<span class='user-3-status'>online</span></li>
  </ul>
</div>

And the JavaScript to copy the element:

$("#user-list-snippet").clone().removeAttr("id").attr("id", "user-list").appendTo($('#dom_test'));

Of course when working with id’s in HTML they have to be unique so the technique caused some of the other tests in the suite to fail, I needed to find another way to do this. One thing I hate is using jQuery to create more than a few dom elements as it gets complex very quickly and it’s not easy to see if the code is producing the desired HTML at a glance.

After taking a break I came up with a simple solution, the Scupper library was about to be written. I wanted to write snippets in HTML so I kept the snippet used in the first attempt. I then created a library that collected all of the snippets from the dom, storing them internally, before deleting them from the dom. This allowed the dom to be free from conflicting id’s and general pollution. The HTML snippet became:

<div id="snippets" style="display:none">
  <div id="user-list-snippet">
    <ul id="user-list">
      <li id="user-0">Shaun White<span class='user-0-status'>busy</span></li>
      <li id="user-1">Jeremy Jones<span class='user-1-status'>online</span></li>
      <li id="user-2">Jake Burton<span class='user-2-status'>offline</span></li>
      <li id="user-3">Tara Dakides<span class='user-3-status'>online</span></li>
    </ul>
  </div>
</div>

The containing div #user-list-snippet give an element to latch onto in order to grab whats inside. I created a method that sucks up all snippets inside a dom element and stores them:

init: function(element_id){
  var element = $('#' + element_id);
  element.children().each(function(i, elm){
    elm = $(elm);
    Scupper.items[elm.attr('id')] = elm.html();
  });
  element.empty();
}

The all that was needed is an easy way to pull them out an inset them into the dom:

insert_into: function(source_id, destination_id){
  return $('#' + destination_id).append(Scupper.retrieve(source_id));
},

retrieve: function(id){
  if(Scupper.items[id] !== undefined){
    return Scupper.items[id];
  }else{
    throw "Requested Scupper element not found with id: " + id;
  }
}

Calling insert_into() grabs the snippet HTML and inserts it into the specified dom element ready for the test to use it.

If you want to use Scupper the source is freely available on github.

Shoulda macro should_render_a_form_to

Posted 5 months

I’ve been writing a fair number of functional tests recently, one thing that kept cropping up was the need to check if a form had been rendered and that it was going to perform a particular action. Shoulda has a should_render_a_form macro, unfortunately it’s been depreciated and doesn’t do anything other than check a form element has been rendered in the view.

I decided to come up with my own macro that checks the specifics of a form element, enter should_render_a_form_to. This takes tree arguments, a description, an options hash and a block that contains the expected url. You would use the macro as follows…

Check there is a form posting to the new_user_post_path:
should_render_a_form_to("create a new post", {:method => "post"}) { new_user_post_path(@user.id) }
Check there is a form putting to the user_post_path and that the form has the id of ‘post_edit_form’:
should_render_a_form_to("update a post", {:method => "put", :id => "post_edit_form"}) { user_post_path( :user_id => @user.id, :id => 1) }

The macro code is available on github with test coverage. If you just want to cut and paste into your own macro’s file:

def should_render_a_form_to(description, options = {}, &block)
  should "render a form to #{description}" do
    expected_url  = instance_eval(&block)
    form_method   = case options[:method]
      when "post", "put", "delete" : "post" 
      else "get" 
      end
    assert_select "form[action=?][method=?]",
                  expected_url,
                  form_method,
                  true,
                  "The template doesn't contain a <form> element with the action #{expected_url}" do |elms|

      if options[:id]
        elms.each do |elm|
          assert_select elm,
                        "##{options[:id]}",
                        true,
                        "The template doesn't contain a <form> element with the id #{options[:id]}" 
        end
      end

      unless %w{get post}.include? options[:method]
        assert_select "input[name=_method][value=?]",
                      options[:method],
                      true,
                      "The template doesn't contain a <form> for #{expected_url} using the method #{options[:method]}" 
      end
    end
  end
end

The macro checks for both the forms action attribute as well as the hidden input rails uses to specify the method where necessary. I’ve also been playing with creating a macro to check for a form with specific fields such as should_render_a_form_with_fields. This is proving to be slightly more difficult than I originally anticipated and defining a nice interface to the method has been rather tricky.

My computer loves autotest-fsevent

Posted 9 months

I’m a big fan of autotest for testing, unfortunately it does stress my poor MacBook Pro and makes the fan go berserk if running anything other than the most simple of test suites. This is due to autotest having to check each file in your project for changes.

No more will autotest stress out my mac, autotest-fsevent is a great gem that uses OS X’s FSEvent system to be notified when files have changed rather than having to poll each file. You need mac OS X 10.5 or later to take advantage of FSEvent.

The other nice thing autotest-fsevent does is take care of all the .autotest config options, I managed to delete my entire config file which I’ve been tweaking for as long as I can remember trying to get the perfect setup.

I can now run even the most demanding of test suites and my computer barely breaks a sweat. Thanks bitcetera, my computer ♥’s you.

DRYing up multiple user contexts with shoulda macros

Posted 9 months

Today I’ve been writing tests for a legacy Rails application I inherited recently. The application has several user roles, each role having varying permissions. To deal with this nicely I setup shoulda macro’s to create contexts for each of the user roles, public user, standard user, admin user etc. then in my tests I could write…

public_context do

  context "on GET to :index" do
    setup do
      get :index
    end

    should_redirect_to("root url") { root_url }
  end
end

signed_in_user_context do

  context "on GET to :index" do
    setup do
      get :index
    end

    should_redirect_to("user url") { user_url }
  end
end

This is pretty standard practice now and something I picked up from looking at the code produced by the guys at Thought Bot. While working on the test suite it became apparent many of the methods behaved in the same way for multiple user roles. I wanted to come up with a way to run a group of tests under multiple user roles without having to duplicate any code. Shoulda macros to the rescue again! After creating another macro to deal with multiple contexts I can write my tests like this…

multiple_contexts 'public_context', 'signed_in_user_context' do

  context "on GET to :show" do
    setup do
      @advert = Factory(:advert)
      get :show, :id => @advert.to_param
    end

    should_render_with_layout :application
    should_render_template :show
    should_not_set_the_flash
    should_assign_to( :advert ) { @advert }  
    should_respond_with :success
  end
end

And the shoulda macro code itself…

def multiple_contexts(*contexts, &blk)
  contexts.each { |context|
    send(context, &blk) if respond_to?(context)
  }
end

def public_context(&blk)
  context "The public" do
    setup { sign_out }
    merge_block(&blk)
  end
end

def signed_in_user_context(&blk)
  context "A signed in user" do
    setup do
      @user = Factory(:user)
      sign_in_as @user
    end
    merge_block(&blk)
  end
end