title: Testing Javascript that Manipulates the DOM
body: <p>I've been looking into javascript test suites and I have found <a href="http://docs.jquery.com/QUnit" rel="noreferrer">QUnit</a> to be very interesting. I understand how to test computational code, but...</p>
  
  <p><strong>How do you test javascript applications written primarily for DOM manipulation?</strong></p>
  
  <p>it seems like testing the position/color/etc of DOM elements would be a moot point because you'd end up doing somethign like this:</p>
  
  <pre><code>$("li.my_element").css("background-color", "#f00");
  </code></pre>
  
  <p>and then in your test...</p>
  
  <pre><code>$(function() {
      module("coloring");
      test("test_my_element", function() {
          var li_element_color = $("li.my_element").css('background-color');
          equals(li_element_color, "#f00");
      });
  });
  </code></pre>
  
  <p>this just doesn't feel right because it basically just doing this:</p>
  
  <pre><code>var my_li= $("li.my_element");
  my_li.css("background-color", "#f00");
  if ( my_li.css("background-color") == "#f00" ) {
      return true;
  }
  </code></pre>
  
  <p>Am I nuts? How is this supposed to be done?</p>
  
  <h2><strong>edit</strong>: the heart of the question:</h2>
  
  <p>I guess what I'm getting at is, I need to make sure the code isn't broken before I deploy, but the vast majority of it is UI helpers and ajax. How do I test that things are appearing correctly?</p>
  
  <p>A few examples:</p>
  
  <ul>
  <li>test that a JQuery UI dialog is appearing on top of all other elements</li>
  <li>test that the drag-n-drop is working properly</li>
  <li>test that the color of a droppable changes when an element is dropped on it</li>
  <li>test that the ajax is all working properly</li>
  <li>test that there are no extraneous commas that will break IE</li>
  </ul>