use fixtures / snapshots for specs instead of JS DOM

[thescientist13]

Type of Change

• Other (please clarify below)

Summary

In our specs currently, we convert the HTML from wcc into DOM and query it via JSDOM

So for this component

const template = document.createElement('template');

template.innerHTML = `
  <footer class="footer">
    <h4>
      <a href="https://www.greenwoodjs.io/">My Blog &copy;${new Date().getFullYear()} &#9672 Built with GreenwoodJS</a>
    </h4>
  </footer>
`;

class Footer extends HTMLElement {
  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
}

export default Footer;

customElements.define('wcc-footer', Footer);

We would test it like so

import chai from 'chai';
import { JSDOM } from 'jsdom';
import { renderToString } from '../../../src/wcc.js';

const expect = chai.expect;

describe('Run WCC For ', function() {
  const LABEL = 'Single Custom Element w/ Declarative Shadow DOM';
  let dom;

  before(async function() {
    const { html } = await renderToString(new URL('./src/footer.js', import.meta.url));
    
    dom = new JSDOM(html);
  });

  describe(LABEL, function() {
      
    it('should have one top level <template> with an open shadowroot', function() {
      expect(dom.window.document.querySelectorAll('template[shadowroot="open"]').length).to.equal(1);
      expect(dom.window.document.querySelectorAll('template').length).to.equal(1);
    });

    describe('<footer> component and content', function() {
      let footer;

      before(async function() {
        footer = new JSDOM(dom.window.document.querySelectorAll('template[shadowroot="open"]')[0].innerHTML);
      });

      it('should have one <footer> tag within the <template> shadowroot', function() {
        expect(footer.window.document.querySelectorAll('footer').length).to.equal(1);
      });
  
      it('should have the expected content for the <footer> tag', function() {
        expect(footer.window.document.querySelectorAll('h4 a').textContent).to.contain(/My Blog/);
      });
    });

  });
});

But I'm curious to see if would be more pragmatic to just use fixtures instead? In other words, like in snapshot testing, capture the expected outcome as an HTML file, and just match the response to the file on disk.

Details

So for the above component test, instead of testing via DOM, we just test against a fixture file in the test directory

<wcc-footer>
  <template shadowroot="open">
    <footer class="footer">
      <h4>
        <a href="https://www.greenwoodjs.io/">My Blog &copy;${new Date().getFullYear()} &#9672 Built with GreenwoodJS</a>
      </h4>
    </footer>
  </template>
</wcc-footer>

I think it's easier to reason about and easier to edit, and should make writing tests a LOT easier. (IMO)