Nondeterministic Polynomial Munchies

    jasmine-dom-spec
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.0 • Public • Published

    jasmine-dom-spec

    Build Status Npm version Greenkeeper badge

    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.

    Install

    npm i jasmine-dom-spec

    DownloadsWeekly Downloads

    4

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    67.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • mickael.jeanroy