@open-wc/chai-dom-equals - npm Package Compare versions

Comparing version 0.10.11 to 0.11.0

CHANGELOG.md

		@@ -6,2 +6,13 @@ # Change Log

		# [0.11.0](https://github.com/open-wc/open-wc/compare/@open-wc/chai-dom-equals@0.10.11...@open-wc/chai-dom-equals@0.11.0) (2019-04-08)


		### Features

		* semantic-dom-diff: add support for snapshot testing ([f7a675a](https://github.com/open-wc/open-wc/commit/f7a675a))





		## [0.10.11](https://github.com/open-wc/open-wc/compare/@open-wc/chai-dom-equals@0.10.10...@open-wc/chai-dom-equals@0.10.11) (2019-04-06)
		@@ -8,0 +19,0 @@

package.json

		{
		"name": "@open-wc/chai-dom-equals",
		"version": "0.10.11",
		"version": "0.11.0",
		"description": "Chai Plugin to compare dom and shadow dom trees. Part of open-wc recommendations",
		@@ -29,3 +29,3 @@ "author": "open-wc",
		"dependencies": {
		"@open-wc/semantic-dom-diff": "^0.9.7",
		"@open-wc/semantic-dom-diff": "^0.10.0",
		"@types/chai": "^4.1.7"
		@@ -35,5 +35,5 @@ },
		"@bundled-es-modules/chai": "^4.2.0",
		"@open-wc/testing-helpers": "^0.8.5",
		"@open-wc/testing-karma": "^1.0.2",
		"@open-wc/testing-karma-bs": "^1.0.2",
		"@open-wc/testing-helpers": "^0.8.6",
		"@open-wc/testing-karma": "^1.1.0",
		"@open-wc/testing-karma-bs": "^1.0.3",
		"@open-wc/testing-wallaby": "^0.1.12",
		@@ -43,3 +43,3 @@ "mocha": "^5.0.0",
		},
		"gitHead": "5b8ec8d320bb2a171c323702204ce0a47d42fb54"
		"gitHead": "87937f313855458c9cb34d72e68bfc4817fd0d93"
		}

README.md

		@@ -11,69 +11,4 @@ # Chai Dom Equals

		`chai-dom-test` enables you to easily test the rendered dom of test fixture against a snapshot. It integrates [semantic-dom-diff](https://www.npmjs.com/package/@open-wc/semantic-dom-diff) with chai.
		> Note: this package is deprecated, usage `@open-wc/semantic-dom-diff` which exposes a chai plugin now.

		## Manual Setup

		Add the following after chai is loaded

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

		chai.use(chaiDomEquals);
		```

		## Test dom of an element
		```js
		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
		```js
		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:

		```javascript
		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>');
		});
		```

		<script>
		@@ -80,0 +15,0 @@ export default {

@open-wc/chai-dom-equals - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics

Dependency changes