JS unit tests without having to copy the whole HTML into the unit test?

Question

I'm working in a project where JS unit tests are written for every function. Suppose you have JS code that does stuff for a page, like:

myProject.myPage.onDomReady = function() {
  $("#something").on("click", this.doSomething);
  $("#something-else").on("click", this.doSomethingElse);
}

In the unit test, the standard practice in the project is to copy/paste the html of the page into the js test. Like:

module("pages/my_page_test.js", {
  setup: function() {
    this.myPage = Unit.fixture('\
      <div class="container" id="my-form-container" style="display: block;">\
        <div class="container-bg"></div>\
        <div class="container-box" style="width:250px">\
        <div class="container-title">\
          <span class="container-title-text">Engage?</span>\
        </div>\
      </div>\
    ');
  }
);

Usually it's a lot more lines than that.

My question is: is this a good way to write JS unit tests for page functions? I mean you end up copying most of the HTML page into your JS just for the test. And every time you change the HTML, in theory you're suppose to update the HTML in the test as well.

Is there a better way?

My unit tests that need significant amounts of HTML run in a web page that has the desired HTML in the page. — jfriend00, Apr 18 '14 at 00:06
[QUnit Cookbook - Keeping Tests Atomic](https://qunitjs.com/cookbook/#keeping-tests-atomic) — katranci, Apr 18 '14 at 08:13

score 0 · Answer 1 · edited May 23 '17 at 12:05

Use one of the following methods:

Reference the HTML via the DOM:

var foo = Unit.fixture(document.getElementById("foo").outerHTML)

Generate the markup via the jQuery constructor

var foo = Unit.fixture($("<span/>", {"class":"foo", "id":"bar", "html": "<span/>"}).get(0).outerHTML )

Generate the markup via strings with Unicode escapes

var foo = Unit.fixture("<label><input type=|radio| name=|bar| value=|baz|>bop</label>").replace(/\|/g,"\u0022")

JS unit tests without having to copy the whole HTML into the unit test?

1 Answers1