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

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');
  });
});