Skip to content

Commit 83b7f5f

Browse files
geneukumchriskrycho
authored andcommittedDec 15, 2022
DOC: API: add DOM query helper examples
Let's add an example usage of all of the DOM query helpers (find, findAll, getRootElement) to the API docs. (cherry picked from commit 7bd16c1)
1 parent 335019d commit 83b7f5f

File tree

4 files changed

+49
-4
lines changed

4 files changed

+49
-4
lines changed
 

‎API.md

+29-4
Original file line numberDiff line numberDiff line change
@@ -493,6 +493,14 @@ Find the first element matched by the given selector. Equivalent to calling
493493

494494
* `selector` **[string][64]** the selector to search for
495495

496+
#### Examples
497+
498+
Find all of the elements matching '.my-selector'.
499+
500+
```javascript
501+
findAll('.my-selector');
502+
```
503+
496504
Returns **[Element][65]** matched element or null
497505

498506
### findAll
@@ -505,12 +513,29 @@ of a `NodeList`.
505513

506514
* `selector` **[string][64]** the selector to search for
507515

516+
#### Examples
517+
518+
Finding the first element with id 'foo'
519+
520+
```javascript
521+
find('#foo');
522+
```
523+
508524
Returns **[Array][70]** array of matched elements
509525

510526
### getRootElement
511527

512528
Get the root element of the application under test (usually `#ember-testing`)
513529

530+
#### Examples
531+
532+
Getting the root element of the application and checking that it is equal
533+
to the element with id 'ember-testing'.
534+
535+
```javascript
536+
assert.equal(getRootElement(), document.querySelector('#ember-testing'));
537+
```
538+
514539
Returns **[Element][65]** the root element
515540

516541
## Routing Helpers
@@ -1216,23 +1241,23 @@ Returns **([Array][70]\<Warning> | [Promise][66]<[Array][70]\<Warning>>)** An ar
12161241

12171242
[54]: #getdeprecations
12181243

1219-
[55]: #examples-19
1244+
[55]: #examples-22
12201245

12211246
[56]: #getdeprecationsduringcallback
12221247

12231248
[57]: #parameters-29
12241249

1225-
[58]: #examples-20
1250+
[58]: #examples-23
12261251

12271252
[59]: #getwarnings
12281253

1229-
[60]: #examples-21
1254+
[60]: #examples-24
12301255

12311256
[61]: #getwarningsduringcallback
12321257

12331258
[62]: #parameters-30
12341259

1235-
[63]: #examples-22
1260+
[63]: #examples-25
12361261

12371262
[64]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
12381263

‎addon-test-support/@ember/test-helpers/dom/find-all.ts

+6
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ import { toArray } from '../ie-11-polyfills';
99
@public
1010
@param {string} selector the selector to search for
1111
@return {Array} array of matched elements
12+
13+
@example
14+
<caption>
15+
Finding the first element with id 'foo'
16+
</caption>
17+
find('#foo');
1218
*/
1319
export default function findAll(selector: string): Element[] {
1420
if (!selector) {

‎addon-test-support/@ember/test-helpers/dom/find.ts

+7
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,13 @@ import getElement from './-get-element';
77
@public
88
@param {string} selector the selector to search for
99
@return {Element} matched element or null
10+
11+
@example
12+
<caption>
13+
Find all of the elements matching '.my-selector'.
14+
</caption>
15+
findAll('.my-selector');
16+
1017
*/
1118
export default function find(selector: string): Element | null {
1219
if (!selector) {

‎addon-test-support/@ember/test-helpers/dom/get-root-element.ts

+7
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,13 @@ import { isDocument, isElement } from './-target';
66
77
@public
88
@returns {Element} the root element
9+
10+
@example
11+
<caption>
12+
Getting the root element of the application and checking that it is equal
13+
to the element with id 'ember-testing'.
14+
</caption>
15+
assert.equal(getRootElement(), document.querySelector('#ember-testing'));
916
*/
1017
export default function getRootElement(): Element | Document {
1118
let context = getContext();

0 commit comments

Comments
 (0)
Please sign in to comment.