sminutoli

const Login = ({isValid, isWaiting, error, onSignIn, onChange, username, password})=> {
  return <div className="login">
    <form className="login__form" onSubmit={handleLogin}>
      <h4 className="login__title center-align">Bienvenido a Warehouse</h4>
      <Input
        className="login__user"
        name="username"
        value={username}
        disabled={isWaiting}
      />

sminutoli

describe('Form waiting', function () {
  const props = {
    isWaiting: true
  };
  const wrapper = shallow(<Login {...props}/>);

  it('should disable the input fields', ()=>{
    expect(wrapper.find('.login__user').prop('disabled')).toBe(true);
    expect(wrapper.find('.login__password').prop('disabled')).toBe(true);
  });

sminutoli

const Login = ({isValid, isWaiting, error, onSignIn, onChange, username, password})=> {
  function handleLogin(evt){
    evt.preventDefault(); //en el test ejecuta al spy!
    onSignIn({username, password}); //llama al callback con los datos esperados
  }
  return <div className="login">
    <Row>
      <Col s={12} m={6} l={4} className="offset-l4 offset-m3">
        <form className="login__form" onSubmit={handleLogin}>
        </form>

sminutoli

const props = {
  username: 'theuser',
  password: 'thepass',
  onChange: expect.createSpy(),
  onSignIn: expect.createSpy()
};
const wrapper = shallow(<Login {...props}/>);

it('should trigger onChange when any of the input changes', ()=>{
  wrapper.find('.login__user').simulate('change', { target:{ name: 'username', value: 'asd'} });

sminutoli

// fragmento del test

describe('Form with data', ()=>{
  const props = {
    username: 'theuser',
    password: 'thepa$$word'
  };
  const wrapper = shallow(<Login {...props}/>);
  it('should delegate the username to .login__user', ()=>{
    expect(wrapper.find('.login__user').prop('value')).toBe(props.username);

sminutoli

it('should have a user field', ()=>{
  expect(wrapper.find('.login__user[name="username"]').length).toBe(1);
});

it('should have a password field', ()=>{
  expect(wrapper.find('.login__password[name="password"][type="password"]').length).toBe(1);
});

it('should have a submit button', ()=>{
  expect(wrapper.find('.login__btn').length).toBe(1);

sminutoli

<div className="login">
  <Row>
    <Col s={12} m={6} l={4} className="offset-l4 offset-m3">
        <h4 className="login__title center-align">Bienvenido a Warehouse</h4>
    </Col>
  </Row>
</div>

sminutoli

const wrapper = shallow(<Login {...props}/>);

it('should have a title', ()=>{
  expect(wrapper.find('.login__title').length).toBe(1);
});
it('should render the correct title', ()=>{
  expect(wrapper.find('.login__title').prop('children')).toBe('Bienvenido a Warehouse');
});

sminutoli

import React, { PropTypes } from 'react';

const Login = ({isValid, isWaiting, error, onSignIn, onChange, username, password})=> {
  return <div>
    <h4 className="login__title">Bienvenido a Warehouse</h4>
  </div>
};

Login.propTypes = {
  username: PropTypes.string,

sminutoli

import React, { PropTypes } from 'react';

const Login = ({isValid, isWaiting, error, onSignIn, onChange, username, password})=> {
  return <div>Mr Boombastic</div>
};

Login.propTypes = {
  username: PropTypes.string,
  password: PropTypes.string,
  isValid: PropTypes.bool,