jasmine-dom-spec

Jasmine-Dom-Spec is a set of custom matchers to be able to test DOM nodes easily.

Jasmine-Dom-Spec is compatible with Jasmine 1.3 and Jasmine 2.0.X.

Matchers

toBeChecked

Check that the tested object is a DOM node with a property checked equal to true.

Since

0.1.0

Parameters

No parameters

Message

Expect [actual] [NOT] to be checked

Example:

it('should pass', () => {
  const actual = document.createElement('input');
  actual.type = 'checkbox';
  actual.checked = true;
  expect(actual).toBeChecked();
});

toBeDetachedElement

Check that the tested object is a DOM node not attached to the current active document window.

Since

0.1.0

Parameters

No parameters

Message

Expect [actual] [NOT] to be detached element

Example:

it('should pass', () => {
  const actual = document.createElement('div');
  expect(actual).toBeDetachedElement();
  document.body.appendChild(actual);
  expect(actual).not.toBeDetachedElement();
});

toBeDisabled

Check that the tested object is a DOM node with a property disabled equal to true.

Since

0.1.0

Parameters

No parameters

Message

Expect [actual] [NOT] to be disabled

Example:

it('should pass', () => {
  const actual = document.createElement('input');
  actual.disabled = true;
  expect(actual).toBeDisabled();
});

toBeDisplayed

Check that the tested object is displayed: it means that it does not have a display style set to none..

Since

0.4.0

Parameters

No parameters

Message

Expect [actual] [NOT] to be displayed

Example:

it('should pass', () => {
  const actual = document.createElement('div');
  expect(actual).toBeDisplayed();
  
  actual.style.display = 'none';
  expect(actual).not.toBeDisplayed();
});

toBeFocused

