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

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

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

  test('input element', () => {
    const { container } = render(<InputBox />);
    const inputNode = container.querySelector('input') as HTMLElement;
    expect(inputNode.tagName).toBe('INPUT');
  });

  test('textarea element', () => {
    const { container } = render(<TextareaBox />);
    const textAreaNode = container.querySelector('TextArea') as HTMLElement;
    expect(textAreaNode.tagName).toBe('TEXTAREA');
  });

  test('onChange event', () => {
    const { container } = render(<InputBox />);
    const inputNode = container.querySelector('input') as HTMLInputElement;
    fireEvent.change(inputNode, { target: { value: 'text' } });

    expect(inputNode.value).toBe('text');
  });

  test('check disabled input', () => {
    const handleChange = jest.fn();
    const { getByTestId } = render(
      <InputBox disabled onChange={handleChange} />,
    );
    fireEvent.change(getByTestId('input'), { target: { value: 'text' } });

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