title: Testing DOM using a combination of Jasmine, JQuery Mobile and an Async AJAX request
body: <p>I'm currently working on a mobile application which i decided to realize using JQuery Mobile. However, since it'll be an official app it requires me to test it and I decided to go with Jasmine which I learned to deal with at school.</p>
  
  <p>Currently I have both a client and server side which communicates using AJAX (<code>$.getJSON</code>) requests.</p>
  
  <p>When one of these AJAX requests gets forwarded to its <code>callback</code> method it'll call an <code>Notification</code> class to implement a <code>div</code> with the notification inside of it.</p>
  
  <p>My problem at the moment is that it always seemed to be working when I was using the following code:</p>
  
  <pre><code>window.setTimeout(function () {
      var expectedResult = "error";
      var result = $("#test .ui-content .contentContainer .notification").text();
      expect(result).toEqual(expectedResult);
  }, 4000);
  </code></pre>
  
  <p>However, after a few days I started on a new module, and edited these values it kept working which would be incredibly wrong since its old - non existing - code.</p>
  
  <p>So I noticed this unit test never actually worked.</p>
  
  <p>So I started looking for alternative methods and found the <code>runs</code> and <code>waitsFor</code> functions, but I cant seem to get them working.</p>
  
  <p>So here is a test:</p>
  
  <pre><code>it('should display an error when trying to add a new contact', function () {
      runs(function () {
          var contact = new Contact();
          contact.addContact();
      });
  
      waitsFor(function () {
          expect($("#test .ui-content .contentContainer .notification")).toBeVisible();
      }, 5000);
  
      var expectedResult = "asdf";
      var result = $("#test .ui-content .contentContainer .notification").text();
      expect(result).toEqual(expectedResult);
  });
  </code></pre>
  
  <p>callback method:</p>
  
  <pre><code>this.addContact_callback = function (data) {
      $('#createContactForm')[0].reset();
      $('.ui-dialog').dialog('close');
      window.setTimeout(function () {
          (new Contact()).retrieveContactList();
          (new NotificationBox()).show(data.message[0], data.message[1]);
      }, 250)
  };
  </code></pre>
  
  <p>And my notification:</p>
  
  <pre><code>function NotificationBox() {
      this.show = function (message, type) {
          var activePage = $("body .ui-page-active").attr("id");
          var create = "&lt;div class='notification " + type + "'&gt;" + message + "&lt;/div&gt;";
          $("#" + activePage + " .ui-content .contentContainer .notification").remove();
          $("#" + activePage + " .ui-content .contentContainer").prepend(
              $(create).hide().fadeIn('slow').delay(2500).fadeOut('slow', function () {
                  $(this).remove();
              })
          );
      };
  }
  </code></pre>
  
  <p>I hope someone will be able to provide me a solution to this major problem.</p>
  
  <p>Yours Sincerely,
  Larssy1</p>