title: Testing jQuery UI "Dialog" logic using Jasmine
body: <p>In my JS view-code I am using a <a href="http://jqueryui.com/dialog/" rel="nofollow">jQuery UI Dialog</a> component to render a popup.</p>
  
  <p>I instantiate it like this:</p>
  
  <pre><code>var popupDialog = $("#myPopupDiv").dialog({
      title: "My dialog",
      dialogClass: "myDialogClass",
      create: createHandler,
      draggable: false,
      width: width,
      height: height,
      autoOpen: false
  });
  </code></pre>
  
  <p>Notice it's got autoOpen set to "false". I open it in the "create"-handler:</p>
  
  <pre><code>var createHandler = function(event, ui) {
      //Vi venter litt for å sikre at popupen er "klar"
      setTimeout(function () {
          popupDialog.dialog("open");
      }, 5);
  };
  </code></pre>
  
  <p>The open-logic is wrapped in a <code>setTimeout</code> to ensure the popup is ready.</p>
  
  <p>The code works fine in app the browser, but when I run this code using <a href="http://pivotal.github.com/jasmine/" rel="nofollow">Jasmine test-framework</a> I get an error: </p>
  
  <blockquote>
    <p>Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'</p>
  </blockquote>
  
  <p>The test actually passes, so clearly the item is rendered. But I don't like the error showing up when I run the tests!</p>
  
  <p>I suspect that since the Jasmine tests run so fast, the component has not had time to initialize itself. So <strong>how can I assure that the component is initialized?</strong> I thought putting this logic in the "create"-handler would take care of that since that event is "<em>Triggered when the dialog is created.</em>", but clearly that is not the case.</p>
  
  <p>Here is how I test it:</p>
  
  <pre><code>it("should show my popup", function () {
  
      var myPopupLink = $('.popupLink');
  
      myPopupLink.click();
  
      //Wait until popup is shown
      waitsFor(function () {
          return !$('.myDialogClass').is(":hidden");
      }, "Popupen didn't show", 1000);
  
      //Check that the DOM is as expected
      expect($('.myDialogClass .popupContentDiv')).toExist();
      expect(...
  
      //Close popup
      myPopupLink.click();
      expect($('.myDialogClass .popupContentDiv')).not.toExist();
  
  });
  </code></pre>
  
  <p>Anybody have a clue how I can verify the initialization-status of the popup-dialog? 
  Or any other workarounds?</p>
  
  <p>Thanks!</p>