Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
420 additions
and
13 deletions.
There are no files selected for viewing
78 changes: 78 additions & 0 deletions
78
documentation/assertions/DOMElement/queried-for-test-id.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
Queries the subject element for the first descendant element with the given `data-test-id` | ||
attribute and forwards it to another assertion. | ||
|
||
If the data-test-id is not found it fails. | ||
|
||
```js | ||
var element = createElement(` | ||
<section> | ||
<h1>Numbers</h1> | ||
<hr> | ||
<ol data-test-id="numbers"> | ||
<li >One</li> | ||
<li>Two</li> | ||
<li>Three</li> | ||
</ol> | ||
</section> | ||
`); | ||
|
||
expect(element, 'queried for test id', 'numbers', 'to satisfy', { | ||
children: expect.it('to have length', 3) | ||
}); | ||
``` | ||
|
||
If no matching element can be found you get the following error: | ||
|
||
```js | ||
expect(element, 'queried for test id', 'emojies', 'to satisfy', { | ||
children: expect.it('to have length', 666) | ||
}); | ||
``` | ||
|
||
```output | ||
expected | ||
<section> | ||
<h1>Numbers</h1> | ||
<hr> | ||
<ol data-test-id="numbers"> | ||
<li>...</li> | ||
<li>...</li> | ||
<li>...</li> | ||
</ol> | ||
</section> | ||
queried for test id 'emojies' to satisfy { children: expect.it('to have length', 666) } | ||
expected DOMElement queried for first [data-test-id="emojies"] | ||
The selector [data-test-id="emojies"] yielded no results | ||
``` | ||
|
||
In case the next assertion fails you will get an error looking like this: | ||
|
||
```js | ||
expect( | ||
element, | ||
'queried for test id', | ||
'numbers', | ||
'to have no children' | ||
); | ||
``` | ||
|
||
```output | ||
expected | ||
<section> | ||
<h1>Numbers</h1> | ||
<hr> | ||
<ol data-test-id="numbers"> | ||
<li>...</li> | ||
<li>...</li> | ||
<li>...</li> | ||
</ol> | ||
</section> | ||
queried for test id 'numbers' to have no children | ||
expected | ||
<ol data-test-id="numbers"> | ||
<li>One</li> | ||
<li>Two</li> | ||
<li>Three</li> | ||
</ol> | ||
to have no children | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
Assert that an element contains a descendant element with element with the given `data-test-id` | ||
attribute. | ||
|
||
```js | ||
var element = createElement(` | ||
<section> | ||
<h1>Numbers</h1> | ||
<hr> | ||
<ol data-test-id="numbers"> | ||
<li>One</li> | ||
<li>Two</li> | ||
<li>Three</li> | ||
</ol> | ||
</section> | ||
`); | ||
|
||
expect(element, 'to contain test id', 'numbers'); | ||
``` | ||
|
||
You get the following error when it fails: | ||
|
||
```js | ||
expect(element, 'to contain test id', 'emojies'); | ||
``` | ||
|
||
```output | ||
expected | ||
<section> | ||
<h1>Numbers</h1> | ||
<hr> | ||
<ol data-test-id="numbers"> | ||
<li>...</li> | ||
<li>...</li> | ||
<li>...</li> | ||
</ol> | ||
</section> | ||
to contain test id 'emojies' | ||
expected DOMElement to contain elements matching '[data-test-id="emojies"]' | ||
``` | ||
|
||
Using the `not` flag, you can assert that the test id shouldn't be found on any | ||
descendant elements: | ||
|
||
```js | ||
expect(element, 'not to contain test id', 'emojies'); | ||
``` | ||
|
||
You get the following error when it fails: | ||
|
||
```js | ||
expect(element, 'not to contain test id', 'numbers'); | ||
``` | ||
|
||
```output | ||
expected | ||
<section> | ||
<h1>Numbers</h1> | ||
<hr> | ||
<ol data-test-id="numbers"> | ||
<li>...</li> | ||
<li>...</li> | ||
<li>...</li> | ||
</ol> | ||
</section> | ||
not to contain test id 'numbers' | ||
expected DOMElement not to contain elements matching '[data-test-id="numbers"]' | ||
NodeList[ | ||
<ol data-test-id="numbers"> | ||
<li>...</li> | ||
<li>...</li> | ||
<li>...</li> | ||
</ol> // should be removed | ||
] | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
Assert that an element have the given `data-test-id` attribute. | ||
|
||
```js | ||
var element = createElement(` | ||
<button data-test-id="publish" class="primary" disabled> | ||
Publish | ||
</button> | ||
`); | ||
|
||
expect(element, 'to have test id', 'publish'); | ||
``` | ||
|
||
In case of a failing expectation you get the following output: | ||
|
||
```js | ||
expect(element, 'to have test id', 'approve'); | ||
``` | ||
|
||
```output | ||
expected | ||
<button data-test-id="publish" class="primary" disabled> | ||
Publish | ||
</button> | ||
to have test id 'approve' | ||
expected DOMElement to match '[data-test-id="approve"]' | ||
``` | ||
|
||
You can also assert that an element does not have a test id: | ||
|
||
```js | ||
expect(element, 'not to have test id', 'approve'); | ||
``` | ||
|
||
In case of a failing expectation you get the following output: | ||
|
||
```js | ||
expect(element, 'not to have test id', 'publish'); | ||
``` | ||
|
||
```output | ||
expected | ||
<button data-test-id="publish" class="primary" disabled> | ||
Publish | ||
</button> | ||
not to have test id 'publish' | ||
expected DOMElement not to match '[data-test-id="publish"]' | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.