Skip to content

feat(dom): toContainHTML - #173

Merged
JDOM10 merged 3 commits into
mainfrom
feat/dom-to-contain-HTML
Jul 29, 2026
Merged

feat(dom): toContainHTML#173
JDOM10 merged 3 commits into
mainfrom
feat/dom-to-contain-HTML

Conversation

@JDOM10

Copy link
Copy Markdown
Collaborator

Added toContainHTML matcher

@JDOM10JDOM10 changed the title feat(dom): add toContainHTML assertion method and corresponding testsfeat(dom): toContainHTMLJun 12, 2026
@JDOM10JDOM10 self-assigned this Jun 12, 2026
@JDOM10JDOM10 added the enhancement New feature or request label Jun 12, 2026

@KeylaMunnozKeylaMunnoz left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @JDOM10 this looks great! I have just a small observation. I’m wondering if using a raw .includes() on outerHTML might end up being a bit brittle for developers using the matcher. Since it's a strict string comparison, differences in formatting could easily cause tests to fail even when the HTML is structurally identical, for example::

  • Single quotes vs double quotes (class='foo' vs class="foo")
  • Extra spaces or newlines in the test string
  • Different attribute ordering (which browsers/JSDOM sometimes serialize differently)
  • Tag case sensitivity (like <span> vs <SPAN>)

Do you think this is something worth looking into? Maybe normalizing both the expected HTML and the actual HTML before comparing them, maybe by parsing them through a dummy element first? Let me know what you think! 😸

@JDOM10
JDOM10 requested a review from KeylaMunnozJune 30, 2026 13:40
});

return this.execute({
assertWhen: this.actual.outerHTML.includes(normalizeHtml(htmlText, this.actual.ownerDocument)),

@KeylaMunnozKeylaMunnozJul 6, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @JDOM10 ! Great progress here! I just have one small follow-up comment.

I feel like right now the comparison is asymmetric because the expected HTML goes through normalizeHtml, but this.actual.outerHTML is compared raw. So, both sides are not processed by the same rules, which could cause subtle mismatches in environments where outerHTML serializes differently than JSDOM does (e.g. a real browser).

So, to fix this I would recommend normalizing both sides before comparing:

normalizeHtml(this.actual.outerHTML, this.actual.ownerDocument)
.includes(normalizeHtml(htmlText, this.actual.ownerDocument))

I think this would ensure the same rules are applied to both the actual element and the expected HTML string, making the comparison truly symmetric. Let me know what you think :)

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @KeylaMunnoz !

Wrapping outerHTML in normalizeHtml just re-cleans something already clean → same result, extra work. And the "real browser" worry doesn't happen because normalizeHtml uses this.actual.ownerDocument — the element's own document. So it's always the same environment on both sides; they can't diverge.

@JDOM10
JDOM10 requested a review from KeylaMunnozJuly 7, 2026 17:06
@JDOM10
JDOM10 requested a review from SbsCruzJuly 21, 2026 20:11
@JDOM10
JDOM10 merged commit 05ad0ac into mainJul 29, 2026
4 checks passed
@JDOM10
JDOM10 deleted the feat/dom-to-contain-HTML branch July 29, 2026 16:25
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancementNew feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@JDOM10@suany0805@KeylaMunnoz