UNPKG

21.4 kBTypeScriptView Raw
1export interface AssertionResult {
2 result: boolean;
3 actual: any;
4 expected: any;
5 message: string;
6}
7export interface ExistsOptions {
8 count: number;
9}
10export default class DOMAssertions {
11 private target;
12 private rootElement;
13 private testContext;
14 constructor(target: string | Element | null, rootElement: Element | Document, testContext: Assert);
15 /**
16 * Assert an {@link HTMLElement} (or multiple) matching the `selector` exists.
17 *
18 * @param {string?} message
19 *
20 * @example
21 * assert.dom('#title').exists();
22 *
23 * @see {@link #doesNotExist}
24 */
25 exists(message?: string): DOMAssertions;
26 /**
27 * Assert an {@link HTMLElement} (or multiple) matching the `selector` exists.
28 *
29 * @param {object?} options
30 * @param {number?} options.count
31 * @param {string?} message
32 *
33 * @example
34 * assert.dom('.choice').exists({ count: 4 });
35 *
36 * @see {@link #doesNotExist}
37 */
38 exists(options: ExistsOptions, message?: string): DOMAssertions;
39 /**
40 * Assert an {@link HTMLElement} matching the `selector` does not exists.
41 *
42 * @param {string?} message
43 *
44 * @example
45 * assert.dom('.should-not-exist').doesNotExist();
46 *
47 * @see {@link #exists}
48 */
49 doesNotExist(message?: string): DOMAssertions;
50 /**
51 * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the
52 * `selector` is currently checked.
53 *
54 * Note: This also supports `aria-checked="true/false"`.
55 *
56 * @param {string?} message
57 *
58 * @example
59 * assert.dom('input.active').isChecked();
60 *
61 * @see {@link #isNotChecked}
62 */
63 isChecked(message?: string): DOMAssertions;
64 /**
65 * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the
66 * `selector` is currently unchecked.
67 *
68 * Note: This also supports `aria-checked="true/false"`.
69 *
70 * @param {string?} message
71 *
72 * @example
73 * assert.dom('input.active').isNotChecked();
74 *
75 * @see {@link #isChecked}
76 */
77 isNotChecked(message?: string): DOMAssertions;
78 /**
79 * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the
80 * `selector` is currently focused.
81 *
82 * @param {string?} message
83 *
84 * @example
85 * assert.dom('input.email').isFocused();
86 *
87 * @see {@link #isNotFocused}
88 */
89 isFocused(message?: string): DOMAssertions;
90 /**
91 * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the
92 * `selector` is not currently focused.
93 *
94 * @param {string?} message
95 *
96 * @example
97 * assert.dom('input[type="password"]').isNotFocused();
98 *
99 * @see {@link #isFocused}
100 */
101 isNotFocused(message?: string): DOMAssertions;
102 /**
103 * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the
104 * `selector` is currently required.
105 *
106 * @param {string?} message
107 *
108 * @example
109 * assert.dom('input[type="text"]').isRequired();
110 *
111 * @see {@link #isNotRequired}
112 */
113 isRequired(message?: string): DOMAssertions;
114 /**
115 * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the
116 * `selector` is currently not required.
117 *
118 * @param {string?} message
119 *
120 * @example
121 * assert.dom('input[type="text"]').isNotRequired();
122 *
123 * @see {@link #isRequired}
124 */
125 isNotRequired(message?: string): DOMAssertions;
126 /**
127 * Assert that the {@link HTMLElement} passes validation
128 *
129 * Validity is determined by asserting that:
130 *
131 * - `element.reportValidity() === true`
132 *
133 * @param {string?} message
134 *
135 * @example
136 * assert.dom('.input').isValid();
137 *
138 * @see {@link #isValid}
139 */
140 isValid(message?: string): DOMAssertions;
141 /**
142 * Assert that the {@link HTMLElement} does not pass validation
143 *
144 * Validity is determined by asserting that:
145 *
146 * - `element.reportValidity() === true`
147 *
148 * @param {string?} message
149 *
150 * @example
151 * assert.dom('.input').isNotValid();
152 *
153 * @see {@link #isValid}
154 */
155 isNotValid(message?: string): DOMAssertions;
156 /**
157 * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the
158 * `selector` exists and is visible.
159 *
160 * Visibility is determined by asserting that:
161 *
162 * - the element's offsetWidth and offsetHeight are non-zero
163 * - any of the element's DOMRect objects have a non-zero size
164 *
165 * Additionally, visibility in this case means that the element is visible on the page,
166 * but not necessarily in the viewport.
167 *
168 * @param {string?} message
169 *
170 * @example
171 * assert.dom('.foo').isVisible();
172 *
173 * @see {@link #isNotVisible}
174 */
175 isVisible(message?: string): DOMAssertions;
176 /**
177 * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the
178 * `selector` exists and is visible.
179 *
180 * Visibility is determined by asserting that:
181 *
182 * - the element's offsetWidth and offsetHeight are non-zero
183 * - any of the element's DOMRect objects have a non-zero size
184 *
185 * Additionally, visibility in this case means that the element is visible on the page,
186 * but not necessarily in the viewport.
187 *
188 * @param {object?} options
189 * @param {number?} options.count
190 * @param {string?} message
191 *
192 * @example
193 * assert.dom('.choice').isVisible({ count: 4 });
194 *
195 * @see {@link #isNotVisible}
196 */
197 isVisible(options: ExistsOptions, message?: string): DOMAssertions;
198 /**
199 * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the
200 * `selector` does not exist or is not visible on the page.
201 *
202 * Visibility is determined by asserting that:
203 *
204 * - the element's offsetWidth or offsetHeight are zero
205 * - all of the element's DOMRect objects have a size of zero
206 *
207 * Additionally, visibility in this case means that the element is visible on the page,
208 * but not necessarily in the viewport.
209 *
210 * @param {string?} message
211 *
212 * @example
213 * assert.dom('.foo').isNotVisible();
214 *
215 * @see {@link #isVisible}
216 */
217 isNotVisible(message?: string): DOMAssertions;
218 /**
219 * Assert that the {@link HTMLElement} has an attribute with the provided `name`.
220 *
221 * @param {string} name
222 *
223 * @example
224 * assert.dom('input.password-input').hasAttribute('disabled');
225 *
226 * @see {@link #doesNotHaveAttribute}
227 */
228 hasAttribute(name: string): DOMAssertions;
229 /**
230 * Assert that the {@link HTMLElement} has an attribute with the provided `name`
231 * and checks if the attribute `value` matches the provided text or regular
232 * expression.
233 *
234 * @param {string} name
235 * @param {string|RegExp|object} value
236 * @param {string?} message
237 *
238 * @example
239 * assert.dom('input.password-input').hasAttribute('type', 'password');
240 *
241 * @see {@link #doesNotHaveAttribute}
242 */
243 hasAttribute(name: string, value: string | RegExp | {
244 any: true;
245 }, message?: string): DOMAssertions;
246 /**
247 * Assert that the {@link HTMLElement} has no attribute with the provided `name`.
248 *
249 * **Aliases:** `hasNoAttribute`, `lacksAttribute`
250 *
251 * @param {string} name
252 * @param {string?} message
253 *
254 * @example
255 * assert.dom('input.username').hasNoAttribute('disabled');
256 *
257 * @see {@link #hasAttribute}
258 */
259 doesNotHaveAttribute(name: string, message?: string): DOMAssertions;
260 hasNoAttribute(name: string, message?: string): DOMAssertions;
261 lacksAttribute(name: string, message?: string): DOMAssertions;
262 /**
263 * Assert that the {@link HTMLElement} has an ARIA attribute with the provided
264 * `name` and optionally checks if the attribute `value` matches the provided
265 * text or regular expression.
266 *
267 * @param {string} name
268 * @param {string|RegExp|object?} value
269 * @param {string?} message
270 *
271 * @example
272 * assert.dom('button').hasAria('pressed', 'true');
273 *
274 * @see {@link #hasNoAria}
275 */
276 hasAria(name: string, value?: string | RegExp | {
277 any: true;
278 }, message?: string): DOMAssertions;
279 /**
280 * Assert that the {@link HTMLElement} has no ARIA attribute with the
281 * provided `name`.
282 *
283 * @param {string} name
284 * @param {string?} message
285 *
286 * @example
287 * assert.dom('button').doesNotHaveAria('pressed');
288 *
289 * @see {@link #hasAria}
290 */
291 doesNotHaveAria(name: string, message?: string): DOMAssertions;
292 /**
293 * Assert that the {@link HTMLElement} has a property with the provided `name`
294 * and checks if the property `value` matches the provided text or regular
295 * expression.
296 *
297 * @param {string} name
298 * @param {RegExp|any} value
299 * @param {string?} message
300 *
301 * @example
302 * assert.dom('input.password-input').hasProperty('type', 'password');
303 *
304 * @see {@link #doesNotHaveProperty}
305 */
306 hasProperty(name: string, value: unknown, message?: string): DOMAssertions;
307 /**
308 * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the
309 * `selector` is disabled.
310 *
311 * @param {string?} message
312 *
313 * @example
314 * assert.dom('.foo').isDisabled();
315 *
316 * @see {@link #isNotDisabled}
317 */
318 isDisabled(message?: string): DOMAssertions;
319 /**
320 * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the
321 * `selector` is not disabled.
322 *
323 * **Aliases:** `isEnabled`
324 *
325 * @param {string?} message
326 *
327 * @example
328 * assert.dom('.foo').isNotDisabled();
329 *
330 * @see {@link #isDisabled}
331 */
332 isNotDisabled(message?: string): DOMAssertions;
333 isEnabled(message?: string): DOMAssertions;
334 /**
335 * Assert that the {@link HTMLElement} has the `expected` CSS class using
336 * [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList).
337 *
338 * `expected` can also be a regular expression, and the assertion will return
339 * true if any of the element's CSS classes match.
340 *
341 * @param {string|RegExp} expected
342 * @param {string?} message
343 *
344 * @example
345 * assert.dom('input[type="password"]').hasClass('secret-password-input');
346 *
347 * @example
348 * assert.dom('input[type="password"]').hasClass(/.*password-input/);
349 *
350 * @see {@link #doesNotHaveClass}
351 */
352 hasClass(expected: string | RegExp, message?: string): DOMAssertions;
353 /**
354 * Assert that the {@link HTMLElement} does not have the `expected` CSS class using
355 * [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList).
356 *
357 * `expected` can also be a regular expression, and the assertion will return
358 * true if none of the element's CSS classes match.
359 *
360 * **Aliases:** `hasNoClass`, `lacksClass`
361 *
362 * @param {string|RegExp} expected
363 * @param {string?} message
364 *
365 * @example
366 * assert.dom('input[type="password"]').doesNotHaveClass('username-input');
367 *
368 * @example
369 * assert.dom('input[type="password"]').doesNotHaveClass(/username-.*-input/);
370 *
371 * @see {@link #hasClass}
372 */
373 doesNotHaveClass(expected: string | RegExp, message?: string): DOMAssertions;
374 hasNoClass(expected: string | RegExp, message?: string): DOMAssertions;
375 lacksClass(expected: string | RegExp, message?: string): DOMAssertions;
376 /**
377 * Assert that the [HTMLElement][] has the `expected` style declarations using
378 * [`window.getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle).
379 *
380 * @param {object} expected
381 * @param {string?} message
382 *
383 * @example
384 * assert.dom('.progress-bar').hasStyle({
385 * opacity: 1,
386 * display: 'block'
387 * });
388 *
389 * @see {@link #hasClass}
390 */
391 hasStyle(expected: object, message?: string): DOMAssertions;
392 hasPseudoElementStyle(selector: string, expected: object, message?: string): DOMAssertions;
393 /**
394 * Assert that the [HTMLElement][] does not have the `expected` style declarations using
395 * [`window.getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle).
396 *
397 * @param {object} expected
398 * @param {string?} message
399 *
400 * @example
401 * assert.dom('.progress-bar').doesNotHaveStyle({
402 * opacity: 1,
403 * display: 'block'
404 * });
405 *
406 * @see {@link #hasClass}
407 */
408 doesNotHaveStyle(expected: object, message?: string): DOMAssertions;
409 doesNotHavePseudoElementStyle(selector: string, expected: object, message: string): DOMAssertions;
410 /**
411 * Assert that the text of the {@link HTMLElement} or an {@link HTMLElement}
412 * matching the `selector` matches the `expected` text, using the
413 * [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
414 * attribute and stripping/collapsing whitespace.
415 *
416 * `expected` can also be a regular expression.
417 *
418 * > Note: This assertion will collapse whitespace if the type you pass in is a string.
419 * > If you are testing specifically for whitespace integrity, pass your expected text
420 * > in as a RegEx pattern.
421 *
422 * **Aliases:** `matchesText`
423 *
424 * @param {string|RegExp} expected
425 * @param {string?} message
426 *
427 * @example
428 * // <h2 id="title">
429 * // Welcome to <b>QUnit</b>
430 * // </h2>
431 *
432 * assert.dom('#title').hasText('Welcome to QUnit');
433 *
434 * @example
435 * assert.dom('.foo').hasText(/[12]\d{3}/);
436 *
437 * @see {@link #includesText}
438 */
439 hasText(expected: string | RegExp | {
440 any: true;
441 }, message?: string): DOMAssertions;
442 matchesText(expected: string | RegExp | {
443 any: true;
444 }, message?: string): DOMAssertions;
445 /**
446 * Assert that the `textContent` property of an {@link HTMLElement} is not empty.
447 *
448 * @param {string?} message
449 *
450 * @example
451 * assert.dom('button.share').hasAnyText();
452 *
453 * @see {@link #hasText}
454 */
455 hasAnyText(message?: string): DOMAssertions;
456 /**
457 * Assert that the `textContent` property of an {@link HTMLElement} is empty.
458 *
459 * @param {string?} message
460 *
461 * @example
462 * assert.dom('div').hasNoText();
463 *
464 * @see {@link #hasNoText}
465 */
466 hasNoText(message?: string): DOMAssertions;
467 /**
468 * Assert that the text of the {@link HTMLElement} or an {@link HTMLElement}
469 * matching the `selector` contains the given `text`, using the
470 * [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
471 * attribute.
472 *
473 * > Note: This assertion will collapse whitespace in `textContent` before searching.
474 * > If you would like to assert on a string that *should* contain line breaks, tabs,
475 * > more than one space in a row, or starting/ending whitespace, use the {@link #hasText}
476 * > selector and pass your expected text in as a RegEx pattern.
477 *
478 * **Aliases:** `containsText`, `hasTextContaining`
479 *
480 * @param {string} text
481 * @param {string?} message
482 *
483 * @example
484 * assert.dom('#title').includesText('Welcome');
485 *
486 * @see {@link #hasText}
487 */
488 includesText(text: string, message?: string): DOMAssertions;
489 containsText(expected: string, message?: string): DOMAssertions;
490 hasTextContaining(expected: string, message?: string): DOMAssertions;
491 /**
492 * Assert that the text of the {@link HTMLElement} or an {@link HTMLElement}
493 * matching the `selector` does not include the given `text`, using the
494 * [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
495 * attribute.
496 *
497 * **Aliases:** `doesNotContainText`, `doesNotHaveTextContaining`
498 *
499 * @param {string} text
500 * @param {string?} message
501 *
502 * @example
503 * assert.dom('#title').doesNotIncludeText('Welcome');
504 */
505 doesNotIncludeText(text: string, message?: string): DOMAssertions;
506 doesNotContainText(unexpected: string, message?: string): DOMAssertions;
507 doesNotHaveTextContaining(unexpected: string, message?: string): DOMAssertions;
508 /**
509 * Assert that the `value` property of an {@link HTMLInputElement} matches
510 * the `expected` text or regular expression.
511 *
512 * If no `expected` value is provided, the assertion will fail if the
513 * `value` is an empty string.
514 *
515 * @param {string|RegExp|object?} expected
516 * @param {string?} message
517 *
518 * @example
519 * assert.dom('input.username').hasValue('HSimpson');
520
521 * @see {@link #hasAnyValue}
522 * @see {@link #hasNoValue}
523 */
524 hasValue(expected?: string | RegExp | {
525 any: true;
526 }, message?: string): DOMAssertions;
527 /**
528 * Assert that the `value` property of an {@link HTMLInputElement} is not empty.
529 *
530 * @param {string?} message
531 *
532 * @example
533 * assert.dom('input.username').hasAnyValue();
534 *
535 * @see {@link #hasValue}
536 * @see {@link #hasNoValue}
537 */
538 hasAnyValue(message?: string): DOMAssertions;
539 /**
540 * Assert that the `value` property of an {@link HTMLInputElement} is empty.
541 *
542 * **Aliases:** `lacksValue`
543 *
544 * @param {string?} message
545 *
546 * @example
547 * assert.dom('input.username').hasNoValue();
548 *
549 * @see {@link #hasValue}
550 * @see {@link #hasAnyValue}
551 */
552 hasNoValue(message?: string): DOMAssertions;
553 lacksValue(message?: string): DOMAssertions;
554 /**
555 * Assert that the target selector selects only Elements that are also selected by
556 * compareSelector.
557 *
558 * @param {string} compareSelector
559 * @param {string?} message
560 *
561 * @example
562 * assert.dom('p.red').matchesSelector('div.wrapper p:last-child')
563 */
564 matchesSelector(compareSelector: string, message?: string): DOMAssertions;
565 /**
566 * Assert that the target selector selects only Elements that are not also selected by
567 * compareSelector.
568 *
569 * @param {string} compareSelector
570 * @param {string?} message
571 *
572 * @example
573 * assert.dom('input').doesNotMatchSelector('input[disabled]')
574 */
575 doesNotMatchSelector(compareSelector: string, message?: string): DOMAssertions;
576 /**
577 * Assert that the tagName of the {@link HTMLElement} or an {@link HTMLElement}
578 * matching the `selector` matches the `expected` tagName, using the
579 * [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
580 * property of the {@link HTMLElement}.
581 *
582 * @param {string} expected
583 * @param {string?} message
584 *
585 * @example
586 * // <h1 id="title">
587 * // Title
588 * // </h1>
589 *
590 * assert.dom('#title').hasTagName('h1');
591 */
592 hasTagName(tagName: string, message?: string): DOMAssertions;
593 /**
594 * Assert that the tagName of the {@link HTMLElement} or an {@link HTMLElement}
595 * matching the `selector` does not match the `expected` tagName, using the
596 * [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
597 * property of the {@link HTMLElement}.
598 *
599 * @param {string} expected
600 * @param {string?} message
601 *
602 * @example
603 * // <section id="block">
604 * // Title
605 * // </section>
606 *
607 * assert.dom('section#block').doesNotHaveTagName('div');
608 */
609 doesNotHaveTagName(tagName: string, message?: string): DOMAssertions;
610 /**
611 * @private
612 */
613 private pushResult;
614 /**
615 * Finds a valid HTMLElement from target, or pushes a failing assertion if a valid
616 * element is not found.
617 * @private
618 * @returns (HTMLElement|null) a valid HTMLElement, or null
619 */
620 private findTargetElement;
621 /**
622 * Finds a valid HTMLElement from target
623 * @private
624 * @returns (HTMLElement|null) a valid HTMLElement, or null
625 * @throws TypeError will be thrown if target is an unrecognized type
626 */
627 private findElement;
628 /**
629 * Finds a collection of Element instances from target using querySelectorAll
630 * @private
631 * @returns (Element[]) an array of Element instances
632 * @throws TypeError will be thrown if target is an unrecognized type
633 */
634 private findElements;
635 /**
636 * @private
637 */
638 private get targetDescription();
639}