/* eslint-disable no-undef */
import React from 'react';
import { cleanup } from '@testing-library/react';
import '@testing-library/jest-dom';

import testWrapper from '../helpers/testWrapper';
import InputBox from '../components/InputBox';
import TextareaBox from '../components/TextareaBox';

describe('Input Box component', () => {
  afterEach(cleanup);

  test('input element', () => {
    const handleChange = (value: string) => {
      console.log(value);
    };

    const { container } = testWrapper(
      <InputBox value="test" onChange={handleChange} />,
    );
    const inputNode = container.querySelector('input') as HTMLElement;
    expect(inputNode.tagName).toBe('INPUT');
  });

  test('textarea element', () => {
    const handleChange = (value: string) => {
      console.log(value);
    };

    const { container } = testWrapper(
      <TextareaBox value="test" onChange={handleChange} />,
    );
    const textAreaNode = container.querySelector('TextArea') as HTMLElement;
    expect(textAreaNode.tagName).toBe('TEXTAREA');
  });

  test('test value', () => {
    const handleChange = (value: string) => {
      console.log(value);
    };

    const { container } = testWrapper(
      <InputBox value="test default value" onChange={handleChange} />,
    );
    const inputNode = container.querySelector('input') as HTMLInputElement;

    // fireEvent.change(inputNode, { target: { value: 'text' } });

    expect(inputNode.value).toBe('test default value');
  });

  test('check disabled input', () => {
    const handleChange = jest.fn();
    const { getByTestId } = testWrapper(
      <InputBox disabled value="" onChange={handleChange} />,
    );

    expect(handleChange).toBeCalledTimes(0);
    expect(getByTestId('input')).toBeDisabled();
  });
});