/unexpected-dom

DOM plugin for the unexpected assertion libary

Primary LanguageJavaScript

unexpected-dom

NPM version Build Status Coverage Status Dependency Status

Unexpected Dom Perignon

A plugin for unexpected that adds custom assertions for DOM elements.

The aim is to lower the amount of mocking around in the DOM in your tests and keep your tests easily readable while providing a high powered set of functionality with unsurpassed error messages.

Installation and usage

NodeJS

npm install unexpected unexpected-dom

Bower

bower install unexpected unexpected-dom

Setup in tests:

var expect = require('unexpected').clone();
expect.installPlugin(require('unexpected-dom'));

describe('in a document', function () {
  it('should find a DOM node', function () {
    expect(document.body, 'to have attributes', {
      id: 'app',
      lang: 'en-US'
    });
  });
});

Assertions

Assertions that test none, singular an plural of a possible collection generally work in all the forms ou would expect. For example to have no children, to have child, to have children.

Brackets in an assertion means the word is an optional flag.

To have attributes

Tests for the existence of DOM element attributes. class attributes are treated arrays, but with set semantics disregarding sort order. style attributes are treated as key/value pairs, disregarding sort order. Both class and style comparisons can be done with strings, which will be converted into the corresponding format before comparison.

expect(node, 'to [only] have attribute', 'id');
expect(node, 'to [only] have attributes', 'id', 'class');
expect(node, 'to [only] have attributes', ['id', 'class']);

expect(node, 'to [only] have attributes', {
  'id': 'foo',
  'aria-describedby': 'helpText'
});

// style and class string comparisons
expect(node, 'to [only] have attributes', {
  'class': 'bar baz',
  'style': 'background: red; color: blue'
});

// style and class highlevel set/object comparison
expect(node, 'to [only] have attributes', {
  'class': ['bar', 'baz'],
  'style': {
    background: 'red',
    color: 'blue'
  }
});

To have text

Tests the text content of a DOM element

expect(node, 'to have text', 'foo');

To contain [no] elements matching

Tests that the DOMElement has (no) elements matching the given selector

// node = '<div> <span class="exists">sample</span> </div>'

expect(node, 'to contain elements matching', '.exists');
expect(node, 'to contain no elements matching', '.not-exists');

To have children

Tests the children of the DOMElement

// node = '<div> <span class="one">sample</span><span class="two">sample2</span> </div>'

expect(node, 'to have children', [
  expect.it('to have attributes', { class: 'one' }),
  expect.it('to have attributes', { class: 'two' })
]);

Queried for

Queries the supplied node the designated querySelector and returns a NodeList. NodeList is an array-like type, giving you array assertions as an added bonus.

This assertion is primarily useful for chaining.

expect(node, 'queried for [first]', '.blog-article > h2');

// Chaining
expect(node, 'queried for', '.blog-article', 'to have items satisfying', 'to have attributes', {
  id: /^article-heading-\d+$/,
  'aria-describe': 'Article'
});

When parsed as HTML

Parses the subject (string) as an HTML document using the facilities available in the browser, with a fallback to jsdom, then delegates to the next assertion in the argument list:

expect(
    '<html><body><div class="foo"></div></body></html>',
    'when parsed as HTML',
    'queried for', 'div',
    'to have attributes', { class: 'foo' }
);

License

License

(The MIT License)

Copyright (c) 2015 Peter Müller munter@fumle.dk

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.