Test coverage for mapping elements

[sidiousvic]

Where

__tests__

Rationale

Let's look at examples/todo, in the TodoList component:

function TodoList(list) {
  // event listeners
  document.addEventListener("click", toggle);
  document.addEventListener("mousedown", scaleDown);
  document.addEventListener("mouseup", scaleUp);
  document.addEventListener("click", trash);
  const todoItems = list.map((item) => {
    return `
      <h2 data-phantom="${[item.done, list.length]}" class="todo-item" id="${
      item.id
    }">${item.done ? "✅&nbsp;&nbsp;" : "❌&nbsp;&nbsp;"}${
      item.text
    }<p class="trash" id="trash-${item.id}">🗑</p></h2>`;
  });

  return `
    <div data-phantom=${list.length} id="todo-list-div">
      ${todoItems}
    </div>

  `;
}

Rendering mapped lists elements semantically is a coveted feature from frameworks like React and Vue. phantom has the capability (rudimentary, but works), but there is currently no tests coverage for it.

Where to start

Start simple. You can use a small example for an initial test:

function listTest() {
  const list = ["1","2","3"]
  const elementList = list.map((item) => {
    return `<h1>${item}</h1>`;
  });

  return `
    <div id="list-test">
      ${elementList}
    </div>
  `;
}

You can take several approaches to test this component:

1. One is to make a mock DOM string which would be your expected value:

const expected = `
    <div id="list-test">
      <h1>"1"</h1>
      <h1>"2"</h1>
      <h1>"3"</h1>
    </div>
  `;

And compare it to the resulting DOM element after rendering listTest() with phantom./

2. Another solution is to simply render listTest() and check the DOM programatically. Pseudocode:

• Render a simple listTest() component inside a phantomComponent (refer to README and/or examples)
• Select the outermost element that listTest() rendered to the DOM
• Check that it has equal length to the original list variable before mapping
• Check that there are no stray commas, textNodes, etc
• Check any other edge cases

Try also, at your own pace, to familiarize yourself with the phantom engine in phantom.ts. There is currently a TODO: line where mapped elements are handled. That will be its own issue as well. Any ideas are welcome.