test(dom-to-react): update custom element with style snapshot

remarkablemark · remarkablemark · commit 92582a8e18df · 2020-12-11T21:34:43.000-05:00
diff --git a/test/__snapshots__/dom-to-react.test.js.snap b/test/__snapshots__/dom-to-react.test.js.snap
@@ -15,6 +15,14 @@ exports[`domToReact converts SVG element with viewBox attribute 1`] = `
 </svg>
 `;
 
+exports[`domToReact converts custom element with attributes 1`] = `
+<custom-element
+  class="myClass"
+  custom-attribute="value"
+  style="-o-transition: all .5s; line-height: 1;"
+/>
+`;
+
 exports[`domToReact converts multiple DOM nodes to React 1`] = `
 Array [
   <p>
@@ -52,13 +60,6 @@ exports[`domToReact does not escape <style> content 1`] = `
 />
 `;
 
-exports[`domToReact does not modify attributes on custom elements 1`] = `
-<custom-button
-  class="myClass"
-  custom-attribute="value"
-/>
-`;
-
 exports[`domToReact skips doctype and comments 1`] = `
 Array [
   <p>
@@ -71,14 +72,21 @@ Array [
 `;
 
 exports[`domToReact when React <16 removes unknown attributes 1`] = `
-<custom-button
+<custom-element
   className="myClass"
+  style={
+    Object {
+      "OTransition": "all .5s",
+      "lineHeight": "1",
+    }
+  }
 />
 `;
 
 exports[`domToReact when React >=16 preserves unknown attributes 1`] = `
-<custom-button
+<custom-element
   class="myClass"
   custom-attribute="value"
+  style="-o-transition: all .5s; line-height: 1;"
 />
 `;
diff --git a/test/dom-to-react.test.js b/test/dom-to-react.test.js
@@ -68,7 +68,7 @@ describe('domToReact', () => {
     expect(reactElement).toMatchSnapshot();
   });
 
-  it('does not modify attributes on custom elements', () => {
+  it('converts custom element with attributes', () => {
     const reactElement = domToReact(htmlToDOM(data.html.customElement));
     expect(reactElement).toMatchSnapshot();
   });
@@ -115,7 +115,7 @@ describe('domToReact replace option', () => {
         if (node.name === 'p') {
           return React.createElement('p', {}, 'replaced foo');
         }
-        if (node.name === 'custom-button') {
+        if (node.name === 'custom-element') {
           return React.createElement(
             'custom-button',
             {
diff --git a/test/helpers/data.js b/test/helpers/data.js
@@ -17,7 +17,7 @@ module.exports.html = {
   comment: '<!-- comment -->',
   doctype: '<!DOCTYPE html>',
   customElement:
-    '<custom-button class="myClass" custom-attribute="value"></custom-button>'
+    '<custom-element class="myClass" custom-attribute="value" style="-o-transition: all .5s; line-height: 1;"></custom-element>'
 };
 
 /**
