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

Comparing version 0.7.4 to 0.8.0

chai-dom-equals.js

@@ -1,2 +0,2 @@
-import { getSemanticDomDiff } from '@open-wc/semantic-dom-diff';
+import { getDiffableSemanticHTML } from '@open-wc/semantic-dom-diff';
 
@@ -53,2 +53,4 @@ /**
   // can not be an arrow function as it gets rebound
+  // TODO: this is here for backwards compatibility, removal will be
+  // a breaking change
   chai.Assertion.addProperty('semantically', function shadowDom() {
@@ -62,56 +64,30 @@ new chai.Assertion(this._obj.nodeType).to.equal(1);
   const domEquals = _super => function handleDom(value, ...args) {
-    if (!utils.flag(this, 'semantically') && utils.flag(this, 'dom')) {
-      const expected = getOuterHtml(this._obj);
-      this.assert(
-        value === expected,
-        'expected dom #{exp} to equal #{act}',
-        'expected dom #{exp} to not equal #{act}',
-        expected,
-        value,
-      );
-    } else if (!utils.flag(this, 'semantically') && utils.flag(this, 'shadowDom')) {
-      const expected = getCleanedShadowDom(this._obj);
-      this.assert(
-        value === expected,
-        'expected shadow dom #{exp} to equal #{act}',
-        'expected shadow dom #{exp} to not equal #{act}',
-        expected,
-        value,
-      );
-    } else if (utils.flag(this, 'semantically') && utils.flag(this, 'dom')) {
-      const result = getSemanticDomDiff(value, getOuterHtml(this._obj));
-      const message = result ? result.message : '';
-      const path = result ? result.path : '';
-      const normalizedHTML = result ? result.normalizedRightHTML : '';
-      this.assert(
-        result === null,
-        () => {
-          /* eslint-disable no-console */
-          console.log('Snapshot changed, want to accept the change?');
-          console.log('Updated Snapshot:');
-          console.log('');
-          console.log(normalizedHTML);
-          /* eslint-enable no-console */
-          return `expected dom to be semantically equal\n- diff found: ${message}\n- in path: ${path}`;
-        },
-        'expected dom to not be semantically equal',
-      );
-    } else if (utils.flag(this, 'semantically') && utils.flag(this, 'shadowDom')) {
-      const result = getSemanticDomDiff(value, getCleanedShadowDom(this._obj));
-      const message = result ? result.message : '';
-      const path = result ? result.path : '';
-      const normalizedHTML = result ? result.normalizedRightHTML : '';
-      this.assert(
-        result === null,
-        () => {
-          /* eslint-disable no-console */
-          console.log('Snapshot changed, want to accept the change?');
-          console.log('Updated Snapshot:');
-          console.log('');
-          console.log(normalizedHTML);
-          /* eslint-enable no-console */
-          return `expected shadow dom to be semantically equal\n- diff found: ${message}\n- in path: ${path}`;
-        },
-        'expected shadow dom to not be semantically equal',
-      );
+    if (utils.flag(this, 'dom')) {
+      const expectedHTML = getDiffableSemanticHTML(value);
+      const actualHTML = getDiffableSemanticHTML(getOuterHtml(this._obj));
+
+      // use chai's built-in string comparison, log the updated snapshot on error
+      try {
+        new chai.Assertion(actualHTML).to.equal(expectedHTML);
+      } catch (error) {
+        console.log('Snapshot changed, want to accept the change:');
+        console.log('');
+        console.log(actualHTML);
+        throw error;
+      }
+
+    } else if (utils.flag(this, 'shadowDom')) {
+      const expectedHTML = getDiffableSemanticHTML(value);
+      const actualHTML = getDiffableSemanticHTML(getCleanedShadowDom(this._obj));
+
+      // use chai's built-in string comparison, log the updated snapshot on error
+      try {
+        new chai.Assertion(actualHTML).to.equal(expectedHTML);
+      } catch (error) {
+        console.log('Snapshot changed, want to accept the change:');
+        console.log('');
+        console.log(actualHTML);
+        throw error;
+      }
+
     } else {
@@ -118,0 +94,0 @@ _super.apply(this, [value, ...args]);

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.8.0](https://github.com/open-wc/open-wc/tree/master/packages/chai-dom-equals/compare/@open-wc/chai-dom-equals@0.7.4...@open-wc/chai-dom-equals@0.8.0) (2018-12-29)
+
+
+### Features
+
+* **chai-dom-equals:** improve chai-dom-equals error reporting ([#111](https://github.com/open-wc/open-wc/tree/master/packages/chai-dom-equals/issues/111)) ([2017cba](https://github.com/open-wc/open-wc/tree/master/packages/chai-dom-equals/commit/2017cba))
+
+
+
+
+
 ## [0.7.4](https://github.com/open-wc/open-wc/tree/master/packages/chai-dom-equals/compare/@open-wc/chai-dom-equals@0.7.3...@open-wc/chai-dom-equals@0.7.4) (2018-12-23)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@open-wc/chai-dom-equals",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "Chai Plugin to compare dom and shadow dom trees. Part of open-wc recommendations",
@@ -20,3 +20,3 @@ "author": "open-wc",
   "dependencies": {
-    "@open-wc/semantic-dom-diff": "^0.6.2",
+    "@open-wc/semantic-dom-diff": "^0.7.0",
     "@types/chai": "^4.1.7"
@@ -33,3 +33,3 @@ },
   },
-  "gitHead": "1fcd3ec4961266e47e1061bceddfb40737330afe"
+  "gitHead": "09fab1de027f048221088af5dd20b9cb73c6e58a"
 }

README.md

@@ -33,4 +33,3 @@ # Testing Chai Dom Equals
   const el = await fixture(`<div><!-- comment --><h1>${'Hey'}  </h1>  </div>`);
-  expect(el).dom.to.equal('<div><!-- comment --><h1>Hey  </h1>  </div>');
-  expect(el).dom.to.semantically.equal('<div><h1>Hey</h1></div>');
+  expect(el).dom.to.equal('<div><h1>Hey</h1></div>');
 });
@@ -53,5 +52,33 @@ ```
   const el = await fixture(`<${tag}></${tag}>`);
-  expect(el).shadowDom.to.equal('<p>  shadow content</p> <!-- comment --> <slot></slot>');
-  expect(el).shadowDom.to.semantically.equal('<p>shadow content</p><slot>');
+  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 commend 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>');
+});
+
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16544

increased by0.41%

Number of lines in readme file

82

increased by46.43%

Worsened metrics

Lines of code

116

decreased by-19.44%

Dependency changes

• + Added@bundled-es-modules/diffable-html@4.0.0(transitive)

• + Added@open-wc/semantic-dom-diff@0.7.14(transitive)

• - Removed@bundled-es-modules/deep-diff@1.0.2-rc.1(transitive)

• - Removed@open-wc/semantic-dom-diff@0.6.2(transitive)

• Updated@open-wc/semantic-dom-diff@^0.7.0