tdd-react-component-spec4.js

// 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);
  });
  it('should delegate the password to the Input', ()=>{
    expect(wrapper.find('.login__password').prop('value')).toBe(props.password);
  });
});

// un componente que satisface la expectativa

const Login = ({isValid, isWaiting, error, onSignIn, onChange, username, password})=> {
  
  return <div className="login">
    <Row>
      <Col s={12} m={6} l={4} className="offset-l4 offset-m3">
        <form className="login__form">
          <h4 className="login__title center-align">Bienvenido a Warehouse</h4>
          <div className="card-panel grey lighten-4">
            <Input
              className="login__user"
              label="usuario"
              name="username"
              placeholder="usuario en access"
              value={username}
              s={12}
            />
            <Input
              className="login__password"
              type="password"
              label="contraseña"
              name="password"
              placeholder="contraseña en access"
              value={password}
              s={12}
            />
          </div>
        </form>
      </Col>
    </Row>
  </div>
};