From e6cb8bc447a25cbe412057f27afb0d5289d5a725 Mon Sep 17 00:00:00 2001
From: "Andrey Mikhaylov (lolmaus)" <lolmaus@gmail.com>
Date: Sat, 13 Jan 2024 13:36:59 +0300
Subject: [PATCH 1/2] Support ShadowRoot, add tests for rootElement, fixes
 #2089

---
 API.md                                        | 158 +++++++++---------
 .../qunit-dom/lib/__tests__/root-element.ts   | 152 +++++++++++++++++
 packages/qunit-dom/lib/assertions.ts          |   2 +-
 .../qunit-dom/lib/helpers/test-assertions.ts  |   2 +-
 packages/qunit-dom/lib/install.ts             |   9 +-
 5 files changed, 243 insertions(+), 80 deletions(-)
 create mode 100644 packages/qunit-dom/lib/__tests__/root-element.ts

diff --git a/API.md b/API.md
index 4b96b5f9f..97e2cbb78 100644
--- a/API.md
+++ b/API.md
@@ -123,7 +123,7 @@ Once installed the DOM element assertions are available at `assert.dom(...).*`:
 **Parameters**
 
 *   `target` **([string][114] | [HTMLElement][115])** A CSS selector that can be used to find elements using [`querySelector()`][116], or an \[HTMLElement]\[] (Not all assertions support both target types.) (optional, default `rootElement` or `document`)
-*   `rootElement` **[HTMLElement][115]?** The root element of the DOM in which to search for the `target` (optional, default `document`)
+*   `rootElement` **([HTMLElement][115] | [Document][152] | [ShadowRoot][153] | [null][154])?** The root element of the DOM in which to search for the `target` (optional, defaults `document` when `null` or not provided)
 
 **Examples**
 
@@ -151,7 +151,7 @@ Assert an [HTMLElement][118] (or multiple) matching the `selector` exists.
 #### Examples
 
 ```javascript
-assert.dom('#title').exists();
+assert.dom('#title').exists();
 assert.dom('.choice').exists({ count: 4 });
 ```
 
