How do I add DOM elements in jasmine tests without using external html files?

Question

I'm writing some simple jasmine tests and I'm getting an exception since the code I'm testing is looking for a form that doesn't exist because there's no DOM when testing a js file only: $("form")[0] in the tested js file leads to:

TypeError: $(...)[0] is undefined

I read a bit about jasmine-jquery and realized I can use some html fixture with an external html file. That flow seems quite messy, since all I need to do is only to add an empty valid form so that the test (which focusing on something else) will run, something like <form></form> appending would be enough I think.

At first I thought that sandbox() function will be the solution, but it seems that it creates only divs, and I need a form.

Any simple way to add some elements by using only code in jasmine spec file?

Answer 1

The simplest solution is to add the form to the DOM by yourself in the before block and then delete it in the after block:

describe(function(){
  var form;

  beforeEach(function(){
    form = $('<form>');
    $(document.body).append(form);
  });

  it('your test', function(){


  })

  afterEach(function(){
   form.remove();
   form = null;
  });
});

Also writing your sandbox helper isn't that hard:

function sandbox(html){
  var el;

  beforeEach(function(){
    el = $(html);
    $(document.body).append(el);
  });


  afterEach(function(){
   el.remove();
   el = null;
});