madzhup / react-tc Goto Github PK

import { setup, tc } from 'react-tc';
import React, { Component, PropTypes } from 'react';
import expect from 'expect';
import styles from './styles'; // scss file (if you use css modules)

/**
 * Simple component
 */
class YouComponent extends Component {

  static propTypes = {
    items: PropTypes.arrayOf(PropTypes.object).isRequired,
    callback: PropTypes.func.isRequired
  };

  render() {
    
    const { callback, items } = this.props;
  
    return (
      <div className={styles.general} onClick={callback}>
        {
          items.map((item) => {
            return (
              <h1 key={item.id} className={styles.item}>{item.name}</h1>
            );
          })
        }
      </div>
    );

  }

}

// %%%%%%%% TEST %%%%%%%%%%

/**
 * @return 
 *  {object} output - shallow render element
 *  {object} props - you passed props
 *  {object} context - you passed context
 */
const { output, props, context } = setup(YouComponent, {
  items: [{
    id: 1,
    name: 'one'
  }, {
    id: 2,
    name: 'two'
  }],
  callback: expect.createSpy()
});

/**
 * test first layer of output by their props and child length
 * if you child undefined, null, empty array [] - this is equal with 0 or miss 4 parameter tc function
 */
tc(output, 'div', {
  className: styles.general,
  onClick: props.callback
}, 2);

expect(props.callback.calls.length).toBe(0);
output.props.onClick();
expect(props.callback.calls.length).toBe(1);

const [item1, item2] = output.props.children;

tc(item1, 'h1', {
  children: props.items[0].name,
  className: styles.item
}, 1);

tc(item2, 'h1', {
  children: props.items[1].name,
  className: styles.item
}, 1);