bootstrap-unexpected-markdown-test-renderer.js

/*global unexpected:true, React:true, TestRenderer:true, sinon:true*/

global.unexpected = require('unexpected')
    .clone()
    .use(require('./src/test-renderer'));
unexpected.output.preferredWidth = 80;

global.React = require('react');
global.PropTypes = require('prop-types');
global.TestRenderer = require('react-test-renderer');
global.createRenderer = require('react-test-renderer/shallow').createRenderer;
global.createClass = require('create-react-class');


const TodoItem = createClass({
    displayName: 'TodoItem',
    propTypes: {
        id: PropTypes.number,
        label: PropTypes.string
    },

    getInitialState() {
        return {
            completed: false
        };
    },

    onClick() {
        this.setState({
            completed: true
        });
        if (this.props.onClick) {
            this.props.onClick();
        }
    },

    render() {
        return (
            <div
              id={'todo-' + this.props.id}
              className={`item ${ this.state.completed ? 'completed' : 'incomplete'}`}
              onClick={this.onClick}
              onMouseDown={this.props.onMouseDown}
            >
                <span className="id">{this.props.id}</span>
                <span className="label">{this.props.label}</span>
                <span>{this.state.completed ? 'Completed!' : 'Todo'}</span>
            </div>
        );
    }
});

const TodoList = createClass({
    displayName: 'TodoList',
    propTypes: {
        children: PropTypes.node
    },
    
    getInitialState() {
        return { clicked: {} };
    },
    
    onClick(index) {
        // State mutation, this is not recommended, but saves us rebuilding each time
        this.state.clicked[index] = true;
        this.setState({
            clicked: this.state.clicked
        });
    },
    
    noop() {},

    render() {
        const children = this.props.children.map(child => {
            return React.cloneElement(child, { 
                key: child.props.id,
                onClick: this.onClick.bind(this, child.props.id),
                clicked: !!this.state.clicked[child.props.id],
                onMouseDown: this.noop
            });
        });
        

        return (
            <div>
                <div className="items">
                    { children }
                </div>
                <div className="add-new-item">
                   <input placeholder="Enter something to do" />
                </div>
            </div>
        );
    }
});

const App = createClass({
    displayName: 'App',
    getInitialState() {
        return { clickTestClicked: false };
    },
    
    onClickTest() {
        this.setState({ clickTestClicked: true });
    },
    
    render() {
        return (
            <div>
                    <div className="other-button"><button>Not clicked</button></div>
                    <div className="click-test">
                        <button className="click-test" onClick={this.onClickTest}>
                            {this.state.clickTestClicked ? 'Button was clicked' : 'Not clicked'}
                        </button>
                    </div>
            </div>
        );
    }
});

global.TodoItem = TodoItem;
global.TodoList = TodoList;
global.App = App;

const MyButton = createClass({
    displayName: 'MyButton',
    getInitialState () {
        return {
            count: 0
        };
    },

    onClick () {
        const { count } = this.state;
        this.setState({ count: count + 1 });
    },

    render() {
        const { count } = this.state;

        return (
            <button onClick={ this.onClick }>
                Button was clicked { count } times
            </button>
        );
    }
});

global.MyButton = MyButton;