@open-wc/semantic-dom-diff - npm Package Compare versions

Comparing version 0.13.21 to 0.14.0

chai-dom-diff.js

@@ -125,3 +125,3 @@ // @ts-nocheck
     }
-    return assertHtmlEqualsSnapshot(html, options);
+    return assertHtmlEqualsSnapshot.call(this, html, options);
   }
@@ -133,18 +133,25 @@
   chai.assert.dom = {
-    equal: (actualEl, expectedHTML, options) =>
-      assertHtmlEquals(getDomHtml(actualEl), expectedHTML, options),
-    equalSnapshot: (actualEl, options) => assertHtmlEqualsSnapshot(actualEl, options),
+    equal(actualEl, expectedHTML, options) {
+      return assertHtmlEquals.call(this, getDomHtml(actualEl), expectedHTML, options);
+    },
+    equalSnapshot(actualEl, options) {
+      return assertHtmlEqualsSnapshot.call(this, actualEl, options);
+    },
   };
   chai.assert.lightDom = {
-    equal: (actualEl, expectedHTML, options) =>
-      assertHtmlEquals(getLightDomHtml(actualEl), expectedHTML, options),
-    equalSnapshot: (actualEl, options) =>
-      assertHtmlEqualsSnapshot(getLightDomHtml(actualEl), options),
+    equal(actualEl, expectedHTML, options) {
+      return assertHtmlEquals.call(this, getLightDomHtml(actualEl), expectedHTML, options);
+    },
+    equalSnapshot(actualEl, options) {
+      return assertHtmlEqualsSnapshot.call(this, getLightDomHtml(actualEl), options);
+    },
   };
   chai.assert.shadowDom = {
-    equal: (actualEl, expectedHTML, options) =>
-      assertHtmlEquals(getShadowDomHtml(actualEl), expectedHTML, options),
-    equalSnapshot: (actualEl, options) =>
-      assertHtmlEqualsSnapshot(getShadowDomHtml(actualEl), options),
+    equal(actualEl, expectedHTML, options) {
+      return assertHtmlEquals.call(this, getShadowDomHtml(actualEl), expectedHTML, options);
+    },
+    equalSnapshot(actualEl, options) {
+      return assertHtmlEqualsSnapshot.call(this, getShadowDomHtml(actualEl), options);
+    },
   };
 };

CHANGELOG.md

@@ -6,2 +6,19 @@ # Change Log
 
