Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@open-wc/chai-dom-equals
Advanced tools
Chai Plugin to compare dom and shadow dom trees. Part of open-wc recommendations
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 :::
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);
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>');
});
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>');
});
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>');
});
FAQs
Chai Plugin to compare dom and shadow dom trees. Part of open-wc recommendations
The npm package @open-wc/chai-dom-equals receives a total of 17,500 weekly downloads. As such, @open-wc/chai-dom-equals popularity was classified as popular.
We found that @open-wc/chai-dom-equals demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.