@@ -175,7 +175,7 @@ assert.dom('.should-not-exist').doesNotExist();
 
 *   **See**: [#isNotChecked][122]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is currently checked.
 
 Note: This also supports `aria-checked="true/false"`.
@@ -194,7 +194,7 @@ assert.dom('input.active').isChecked();
 
 *   **See**: [#isChecked][123]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is currently unchecked.
 
 Note: This also supports `aria-checked="true/false"`.
@@ -213,7 +213,7 @@ assert.dom('input.active').isNotChecked();
 
 *   **See**: [#isNotFocused][124]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is currently focused.
 
 #### Parameters
@@ -230,7 +230,7 @@ assert.dom('input.email').isFocused();
 
 *   **See**: [#isFocused][125]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is not currently focused.
 
 #### Parameters
@@ -247,7 +247,7 @@ assert.dom('input[type="password"]').isNotFocused();
 
 *   **See**: [#isNotRequired][126]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is currently required.
 
 #### Parameters
@@ -264,7 +264,7 @@ assert.dom('input[type="text"]').isRequired();
 
 *   **See**: [#isRequired][127]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is currently not required.
 
 #### Parameters
@@ -321,7 +321,7 @@ assert.dom('.input').isNotValid();
 
 *   **See**: [#isNotVisible][129]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` exists and is visible.
 
 Visibility is determined by asserting that:
@@ -329,7 +329,7 @@ Visibility is determined by asserting that:
 *   the element's offsetWidth and offsetHeight are non-zero
 *   any of the element's DOMRect objects have a non-zero size
 
-Additionally, visibility in this case means that the element is visible on the page,
+Additionally, visibility in this case means that the element is visible on the page,
 but not necessarily in the viewport.
 
 #### Parameters
@@ -342,7 +342,7 @@ but not necessarily in the viewport.
 #### Examples
 
 ```javascript
-assert.dom('#title').isVisible();
+assert.dom('#title').isVisible();
 assert.dom('.choice').isVisible({ count: 4 });
 ```
 
@@ -350,7 +350,7 @@ assert.dom('.choice').isVisible({ count: 4 });
 
 *   **See**: [#isVisible][130]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` does not exist or is not visible on the page.
 
 Visibility is determined by asserting that:
@@ -358,7 +358,7 @@ Visibility is determined by asserting that:
 *   the element's offsetWidth or offsetHeight are zero
 *   all of the element's DOMRect objects have a size of zero
 
-Additionally, visibility in this case means that the element is visible on the page,
+Additionally, visibility in this case means that the element is visible on the page,
 but not necessarily in the viewport.
 
 #### Parameters
@@ -375,8 +375,8 @@ assert.dom('.foo').isNotVisible();
 
 *   **See**: [#doesNotHaveAttribute][131]
 
-Assert that the [HTMLElement][118] has an attribute with the provided `name`
-and optionally checks if the attribute `value` matches the provided text
+Assert that the [HTMLElement][118] has an attribute with the provided `name`
+and optionally checks if the attribute `value` matches the provided text
 or regular expression.
 
 #### Parameters
@@ -414,8 +414,8 @@ assert.dom('input.username').doesNotHaveAttribute('disabled');
 
 *   **See**: [#doesNotHaveAria][134]
 
-Assert that the [HTMLElement][118] has an ARIA attribute with the provided
-`name` and optionally checks if the attribute `value` matches the provided
+Assert that the [HTMLElement][118] has an ARIA attribute with the provided
+`name` and optionally checks if the attribute `value` matches the provided
 text or regular expression.
 
 #### Parameters
@@ -434,7 +434,7 @@ assert.dom('button').hasAria('pressed', 'true');
 
 *   **See**: [#hasAria][135]
 
-Assert that the [HTMLElement][118] has no ARIA attribute with the
+Assert that the [HTMLElement][118] has no ARIA attribute with the
 provided `name`.
 
 **Aliases:** `hasNoAria`, `lacksAria`
@@ -454,8 +454,8 @@ assert.dom('button').doesNotHaveAria('pressed');
 
 *   **See**: [#doesNotHaveProperty][136]
 
-Assert that the [HTMLElement][118] has a property with the provided `name`
-and checks if the property `value` matches the provided text or regular
+Assert that the [HTMLElement][118] has a property with the provided `name`
+and checks if the property `value` matches the provided text or regular
 expression.
 
 #### Parameters
@@ -474,7 +474,7 @@ assert.dom('input.password-input').hasProperty('type', 'password');
 
 *   **See**: [#isNotDisabled][137]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is disabled.
 
 #### Parameters
@@ -491,7 +491,7 @@ assert.dom('.foo').isDisabled();
 
 *   **See**: [#isDisabled][138]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is not disabled.
 
 **Aliases:** `isEnabled`
@@ -510,10 +510,10 @@ assert.dom('.foo').isNotDisabled();
 
 *   **See**: [#doesNotHaveClass][139]
 
-Assert that the [HTMLElement][118] has the `expected` CSS class using
+Assert that the [HTMLElement][118] has the `expected` CSS class using
 [`classList`][140].
 
-`expected` can also be a regular expression, and the assertion will return
+`expected` can also be a regular expression, and the assertion will return
 true if any of the element's CSS classes match.
 
 #### Parameters
@@ -535,10 +535,10 @@ assert.dom('input[type="password"]').hasClass(/.*password-input/);
 
 *   **See**: [#hasClass][141]
 
-Assert that the [HTMLElement][118] does not have the `expected` CSS class using
+Assert that the [HTMLElement][118] does not have the `expected` CSS class using
 [`classList`][140].
 
-`expected` can also be a regular expression, and the assertion will return
+`expected` can also be a regular expression, and the assertion will return
 true if none of the element's CSS classes match.
 
 **Aliases:** `hasNoClass`, `lacksClass`
@@ -562,7 +562,7 @@ assert.dom('input[type="password"]').doesNotHaveClass(/username-.*-input/);
 
 *   **See**: [#hasClass][141]
 
-Assert that the \[HTMLElement]\[] has the `expected` style declarations using
+Assert that the \[HTMLElement]\[] has the `expected` style declarations using
 [`window.getComputedStyle`][142].
 
 #### Parameters
@@ -573,9 +573,9 @@ Assert that the \[HTMLElement]\[] has the `expected` style declarations using
 #### Examples
 
 ```javascript
-assert.dom('.progress-bar').hasStyle({
-  opacity: 1,
-  display: 'block'
+assert.dom('.progress-bar').hasStyle({
+  opacity: 1,
+  display: 'block'
 });
 ```
 
@@ -583,7 +583,7 @@ assert.dom('.progress-bar').hasStyle({
 
 *   **See**: [#hasClass][141]
 
-Assert that the pseudo element for `selector` of the \[HTMLElement]\[] has the `expected` style declarations using
+Assert that the pseudo element for `selector` of the \[HTMLElement]\[] has the `expected` style declarations using
 [`window.getComputedStyle`][142].
 
 #### Parameters
@@ -595,8 +595,8 @@ Assert that the pseudo element for `selector` of the \[HTMLElement]\[] has the `
 #### Examples
 
 ```javascript
-assert.dom('.progress-bar').hasPseudoElementStyle(':after', {
-  content: '";"',
+assert.dom('.progress-bar').hasPseudoElementStyle(':after', {
+  content: '";"',
 });
 ```
 
@@ -604,7 +604,7 @@ assert.dom('.progress-bar').hasPseudoElementStyle(':after', {
 
 *   **See**: [#hasClass][141]
 
-Assert that the \[HTMLElement]\[] does not have the `expected` style declarations using
+Assert that the \[HTMLElement]\[] does not have the `expected` style declarations using
 [`window.getComputedStyle`][142].
 
 #### Parameters
@@ -615,9 +615,9 @@ Assert that the \[HTMLElement]\[] does not have the `expected` style declaration
 #### Examples
 
 ```javascript
-assert.dom('.progress-bar').doesNotHaveStyle({
-  opacity: 1,
-  display: 'block'
+assert.dom('.progress-bar').doesNotHaveStyle({
+  opacity: 1,
+  display: 'block'
 });
 ```
 
@@ -625,7 +625,7 @@ assert.dom('.progress-bar').doesNotHaveStyle({
 
 *   **See**: [#hasClass][141]
 
-Assert that the pseudo element for `selector` of the \[HTMLElement]\[] does not have the `expected` style declarations using
+Assert that the pseudo element for `selector` of the \[HTMLElement]\[] does not have the `expected` style declarations using
 [`window.getComputedStyle`][142].
 
 #### Parameters
@@ -637,8 +637,8 @@ Assert that the pseudo element for `selector` of the \[HTMLElement]\[] does not
 #### Examples
 
 ```javascript
-assert.dom('.progress-bar').doesNotHavePseudoElementStyle(':after', {
-  content: '";"',
+assert.dom('.progress-bar').doesNotHavePseudoElementStyle(':after', {
+  content: '";"',
 });
 ```
 
@@ -646,15 +646,15 @@ assert.dom('.progress-bar').doesNotHavePseudoElementStyle(':after', {
 
 *   **See**: [#includesText][143]
 
-Assert that the text of the [HTMLElement][118] or an [HTMLElement][118]
-matching the `selector` matches the `expected` text, using the
-[`textContent`][144]
+Assert that the text of the [HTMLElement][118] or an [HTMLElement][118]
+matching the `selector` matches the `expected` text, using the
+[`textContent`][144]
 attribute and stripping/collapsing whitespace.
 
 `expected` can also be a regular expression.
 
-> Note: This assertion will collapse whitespace if the type you pass in is a string.
-> If you are testing specifically for whitespace integrity, pass your expected text
+> Note: This assertion will collapse whitespace if the type you pass in is a string.
+> If you are testing specifically for whitespace integrity, pass your expected text
 > in as a RegEx pattern.
 
 **Aliases:** `matchesText`
@@ -667,10 +667,10 @@ attribute and stripping/collapsing whitespace.
 #### Examples
 
 ```javascript
-// <h2 id="title">
-//   Welcome to <b>QUnit</b>
-// </h2>
-
+// <h2 id="title">
+//   Welcome to <b>QUnit</b>
+// </h2>
+
 assert.dom('#title').hasText('Welcome to QUnit');
 ```
 
@@ -714,14 +714,14 @@ assert.dom('div').hasNoText();
 
 *   **See**: [#hasText][145]
 
-Assert that the text of the [HTMLElement][118] or an [HTMLElement][118]
-matching the `selector` contains the given `text`, using the
-[`textContent`][144]
+Assert that the text of the [HTMLElement][118] or an [HTMLElement][118]
+matching the `selector` contains the given `text`, using the
+[`textContent`][144]
 attribute.
 
-> Note: This assertion will collapse whitespace in `textContent` before searching.
-> If you would like to assert on a string that *should* contain line breaks, tabs,
-> more than one space in a row, or starting/ending whitespace, use the [#hasText][145]
+> Note: This assertion will collapse whitespace in `textContent` before searching.
+> If you would like to assert on a string that *should* contain line breaks, tabs,
+> more than one space in a row, or starting/ending whitespace, use the [#hasText][145]
 > selector and pass your expected text in as a RegEx pattern.
 
 **Aliases:** `containsText`, `hasTextContaining`
@@ -739,9 +739,9 @@ assert.dom('#title').includesText('Welcome');
 
 ### doesNotIncludeText
 
-Assert that the text of the [HTMLElement][118] or an [HTMLElement][118]
-matching the `selector` does not include the given `text`, using the
-[`textContent`][144]
+Assert that the text of the [HTMLElement][118] or an [HTMLElement][118]
+matching the `selector` does not include the given `text`, using the
+[`textContent`][144]
 attribute.
 
 **Aliases:** `doesNotContainText`, `doesNotHaveTextContaining`
@@ -762,10 +762,10 @@ assert.dom('#title').doesNotIncludeText('Welcome');
 *   **See**: [#hasAnyValue][147]
 *   **See**: [#hasNoValue][148]
 
-Assert that the `value` property of an [HTMLInputElement][149] matches
+Assert that the `value` property of an [HTMLInputElement][149] matches
 the `expected` text or regular expression.
 
-If no `expected` value is provided, the assertion will fail if the
+If no `expected` value is provided, the assertion will fail if the
 `value` is an empty string.
 
 #### Parameters
@@ -817,7 +817,7 @@ assert.dom('input.username').hasNoValue();
 
 ### matchesSelector
 
-Assert that the target selector selects only Elements that are also selected by
+Assert that the target selector selects only Elements that are also selected by
 compareSelector.
 
 #### Parameters
@@ -833,7 +833,7 @@ assert.dom('p.red').matchesSelector('div.wrapper p:last-child')
 
 ### doesNotMatchSelector
 
-Assert that the target selector selects only Elements that are not also selected by
+Assert that the target selector selects only Elements that are not also selected by
 compareSelector.
 
 #### Parameters
@@ -849,9 +849,9 @@ assert.dom('input').doesNotMatchSelector('input[disabled]')
 
 ### hasTagName
 
-Assert that the tagName of the [HTMLElement][118] or an [HTMLElement][118]
-matching the `selector` matches the `expected` tagName, using the
-[`tagName`][151]
+Assert that the tagName of the [HTMLElement][118] or an [HTMLElement][118]
+matching the `selector` matches the `expected` tagName, using the
+[`tagName`][151]
 property of the [HTMLElement][118].
 
 #### Parameters
@@ -863,18 +863,18 @@ property of the [HTMLElement][118].
 #### Examples
 
 ```javascript
-// <h1 id="title">
-//   Title
-// </h1>
-
+// <h1 id="title">
+//   Title
+// </h1>
+
 assert.dom('#title').hasTagName('h1');
 ```
 
 ### doesNotHaveTagName
 
-Assert that the tagName of the [HTMLElement][118] or an [HTMLElement][118]
-matching the `selector` does not match the `expected` tagName, using the
-[`tagName`][151]
+Assert that the tagName of the [HTMLElement][118] or an [HTMLElement][118]
+matching the `selector` does not match the `expected` tagName, using the
+[`tagName`][151]
 property of the [HTMLElement][118].
 
 #### Parameters
@@ -886,10 +886,10 @@ property of the [HTMLElement][118].
 #### Examples
 
 ```javascript
-// <section id="block">
-//   Title
-// </section>
-
+// <section id="block">
+//   Title
+// </section>
+
 assert.dom('section#block').doesNotHaveTagName('div');
 ```
 
@@ -1194,3 +1194,9 @@ assert.dom('section#block').doesNotHaveTagName('div');
 [150]: #hasValue
 
 [151]: https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName
+
+[152]: https://developer.mozilla.org/en-US/docs/Web/API/Document
+
+[153]: https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
+
+[154]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/null
\ No newline at end of file
diff --git a/packages/qunit-dom/lib/__tests__/root-element.ts b/packages/qunit-dom/lib/__tests__/root-element.ts
new file mode 100644
index 000000000..358abc033
--- /dev/null
+++ b/packages/qunit-dom/lib/__tests__/root-element.ts
@@ -0,0 +1,152 @@
+import { describe, beforeEach, test, expect } from 'vitest';
+
+import TestAssertions from '../helpers/test-assertions';
+
+describe('assert.dom(..., rootElement)', () => {
+  let assert: TestAssertions;
+
+  beforeEach(() => {
+    assert = new TestAssertions();
+  });
+
+  test('passing an Element as rootElement', () => {
+    document.body.innerHTML = `
+      <span class="target">dedcoy<span>
+
+      <h1 class="parent">
+        <span class="target">real target<span>
+      </h1>
+    `;
+
+    const rootElement = document.querySelector('.parent');
+
+    assert.dom('.target', rootElement).exists({ count: 1 });
+    assert.dom('.target', rootElement).hasText('real target');
+
+    expect(assert.results).toEqual([
+      {
+        result: true,
+        actual: 'Element .target exists once',
+        expected: 'Element .target exists once',
+        message: 'Element .target exists once',
+      },
+      {
+        result: true,
+        actual: 'real target',
+        expected: 'real target',
+        message: 'Element .target has text "real target"',
+      },
+    ]);
+  });
+
+  test('not passing anything as rootElement', () => {
+    document.body.innerHTML = `
+      <span class="target">decoy<span>
+
+      <h1 class="parent">
+        <span class="target">real target<span>
+      </h1>
+    `;
+
+    assert.dom('.target').exists({ count: 2 });
+
+    expect(assert.results).toEqual([
+      {
+        result: true,
+        actual: 'Element .target exists twice',
+        expected: 'Element .target exists twice',
+        message: 'Element .target exists twice',
+      },
+    ]);
+  });
+
+  test('passing document as rootElement', () => {
+    document.body.innerHTML = `
+      <span class="target">decoy<span>
+
+      <h1 class="parent">
+        <span class="target">real target<span>
+      </h1>
+    `;
+
+    assert.dom('.target', document).exists({ count: 2 });
+
+    expect(assert.results).toEqual([
+      {
+        result: true,
+        actual: 'Element .target exists twice',
+        expected: 'Element .target exists twice',
+        message: 'Element .target exists twice',
+      },
+    ]);
+  });
+
+  test('passing null as rootElement', () => {
+    document.body.innerHTML = `
+      <span class="target">decoy<span>
+
+      <h1 class="parent">
+        <span class="target">real target<span>
+      </h1>
+    `;
+
+    assert.dom('.target', null).exists({ count: 2 });
+
+    expect(assert.results).toEqual([
+      {
+        result: true,
+        actual: 'Element .target exists twice',
+        expected: 'Element .target exists twice',
+        message: 'Element .target exists twice',
+      },
+    ]);
+  });
+
+  test('passing shadow root as rootElement', () => {
+    document.body.innerHTML = `
+      <div id="container">
+        <span class="target">decoy<span>
+      </div>
+    `;
+
+    const container = document.getElementById('container');
+    const shadowRoot = container.attachShadow({ mode: 'closed' });
+
+    shadowRoot.innerHTML = '<span class="target">real target<span>';
+
+    assert.dom('.target').exists({ count: 1 }, 'Only decoy element is found outside shadow root');
+    assert.dom('.target').hasText('real target', 'decoy element text');
+
+    assert.dom('.target', shadowRoot).exists({ count: 1 }, 'Only target found in shadow root');
+    assert.dom('.target', shadowRoot).hasText('real target', 'Target element text');
+
+    console.log(assert.results);
+
+    expect(assert.results).toEqual([
+      {
+        result: true,
+        actual: 'Element .target exists once',
+        expected: 'Element .target exists once',
+        message: 'Only decoy element is found outside shadow root',
+      },
+      {
+        result: false,
+        actual: 'decoy',
+        expected: 'real target',
+        message: 'decoy element text',
+      },
+      {
+        result: true,
+        actual: 'Element .target exists once',
+        expected: 'Element .target exists once',
+        message: 'Only target found in shadow root',
+      },
+      {
+        result: true,
+        actual: 'real target',
+        expected: 'real target',
+        message: 'Target element text',
+      },
+    ]);
+  });
+});
diff --git a/packages/qunit-dom/lib/assertions.ts b/packages/qunit-dom/lib/assertions.ts
index 8549cb018..9de2cfc24 100644
--- a/packages/qunit-dom/lib/assertions.ts
+++ b/packages/qunit-dom/lib/assertions.ts
@@ -31,7 +31,7 @@ type ActualCSSStyleDeclaration = Partial<Record<CSSStyleDeclarationProperty, unk
 export default class DOMAssertions {
   constructor(
     private target: string | Element | null,
-    private rootElement: Element | Document,
+    private rootElement: RootElement,
     private testContext: Assert
   ) {}
 
diff --git a/packages/qunit-dom/lib/helpers/test-assertions.ts b/packages/qunit-dom/lib/helpers/test-assertions.ts
index 253f5b21d..06214ab35 100644
--- a/packages/qunit-dom/lib/helpers/test-assertions.ts
+++ b/packages/qunit-dom/lib/helpers/test-assertions.ts
@@ -3,7 +3,7 @@ import DOMAssertions, { type AssertionResult } from '../assertions.js';
 export default class TestAssertions {
   public results: AssertionResult[] = [];
 
-  dom(target: string | Element | null, rootElement?: Element) {
+  dom(target: string | Element | null, rootElement?: RootElement) {
     return new DOMAssertions(target, rootElement || document, this as any);
   }
 
diff --git a/packages/qunit-dom/lib/install.ts b/packages/qunit-dom/lib/install.ts
index 1053916a2..af8b877ba 100644
--- a/packages/qunit-dom/lib/install.ts
+++ b/packages/qunit-dom/lib/install.ts
@@ -2,13 +2,18 @@ import DOMAssertions from './assertions.js';
 import { getRootElement } from './root-element.js';
 
 declare global {
+  type RootElement = Element | Document | ShadowRoot | null;
+
   interface Assert {
-    dom(target?: string | Element | null, rootElement?: Element): DOMAssertions;
+    dom(target?: string | Element | null, rootElement?: RootElement): DOMAssertions;
   }
 }
 
 export default function (assert: Assert) {
-  assert.dom = function (target?: string | Element | null, rootElement?: Element): DOMAssertions {
+  assert.dom = function (
+    target?: string | Element | null,
+    rootElement?: RootElement
+  ): DOMAssertions {
     if (!isValidRootElement(rootElement)) {
       throw new Error(`${rootElement} is not a valid root element`);
     }

From e9ef45a6f4c302e04784541061bedc5e060d2a45 Mon Sep 17 00:00:00 2001
From: BobrImperator <bartholomew.dudzik@gmail.com>
Date: Tue, 9 Apr 2024 12:29:05 +0200
Subject: [PATCH 2/2] chore(format): discard unnecessary whitespace changes

---
 API.md | 150 ++++++++++++++++++++++++++++-----------------------------
 1 file changed, 75 insertions(+), 75 deletions(-)

diff --git a/API.md b/API.md
index 97e2cbb78..093cccca2 100644
--- a/API.md
+++ b/API.md
@@ -151,7 +151,7 @@ Assert an [HTMLElement][118] (or multiple) matching the `selector` exists.
 #### Examples
 
 ```javascript
-assert.dom('#title').exists();
+assert.dom('#title').exists();
 assert.dom('.choice').exists({ count: 4 });
 ```
 
@@ -175,7 +175,7 @@ assert.dom('.should-not-exist').doesNotExist();
 
 *   **See**: [#isNotChecked][122]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is currently checked.
 
 Note: This also supports `aria-checked="true/false"`.
@@ -194,7 +194,7 @@ assert.dom('input.active').isChecked();
 
 *   **See**: [#isChecked][123]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is currently unchecked.
 
 Note: This also supports `aria-checked="true/false"`.
@@ -213,7 +213,7 @@ assert.dom('input.active').isNotChecked();
 
 *   **See**: [#isNotFocused][124]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is currently focused.
 
 #### Parameters
@@ -230,7 +230,7 @@ assert.dom('input.email').isFocused();
 
 *   **See**: [#isFocused][125]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is not currently focused.
 
 #### Parameters
@@ -247,7 +247,7 @@ assert.dom('input[type="password"]').isNotFocused();
 
 *   **See**: [#isNotRequired][126]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is currently required.
 
 #### Parameters
@@ -264,7 +264,7 @@ assert.dom('input[type="text"]').isRequired();
 
 *   **See**: [#isRequired][127]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is currently not required.
 
 #### Parameters
@@ -321,7 +321,7 @@ assert.dom('.input').isNotValid();
 
 *   **See**: [#isNotVisible][129]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` exists and is visible.
 
 Visibility is determined by asserting that:
@@ -329,7 +329,7 @@ Visibility is determined by asserting that:
 *   the element's offsetWidth and offsetHeight are non-zero
 *   any of the element's DOMRect objects have a non-zero size
 
-Additionally, visibility in this case means that the element is visible on the page,
+Additionally, visibility in this case means that the element is visible on the page,
 but not necessarily in the viewport.
 
 #### Parameters
@@ -342,7 +342,7 @@ but not necessarily in the viewport.
 #### Examples
 
 ```javascript
-assert.dom('#title').isVisible();
+assert.dom('#title').isVisible();
 assert.dom('.choice').isVisible({ count: 4 });
 ```
 
@@ -350,7 +350,7 @@ assert.dom('.choice').isVisible({ count: 4 });
 
 *   **See**: [#isVisible][130]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` does not exist or is not visible on the page.
 
 Visibility is determined by asserting that:
@@ -358,7 +358,7 @@ Visibility is determined by asserting that:
 *   the element's offsetWidth or offsetHeight are zero
 *   all of the element's DOMRect objects have a size of zero
 
-Additionally, visibility in this case means that the element is visible on the page,
+Additionally, visibility in this case means that the element is visible on the page,
 but not necessarily in the viewport.
 
 #### Parameters
@@ -375,8 +375,8 @@ assert.dom('.foo').isNotVisible();
 
 *   **See**: [#doesNotHaveAttribute][131]
 
-Assert that the [HTMLElement][118] has an attribute with the provided `name`
-and optionally checks if the attribute `value` matches the provided text
+Assert that the [HTMLElement][118] has an attribute with the provided `name`
+and optionally checks if the attribute `value` matches the provided text
 or regular expression.
 
 #### Parameters
@@ -414,8 +414,8 @@ assert.dom('input.username').doesNotHaveAttribute('disabled');
 
 *   **See**: [#doesNotHaveAria][134]
 
-Assert that the [HTMLElement][118] has an ARIA attribute with the provided
-`name` and optionally checks if the attribute `value` matches the provided
+Assert that the [HTMLElement][118] has an ARIA attribute with the provided
+`name` and optionally checks if the attribute `value` matches the provided
 text or regular expression.
 
 #### Parameters
@@ -434,7 +434,7 @@ assert.dom('button').hasAria('pressed', 'true');
 
 *   **See**: [#hasAria][135]
 
-Assert that the [HTMLElement][118] has no ARIA attribute with the
+Assert that the [HTMLElement][118] has no ARIA attribute with the
 provided `name`.
 
 **Aliases:** `hasNoAria`, `lacksAria`
@@ -454,8 +454,8 @@ assert.dom('button').doesNotHaveAria('pressed');
 
 *   **See**: [#doesNotHaveProperty][136]
 
-Assert that the [HTMLElement][118] has a property with the provided `name`
-and checks if the property `value` matches the provided text or regular
+Assert that the [HTMLElement][118] has a property with the provided `name`
+and checks if the property `value` matches the provided text or regular
 expression.
 
 #### Parameters
@@ -474,7 +474,7 @@ assert.dom('input.password-input').hasProperty('type', 'password');
 
 *   **See**: [#isNotDisabled][137]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is disabled.
 
 #### Parameters
@@ -491,7 +491,7 @@ assert.dom('.foo').isDisabled();
 
 *   **See**: [#isDisabled][138]
 
-Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
+Assert that the [HTMLElement][118] or an [HTMLElement][118] matching the
 `selector` is not disabled.
 
 **Aliases:** `isEnabled`
@@ -510,10 +510,10 @@ assert.dom('.foo').isNotDisabled();
 
 *   **See**: [#doesNotHaveClass][139]
 
-Assert that the [HTMLElement][118] has the `expected` CSS class using
+Assert that the [HTMLElement][118] has the `expected` CSS class using
 [`classList`][140].
 
-`expected` can also be a regular expression, and the assertion will return
+`expected` can also be a regular expression, and the assertion will return
 true if any of the element's CSS classes match.
 
 #### Parameters
@@ -535,10 +535,10 @@ assert.dom('input[type="password"]').hasClass(/.*password-input/);
 
 *   **See**: [#hasClass][141]
 
-Assert that the [HTMLElement][118] does not have the `expected` CSS class using
+Assert that the [HTMLElement][118] does not have the `expected` CSS class using
 [`classList`][140].
 
-`expected` can also be a regular expression, and the assertion will return
+`expected` can also be a regular expression, and the assertion will return
 true if none of the element's CSS classes match.
 
 **Aliases:** `hasNoClass`, `lacksClass`
@@ -562,7 +562,7 @@ assert.dom('input[type="password"]').doesNotHaveClass(/username-.*-input/);
 
 *   **See**: [#hasClass][141]
 
-Assert that the \[HTMLElement]\[] has the `expected` style declarations using
+Assert that the \[HTMLElement]\[] has the `expected` style declarations using
 [`window.getComputedStyle`][142].
 
 #### Parameters
@@ -573,9 +573,9 @@ Assert that the \[HTMLElement]\[] has the `expected` style declarations using
 #### Examples
 
 ```javascript
-assert.dom('.progress-bar').hasStyle({
-  opacity: 1,
-  display: 'block'
+assert.dom('.progress-bar').hasStyle({
+  opacity: 1,
+  display: 'block'
 });
 ```
 
@@ -583,7 +583,7 @@ assert.dom('.progress-bar').hasStyle({
 
 *   **See**: [#hasClass][141]
 
-Assert that the pseudo element for `selector` of the \[HTMLElement]\[] has the `expected` style declarations using
+Assert that the pseudo element for `selector` of the \[HTMLElement]\[] has the `expected` style declarations using
 [`window.getComputedStyle`][142].
 
 #### Parameters
@@ -595,8 +595,8 @@ Assert that the pseudo element for `selector` of the \[HTMLElement]\[] has the `
 #### Examples
 
 ```javascript
-assert.dom('.progress-bar').hasPseudoElementStyle(':after', {
-  content: '";"',
+assert.dom('.progress-bar').hasPseudoElementStyle(':after', {
+  content: '";"',
 });
 ```
 
@@ -604,7 +604,7 @@ assert.dom('.progress-bar').hasPseudoElementStyle(':after', {
 
 *   **See**: [#hasClass][141]
 
-Assert that the \[HTMLElement]\[] does not have the `expected` style declarations using
+Assert that the \[HTMLElement]\[] does not have the `expected` style declarations using
 [`window.getComputedStyle`][142].
 
 #### Parameters
@@ -615,9 +615,9 @@ Assert that the \[HTMLElement]\[] does not have the `expected` style declaration
 #### Examples
 
 ```javascript
-assert.dom('.progress-bar').doesNotHaveStyle({
-  opacity: 1,
-  display: 'block'
+assert.dom('.progress-bar').doesNotHaveStyle({
+  opacity: 1,
+  display: 'block'
 });
 ```
 
@@ -625,7 +625,7 @@ assert.dom('.progress-bar').doesNotHaveStyle({
 
 *   **See**: [#hasClass][141]
 
-Assert that the pseudo element for `selector` of the \[HTMLElement]\[] does not have the `expected` style declarations using
+Assert that the pseudo element for `selector` of the \[HTMLElement]\[] does not have the `expected` style declarations using
 [`window.getComputedStyle`][142].
 
 #### Parameters
@@ -637,8 +637,8 @@ Assert that the pseudo element for `selector` of the \[HTMLElement]\[] does not
 #### Examples
 
 ```javascript
-assert.dom('.progress-bar').doesNotHavePseudoElementStyle(':after', {
-  content: '";"',
+assert.dom('.progress-bar').doesNotHavePseudoElementStyle(':after', {
+  content: '";"',
 });
 ```
 
@@ -646,15 +646,15 @@ assert.dom('.progress-bar').doesNotHavePseudoElementStyle(':after', {
 
 *   **See**: [#includesText][143]
 
-Assert that the text of the [HTMLElement][118] or an [HTMLElement][118]
-matching the `selector` matches the `expected` text, using the
-[`textContent`][144]
+Assert that the text of the [HTMLElement][118] or an [HTMLElement][118]
+matching the `selector` matches the `expected` text, using the
+[`textContent`][144]
 attribute and stripping/collapsing whitespace.
 
 `expected` can also be a regular expression.
 
-> Note: This assertion will collapse whitespace if the type you pass in is a string.
-> If you are testing specifically for whitespace integrity, pass your expected text
+> Note: This assertion will collapse whitespace if the type you pass in is a string.
+> If you are testing specifically for whitespace integrity, pass your expected text
 > in as a RegEx pattern.
 
 **Aliases:** `matchesText`
@@ -667,10 +667,10 @@ attribute and stripping/collapsing whitespace.
 #### Examples
 
 ```javascript
-// <h2 id="title">
-//   Welcome to <b>QUnit</b>
-// </h2>
-
+// <h2 id="title">
+//   Welcome to <b>QUnit</b>
+// </h2>
+
 assert.dom('#title').hasText('Welcome to QUnit');
 ```
 
@@ -714,14 +714,14 @@ assert.dom('div').hasNoText();
 
 *   **See**: [#hasText][145]
 
-Assert that the text of the [HTMLElement][118] or an [HTMLElement][118]
-matching the `selector` contains the given `text`, using the
-[`textContent`][144]
+Assert that the text of the [HTMLElement][118] or an [HTMLElement][118]
+matching the `selector` contains the given `text`, using the
+[`textContent`][144]
 attribute.
 
-> Note: This assertion will collapse whitespace in `textContent` before searching.
-> If you would like to assert on a string that *should* contain line breaks, tabs,
-> more than one space in a row, or starting/ending whitespace, use the [#hasText][145]
+> Note: This assertion will collapse whitespace in `textContent` before searching.
+> If you would like to assert on a string that *should* contain line breaks, tabs,
+> more than one space in a row, or starting/ending whitespace, use the [#hasText][145]
 > selector and pass your expected text in as a RegEx pattern.
 
 **Aliases:** `containsText`, `hasTextContaining`
@@ -739,9 +739,9 @@ assert.dom('#title').includesText('Welcome');
 
 ### doesNotIncludeText
 
-Assert that the text of the [HTMLElement][118] or an [HTMLElement][118]
-matching the `selector` does not include the given `text`, using the
-[`textContent`][144]
+Assert that the text of the [HTMLElement][118] or an [HTMLElement][118]
+matching the `selector` does not include the given `text`, using the
+[`textContent`][144]
 attribute.
 
 **Aliases:** `doesNotContainText`, `doesNotHaveTextContaining`
@@ -762,10 +762,10 @@ assert.dom('#title').doesNotIncludeText('Welcome');
 *   **See**: [#hasAnyValue][147]
 *   **See**: [#hasNoValue][148]
 
-Assert that the `value` property of an [HTMLInputElement][149] matches
+Assert that the `value` property of an [HTMLInputElement][149] matches
 the `expected` text or regular expression.
 
-If no `expected` value is provided, the assertion will fail if the
+If no `expected` value is provided, the assertion will fail if the
 `value` is an empty string.
 
 #### Parameters
@@ -817,7 +817,7 @@ assert.dom('input.username').hasNoValue();
 
 ### matchesSelector
 
-Assert that the target selector selects only Elements that are also selected by
+Assert that the target selector selects only Elements that are also selected by
 compareSelector.
 
 #### Parameters
@@ -833,7 +833,7 @@ assert.dom('p.red').matchesSelector('div.wrapper p:last-child')
 
 ### doesNotMatchSelector
 
-Assert that the target selector selects only Elements that are not also selected by
+Assert that the target selector selects only Elements that are not also selected by
 compareSelector.
 
 #### Parameters
@@ -849,9 +849,9 @@ assert.dom('input').doesNotMatchSelector('input[disabled]')
 
 ### hasTagName
 
-Assert that the tagName of the [HTMLElement][118] or an [HTMLElement][118]
-matching the `selector` matches the `expected` tagName, using the
-[`tagName`][151]
+Assert that the tagName of the [HTMLElement][118] or an [HTMLElement][118]
+matching the `selector` matches the `expected` tagName, using the
+[`tagName`][151]
 property of the [HTMLElement][118].
 
 #### Parameters
@@ -863,18 +863,18 @@ property of the [HTMLElement][118].
 #### Examples
 
 ```javascript
-// <h1 id="title">
-//   Title
-// </h1>
-
+// <h1 id="title">
+//   Title
+// </h1>
+
 assert.dom('#title').hasTagName('h1');
 ```
 
 ### doesNotHaveTagName
 
-Assert that the tagName of the [HTMLElement][118] or an [HTMLElement][118]
-matching the `selector` does not match the `expected` tagName, using the
-[`tagName`][151]
+Assert that the tagName of the [HTMLElement][118] or an [HTMLElement][118]
+matching the `selector` does not match the `expected` tagName, using the
+[`tagName`][151]
 property of the [HTMLElement][118].
 
 #### Parameters
@@ -886,10 +886,10 @@ property of the [HTMLElement][118].
 #### Examples
 
 ```javascript
-// <section id="block">
-//   Title
-// </section>
-
+// <section id="block">
+//   Title
+// </section>
+
 assert.dom('section#block').doesNotHaveTagName('div');
 ```