NiGhTTraX

it('should delete the todo when clicking the delete button', function() {
  const Button = createSpy();
  const onDeleteSpy = spy();
  
  jest.mock('./button.jsx', () => Button);
  
  const Todo = require('./todo.jsx');
  render(<Todo name="buy milk" onDelete={onDeleteSpy} />);
         
  Button.lastProps.onSubmit();

NiGhTTraX

function Todo(props) {
  const { Delete, name, onDelete } = props;
  
  return <div>
    <span>{name}</span>
    <Delete onSubmit={onDelete}>Delete</Delete>
  </div>;
}

NiGhTTraX

it('should delete the todo when clicking on the delete button', function() {
 const deleteTodo = sinon.spy();

 render(<Todo name=”buy milk” onDelete={deleteTodo} />);

 Simulate.click($(‘.delete’)[0]);

 expect(deleteTodo).to.have.been.called;
});

NiGhTTraX

class ButtonWithConfirm extends Component {
  constructor(props) {
    super(props);
    
    this.state = { confirming: false };
  }
  
  render() {
    if (this.state.confirming) {
      return <div>

NiGhTTraX

function inject(deps, Component) {
  return class Injector extends React.Component {
    render() {
      return <Component {...deps} {...this.props} />;
    }
  };
}

const SafeTodo = inject(Todo, { DeleteTodo: ConfirmButton });
render(<TodoList Todo={SafeTodo} />);

NiGhTTraX

import Button from './button.jsx';

function Todo(props) {
  return <div>
    <span>{props.name}</span>
    <Button onSubmit={props.onDelete}>Delete</Button>
  </div>;
}

NiGhTTraX

function createSpy() {
  const _renderSpy = sinon.spy();
  
  return class Spy extends Component { 
    static get lastProps() {
      return _renderSpy.args[_renderSpy.callCount - 1][0];
    }
    
    render() {
      _renderSpy(this.props);

NiGhTTraX

function Todo(props) {
 return <div>
   <span>{props.name}</span>
   <button onClick={props.onDelete}>Delete</button>
 </div>;
}

NiGhTTraX

function Todo(props) {
 return <div>
   <span>{props.name}</span>
 </div>;
}

NiGhTTraX

it('should display the name of the todo', function() {
 render(<Todo name="buy milk" />);
  
 expect($('.todo').text()).to.equal('buy milk');
});