@open-wc/chai-dom-equals

Testing Chai Dom Equals

Part of Open Web Component Recommendation open-wc Recommendation open-wc

We want to provide a good set of defaults on how to facilitate your web component.

Comparing dom literally is usually not what you want when testing components. Additionally, when using ShadyDOM and/or ShadyCSS there will be additional classes you are not interested in.

::: tip Info This is part of the default open-wc recommendation :::

Manual Setup

Add the following after chai is loaded

import { chai } from '@bundled-es-modules/chai';
import { chaiDomEquals } from '@open-wc/chai-dom-equals';

chai.use(chaiDomEquals);

Test dom of an element

it('has the following dom', async () => {
  const el = await fixture(`<div><!-- comment --><h1>${'Hey'}  </h1>  </div>`);
  expect(el).dom.to.equal('<div><h1>Hey</h1></div>');
});

Test shadow dom of an element

it('has the following shadow dom', async () => {
  const tag = defineCE(class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
      this.shadowRoot.innerHTML = '<p>  shadow content</p> <!-- comment --> <slot></slot>';
    }
  });
  const el = await fixture(`<${tag}></${tag}>`);
  expect(el).shadowDom.to.equal('<p>shadow content</p><slot>');
});

Literal matching

By default dom is diffed 'semantically'. Differences in whitespace, newlines, attributes/class order are ignored and style, script and comment nodes are removed.

If you want to match literally instead you can use some of the provided utilities to handle diffing on browsers with the shadow dom polyfill:

import { getOuterHtml, getCleanedShadowDom } from '@open-wc/chai-dom-equals';

it('literally equals', () => {
  const tag = defineCE(class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
      this.shadowRoot.innerHTML = '<p>  shadow content</p> <!-- comment --> <slot></slot>';
    }
  });
  const el = await fixture(`<${tag}></${tag}>`);
  const outerHTML = getOuterHtml(el);
  const innerHTML = getCleanedShadowDom(el);

  expect(outerHTML).to.equal(`<${tag}></${tag}>`);
  expect(innerHTML).to.equal('<p>  shadow content</p> <!-- comment --> <slot></slot>');
});