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

Comparing version 0.17.10 to 0.18.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.18.0](https://github.com/open-wc/open-wc/compare/@open-wc/semantic-dom-diff@0.17.10...@open-wc/semantic-dom-diff@0.18.0) (2020-09-11)
+
+
+### Features
+
+* **semantic-dom-diff:** diff Scoped Element tags correctly into Shadow DOM snapshots ([4385957](https://github.com/open-wc/open-wc/commit/43859579bd6131e205130cdf90021fce3fd94b20))
+
+
+
+
+
 ## [0.17.10](https://github.com/open-wc/open-wc/compare/@open-wc/semantic-dom-diff@0.17.9...@open-wc/semantic-dom-diff@0.17.10) (2020-08-27)
@@ -8,0 +19,0 @@

get-diffable-html.js

@@ -181,4 +181,11 @@ const DEFAULT_IGNORE_TAGS = ['script', 'style', 'svg'];
   /** @param {Element} el */
+  function getLocalName(el) {
+    // Use original tag if available via data-tag-name attribute (use-case for scoped elements)
+    // See packages/scoped-elements for more info
+    return el.getAttribute('data-tag-name') || el.localName;
+  }
+
+  /** @param {Element} el */
   function printOpenElement(el) {
-    text += `${getIndentation()}<${el.localName}${getAttributesString(el)}>\n`;
+    text += `${getIndentation()}<${getLocalName(el)}${getAttributesString(el)}>\n`;
   }
@@ -211,7 +218,7 @@
   function printCloseElement(el) {
-    if (el.localName === 'diff-container' || VOID_ELEMENTS.includes(el.localName)) {
+    if (getLocalName(el) === 'diff-container' || VOID_ELEMENTS.includes(getLocalName(el))) {
       return;
     }
 
-    text += `${getIndentation()}</${el.localName}>\n`;
+    text += `${getIndentation()}</${getLocalName(el)}>\n`;
   }
@@ -218,0 +225,0 @@

package.json

 {
   "name": "@open-wc/semantic-dom-diff",
-  "version": "0.17.10",
+  "version": "0.18.0",
   "publishConfig": {
@@ -33,3 +33,3 @@ "access": "public"
   },
-  "gitHead": "aeb07b36e9651d4c5c5770f4dd28c44042bb90c6"
+  "gitHead": "078340940f7ec6a7e459b8a22bf00e2b5bddfaff"
 }

README.md

@@ -292,1 +292,87 @@ ---
 ```
+
+**[Scoped elements](https://open-wc.org/scoped-elements/)**
+
+You might want to ignore scoped elements when working with _Shadow DOM snapshots_, like so:
+
+```js
+import { MyButton } from '@somewhere/my-button';
+
+class MyElement extends ScopedElementsMixin(LitElement) {
+  static get scopedElements() {
+    return {
+      'my-button': MyButton,
+    };
+  }
+  render() {
+    return html`
+      <p>Here's my button</p>
+      <my-button>Hey!</my-button>
+    `;
+  }
+}
+
+window.customElements.define('my-element', MyElement);
+
+it('renders correctly', async () => {
+  const el = await fixture(`
+      <my-custom-element>
+      </my-custom-element>
+  `);
+
+  expect(el).shadowDom.to.equalSnapshot({
+    ignoreTags: [el.constructor.getScopedTagName('my-button', el.constructor.scopedElements)],
+  });
+});
+```
+
+This example will save the following snapshot:
+
+```html
+<my-custom-element>
+  <p>
+    Here's my button
+  </p>
+</my-custom-element>
+```
+
+However, what if you actually care about testing what goes into scoped elements?
+
+In that case, scoped elements should not be ignored, but diffed in snapshots correctly with their original tag name instead. Our differ will take that into account when making Shadow DOM snapshots, by default. Following the previous example:
+
+```js
+it('renders correctly', async () => {
+  const el = await fixture(`
+      <my-custom-element>
+      </my-custom-element>
+  `);
+
+  expect(el).shadowDom.to.equalSnapshot();
+});
+```
+
+This example will save this snapshot:
+
+```html
+<my-custom-element>
+  <p>
+    Here's my button
+  </p>
+  <my-button data-tag-name="my-button">
+    Hey!
+  </my-button>
+</my-custom-element>
+```
+
+With the actual implementation of scoped elements, without ignoring its tags or if our differ wouldn't check them by default, the test snapshot would be produced with scoped element tags with different random numbers _every time_:
+
+```html
+<my-custom-element>
+  <p>
+    Here's my button
+  </p>
+  <my-button-23443 data-tag-name="my-button">
+    Hey!
+  </my-button-23443>
+</my-custom-element>
+```

No alert changes

Improved metrics

Total package byte prevSize

66869

4.14%

Lines of code

670

0.9%

Number of lines in readme file

378

29.45%

No dependency changes