Jasmine wait until HTML rendering after a function is done

Question

Lets say we have a form with a jquery validation. Now we create a simple Jasmine spec and want to test if the error message is visible if we submit an empty form.

My first step is to trigger the submit form event after that jquery validate will work and show the error messages. The time window until the error message will be displayed is really small (2ms) but too big for a Jasmine test. Currently with a setTimeout() it works but I think that is a bad way :(

I am new to Jasmine and I think there must be a better way? Something with spy?

Dummy spec for example:

describe("Lorem Impsum: ", function () {
it("Form validation shows error messages.", function () {
    $("#MyForm").submit();
    expect($(".error")).toBeVisible();
  });
});

Answer 1

Using setTimeout or setInterval for polling may not be a bad way. If the page is complicated, periodic checks are simpler, than using MutationObserver. (This is a unit test; not an application.) If you choose the polling interval short enough, the test will not be so slow. For example:

describe("Lorem Impsum: ", function () {
  it("Form validation shows error messages.", function (done) {
    $("#MyForm").submit();
    waitForElement(".error", function () {
      expect($(".error")).toBeVisible();
      done();
    });
  });
});

function waitForElement(selector, callback) {
  var interval;
  if ($(selector).length) {
    callback();
  } else {
    interval = setInterval(function () {
      if ($(selector).length) {
        clearInterval(interval);
        callback();
      }
    }, 10);
  }
}

You will need to declare and call the done callback, so that Jasmine gets notified, when the test spec has finished.