title: How do you test a reactjs web app with selenium?
body: <p>I have a web app using React and I'm trying to create some tests using Selenium RC. I'm finding though that when Selenium changes the values of fields, events are not properly fired. I know this is a somewhat typical problem as evidenced by the <a href="http://code.google.com/p/selenium/wiki/FrequentlyAskedQuestions#Q:_The_%22onchange%22_event_doesn%27t_fire_after_a_call" rel="noreferrer">WebDriver FAQ</a> and I've tried a bunch of different things like using onFocus instead of onChange and making sure the focus was changed in and out, using sendKeys() vs type(), programatically calling the event, and any other suggestions I could find online, but I have not been able to get it working.</p>
  
  <p>As a simple example of what I'm trying to do, I stripped down the comment box react example. What I have is a textarea input box and a div that should be updated with the value of the textarea. Selenium can update the textarea, but when it does the div doesn't change.</p>
  
  <p>Here's my reactjs code:</p>
  
  <pre><code>/** @jsx React.DOM */
  
  var MarkdownEditor = React.createClass({
    getInitialState: function() {
      return {value: 'Original Text'};
    },
    handleChange: function() {
      this.setState({value: this.refs.textarea.getDOMNode().value});
    },
    render: function() {
      return (
        &lt;div className="MarkdownEditor"&gt;
          &lt;h3&gt;Input&lt;/h3&gt;
          &lt;textarea
            onChange={this.handleChange}
            ref="textarea"
            defaultValue={this.state.value} /&gt;
          &lt;h3&gt;Output&lt;/h3&gt;
          &lt;div
            className="content"
            id="content2",
            dangerouslySetInnerHTML={{
              __html: this.state.value
            }}
          /&gt;
        &lt;/div&gt;
      );
    }
  });
  
  React.renderComponent(&lt;MarkdownEditor /&gt;, document.getElementById('content'));
  </code></pre>
  
  <p>And here's my current Selenium test case:</p>
  
  <pre><code>import com.thoughtworks.selenium.*;
  import org.junit.After;
  import org.junit.Before;
  import org.junit.Test;
  import static org.junit.Assert.*;
  import java.util.regex.Pattern;
  import java.util.Properties;
  import junit.framework.TestCase;
  
  public class textTest extends TestCase {
  
      protected Selenium selenium;
  
      @Before
      public void setUp() throws Exception {
          Properties sysProps = System.getProperties();
          String browser = sysProps.getProperty("browser.property");
          selenium = new DefaultSelenium("localhost", 4444, "*chrome", "http://localhost/");
          selenium.start();
      }
  
      @After
      public void tearDown() throws Exception {
          selenium.stop();
      }
  
      @Test
      public void testText() throws Exception {
          selenium.open("/reactTest/index.html");
          assertEquals("Original Text", selenium.getText("id=content2"));
          selenium.focus("id=content2");
          selenium.type("css=textarea[value=\"Original Text\"]", "xxxxx");
          selenium.focus("id=content");
          selenium.runScript("$('#tatest').trigger('change')");
          assertEquals("xxxxxOriginal Text", selenium.getText("id=content2"));
          Thread.sleep(80000);
      }
  
  }
  </code></pre>
  
  <p>Edit: Code is now available at <a href="https://github.com/ilionblaze/reactTest" rel="noreferrer">https://github.com/ilionblaze/reactTest</a></p>
  
  <p>There must be some way to make this work!</p>