Skip to content

API.md

Latest commit

 

History

History
1407 lines (885 loc) · 27.2 KB

API.md

File metadata and controls

1407 lines (885 loc) · 27.2 KB

Table of Contents

assert.dom()

Once installed the DOM element assertions are available at assert.dom(...).*:

Parameters

  • target (string | HTMLElement) A CSS selector that can be used to find elements using querySelector(), or an [HTMLElement][] (Not all assertions support both target types.) (optional, default rootElement or document)
  • rootElement (HTMLElement | Document | ShadowRoot | null)? The root element of the DOM in which to search for the target (optional, defaults document when null or not provided)

Examples

test('the title exists', function(assert) {
  assert.dom('#title').exists();
});

DOMAssertions

exists

Assert an HTMLElement (or multiple) matching the selector exists.

Parameters

Examples

assert.dom('#title').exists();
assert.dom('.choice').exists({ count: 4 });

doesNotExist

Assert an HTMLElement matching the selector does not exists.

Parameters

Examples

assert.dom('.should-not-exist').doesNotExist();

isChecked

Assert that the HTMLElement or an HTMLElement matching the selector is currently checked.

Note: This also supports aria-checked="true/false".

Parameters

Examples

assert.dom('input.active').isChecked();

isNotChecked

Assert that the HTMLElement or an HTMLElement matching the selector is currently unchecked.

Note: This also supports aria-checked="true/false".

Parameters

Examples

assert.dom('input.active').isNotChecked();

isFocused

Assert that the HTMLElement or an HTMLElement matching the selector is currently focused.

Parameters

Examples

assert.dom('input.email').isFocused();

isNotFocused

Assert that the HTMLElement or an HTMLElement matching the selector is not currently focused.

Parameters

Examples

assert.dom('input[type="password"]').isNotFocused();

isRequired

Assert that the HTMLElement or an HTMLElement matching the selector is currently required.

Parameters

Examples

assert.dom('input[type="text"]').isRequired();

isNotRequired

Assert that the HTMLElement or an HTMLElement matching the selector is currently not required.

Parameters

Examples

assert.dom('input[type="text"]').isNotRequired();

isValid

Assert that the HTMLElement passes validation

Validity is determined by asserting that:

  • element.reportValidity() === true

Parameters

Examples

assert.dom('.input').isValid();

isNotValid

Assert that the HTMLElement does not pass validation

Validity is determined by asserting that:

  • element.reportValidity() === true

Parameters

Examples

assert.dom('.input').isNotValid();

isVisible

Assert that the HTMLElement or an 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.

Parameters

Examples

assert.dom('#title').isVisible();
assert.dom('.choice').isVisible({ count: 4 });

isNotVisible

Assert that the HTMLElement or an 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.

Parameters

Examples

assert.dom('.foo').isNotVisible();

hasAttribute

Assert that the HTMLElement has an attribute with the provided name and optionally checks if the attribute value matches the provided text or regular expression.

Parameters

Examples

assert.dom('input.password-input').hasAttribute('type', 'password');

doesNotHaveAttribute

Assert that the HTMLElement has no attribute with the provided name.

Aliases: hasNoAttribute, lacksAttribute

Parameters

Examples

assert.dom('input.username').doesNotHaveAttribute('disabled');

hasAria

Assert that the HTMLElement has an ARIA attribute with the provided name and optionally checks if the attribute value matches the provided text or regular expression.

Parameters

Examples

assert.dom('button').hasAria('pressed', 'true');

doesNotHaveAria

Assert that the HTMLElement has no ARIA attribute with the provided name.

Aliases: hasNoAria, lacksAria

Parameters

Examples

assert.dom('button').doesNotHaveAria('pressed');

hasProperty

Assert that the HTMLElement has a property with the provided name and checks if the property value matches the provided text or regular expression.

Parameters

Examples

assert.dom('input.password-input').hasProperty('type', 'password');

isDisabled

Assert that the HTMLElement or an HTMLElement matching the selector is disabled.

Parameters

Examples

assert.dom('.foo').isDisabled();

isNotDisabled

Assert that the HTMLElement or an HTMLElement matching the selector is not disabled.

Aliases: isEnabled

Parameters

Examples

assert.dom('.foo').isNotDisabled();

hasClass

Assert that the HTMLElement has the expected CSS class using classList.

expected can also be a regular expression, and the assertion will return true if any of the element's CSS classes match.

Parameters

Examples

assert.dom('input[type="password"]').hasClass('secret-password-input');
assert.dom('input[type="password"]').hasClass(/.*password-input/);

doesNotHaveClass

Assert that the HTMLElement does not have the expected CSS class using 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

Parameters

Examples

assert.dom('input[type="password"]').doesNotHaveClass('username-input');
assert.dom('input[type="password"]').doesNotHaveClass(/username-.*-input/);

hasStyle

Assert that the [HTMLElement][] has the expected style declarations using window.getComputedStyle.

Parameters

Examples

assert.dom('.progress-bar').hasStyle({
  opacity: 1,
  display: 'block'
});

hasPseudoElementStyle

