Jasmine: Creating DOM elements efficiently

Jasmine specs for the frontend often need some DOM elements to work with. Because creating them is such a common task, we should have an efficient way to do it.

Let's say I need this HTML structure:

Copy<ul type="square">
  <li>item 1</li>
  <li>item 2</li>
</ul>

This card compares various approaches to fabricating DOM elements for testing.

Constructing individual elements

While you can use standard DOM functions to individually create and append elements, this is extremely verbose:

Copylet list = document.createElement('ul')
list.type = 'square'
jasmine.fixtures.appendChild(ul)
let item1 = document.createElement('li')
item1.innerText = 'item 1'
list.appendChild(item1)
let item2 = document.createElement('li')
list.appendChild(item2)

For a reader it is hard to follow which DOM structure is being created.

Parsing a HTML string

A very visual method is to embedded a string of HTML into your test. My specs often have a function htmlFixtures() that parses the HTML and returns a reference to all created elements:

Copylet [list, item1, item2] = htmlFixtures(`
  <ul type="square">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
`)

Because the effective HTML is visible in your test, reader will imediately recognize elements and how they relate to each other.

Referencing created elements

The function returns an array-like value with all created elements, in the same order they appear in the HTML string. Text nodes (like whitespace between elements) are also created, but are not part of the returned array:

Copylet [flash, link] = htmlFixtures(`
  <div class="flash">User created</div>
  <a href="/users">Go back</a>
`)

If you are not interested in all elements, you can also use object destructuring to access elements by their [id] attribute:

Copyconst { alert, login } = htmlFixtures(`
  <div id="alert">Invalid credentials</div>

  <form>
    <label for="login">User name</label>
    <input name="login" id="login">
  </form>
`)

Elements are appended automatically

Parsed elements are appended to the jasmine.fixtures container, which is cleared automatically after each test.

Example implementation

Here is is htmlFixtures() function to copy into your test suite. Feel free to tweak it to your liking!

Copyfunction htmlFixtures(html) {
  // Parse the given HTML string into an array of Node objects.
  const parser = document.createRange()
  parser.setStart(document.body, 0)
  const fragment = parser.createContextualFragment(html)
  const parsedNodes = [...fragment.childNodes]
  const parsedElements = parsedNodes.filter((node) => node instanceof Element)

  // Traverse the new subtrees in pre-order and build an array of created elements
  const collectElements = (root) => [root, [...root.children].map(collectElements)]
  const allElements = parsedElements.map((element) => {
    jasmine.fixtures.append(element)
    return collectElements(element)
  }).flat(9999)

  // Map elements by their [id] attribute
  const idMap = {}
  for (let element of allElements) {
    if (element.id) idMap[element.id] = element
  }

  // Return a magic value that works for both object destructuring (by ID)
  // and array structuring (elements in pre-order).
  return {
    ...idMap,
    [Symbol.iterator]: allElements[Symbol.iterator].bind(allElements)
  }
}

Creating elements from CSS selectors

A quick way to fabricate DOM elements is to have library create them from a CSS selector. There are several libraries that let you pass a selector like "span.foo" and turn it into a <span class="foo"> element for you:

• up.element Show archive.org snapshot (from Unpoly Show archive.org snapshot )
• jasmine-fixture Show archive.org snapshot (requires jQuery)
• dom-create-element-query-selector Show archive.org snapshot

Here is the example above using Unpoly's up.element.affix() Show archive.org snapshot function:

Copylet list = up.element.affix(jasmine.fixtures, 'ul[type=square]')
up.element.affix(list, 'li', text: 'item 1')
up.element.affix(list, 'li', text: 'item 2')

Note how every call to up.element.affix() returns a reference to the newly created element. I do not need to re-discover the individual elements after creation.

One disadvantage of this method is that a reader will not immediately recognize the nesting of the created DOM elements.

Setting { innerHTML }

An low-tech alternative to constructing individual elements is to set the { innerHTML } property of a container element. This approach makes it very clear which DOM structure is being created:

Copyjasmine.fixtures.innerHTML = `
   <ul type="square">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
`

I'm using a global jasmine.fixtures container, which is cleared automatically after each test.

One drawback is that you don't get variable references for the individual elements. For this you need to rediscover elements after setting { innerHTML }:

Copyjasmine.fixtures.innerHTML = ...
let list = jasmine.fixtures.children[0]
let [item0, item1] = list.querySelectorAll('li')