Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dekujs/assert-element

Assertions that can be used when working with Deku/React and JSX.
https://github.com/dekujs/assert-element

Last synced: about 2 months ago
JSON representation

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

Awesome Lists containing this project

README 

        
# 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.



```js

assert.isNode(
);

assert.isNode(Hello World, 'b');

assert.isNode(Log In, 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.



```js

assert.hasAttribute(Home, 'href');

assert.hasAttribute(Submit, '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.



```js

assert.hasAttribute(, '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.



```js

assert.notHasAttribute(
, '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.



```js

assert.hasClass(
, '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.



```js

assert.notHasClass(
, '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



```js

var node = (

  
    

        
  • a
    • 

        
  • b
    • 

        
  • c
    • 

      


);



// 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.



```js

assert.notHasChildren(
);

```



### 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.



```js

var node = (

  
    

        
  • a
    • 

        
  • b
    • 

        
  • c
    • 

      


);



// 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.



```js

let Button = {

  render({ props }) {

    return {props.children}

  }

};



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.