Breaking: Make innerHTML and outerHTML getters

Align with browser behavior to make these easier to consume.
webhintio · Mar 15, 2019 · 12ea169 · 12ea169
1 parent cbfa444
commit 12ea169
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 9 deletions.
diff --git a/packages/hint/docs/contributor-guide/guides/create-custom-hint.md b/packages/hint/docs/contributor-guide/guides/create-custom-hint.md
@@ -110,7 +110,7 @@ export default class FooterHint implements IHint {
         const stringToBeIncluded = `(c) webhint`;
         const validateFooter = async (elementFound: ElementFound) => {
             const { element, resource } = elementFound;
-            const footerHTML = element.outerHTML();
+            const footerHTML = element.outerHTML;
 
             debug(`Validating hint validate-footer`);
 

diff --git a/packages/hint/src/lib/hint-context.ts b/packages/hint/src/lib/hint-context.ts
@@ -122,7 +122,7 @@ export class HintContext<E extends Events = Events> {
         if (element) {
             // When element is provided, position is an offset in the content.
             position = this.findProblemLocation(element, position);
-            sourceCode = element.outerHTML().replace(/[\t]/g, '    ');
+            sourceCode = element.outerHTML.replace(/[\t]/g, '    ');
         }
 
         /*

diff --git a/packages/hint/src/lib/types/html.ts b/packages/hint/src/lib/types/html.ts
@@ -157,11 +157,11 @@ export class HTMLElement {
         return this._element === element._element;
     }
 
-    public innerHTML(): string {
+    public get innerHTML(): string {
         return parse5.serialize(this._element, { treeAdapter: htmlparser2Adapter });
     }
 
-    public outerHTML(): string {
+    public get outerHTML(): string {
         /*
          * Until parse5 support outerHTML
          * (https://github.com/inikulin/parse5/issues/230)

diff --git a/packages/hint/src/lib/utils/dom/find-original-element.ts b/packages/hint/src/lib/utils/dom/find-original-element.ts
@@ -65,7 +65,7 @@ export default (document: HTMLDocument, element: HTMLElement): HTMLElement | nul
     // Elements with content that is typically unique.
     if (['audio', 'button', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'script', 'style', 'video'].includes(element.nodeName)) {
         return findMatch(document, element, element.nodeName, (potentialMatch) => {
-            return potentialMatch.innerHTML() === element.innerHTML();
+            return potentialMatch.innerHTML === element.innerHTML;
         });
     }
 

diff --git a/packages/hint/tests/lib/types/html.ts b/packages/hint/tests/lib/types/html.ts
@@ -79,8 +79,14 @@ test('HTMLElement.isSame() should return if an item is the same or not', (t) =>
     t.true(item.isSame(item));
 });
 
-test('HTMLElement.outerHTML() should return the element HTML', (t) => {
+test('HTMLElement.outerHTML should return the element HTML', (t) => {
     const item = t.context.document.querySelectorAll('.title')[0];
 
-    t.is(item.outerHTML(), '<h1 class="title">Title</h1>');
+    t.is(item.outerHTML, '<h1 class="title">Title</h1>');
+});
+
+test('HTMLElement.innerHTML should return the element content', (t) => {
+    const item = t.context.document.querySelectorAll('.title')[0];
+
+    t.is(item.innerHTML, 'Title');
 });
diff --git a/packages/hint/tests/lib/utils/dom/find-original-element.ts b/packages/hint/tests/lib/utils/dom/find-original-element.ts
@@ -16,8 +16,8 @@ const compare = (originalSource: string, snapshotSource: string) => {
 
     if (!result) {
         console.log(`Match: 
-            ${originalElement && originalElement.outerHTML()}
-            ${foundElement && foundElement.outerHTML()}`);
+            ${originalElement && originalElement.outerHTML}
+            ${foundElement && foundElement.outerHTML}`);
     }
 
     return result;