Use outerHTML for html() on DOM nodes (#1042)

Shopify · Sep 30, 2019 · 9ffb958 · 9ffb958
1 parent 36c43bd
commit 9ffb958
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/packages/react-hydrate/src/test/e2e.test.tsx b/packages/react-hydrate/src/test/e2e.test.tsx
@@ -85,7 +85,7 @@ describe('react-hydrate', () => {
     );
 
     expect(clientHydrator.find('div')).toHaveReactProps({
-      dangerouslySetInnerHTML: {__html: serverHydrator.find('div')!.html()},
+      dangerouslySetInnerHTML: {__html: content},
     });
   });
 });
diff --git a/packages/react-testing/CHANGELOG.md b/packages/react-testing/CHANGELOG.md
@@ -7,6 +7,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 <!-- ## [Unreleased] -->
 
+- Fixed `html()` to properly return the outermost wrapping DOM tags ([#1042](https://github.com/Shopify/quilt/pull/1042))
+
 ## [1.7.9] - 2019-09-27
 
 ### Changed

diff --git a/packages/react-testing/src/element.ts b/packages/react-testing/src/element.ts
@@ -128,7 +128,7 @@ export class Element<Props> implements Node<Props> {
     }
 
     if (instance instanceof HTMLElement) {
-      return instance.innerHTML;
+      return instance.outerHTML;
     }
 
     return allChildren.reduce<string>(

diff --git a/packages/react-testing/src/tests/element.test.tsx b/packages/react-testing/src/tests/element.test.tsx
@@ -290,7 +290,7 @@ describe('Element', () => {
   });
 
   describe('#html()', () => {
-    it('returns the innerHTML of the element if it is a DOM node', () => {
+    it('returns the outerHTML of the element if it is a DOM node', () => {
       const html = 'foobar';
 
       const div = document.createElement('div');
@@ -303,7 +303,7 @@ describe('Element', () => {
         defaultRoot,
       );
 
-      expect(element.html()).toBe(html);
+      expect(element.html()).toBe(`<div>${html}</div>`);
     });
 
     it('concatenates the HTML contents of all child elements and child text', () => {