diff --git a/API.md b/API.md
index 4b96b5f9f..96434ea7d 100644
--- a/API.md
+++ b/API.md
@@ -2,119 +2,119 @@
### Table of Contents
-* [assert.dom()][1]
-* [DOMAssertions][2]
- * [exists][3]
- * [Parameters][4]
- * [Examples][5]
- * [doesNotExist][6]
- * [Parameters][7]
- * [Examples][8]
- * [isChecked][9]
- * [Parameters][10]
- * [Examples][11]
- * [isNotChecked][12]
- * [Parameters][13]
- * [Examples][14]
- * [isFocused][15]
- * [Parameters][16]
- * [Examples][17]
- * [isNotFocused][18]
- * [Parameters][19]
- * [Examples][20]
- * [isRequired][21]
- * [Parameters][22]
- * [Examples][23]
- * [isNotRequired][24]
- * [Parameters][25]
- * [Examples][26]
- * [isValid][27]
- * [Parameters][28]
- * [Examples][29]
- * [isNotValid][30]
- * [Parameters][31]
- * [Examples][32]
- * [isVisible][33]
- * [Parameters][34]
- * [Examples][35]
- * [isNotVisible][36]
- * [Parameters][37]
- * [Examples][38]
- * [hasAttribute][39]
- * [Parameters][40]
- * [Examples][41]
- * [doesNotHaveAttribute][42]
- * [Parameters][43]
- * [Examples][44]
- * [hasAria][45]
- * [Parameters][46]
- * [Examples][47]
- * [doesNotHaveAria][48]
- * [Parameters][49]
- * [Examples][50]
- * [hasProperty][51]
- * [Parameters][52]
- * [Examples][53]
- * [isDisabled][54]
- * [Parameters][55]
- * [Examples][56]
- * [isNotDisabled][57]
- * [Parameters][58]
- * [Examples][59]
- * [hasClass][60]
- * [Parameters][61]
- * [Examples][62]
- * [doesNotHaveClass][63]
- * [Parameters][64]
- * [Examples][65]
- * [hasStyle][66]
- * [Parameters][67]
- * [Examples][68]
- * [hasPseudoElementStyle][69]
- * [Parameters][70]
- * [Examples][71]
- * [doesNotHaveStyle][72]
- * [Parameters][73]
- * [Examples][74]
- * [doesNotHavePseudoElementStyle][75]
- * [Parameters][76]
- * [Examples][77]
- * [hasText][78]
- * [Parameters][79]
- * [Examples][80]
- * [hasAnyText][81]
- * [Parameters][82]
- * [Examples][83]
- * [hasNoText][84]
- * [Parameters][85]
- * [Examples][86]
- * [includesText][87]
- * [Parameters][88]
- * [Examples][89]
- * [doesNotIncludeText][90]
- * [Parameters][91]
- * [Examples][92]
- * [hasValue][93]
- * [Parameters][94]
- * [Examples][95]
- * [hasAnyValue][96]
- * [Parameters][97]
- * [Examples][98]
- * [hasNoValue][99]
- * [Parameters][100]
- * [Examples][101]
- * [matchesSelector][102]
- * [Parameters][103]
- * [Examples][104]
- * [doesNotMatchSelector][105]
- * [Parameters][106]
- * [Examples][107]
- * [hasTagName][108]
- * [Parameters][109]
- * [Examples][110]
- * [doesNotHaveTagName][111]
- * [Parameters][112]
- * [Examples][113]
+- [assert.dom()](#assertdom)
+- [DOMAssertions](#domassertions)
+ - [exists](#exists)
+ - [Parameters](#parameters)
+ - [Examples](#examples)
+ - [doesNotExist](#doesnotexist)
+ - [Parameters](#parameters-1)
+ - [Examples](#examples-1)
+ - [isChecked](#ischecked)
+ - [Parameters](#parameters-2)
+ - [Examples](#examples-2)
+ - [isNotChecked](#isnotchecked)
+ - [Parameters](#parameters-3)
+ - [Examples](#examples-3)
+ - [isFocused](#isfocused)
+ - [Parameters](#parameters-4)
+ - [Examples](#examples-4)
+ - [isNotFocused](#isnotfocused)
+ - [Parameters](#parameters-5)
+ - [Examples](#examples-5)
+ - [isRequired](#isrequired)
+ - [Parameters](#parameters-6)
+ - [Examples](#examples-6)
+ - [isNotRequired](#isnotrequired)
+ - [Parameters](#parameters-7)
+ - [Examples](#examples-7)
+ - [isValid](#isvalid)
+ - [Parameters](#parameters-8)
+ - [Examples](#examples-8)
+ - [isNotValid](#isnotvalid)
+ - [Parameters](#parameters-9)
+ - [Examples](#examples-9)
+ - [isVisible](#isvisible)
+ - [Parameters](#parameters-10)
+ - [Examples](#examples-10)
+ - [isNotVisible](#isnotvisible)
+ - [Parameters](#parameters-11)
+ - [Examples](#examples-11)
+ - [hasAttribute](#hasattribute)
+ - [Parameters](#parameters-12)
+ - [Examples](#examples-12)
+ - [doesNotHaveAttribute](#doesnothaveattribute)
+ - [Parameters](#parameters-13)
+ - [Examples](#examples-13)
+ - [hasAria](#hasaria)
+ - [Parameters](#parameters-14)
+ - [Examples](#examples-14)
+ - [doesNotHaveAria](#doesnothavearia)
+ - [Parameters](#parameters-15)
+ - [Examples](#examples-15)
+ - [hasProperty](#hasproperty)
+ - [Parameters](#parameters-16)
+ - [Examples](#examples-16)
+ - [isDisabled](#isdisabled)
+ - [Parameters](#parameters-17)
+ - [Examples](#examples-17)
+ - [isNotDisabled](#isnotdisabled)
+ - [Parameters](#parameters-18)
+ - [Examples](#examples-18)
+ - [hasClass](#hasclass)
+ - [Parameters](#parameters-19)
+ - [Examples](#examples-19)
+ - [doesNotHaveClass](#doesnothaveclass)
+ - [Parameters](#parameters-20)
+ - [Examples](#examples-20)
+ - [hasStyle](#hasstyle)
+ - [Parameters](#parameters-21)
+ - [Examples](#examples-21)
+ - [hasPseudoElementStyle](#haspseudoelementstyle)
+ - [Parameters](#parameters-22)
+ - [Examples](#examples-22)
+ - [doesNotHaveStyle](#doesnothavestyle)
+ - [Parameters](#parameters-23)
+ - [Examples](#examples-23)
+ - [doesNotHavePseudoElementStyle](#doesnothavepseudoelementstyle)
+ - [Parameters](#parameters-24)
+ - [Examples](#examples-24)
+ - [hasText](#hastext)
+ - [Parameters](#parameters-25)
+ - [Examples](#examples-25)
+ - [hasAnyText](#hasanytext)
+ - [Parameters](#parameters-26)
+ - [Examples](#examples-26)
+ - [hasNoText](#hasnotext)
+ - [Parameters](#parameters-27)
+ - [Examples](#examples-27)
+ - [includesText](#includestext)
+ - [Parameters](#parameters-28)
+ - [Examples](#examples-28)
+ - [doesNotIncludeText](#doesnotincludetext)
+ - [Parameters](#parameters-29)
+ - [Examples](#examples-29)
+ - [hasValue](#hasvalue)
+ - [Parameters](#parameters-30)
+ - [Examples](#examples-30)
+ - [hasAnyValue](#hasanyvalue)
+ - [Parameters](#parameters-31)
+ - [Examples](#examples-31)
+ - [hasNoValue](#hasnovalue)
+ - [Parameters](#parameters-32)
+ - [Examples](#examples-32)
+ - [matchesSelector](#matchesselector)
+ - [Parameters](#parameters-33)
+ - [Examples](#examples-33)
+ - [doesNotMatchSelector](#doesnotmatchselector)
+ - [Parameters](#parameters-34)
+ - [Examples](#examples-34)
+ - [hasTagName](#hastagname)
+ - [Parameters](#parameters-35)
+ - [Examples](#examples-35)
+ - [doesNotHaveTagName](#doesnothavetagname)
+ - [Parameters](#parameters-36)
+ - [Examples](#examples-36)
## assert.dom()
@@ -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
-//
-// Welcome to QUnit
-//
-
+//
+// Welcome to QUnit
+//
+
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
-//
-// Title
-//
-
+//
+// Title
+//
+
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
-//
-
+//
+
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 = `
+ dedcoy
+
+
+ real target
+
+ `;
+
+ 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 = `
+ decoy
+
+
+ real target
+
+ `;
+
+ 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 = `
+ decoy
+
+
+ real target
+
+ `;
+
+ 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 = `
+ decoy
+
+
+ real target
+
+ `;
+
+ 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 = `
+
+ decoy
+
+ `;
+
+ const container = document.getElementById('container');
+ const shadowRoot = container.attachShadow({ mode: 'closed' });
+
+ shadowRoot.innerHTML = 'real target';
+
+ 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