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;
});

Answer 2

Another approach is to use jasmine fixture

The concept

Here's one way to think about it:

In jQuery, you give $() a CSS selector and it finds elements on the DOM.

In jasmine-fixture, you give affix() a CSS selector and it adds those elements to the DOM.

This is very useful for tests, because it means that after setting up the state of the DOM with affix, your subject code under test will have the elements it needs to do its work.

Finally, jasmine-fixture will help you avoid test pollution by tidying up and remove everything you affix to the DOM after each spec runs.

See also: SO: dom manipulation in Jasmine test

Answer 3

You should use sandbox() to create a div and create a form element and append to sandbox, this is the safer way to jasmine take control to this fixtures in the DOM.