Testing widgets

Bomb

A lot of code has been written in the last lections. What about testing?

In the traditional Rails world a functional test usually means defining your expectations about a complete rendered page. It is like one monolithic test case asserting every little aspect of your page. You cannot easily write tests against fragments, or partials.

Luckily, widgets not only improve your overall architecture but also provide a convenient, clean way for testing. You can write small-scoped tests against your components which are less complex by covering the widget’s behaviour only – and nothing more!

When carefully tested, widgets can be run safely in any controller.

Test approaches

Naturally, there are different ways to test widgets. You might use

basic ActionController::TestCase-like tests
Webrat and Selenium
Capybara backed tests.

This guide discusses the first, simple approach.

Setting things up

In order to set up widgets in your test, you simply use syntax familiar from controllers.

test/widgets/trashbin_widget_test.rb (snippet)

 1require 'test_helper'
 2
 3class TrashbinWidgetTest < Apotomo::TestCase
 4    
 5  has_widgets do |root|
 6    root << widget(:trashbin_widget, 'me')
 7  end

Deriving the test case from Apotomo::TestCase includes all necessary methods.

The tested widget (tree) is set up in a has_widgets block (line 5-7).

Testing the rendering

We now check if rendering our trashbin widget really displays a bin.

test/widgets/trashbin_widget_test.rb (snippet)

 9  test "display" do
10    render_widget 'me'
11    assert_select 'img[src*="trashbin_empty.png"]'
12  end

Where render_widget invokes the start state, assert_select checks for CSS selectors as we know from functional tests.

Testing interactivity

The opposite direction – triggering events and updating the page – should be tested as well. This is where most of the bugs emerge, so don’t forget that part of your tests.

test/widgets/trashbin_widget_test.rb (snippet)

13  
14  test "dumping an item" do
15    assert_equal [tweets(:rule), tweets(:ass)], Tweet.find(:all)
16    
17    render_widget 'me'
18
19    trigger :drop, :source => 'me', :id => tweets(:ass).id
20    assert_response /\$\("#me"\).html/
21    
22    assert_equal [tweets(:rule)], Tweet.find(:all)
23  end

First, we assert our fixtures contain exactly what we want (line 15). Depending on your test setup, you might skip that step.

In the next step we simulate an initial rendering of the widget (line 17). This is what usually happens in a controller view.

The user dropping a tweet on the bin and thus triggering a :drop event is simulated subsequently (line 19). Now, the event is physically fired in the source widget and hopefully provokes some responses.

We then test if the widget sends back some updating JavaScript (line 20).

The last assertion ensures the bin really deleted the dumped tweet item (line 22).

Where to go?

Assertions and Apotomo::TestCase are still in development, we are collecting best-practices and feature requests, so let us know what’s missing.