constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: ''
    };
    this.handleUserNameChange = this.handleUserNameChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  handleUserNameChange(event) {
    this.setState({
      username: event.target.value
    });
  }

  handlePasswordChange(event) {
    this.setState({
      password: event.target.value
    });
  }

const LoginForm = ({username, password, handleLogin, handleUserNameChange, handlePasswordChange, user_error, loading, loading_color}) => {
      return (
      <form name="form" onSubmit={handleLogin}>
        <h1> Login Form </h1>
          <Field
            name="user_name"
            type="text"
            label="User Name"
            component={renderUserComponent}
            onChange={handleUserNameChange}
            value={username}
          /><br />
          <Field
            name="password"
            type="password"
            label="Password"
            component={renderUserComponent}
            onChange={handlePasswordChange}
            value={password}
          /><br />
          {renderSubmit({user_error, loading, handleLogin, loading_color})}
          <br />
      </form>
    );
}

describe("LoginForm", () => {
  let state={
    username: '',
    password: ''
  }
  const defaultProps = {
      username: '',
      password: '',
      handleLogin: () => {},
      handleUserNameChange: (event) => {
        state.setState({
          username: event.target.value
        })
      },
      handlePasswordChange: (event) => {
        state.setState({
          password: event.target.value
        })
      }
  };
  const handleLogin = sinon.spy();
  const handleUserNameChange = sinon.spy();
  const handlePasswordChange = sinon.spy();
  let loginForm = mount(
       <MuiThemeProvider muiTheme={getMuiTheme()}>
         <Provider store={store}>
         <LoginForm {...defaultProps} handleLogin={handleLogin} handleUserNameChange={handleUserNameChange} handlePasswordChange={handlePasswordChange}/>
         </Provider>
       </MuiThemeProvider>
  );

  describe("when the redux form was submitted", () => {
    it("the handleLogin function would be called once", () => {
        const button = loginForm.find("FlatButton");
        button.simulate('submit');
        expect(handleLogin.called).toBe(true);
    });
  });

  describe("when the username was changed", () => {
    it("the handleUserNameChange function would be called once, and the state would be changed", () => {
        const username_field = loginForm.find("Field").first();
        username_field.simulate('keyDown', { keyCode: 40});
        username_field.simulate('change', { keyCode: 40});
        expect(handleUserNameChange.called).toBe(true);
    });
  });
});