Skip to content
Permalink
Browse files

Breaking: Make innerHTML and outerHTML getters

Align with browser behavior to make these easier to consume.
  • Loading branch information...
antross committed Mar 13, 2019
1 parent cbfa444 commit 12ea169bf90dbdcfac6f22cde3d3cb4ebf548213
@@ -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`);
@@ -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, ' ');
}

/*
@@ -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)
@@ -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;
});
}

@@ -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');
});
@@ -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;

0 comments on commit 12ea169

Please sign in to comment.
You can’t perform that action at this time.