assert-element

Assertions that can be used when working with Deku/React and JSX.

API

assert.isNode(node, [type])

Checks the given node to make sure it looks like a virtual node. If the type is specified, it must match strictly.

assert.isNode(<div />);
assert.isNode(<b>Hello World</b>, 'b');
assert.isNode(<Button>Log In</Button>, Button);

assert.hasAttribute(node, attr, [value])

Checks the given node to make sure it has the given attr attribute. If the value is specified, it must match that value strictly.

assert.hasAttribute(<a href="http://example.com/">Home</a>, 'href');
assert.hasAttribute(<button type="submit">Submit</button>, 'type', 'submit');

When using a Function, it will be invoked with the attribute value. From there, you can run any other assertion that should throw if the value is invalid.

assert.hasAttribute(<Select options={[ 'a', 'b' ]} />, 'options', function (options) {
  assert.deepEqual(options, [ 'a', 'b', 'c' ]); // will fail
});

NOTE: this allows for falsy values, as an attribute can be present but intentionally false, such as checked={false}.

assert.notHasAttribute(node, attr)

Checks the given node to make sure it does not have the given attr attribute.

assert.notHasAttribute(<div />, 'id');

NOTE: this will not throw for falsy values, as an attribute can be present but intentionally false, such as checked={false}.

assert.hasClass(node, name)

Checks that the given node has the given CSS class name. This is largely a helper for HTML elements, although any component that uses class in the same fashion can be checked.

assert.hasClass(<div class="a b c" />, 'b');

assert.notHasClass(node, name)

Checks that the given node does not have the given CSS class name. This is largely a helper for HTML elements, although any component that uses class in the same fashion can be checked.

assert.notHasClass(<div class="a" />, 'b');

assert.hasChildren(node, [children])

Checks that the given node has child nodes matching the children argument:

• when a Number, it will ensure node has that many child nodes
• when a Function, it will run the function against each child node (which should throw if they are invalid)
• when an Array, it will check for loose/deep equality
• when not specified, it will just make sure the node has at least 1 child

var node = (
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
);
 
// make sure there are any children
assert.hasChildren(node);
 
// make sure there are 3 children
assert.hasChildren(node, 3);
 
// our fn just runs other assertions
assert.hasChildren(node, function (child) {
  assert.isNode(child, 'li');
  assert.hasChildren(child);
});

assert.notHasChildren(node)

Checks that the given node does not have any child nodes.

assert.notHasChildren(<div />);

assert.hasChild(node, index, [criteria])

Check if the given node at a given zero-indexed index has the corresponding child, using the following criteria:

• When a Function, it will run criteria, passing the child node as an argument. criteria is expected to throw an error if the node is invalid.
• Otherwise, it will do a deep comparison between the child node and the criteria.

var node = (
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
);
 
// make sure a child at index 0 exists
assert.hasChild(node, 0);
 
// do a deep comparison on the child at index 0
assert.hasChild(node, 0, 'div');
 
// run other assertions on the child node
assert.hasChild(node, 0, function (child) {
  assert.isNode(child, 'li);
});

Using with Deku Components

When unit-testing deku components, you'll typically run the render() function and make assertions against the virtual element it returns.

let Button = {
  render({ props }) {
    return <button type={props.type}>{props.children}</button>
  }
};
 
var component = {
  props: {
    type: 'submit',
    children: 'Hello World'
  }
};
 
assert.isNode(Button.render(component), 'button');
assert.hasAttribute(Button.render(component), 'type', 'submit');
assert.hasChildren(Button.render(component), [ 'Hello World' ]);

This is a trivial example of course, but you can easily introduce variables and other dynamic code in order to test that your components properly understand the various props and state that they will receive.