import React from 'react';
import ReactDOM from 'react-dom';
import Login from '../login';

// Basic unit test
test('calls onSubmit with the username and password when submitted', () => {
  const formContainer = document.createElement("div");
  const onSubmit = jest.fn();

  ReactDOM.render(<Login onSubmit={onSubmit} />, formContainer);

  const fakeUser = {
    username: 'yazan-aabed',
    password: '123123'
  };

  const inputsFields = formContainer.querySelectorAll("input");

  const userNameField = inputsFields[0];
  const passwordField = inputsFields[1];

  const submitButtonNode = formContainer.querySelector("button");

  userNameField.value = fakeUser.username;
  passwordField.value = fakeUser.password;

  const form = formContainer.querySelector('form');

  form.dispatchEvent(new window.Event('submit'));

  expect(onSubmit).toHaveBeenCalledTimes(1)
  expect(onSubmit).toHaveBeenCalledWith(fakeUser)
  expect(submitButtonNode.type).toBe('submit')
});