JavaScript Fu Rails Plugin 3

Posted by Oliver on April 14, 2008

JavaScript Fu extends Rails with a few facilities to better integrate JavaScript into Rails development:

1. The notes and statistics rake tasks compass JavaScript files in the public/javascript directory:

$ rake notes
public/javascripts/controls.js:
  * [782] [TODO] improve sanity check
$ rake stats
| Name                 | Lines |   LOC | Classes | Methods | M/C | LOC/M |
[...]
| JavaScript           |  7287 |  6322 |       0 |       0 |   0 |     0 |
[...]

2. The call_js RSpec matcher asserts that a string or response contains a script tag, that contains JavaScript that calls the named function or method:

response.should call_js('fn')
response.should call_js('fn(true)')
response.should call_js('gApp.setup')

If you pass a block to call_js, it’s called back with the argument list, parsed as though it were a JSON array:

# matches <script>fn(1, 'aString', {x:10,y:20})< /script>
response.should call_js('fn') do |args|
  args[0].should == 1
  args[1].should == 'aString'
  args[2].should == {:x => 10, :y => 20}
end

Use this with jcon to test for type conformance, using ECMAScript 4.0 type definitions. (Well, you can’t use it with jcon yet, because I haven’t released it — this is just a teaser. But you can peek.)

response.should call_js('fn') do |args|
  args[0].should conform_to_js('[Array, (int, boolean)]')
  args[1].should conform_to_js('{x: double, y: double}')
  # or just:
  args.should conform_to_js('[[Array, (int, boolean)], {x: double, y: double}]')
end

3. The page.onload page generator method generates code that executes the content
of the block upon the completion of page load:

page.onload do
  page.call alert', 'page loaded!'
end

These lines generate one of these (depending on whether the jRails plugin has been loaded):

Event.observe("window", "load", function() { alert("page loaded!"); });
$(document).ready(function() { alert("page loaded!"); });

Gitting It

JavaScript Fu is hosted on git. If you have git installed, you can clone it into your Rails directory thus:

git clone git://github.com/osteele/javascript_fu.git vendor/plugins/javascript_fu

If you’re running off Edge Rails (or, presumably, Rails > 2.0.2), you should be able to do this instead:

script/plugin install git://github.com/osteele/javascript_fu

Otherwise, you can simply download the tarball from here.

Update: changed the conform_to_js example so that it actually works with the (albeit unreleased) plugin..

Trackbacks

Trackbacks are closed.

Comments

Comments are closed.

  1. Ed Spencer Wed, 16 Apr 2008 08:52:19 PDT

    This looks great, I’ve been looking for something to tell me how much JavaScript I’ve got ever since I started using EXTJS, at which point most of my code suddenly became JavaScript instead of Ruby.

    Do you have any tips on BDD with JavaScript? Currently everything I’m doing there is tested by hand, which is horrible. The Rspec stuff above looks good, but testing the JS classes in isolation would be better I think (I know that’s not your intention above – was just wondering if you know a good way of doing that).

  2. Doug Ramsay Thu, 17 Apr 2008 09:19:40 PDT

    You may want to take a look at Dr. Nic’s newjs gem: http://newjs.rubyforge.org/.

    It’s not RSpec, but it gives you unit tests for your JavaScript. There is also JsUnit, which I’ve seen but don’t know much about.

  3. Ed Spencer Fri, 18 Apr 2008 06:58:09 PDT

    Thanks Doug, NewJS looks great. Shame about it not using RSpec but I think I’ll give it a go