Discussion: Should we re-write template engine tests to compare against native behavior?

[theengineear]

Pros

• Makes it more obvious that we aim to emulate native behavior, always.

Cons

• Obfuscates actual behavior (rather than compare with an expectation, you compare with another unknown value).
• Need to create additional code to test our code — i.e., need to build the emulators. Tests will become longer.

Example of testing basic rendering

it('renders basic string', () => {
  const native = container => {
    const div = document.createElement('div');
    Object.assign(div, { id: 'target', textContent: 'No interpolation.' });
    container.replaceChildren();
    container.append(div);
  };
  const engine = container => {
    const result = html`<div id="target">No interpolation.</div>`;
    render(container, result);
  };
  const nativeContainer = document.createElement('div');
  const engineContainer = document.createElement('div');
  document.body.append(nativeContainer, engineContainer);
  native(nativeContainer);
  engine(engineContainer);
  assert(
    nativeContainer.childNodes.length ===
    engineContainer.childNodes.length
  );
  assert(
    nativeContainer.querySelector('#target').textContent ===
    engineContainer.querySelector('#target').textContent
  );
  nativeContainer.remove();
  engineContainer.remove();
});

… currently, this test reads as follows …

it('renders basic string', () => {
  const getTemplate = () => {
    return html`<div id="target">No interpolation.</div>`;
  };
  const container = document.createElement('div');
  document.body.append(container);
  render(container, getTemplate());
  assert(container.childNodes.length === 1);
  assert(container.querySelector('#target').textContent === 'No interpolation.');
  container.remove();
});