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

import TextField from '../components/TextField';

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

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

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

  test('onChange event', () => {
    const { container } = render(<TextField />);
    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(
      <TextField disabled onChange={handleChange} />
    );
    fireEvent.change(getByTestId('input'), { target: { value: 'text' } });

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