How do you write a functional / controller test to check for content added via an AJAX call?

Question

Test

def test_generateCashFlowStmt
    get :getDateRangeForCashFlowStmt
    xhr :post,
      :generate_cash_flow_stmt, 
      {:fromDate =>  {:year=>"2009", :month => "3", :day=>"1"},
      :toDate => {:year=>"2009", :month => "3", :day=>"31"} }

    table = [ ....       ]
    assert_equal table, formatCashFlowStatementAsTable( assigns(:cashFlowStmt))
    assert_tag :tag => "div", :children => {:count => 1, :only => {:tag=>"table"} }
  end

Controller Action

def generate_cash_flow_stmt
      puts params
      fromDate = Date.civil params[:fromDate]["year"].to_i, params[:fromDate]["month"].to_i, params[:fromDate]["day"].to_i
      toDate = Date.civil params[:toDate]["year"].to_i, params[:toDate]["month"].to_i, params[:toDate]["day"].to_i 

      @cashFlowStmt = CashFlowStatement.new(fromDate, toDate)
      render :partial => "cash_flow_stmt", :layout => false
  end

View

<% form_remote_tag(:loading => "Element.show('progress-indicator');",
     :update => "div_results",
     :complete => "Element.hide('progress-indicator');",
     :url=>{:action=>'generate_cash_flow_stmt'}) do %>
...
<% end %>
<div id="div_results">

The test fails at the last check, where I check if the div content holder is populated with the table as a result of the call to generate_cash_flow_stmt access. Although I see the table being displayed in the browser, the 'View Source' action shows a blank div tag. What gives?

Answer 1

The View Source showing a blank div is expected. AJAX calls update the dom, but don't change the original source. You can best view the DOM using the Firebug.

As for the test: The xhr :post call will not trigger the Ajax.Updater and therefore actually isn't updating the page div. (The Ajax.Updater is what generates the xhr call. By initiating the call manually in the test, no such event happens.) I also don't believe that functional tests actually track and update the DOM or execute the javascript.

To get a passing test, you should generate just the xhr request (don't do the get :getDateRangeForCashFlowStmt) and then confirm that it returns the appropriate partial. Since the Rails & Prototype are well tested, you should be able to rely that the form_remote_tag and the Ajax.Updater will do what they are supposed to and build your final page.

Answer 2

You don't want to test javascript in your functional tests. Functional tests does not cover javascript at all.

You could use something like Selenium to test your javascript. Selenium are basically tests that tries to do things in browsers. And browsers are known to support javascript a lot better than Rails' functional tests ; )