Check that the tested object has focus on the active document window (note that if element is not attached to the DOM, it can't have focus).

Since

0.1.0

Parameters

No parameters

Message

Expect [actual] [NOT] to be focused

Example:

it('should pass', () => {
  const actual = document.getElementById('my-input');
  actual.focus();
  expect(actual).toBeFocused();
});

toBeIndeterminate

Check that the tested object is a DOM node property indeterminate equal to true.

Since

0.1.0

Parameters

No parameters

Message

Expect [actual] [NOT] to be indeterminate

Example:

it('should pass', () => {
  const actual = document.createElement('input');
  actual.type = 'checkbox';
  actual.indeterminate = true;
  expect(actual).toBeIndeterminate();
});

toBeRequired

Check that the tested object is a DOM node with a property required equal to true.

Since

0.1.0

Parameters

No parameters

Message

Expect [actual] [NOT] to be required

Example:

it('should pass', () => {
  const actual = document.createElement('input');
  actual.required = true;
  expect(actual).toBeRequired();
});

toBeSelected

Check that the tested object is a DOM node with a property selected equal to true.

Since

0.1.0

Parameters

No parameters

Message

Expect [actual] [NOT] to be selected

Example:

it('should pass', () => {
  const actual = document.createElement('option');
  actual.selected = true;
  expect(actual).toBeSelected();
});

toHaveAttrs

Check that the tested object has expected attributes.

Since

0.1.0

Parameters

| Name | Type | Description | |------|------|-------------| | attrName | String,Object | Attribute name (or map of attributes). | | attrValue | String,RegExp,jasmine.Any,jasmine.Anything | Attribute value or a jasmine matcher (i.e jasmine.any(<Type>)). |

Message

Expect [actual] [NOT] to have attributes [expected]

Example:

it('should pass', () => {
  const actual = document.createElement('input');
  actual.setAttribute('data-id', '1');
  expect(actual).toHaveAttrs('data-id');
  expect(actual).toHaveAttrs('data-id', '1');
  expect(actual).toHaveAttrs('data-id', /1/);
  expect(actual).toHaveAttrs({'data-id': '1'});
  expect(actual).toHaveAttrs({'data-id': /1/});
  expect(actual).toHaveAttrs({'data-id': jasmine.anything()});
});

toHaveCssClass

Check that the tested object has expected css classes.

Since

0.1.0

Parameters

| Name | Type | Description | |------|------|-------------| | expected | Array.<string>,String | The expected class name. |

Message

Expect [actual] [NOT] to have css class [cssClass]

Example:

it('should pass', () => {
  const actual = document.createElement('div');
  actual.className = 'foo bar';
  expect(actual).toHaveCssClass('foo');
  expect(actual).toHaveCssClass('bar');
  expect(actual).toHaveCssClass(/foo/);
  expect(actual).toHaveCssClass('foo bar');
  expect(actual).toHaveCssClass('bar foo');
  expect(actual).toHaveCssClass(['bar', 'foo']);
  expect(actual).toHaveCssClass([/bar/, /foo/]);
  expect(actual).not.toHaveCssClass('foobar');
  expect(actual).not.toHaveCssClass('foo bar baz');
});

toHaveHtml

Check that the tested object is a DOM node with expected html content. If the expected html parameter is a number or a boolean, it will be converted to a string using its toString method.

Since

0.1.0

Parameters

| Name | Type | Description | |------|------|-------------| | html | String,Number,Boolean,RegExp,jasmine.Any,jasmine.Anything | The expected html or a jasmine matcher (i.e jasmine.any(<Type>)). |

Message

Expect [actual] [NOT] to have HTML [expectedHtml] but was [actualHtml]

Example:

it('should pass', () => {
  const actual = document.createElement('input');
  actual.innerHTML = '<span>foo</span>';
  expect(actual).toHaveHtml('<span>foo</span>');
  expect(actual).toHaveHtml('/foo/');
  expect(actual).toHaveHtml(jasmine.any(String));
  expect(actual).not.toHaveHtml('<div>foo</div>');
});

toHaveId

Check that the tested object is a DOM node with expected id.

Since

0.1.0

Parameters

| Name | Type | Description | |------|------|-------------| | id | String,RegExp,jasmine.Any,jasmine.Anything | The expected id or a jasmine matcher (i.e jasmine.any(<Type>)). |

Message

Expect [actual] [NOT] to have id [id] but was [id]

Example:

it('should pass', () => {
  const actual = document.createElement('div');
  actual.id = 'foo';
  expect(actual).toHaveId();
  expect(actual).toHaveId('foo');
  expect(actual).toHaveId(jasmine.any(String));
  expect(actual).not.toHaveId('bar');
});

toHaveProps

Check that the tested object has expected properties.

Since

0.1.0

Parameters

| Name | Type | Description | |------|------|-------------| | propName | String,Object | Property name (or object of properties). | | propValue | * | Property value. |

Message

Expect [actual] [NOT] to have properties [expected]

Example:

it('should pass', () => {
  const actual = document.createElement('input');
  actual.id = 'node-id';
  actual.required = true;
  actual.checked = false;
  expect(actual).toHaveProps('id', 'node-id');
  expect(actual).toHaveProps('id', /node-id/);
  expect(actual).toHaveProps('required', true);
  expect(actual).toHaveProps('checked', false);
  expect(actual).toHaveProps({required: true, checked: false});
  expect(actual).toHaveProps({required: jasmine.any(Boolean)});
});

toHaveStyle

Check that the tested object has expected style value (the css style property name can dash-cased, such as font-size, or camel cased, such as fontSize).

Since

0.1.0

Parameters

| Name | Type | Description | |------|------|-------------| | styleName | String,Object | Style name or object of styles. | | styleValue | String,RegExp,jasmine.Any,jasmine.Anything | Style value or a jasmine matcher (i.e jasmine.any(<Type>)). |

Message

Expect [actual] [NOT] to have styles [expected]

Example:

it('should pass', () => {
  const actual = document.createElement('input');
  actual.required = true;
  actual.checked = false;
  expect(actual).toHaveStyle('display', 'none');
  expect(actual).toHaveStyle('font-size', '10px');
  expect(actual).toHaveStyle('font-size', /10/);
  expect(actual).toHaveStyle({fontSize: '10px', display: 'none'});
  expect(actual).toHaveStyle({fontSize: /10/, display: 'none'});
  expect(actual).toHaveStyle({fontSize: jasmine.anything()});
});

toHaveTagName

Check that the tested object is a DOM node with expected tag name.

Since

0.1.0

Parameters

| Name | Type | Description | |------|------|-------------| | tagName | String,RegExp,jasmine.Any,jasmine.Anything | The expected tag name or a jasmine matcher (i.e jasmine.any(<Type>)). |

Message

Expect [actual] [NOT] to have tag name [expectedTagName] but was [actualTagName]

Example:

it('should pass', () => {
  const actual = document.createElement('input');
  expect(actual).toHaveTagName('input');
  expect(actual).toHaveTagName('INPUT');
  expect(actual).toHaveTagName(/input|select/i);
  expect(actual).not.toHaveTagName('div');
});

toHaveText

Check that the tested object is a DOM node with expected text content. If the expected text parameter is a number or a boolean, it will be converted to a string using its toString method.

Since

0.1.0

Parameters

| Name | Type | Description | |------|------|-------------| | text | String,Number,Boolean,RegExp,jasmine.Any,jasmine.Anything | The expected text or a jasmine matcher (i.e jasmine.any(<Type>)). |

Message

Expect [actual] [NOT] to have text [expectedText] but was [actualText]

Example:

it('should pass', () => {
  const actual = document.createElement('input');
  actual.textContent = '1';
  expect(actual).toHaveText('1');
  expect(actual).toHaveText(1);
  expect(actual).toHaveText(/1/);
  expect(actual).toHaveText(jasmine.any(String));
  expect(actual).not.toHaveText('foobar');
});

toHaveValue

Check that the tested object is a DOM node property value equal to an expected value.

Since

0.1.0

Parameters

| Name | Type | Description | |------|------|-------------| | expectedValue | String,RegExp,jasmine.Any,jasmine.Anything | The expected value or a jasmine matcher (i.e jasmine.any(<Type>)). |

Message

Expect [actual] [NOT] to have value [expectedValue] but was [actualValue]

Example:

it('should pass', () => {
  const actual = document.createElement('input');
  actual.value = 'foobar';
  expect(actual).toHaveValue('foobar');
  expect(actual).toHaveValue(/foobar/);
  expect(actual).toHaveValue(jasmine.any(String));
  expect(actual).not.toHaveValue('');
});

Licence

MIT License (MIT)

Contributing

If you think some matchers are missing or error messages are not useful enough, feel free to contribute and submit an issue or a pull request.