+# [0.14.0](https://github.com/open-wc/open-wc/compare/@open-wc/semantic-dom-diff@0.13.21...@open-wc/semantic-dom-diff@0.14.0) (2019-08-18)
+
+
+### Bug Fixes
+
+* use chai instead of @bundled-es-modules/chai ([f9d19bb](https://github.com/open-wc/open-wc/commit/f9d19bb))
+* **semantic-dom-diff:** fix snapshot error messages ([0656c1c](https://github.com/open-wc/open-wc/commit/0656c1c))
+
+
+### Features
+
+* add type definition files for testing ([462a29f](https://github.com/open-wc/open-wc/commit/462a29f))
+
+
+
+
+
 ## [0.13.21](https://github.com/open-wc/open-wc/compare/@open-wc/semantic-dom-diff@0.13.20...@open-wc/semantic-dom-diff@0.13.21) (2019-08-05)
@@ -8,0 +25,0 @@

package.json

 {
   "name": "@open-wc/semantic-dom-diff",
-  "version": "0.13.21",
+  "version": "0.14.0",
   "description": "To compare dom and shadow dom trees. Part of open-wc recommendations",
@@ -27,7 +27,7 @@ "author": "open-wc",
   "devDependencies": {
-    "@bundled-es-modules/chai": "^4.2.0",
-    "@open-wc/testing-helpers": "^1.1.7",
+    "@open-wc/testing-helpers": "^1.2.0",
+    "chai": "^4.2.0",
     "mocha": "^5.0.0"
   },
-  "gitHead": "4c6333b828394f8b4720f50f7740d01ec2ae1ed4"
+  "gitHead": "a99bbc7dba2d29ac32127089995e0accbb6a2da5"
 }

README.md

@@ -12,13 +12,17 @@ # Semantic Dom Diff
 ## Manual Setup
+
 ```bash
-yarn add @open-wc/semantic-dom-diff --dev
+npm i -D @open-wc/semantic-dom-diff
 ```
-`semantic-dom-diff` allows diffing chunks of dom or HTML for semanticaly equality:
+
+`semantic-dom-diff` allows diffing chunks of dom or HTML for semantic equality:
+
 - whitespace and newlines are normalized
 - tags and attributes are printed on individual lines
 - comments are removed
-- style, script and svg contents are removed
+- style, script and SVG contents are removed
 - tags, attributes or element's light dom can be ignored through configuration
 
 ## Chai Plugin
+
 While `semantic-dom-diff` can be used standalone (see below), it most commonly used as a Chai plugin.
@@ -29,13 +33,17 @@
 
-  > If you are using `@open-wc/testing` this is already done for you.
-  ```javascript
-  import { chai } from '@bundled-es-modules/chai';
-  import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
+> If you are using `@open-wc/testing` this is already done for you.
 
-  chai.use(chaiDomDiff);
-  ```
+```javascript
+import 'chai/chai.js';
+import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
+
+window.chai.use(chaiDomDiff);
+```
+
 </details>
 
 ### Assertion Styles
+
 The Chai plugin supports both the BDD (`expect`) and TDD (`assert`) APIs.
+
 ```javascript
@@ -45,4 +53,4 @@ expect(el).dom.to.equal('<div></div>');
 
-expect(el).dom.to.equal('<div foo="bar"></div>', {ignoreAttributes: ['foo']});
-assert.dom.equal(el, '<div foo="bar"></div>', {ignoreAttributes: ['foo']});
+expect(el).dom.to.equal('<div foo="bar"></div>', { ignoreAttributes: ['foo'] });
+assert.dom.equal(el, '<div foo="bar"></div>', { ignoreAttributes: ['foo'] });
 
@@ -57,2 +65,3 @@ expect(el).lightDom.to.equal('<div></div>');
 ### Setting up your dom for diffing
+
 You can set up our chai plugin to diff different types of DOM:
@@ -81,5 +90,5 @@
 
-  expect(el).dom // dom is <my-element><div>light dom content</div></my-element>
-  expect(el).lightDom // dom is <div>light dom content</div>
-  expect(el).shadowDom // dom is <p>shadow content</p>
+  expect(el).dom; // dom is <my-element><div>light dom content</div></my-element>
+  expect(el).lightDom; // dom is <div>light dom content</div>
+  expect(el).shadowDom; // dom is <p>shadow content</p>
 });
@@ -89,4 +98,5 @@ ```
 ### Manual diffing
-You can use the chai plugin to manually diff chunks of dom. The dom is diffed semantically: whitespace, newlines etc. are normalized.
 
+You can use the chai plugin to manually diff chunks of dom. The dom is diffed semantically: whitespace, newlines, etc. are normalized.
+
 ```javascript
@@ -120,2 +130,3 @@ class MyElement extends HTMLElement {
 ### Snapshot testing
+
 The most powerful feature of `semantic-dom-diff` is the ability to test and manage snapshots of your web components.
@@ -167,3 +178,3 @@
 
-Snapshots are stored in the `__snapshots__` folder in your project, using the most top level `describe` as the name for your snapshots file.
+Snapshots are stored in the `__snapshots__` folder in your project, using the most top-level `describe` as the name for your snapshots file.
 
@@ -178,6 +189,5 @@ #### Updating a snapshot
 
-
 #### Cleaning up unused snapshots
 
-After refactoring there might be leftover snapshot files which are unused. You can run karma with the `--prune-snapshots` flag to clean these up.
+After refactoring, there might be unused and leftover snapshot files. You can run karma with the `--prune-snapshots` flag to clean these up.
 
@@ -195,9 +205,9 @@ **Ignoring tags and attributes**
   `);
-  
+
   expect(el).dom.to.equal('<div>Hey</div>', {
-    ignoreAttributes: ['my-random-attribute']
+    ignoreAttributes: ['my-random-attribute'],
   });
 
   expect(el).dom.to.equalSnapshot({
-    ignoreAttributes: ['my-random-attribute']
+    ignoreAttributes: ['my-random-attribute'],
   });
@@ -219,11 +229,7 @@ });
   expect(el).dom.to.equal('<div>Hey</div>', {
-    ignoreAttributes: [
-      { tags: ['input'], attributes: ['id'] }
-    ]
+    ignoreAttributes: [{ tags: ['input'], attributes: ['id'] }],
   });
 
   expect(el).dom.to.equalSnapshot({
-    ignoreAttributes: [
-      { tags: ['input'], attributes: ['id'] }
-    ]
+    ignoreAttributes: [{ tags: ['input'], attributes: ['id'] }],
   });
@@ -248,7 +254,7 @@ });
   expect(el).dom.to.equal('<div>Hey</div>', {
-    ignoreTags: ['my-custom-element']
+    ignoreTags: ['my-custom-element'],
   });
 
   expect(el).dom.to.equalSnapshot({
-    ignoreTags: ['my-custom-element']
+    ignoreTags: ['my-custom-element'],
   });
@@ -260,3 +266,3 @@ });
 
-When working with web components you may find that they sometimes render to their light dom, for example to meet some accessibility requirements. We don't want to ignore the tag completely, as we would then not be able to test if we did render the tag.
+When working with web components you may find that they sometimes render to their light dom, for example, to meet some accessibility requirements. We don't want to ignore the tag completely, as we would then not be able to test if we did render the tag.
 
@@ -278,3 +284,4 @@ We can ignore just it's light dom:
   // ignore id attributes on input elements
-  expect(el).dom.to.equal(`
+  expect(el).dom.to.equal(
+    `
     <div>
@@ -284,6 +291,8 @@ <my-custom-input id="myInput"></my-custom-input>
     </div>
-  `, { ignoreChildren: ['my-custom-element'] });
+  `,
+    { ignoreChildren: ['my-custom-element'] },
+  );
 
   expect(el).dom.to.equalSnapshot({
-    ignoreChildren: ['my-custom-element']
+    ignoreChildren: ['my-custom-element'],
   });
@@ -293,2 +302,24 @@ });
 
+**TypeScript**
+
+When working with typescript you may notice that the types are not correct for
+
+```js
+expect(el).dom.to.equal('<div>Hey</div>', {
+  ignoreTags: ['my-custom-element'],
+});
+```
+
+e.g. the 2nd parameter is expected to be a string. Unfortunately, we currently can not change this.
+For now you will need to ignore types if you want to provide extra options.
+
+```js
+// @ts-ignore
+expect(el).dom.to.equal('<div>Hey</div>', {
+  ignoreTags: ['my-custom-element'],
+});
+```
+
+We plan to change and include it in the next [breaking testing release](https://github.com/open-wc/open-wc/projects/1).
+
 <script>
@@ -295,0 +326,0 @@ export default {

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

50884

increased by3.84%

Number of package files

9

increased by12.5%

Lines of code

452

increased by5.61%

Number of lines in readme file

320

increased by10.73%

No dependency changes