import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
    constructor() {
        super();
        this.onSubmitDetails = this.onSubmitDetails.bind(this);
    };

    onSubmitDetails(event) {
        event.preventDefault();
        alert("Hey! Form submitted??")
    }
  render() {
    return (
      <div className="App">
          <form onSubmit={this.onSubmitDetails}>
              <input type="text" className="loginBox" placeholder="Username"
                 required="required"/>
              <input type="password" className="loginBox"  placeholder="Password" required="required"/>
              <input type="submit" className="loginBox submit" value="SIGN IN"/>
          </form>
      </div>
    );
  }
}

export default App;

import 'jsdom-global/register';
import React from 'react';
import ReactDOM from 'react-dom';
import { shallow, mount } from "enzyme";
import expect from 'expect';
import sinon from 'sinon';
import App from './App';

describe("Component: LoginContainer", () => {
it('should login', () => {
    const props = {
        fields: {
            user: {
                username: {},
                password: {}
            }
        },
        onSubmitDetails: () => {}
    };
    const onSubmitDetails = sinon.spy();
    const wrapper = mount(<LoginContainer />);

    const username = wrapper.find('.loginBox').get(0);
    username.value = 'abc';
    expect(username.value).toEqual('abc');

    const password = wrapper.find('.loginBox').get(1);
    password.value = 'xyz';
    expect(password.value).toEqual('xyz');

    wrapper.find('form').simulate('submit', { preventDefault(){} });
    console.log(onSubmitDetails.called);  //gives false
    });
});