Permalink
541 lines (354 sloc) 15.1 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? The root element of the DOM in which to search for the target (optional, default document)

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.

Parameters

Examples

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

isNotChecked

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

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();

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('.foo').isVisible();

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').hasNoAttribute('disabled');

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.

Parameters

Examples

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

hasClass

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

Parameters

Examples

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

doesNotHaveClass

Assert that the [HTMLElement][] does not have the expected CSS class using classList.

Aliases: hasNoClass, lacksClass

Parameters

Examples

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

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.

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();

includesText

Assert that the text of the [HTMLElement][] or an [HTMLElement][] matching the selector contains the given text, using the textContent attribute.

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');

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();