import React from 'react';
import { mount } from 'enzyme';
import LoginForm from 'components/LoginForm';

const credentials = { username: 'a@test.com', password: 'testpass' };
const test = jest.fn();

function setup() {
  // Modal fix
  const div = document.createElement('div');
  document.body.appendChild(div);
  return mount(
  <LoginForm
    data={null}
    onSubmit={test}
  />, { attachTo: div });
}

describe('LoginForm', () => {
  const wrapper = setup();

  it('should be a StatefullComponent', () => {
    expect(wrapper.instance()).not.toBeNull();
  });

  it('should render properly', () => {
    expect(wrapper.html()).toMatchSnapshot();
  });

  it('input fields should be filled correctly', () => {
    expect(wrapper.find('#exampleEmail').length).toBe(2);

    // Element
    const usernameInput = wrapper.find('#exampleEmail');
    // onChange and html inputs
    usernameInput.last().simulate('change', {target: {value: credentials.username, name: 'email'}});
    usernameInput.value = credentials.username;
    // Result
    expect(wrapper.state().validate.emailState).toEqual('has-success');
    expect(wrapper.state().email).toEqual(credentials.username);
    expect(usernameInput.value).toBe('a@test.com');

    // Element
    const passwordInput = wrapper.find('#examplePassword');
    // onChange and html inputs
    passwordInput.last().simulate('change', {target: {value: credentials.password, name: 'password'}});
    passwordInput.value = credentials.password;
    // result
    expect(wrapper.state().password).toEqual(credentials.password);
    expect(passwordInput.value).toBe('testpass');

    // Form Element
    const form = wrapper.find('form').at(0)
    form.simulate('submit');
    expect(test).toHaveBeenCalled();
  });
});