How can you perform functional tests on JavaScript

Question

I noticed that it is quite common in Rails to render back text for js requests with the text embedded within a jquery method call to insert it into the DOM.

// javascript code
$.getScript("/some_url");

// rails partial code, to make things more clear I have added some simple html
$("#some_id").text(unescape_javascript('<div id="foo">bar</div>'))

My question is how do you perform assert_select, or the equivalent, within a functional test on response text like this?

// 
class FooBarControllerTest < ...
  test "javascript response" do
     xhr :get, :new
     // how could I test the div here
     assert_select "#foo", "bar"  // this doesn't work
  end
end

** Updated code to make this more clear

Answer 1

i dont know how would you request it from rails but with ajax and jquery would go like this:

$.ajax({
        type: 'POST',
        url: 'getstring.php',
        data: '',
        success: function(server_response){
            if(server_response){
                eval(server_response);
            }
            else{

            }
        }
    });

thing you need is eval, so just put your string that hawe to be runed as javascript inside of eval();

Answer 2

After some fiddling around this works for me. The trickiest part is cleaning up all of the delimited chars such as \t,\n and \ before creating the HTML::Document object.

# wrapper method around the native assert_select method that extracts out the html
# from raw html text that is embedded within javascript code.
# ex.
#   $('body').append("<div id=\"edit_post_form_container\" class=\"active modal_form_container\">
#     <a href=\"#\" class=\"close\">
#       <img alt=\"Close\" height=\"16\" src=\"/images/close.png?1293730609\" width=\"16\" />
#     <\/a>
#     <form accept-charset=\"UTF-8\" action=\"/posts/1023110335\" .../>")
#
# assert_js_select "input[type=?][name=?]", "text", "foo[bar]", :count => 1
# assert_js_select "textarea", "Some long text"
# assert_js_select "textarea[name=?]", "post_text", "Some long text"
# assert_js_select "textarea[name=?][class=?]", ["post_text", "css_class", "Some long text"
def assert_js_select(*args, &block)
  extracted_text = @response.body.match(/(\<.*\>)/)[0].
    gsub("\\n", "").gsub("\\t", "").gsub(/\\"/, '"').gsub("\\", '')
  if extracted_text.present?
    doc = HTML::Document.new(CGI::unescapeHTML(extracted_text)).root
    args.insert(0, doc)
    assert_select(*args, &block)
  else
    assert false, "Unable to extract any html from the js code."
  end
end

Answer 3

With Rails 4.x, this works for me (the trick is to override the "document_root_element" method during the spec/test):

context "with assert_select" do
  def document_root_element
    Nokogiri::HTML::Document.parse(@html).root
  end

  it "works" do
    xhr :get, :new
    @html = response.body # or wherever the response HTML comes from
    assert_select "#foo", "bar" # should work now
  end
end