export interface AssertionResult { result: boolean; actual: any; expected: any; message: string; } export interface ExistsOptions { count: number; } export default class DOMAssertions { private target; private rootElement; private testContext; constructor(target: string | Element | null, rootElement: Element | Document, testContext: Assert); /** * Assert an {@link HTMLElement} (or multiple) matching the `selector` exists. * * @param {string?} message * * @example * assert.dom('#title').exists(); * * @see {@link #doesNotExist} */ exists(message?: string): DOMAssertions; /** * Assert an {@link HTMLElement} (or multiple) matching the `selector` exists. * * @param {object?} options * @param {number?} options.count * @param {string?} message * * @example * assert.dom('.choice').exists({ count: 4 }); * * @see {@link #doesNotExist} */ exists(options: ExistsOptions, message?: string): DOMAssertions; /** * Assert an {@link HTMLElement} matching the `selector` does not exists. * * @param {string?} message * * @example * assert.dom('.should-not-exist').doesNotExist(); * * @see {@link #exists} */ doesNotExist(message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the * `selector` is currently checked. * * Note: This also supports `aria-checked="true/false"`. * * @param {string?} message * * @example * assert.dom('input.active').isChecked(); * * @see {@link #isNotChecked} */ isChecked(message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the * `selector` is currently unchecked. * * Note: This also supports `aria-checked="true/false"`. * * @param {string?} message * * @example * assert.dom('input.active').isNotChecked(); * * @see {@link #isChecked} */ isNotChecked(message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the * `selector` is currently focused. * * @param {string?} message * * @example * assert.dom('input.email').isFocused(); * * @see {@link #isNotFocused} */ isFocused(message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the * `selector` is not currently focused. * * @param {string?} message * * @example * assert.dom('input[type="password"]').isNotFocused(); * * @see {@link #isFocused} */ isNotFocused(message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the * `selector` is currently required. * * @param {string?} message * * @example * assert.dom('input[type="text"]').isRequired(); * * @see {@link #isNotRequired} */ isRequired(message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the * `selector` is currently not required. * * @param {string?} message * * @example * assert.dom('input[type="text"]').isNotRequired(); * * @see {@link #isRequired} */ isNotRequired(message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} passes validation * * Validity is determined by asserting that: * * - `element.reportValidity() === true` * * @param {string?} message * * @example * assert.dom('.input').isValid(); * * @see {@link #isValid} */ isValid(message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} does not pass validation * * Validity is determined by asserting that: * * - `element.reportValidity() === true` * * @param {string?} message * * @example * assert.dom('.input').isNotValid(); * * @see {@link #isValid} */ isNotValid(message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the * `selector` exists and is visible. * * 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, * but not necessarily in the viewport. * * @param {string?} message * * @example * assert.dom('.foo').isVisible(); * * @see {@link #isNotVisible} */ isVisible(message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the * `selector` exists and is visible. * * 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, * but not necessarily in the viewport. * * @param {object?} options * @param {number?} options.count * @param {string?} message * * @example * assert.dom('.choice').isVisible({ count: 4 }); * * @see {@link #isNotVisible} */ isVisible(options: ExistsOptions, message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the * `selector` does not exist or is not visible on the page. * * 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, * but not necessarily in the viewport. * * @param {string?} message * * @example * assert.dom('.foo').isNotVisible(); * * @see {@link #isVisible} */ isNotVisible(message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} has an attribute with the provided `name`. * * @param {string} name * * @example * assert.dom('input.password-input').hasAttribute('disabled'); * * @see {@link #doesNotHaveAttribute} */ hasAttribute(name: string): DOMAssertions; /** * Assert that the {@link HTMLElement} has an attribute with the provided `name` * and checks if the attribute `value` matches the provided text or regular * expression. * * @param {string} name * @param {string|RegExp|object} value * @param {string?} message * * @example * assert.dom('input.password-input').hasAttribute('type', 'password'); * * @see {@link #doesNotHaveAttribute} */ hasAttribute(name: string, value: string | RegExp | { any: true; }, message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} has no attribute with the provided `name`. * * **Aliases:** `hasNoAttribute`, `lacksAttribute` * * @param {string} name * @param {string?} message * * @example * assert.dom('input.username').hasNoAttribute('disabled'); * * @see {@link #hasAttribute} */ doesNotHaveAttribute(name: string, message?: string): DOMAssertions; hasNoAttribute(name: string, message?: string): DOMAssertions; lacksAttribute(name: string, message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} has an ARIA attribute with the provided * `name` and optionally checks if the attribute `value` matches the provided * text or regular expression. * * @param {string} name * @param {string|RegExp|object?} value * @param {string?} message * * @example * assert.dom('button').hasAria('pressed', 'true'); * * @see {@link #hasNoAria} */ hasAria(name: string, value?: string | RegExp | { any: true; }, message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} has no ARIA attribute with the * provided `name`. * * @param {string} name * @param {string?} message * * @example * assert.dom('button').doesNotHaveAria('pressed'); * * @see {@link #hasAria} */ doesNotHaveAria(name: string, message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} has a property with the provided `name` * and checks if the property `value` matches the provided text or regular * expression. * * @param {string} name * @param {RegExp|any} value * @param {string?} message * * @example * assert.dom('input.password-input').hasProperty('type', 'password'); * * @see {@link #doesNotHaveProperty} */ hasProperty(name: string, value: unknown, message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the * `selector` is disabled. * * @param {string?} message * * @example * assert.dom('.foo').isDisabled(); * * @see {@link #isNotDisabled} */ isDisabled(message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the * `selector` is not disabled. * * **Aliases:** `isEnabled` * * @param {string?} message * * @example * assert.dom('.foo').isNotDisabled(); * * @see {@link #isDisabled} */ isNotDisabled(message?: string): DOMAssertions; isEnabled(message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} has the `expected` CSS class using * [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). * * `expected` can also be a regular expression, and the assertion will return * true if any of the element's CSS classes match. * * @param {string|RegExp} expected * @param {string?} message * * @example * assert.dom('input[type="password"]').hasClass('secret-password-input'); * * @example * assert.dom('input[type="password"]').hasClass(/.*password-input/); * * @see {@link #doesNotHaveClass} */ hasClass(expected: string | RegExp, message?: string): DOMAssertions; /** * Assert that the {@link HTMLElement} does not have the `expected` CSS class using * [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). * * `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` * * @param {string|RegExp} expected * @param {string?} message * * @example * assert.dom('input[type="password"]').doesNotHaveClass('username-input'); * * @example * assert.dom('input[type="password"]').doesNotHaveClass(/username-.*-input/); * * @see {@link #hasClass} */ doesNotHaveClass(expected: string | RegExp, message?: string): DOMAssertions; hasNoClass(expected: string | RegExp, message?: string): DOMAssertions; lacksClass(expected: string | RegExp, message?: string): DOMAssertions; /** * Assert that the [HTMLElement][] has the `expected` style declarations using * [`window.getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle). * * @param {object} expected * @param {string?} message * * @example * assert.dom('.progress-bar').hasStyle({ * opacity: 1, * display: 'block' * }); * * @see {@link #hasClass} */ hasStyle(expected: object, message?: string): DOMAssertions; hasPseudoElementStyle(selector: string, expected: object, message?: string): DOMAssertions; /** * Assert that the [HTMLElement][] does not have the `expected` style declarations using * [`window.getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle). * * @param {object} expected * @param {string?} message * * @example * assert.dom('.progress-bar').doesNotHaveStyle({ * opacity: 1, * display: 'block' * }); * * @see {@link #hasClass} */ doesNotHaveStyle(expected: object, message?: string): DOMAssertions; doesNotHavePseudoElementStyle(selector: string, expected: object, message: string): DOMAssertions; /** * Assert that the text of the {@link HTMLElement} or an {@link HTMLElement} * matching the `selector` matches the `expected` text, using the * [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) * 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 * > in as a RegEx pattern. * * **Aliases:** `matchesText` * * @param {string|RegExp} expected * @param {string?} message * * @example * //