Topic: Using Integration to Test AJAX

I'm working on a two player game.  I have a waiting icon for when a player is waiting for an opponent.  When the second player enters, the waiting icon disappears. 

I created a simple web application to test if the icon has disappeared after an AJAX call.  I've set the root route of the site to 'site/home'.

class SiteController < ApplicationController
  def home
    puts "SiteController home"
  end

  def getOpponent
    puts "SiteController getOpponent"
    page.call 'opponent_found'
  end
end
<!-- home.rhtml -->
<html>  
  <head>
    <%= javascript_include_tag :defaults %>
    <script type="text/javascript">
      stillWaiting = true;

      function opponent_found()
      {
        $("waiting_icon").hide( );
        stillWaiting = false;
        
        <% 
          puts "opponent_found"
          puts "stillWaiting? #{stillWaiting}" 
        %>
      }
    </script>
  </head>
  <body>
    <%= image_tag 'waiting-for-opponent.gif', :id => 'waiting_icon' %>
    <%= periodically_call_remote :url => {:controller => 'site', :action => 'getOpponent'}, :frequency => 1, :condition => 'stillWaiting' %>
  </body>
</html>

And the Integration file I'm using to test this:

require 'test_helper'

class AjaxStoriesTest < ActionController::IntegrationTest
  def test_ajax_functionality
    user = open_session
    user.get '/site/home'
    user.assert_equal '/site/home', user.path

    imgs = user.css_select('img')
    puts imgs.size

    imgs.each do |img|
      puts img
    end

    puts "before xml_http_request"
    user.xml_http_request :get, 'site/getOpponent'
    puts "after xml_http_request"

    imgs = user.css_select('img')
    puts imgs.size

    imgs.each do |img|
      puts img
    end
  end
end

This is the output I get when I run this:

Output - ajax_stories_test wrote:

SiteController home
opponent_found
stillWaiting?
1
<img alt="Waiting-for-opponent" id="waiting_icon" src="/images/waiting-for-opponent.gif?1290446592" />
before xml_http_request
SiteController getOpponent
after xml_http_request
0

This is saying that my icon has completely disappeared from the page! Also why is there a number attached to the image, "waiting-for-opponent.gif?1290446592"?

Re: Using Integration to Test AJAX

AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.
<html>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Re: Using Integration to Test AJAX

Thanks for replying to my post. 

The page works when I "test" it using two different browsers, FireFox and Internet Explorer.  I just want an autonomous way to do this.

periodically_call_remote is used to call an action on the server.  The API says nothing about that it must return data nor does it say that it must be used to update a div.

This is basically just an elaborate waiting page.  But instead of redirecting the client to a different page, it calls a Javascript function on the client.

Last edited by ToddG (2011-01-04 11:13:24)