Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
@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
Open Web Components provides a set of defaults, recommendations and tools to help facilitate your Web Component. Our recommendations include: developing, linting, testing, tooling, demoing, publishing and automating.
Usually, you don't want to literally compare dom when testing your Web Components. Additionally, when using ShadyDOM and/or ShadyCSS there will be additional classes you are not interested in. This package provides a solution for that problem.
::: 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 8,391 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
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.