jasmine-dom-spec
Advanced tools
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.
Check that the tested object is a DOM node with a property checked equal
to true.
0.1.0
No parameters
Expect [actual] [NOT] to be checked
it('should pass', () => {
const actual = document.createElement('input');
actual.type = 'checkbox';
actual.checked = true;
expect(actual).toBeChecked();
});
Check that the tested object is a DOM node not attached to the current active document window.
0.1.0
No parameters
Expect [actual] [NOT] to be detached element
it('should pass', () => {
const actual = document.createElement('div');
expect(actual).toBeDetachedElement();
document.body.appendChild(actual);
expect(actual).not.toBeDetachedElement();
});
Check that the tested object is a DOM node with a property disabled equal
to true.
0.1.0
No parameters
Expect [actual] [NOT] to be disabled
it('should pass', () => {
const actual = document.createElement('input');
actual.disabled = true;
expect(actual).toBeDisabled();
});
Check that the tested object is displayed: it means that it does not
have a display style set to none..
0.4.0
No parameters
Expect [actual] [NOT] to be displayed
it('should pass', () => {
const actual = document.createElement('div');
expect(actual).toBeDisplayed();
actual.style.display = 'none';
expect(actual).not.toBeDisplayed();
});
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).
0.1.0
No parameters
Expect [actual] [NOT] to be focused
it('should pass', () => {
const actual = document.getElementById('my-input');
actual.focus();
expect(actual).toBeFocused();
});
Check that the tested object is a DOM node property indeterminate equal
to true.
0.1.0
No parameters
Expect [actual] [NOT] to be indeterminate
it('should pass', () => {
const actual = document.createElement('input');
actual.type = 'checkbox';
actual.indeterminate = true;
expect(actual).toBeIndeterminate();
});
Check that the tested object is a DOM node with a property readOnly equal
to true.
0.9.0
No parameters
Expect [actual] [NOT] to be read-only
it('should pass', () => {
const actual = document.createElement('input');
actual.readOnly = true;
expect(actual).toBeReadOnly();
});
Check that the tested object is a DOM node with a property required equal
to true.
0.1.0
No parameters
Expect [actual] [NOT] to be required
it('should pass', () => {
const actual = document.createElement('input');
actual.required = true;
expect(actual).toBeRequired();
});
Check that the tested object is a DOM node with a property selected equal
to true.
0.1.0
No parameters
Expect [actual] [NOT] to be selected
it('should pass', () => {
const actual = document.createElement('option');
actual.selected = true;
expect(actual).toBeSelected();
});
Check that the tested object has expected attributes.
0.1.0
| Name | Type | Description |
|---|---|---|
attrName | String,Object | Attribute name (or map of attributes). |
attrValue | String,RegExp,[object Object],[object Object] | Attribute value or a jasmine matcher (i.e jasmine.any(<Type>)). |
Expect [actual] [NOT] to have attributes [expected]
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()});
});
Check that the tested object has expected computed style value (the css style property
name can dash-cased, such as font-size, or camel cased, such as fontSize).
0.9.0
| Name | Type | Description |
|---|---|---|
styleName | String,Object | Style name or object of styles. |
styleValue | String,RegExp,[object Object],[object Object] | Style value or a jasmine matcher (i.e jasmine.any(<Type>)). |
Expect [actual] [NOT] to have computed styles [expected]
it('should pass', () => {
const actual = document.createElement('input');
actual.required = true;
actual.checked = false;
expect(actual).toHaveComputedStyle('display', 'none');
expect(actual).toHaveComputedStyle('font-size', '10px');
expect(actual).toHaveComputedStyle('font-size', /10/);
expect(actual).toHaveComputedStyle({fontSize: '10px', display: 'none'});
expect(actual).toHaveComputedStyle({fontSize: /10/, display: 'none'});
expect(actual).toHaveComputedStyle({fontSize: jasmine.anything()});
});
Check that the tested object has expected css classes.
0.1.0
| Name | Type | Description |
|---|---|---|
expected | Array<string>,String | The expected class name. |
Expect [actual] [NOT] to have css class [cssClass]
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');
});
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.
0.1.0
| Name | Type | Description |
|---|---|---|
html | String,Number,Boolean,RegExp,[object Object],[object Object] | The expected html or a jasmine matcher (i.e jasmine.any(<Type>)). |
Expect [actual] [NOT] to have HTML [expectedHtml] but was [actualHtml]
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>');
});
Check that the tested object is a DOM node with expected id.
0.1.0
| Name | Type | Description |
|---|---|---|
id | String,RegExp,[object Object],[object Object] | The expected id or a jasmine matcher (i.e jasmine.any(<Type>)). |
Expect [actual] [NOT] to have id [id] but was [id]
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');
});
Check that the tested object has expected properties.
0.1.0
| Name | Type | Description |
|---|---|---|
propName | String,Object | Property name (or object of properties). |
propValue | [object Object] | Property value. |
Expect [actual] [NOT] to have properties [expected]
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)});
});
Check that the tested object is a DOM node with a selectedIndex property with an expected value.
0.9.0
| Name | Type | Description |
|---|---|---|
selectedIndex | Number,[object Object],[object Object] | The expected selectedIndex or a jasmine matcher (i.e jasmine.any(<Type>)). |
Expect [actual] [NOT] to have id [id] but was [id]
it('should pass', () => {
const actual = document.createElement('select');
actual.appendChild(document.createElement('option'));
actual.appendChild(document.createElement('option'));
actual.selectedIndex = 1;
expect(actual).toHaveSelectedIndex(1);
expect(actual).not.toHaveSelectedIndex(0);
});
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).
0.1.0
| Name | Type | Description |
|---|---|---|
styleName | String,Object | Style name or object of styles. |
styleValue | String,RegExp,[object Object],[object Object] | Style value or a jasmine matcher (i.e jasmine.any(<Type>)). |
Expect [actual] [NOT] to have styles [expected]
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()});
});
Check that the tested object is a DOM node with expected tag name.
0.1.0
| Name | Type | Description |
|---|---|---|
tagName | String,RegExp,[object Object],[object Object] | The expected tag name or a jasmine matcher (i.e jasmine.any(<Type>)). |
Expect [actual] [NOT] to have tag name [expectedTagName] but was [actualTagName]
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');
});
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.
0.1.0
| Name | Type | Description |
|---|---|---|
text | `String,Number,Boolean,RegExp,Array<String | Number |
Expect [actual] [NOT] to have text [expectedText] but was [actualText]
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');
});
Check that the tested object is a DOM node property value equal
to an expected value.
0.1.0
| Name | Type | Description |
|---|---|---|
expectedValue | String,RegExp,[object Object],[object Object] | The expected value or a jasmine matcher (i.e jasmine.any(<Type>)). |
Expect [actual] [NOT] to have value [expectedValue] but was [actualValue]
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('');
});
MIT License (MIT)
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.
FAQs
DOM Matchers and assertions for Jasmine framework
We found that jasmine-dom-spec demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.