Assert that the pseudo element for selector of the [HTMLElement][] has the expected style declarations using window.getComputedStyle.

Parameters

Examples

assert.dom('.progress-bar').hasPseudoElementStyle(':after', {
  content: '";"',
});

doesNotHaveStyle

Assert that the [HTMLElement][] does not have the expected style declarations using window.getComputedStyle.

Parameters

Examples

assert.dom('.progress-bar').doesNotHaveStyle({
  opacity: 1,
  display: 'block'
});

doesNotHavePseudoElementStyle

Assert that the pseudo element for selector of the [HTMLElement][] does not have the expected style declarations using window.getComputedStyle.

Parameters

Examples

assert.dom('.progress-bar').doesNotHavePseudoElementStyle(':after', {
  content: '";"',
});

hasText

Assert that the text of the HTMLElement or an HTMLElement matching the selector matches the expected text, using the 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

Parameters

Examples

// <h2 id="title">
//   Welcome to <b>QUnit</b>
// </h2>

assert.dom('#title').hasText('Welcome to QUnit');
assert.dom('.foo').hasText(/[12]\d{3}/);

hasAnyText

Assert that the textContent property of an HTMLElement is not empty.

Parameters

Examples

assert.dom('button.share').hasAnyText();

hasNoText

Assert that the textContent property of an HTMLElement is empty.

Parameters

Examples

assert.dom('div').hasNoText();

includesText

Assert that the text of the HTMLElement or an HTMLElement matching the selector contains the given text, using the textContent 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 selector and pass your expected text in as a RegEx pattern.

Aliases: containsText, hasTextContaining

Parameters

Examples

assert.dom('#title').includesText('Welcome');

doesNotIncludeText

Assert that the text of the HTMLElement or an HTMLElement matching the selector does not include the given text, using the textContent attribute.

Aliases: doesNotContainText, doesNotHaveTextContaining

Parameters

Examples

assert.dom('#title').doesNotIncludeText('Welcome');

hasValue

Assert that the value property of an HTMLInputElement matches the expected text or regular expression.

If no expected value is provided, the assertion will fail if the value is an empty string.

Parameters

Examples

assert.dom('input.username').hasValue('HSimpson');

includesValue

Assert that the value property of an HTMLInputElement includes the expected text.

Aliases: containsValue, hasValueContaining

Parameters

Examples

assert.dom('textarea.description').includesValue('https://example.com');

doesNotIncludeValue

Assert that the value property of an HTMLInputElement does not include the expected text.

Aliases: doesNotContainValue, doesNotHaveValueContaining

Parameters

Examples

assert.dom('textarea.description').doesNotIncludeValue('https://example.com');

hasAnyValue

Assert that the value property of an HTMLInputElement is not empty.

Parameters

Examples

assert.dom('input.username').hasAnyValue();

hasNoValue

Assert that the value property of an HTMLInputElement is empty.

Aliases: lacksValue

Parameters

Examples

assert.dom('input.username').hasNoValue();

matchesSelector

Assert that the target selector selects only Elements that are also selected by compareSelector.

Parameters

Examples

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 compareSelector.

Parameters

Examples

assert.dom('input').doesNotMatchSelector('input[disabled]')

hasTagName

Assert that the tagName of the HTMLElement or an HTMLElement matching the selector matches the expected tagName, using the tagName property of the HTMLElement.

Parameters

Examples

// <h1 id="title">
//   Title
// </h1>

assert.dom('#title').hasTagName('h1');

doesNotHaveTagName

Assert that the tagName of the HTMLElement or an HTMLElement matching the selector does not match the expected tagName, using the tagName property of the HTMLElement.

Parameters

Examples

// <section id="block">
//   Title
// </section>

assert.dom('section#block').doesNotHaveTagName('div');

hasHtml

Assert that the html of the HTMLElement or an HTMLElement matching the selector matches the expected html, using the innerHTML property of the HTMLElement.

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 html in as a RegEx pattern.

Parameters

Examples

// <h1>
//   A <b>great</b> thing
// </h1>

assert.dom('h1').hasHtml('A <b>great</b> thing');
assert.dom('h1').hasHtml(/.*\s<b>great.+/);

doesNotHaveHtml

Assert that the html of the HTMLElement or an HTMLElement matching the selector does not match the expected html, using the innerHTML property of the HTMLElement.

Parameters

Examples

// <section>
//   a <b>great</b> thing
// </section>

assert.dom('section').doesNotHaveHtml('<b>fantastic</b>');

includesHtml

Assert that the html of the HTMLElement or an HTMLElement matching the selector contains the given html, using the innerHTML property.

Note: This assertion will collapse whitespace in innerHTML 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 selector and pass your expected html in as a RegEx pattern.

Aliases: containsHtml, hasHtmlContaining

Parameters

Examples

assert.dom('#title').includesHtml('<b>nice</b>');

doesNotIncludeHtml

Assert that the html of the HTMLElement or an HTMLElement matching the selector does not include the given expected html, using the innerHTML attribute.

Aliases: doesNotContainHtml, doesNotHaveHtmlContaining

Parameters

Examples

assert.dom('#title').doesNotIncludeHtml('<i>nope</i>');