Unit/Functional Testing RubyAMF

One of my current projects is using RubyAMF to communicate with Flash (http://rubyforge.org/projects/rubyamf/). On the whole this is really nice because it allows you to transfer Ruby objects directly to ActionScript ones (as opposed to translating the object into XML, sending the XML and then recreating the object in ActionScript).

However, Rails does not provide a built in transport mechanism for AMF, so we cannot run functional testing directly on the data call (as we could for an XML or HTML transport layer). This is a show stopper for a lot of people (Rails w/o Unit testing = a big mess of trouble when something goes wrong).

We can though serve both the HTML and the AMF formats depending on the request format. This means that we can test the object instantiation logic and make sure there are no errors in the controllers (though we cannot check the actual format of the data being served).

In the controller, instead of rendering AMF alone, do the following

respond_to do |format|
     format.html {render :text => ""}
     format.amf { render :amf => @photo }
end

Note: You will have to give the variable object instance scope using the @ sign so we can test for it

Then in the unit test file, you can test in the following manner

def test_get_photo
   get :get_photo
   assert_not_nil assigns(:photo)
   assert_response :success
end

So you can at least test that the object got instantiated and no errors were generated.

Writing Web Components in Rails

One of the problems most people run into when writing web components is the fact that you have to tie together 2-3 disparate elements (HTML partial, JavaScript file and/or CSS) into one contextual component.

As JavaScript and CSS files are normally placed in the head and the HTML partial occurs somewhere in the body, it can be hard to track down any missing pieces should they arise.

In RJS (built in Ruby JavaScript components) the normal procedure is to place the script tag next to the element in the HTML itself. This not only goes against Unobtrusive JavaScript principles, it is also butt ugly if you ever have to view the source code.

Thankfully, there is a more elegant solution.

Instead of rendering your JavaScript directly in the page, i.e.

<%= javascript_include_tag "my_component" %>

you wrap it in a content_for(:head) (this assumes you have placed a <%= yield :head %> in your application.html.erb template).

i.e.
<% content_for(:head) do %>
<%= javascript_include_tag "my_component" %>
<% end %>

This will place your JS file in the head where it belongs.

For those of you who use jQuery, here is an extra bonus tip.

Sometimes you may want to call in an HTML partial via AJAX (I will write a full tutorial on that later). If you do so using jQuery any script tags that are in the HTML partial will get parsed, loaded and eval(uate)ed automagically. The only caveat is that in this situation you cannot use the content_for(:head) wrapper (and if you call multiple files in this manner the order will matter as the scripts will be launched immediately as opposed to on document.ready).

Using these techniques, you can write discrete web components that encompass both markup and functionality.

Unobtrusive JavaScript and href="#"

Back in the old days of inline JavaScript, people would often attach JavaScript functionality to links either by using:

<a href="#" onclick="doSomeJavaScript()">Click Here</a>

or by using

<a href="javascript:doSomeJavaScript()">Click Here</a>

Anyways, there are problems with both. In the first instance, the user will get booted up to the top of the page in some browsers (that's what href="#" basically does). The second instance is better, but it is inline and that is something we want to avoid.

In the Unobtrusive JavaScript world we would basically have to use the first instance because the "a" tag will not display as underlined in some browsers without an "href" attribute.

Or would we?

I am not really sure where the metaphor for using links as actions came from, but as long as it is there and people are used to it we will often get designs from UI designers using them as such. Links are really supposed to take you somewhere, buttons are calls to action.

In any case, a much better way to implement this (if you cannot get your UI designer sacked) would be to do the following.

1) Set up a CSS class called something like "fake-link"
2) Style it like an "a" tag (underlined, blue, etc...)
3) In the CSS set "cursor:pointer" (this will ensure it changes into a little hand and looks like a link)
The class should look like the following

.fake-link {
cursor: pointer;
text-decoration: underline;
color:blue;
}

4) Assign this class to a div or a span

<div class="fake-link" id="clickObject">Click here to call a JavaScript function</div>
5) Do your unobtrusive thaing (in jQuery below)

$('#clickObject').click(function(){
doSomeJavaScript();
});

Voila! You have something that looks like a link which keeps the UI guy happy, but it is really a div with a click handler which keeps you happy.

Also, if you end up getting a new UI designer who realizes that links should take you somewhere instead of calling actions, you can restyle your fake-link to look like a button-ish kind of object with minimal effort.