import React from 'react';

import renderWithTheme from '../../../testUtils/renderWithTheme';

import StyledTextArea, { HiddenTextArea } from '../StyledTextArea';

describe('StyledTextArea', () => {
  it.each`
    autoResize
    ${true}
    ${false}
    ${undefined}
  `('has auto-resize of $autoResize style', ({ autoResize }) => {
    const { container } = renderWithTheme(
      <StyledTextArea
        autoResize={autoResize}
        themeSize="medium"
        themeState="enabled"
      />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it.each`
    size
    ${'small'}
    ${'medium'}
    ${'large'}
  `('has $size style', ({ size }) => {
    const { container } = renderWithTheme(
      <StyledTextArea autoResize themeSize={size} themeState="enabled" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it.each`
    state
    ${'enabled'}
    ${'disabled'}
    ${'invalid'}
  `('has $state style', ({ state }) => {
    const { container } = renderWithTheme(
      <StyledTextArea autoResize themeSize="medium" themeState={state} />
    );

    expect(container.firstChild).toMatchSnapshot();
  });
});

describe('HiddenTextArea', () => {
  it.each`
    size
    ${'small'}
    ${'medium'}
    ${'large'}
  `('has $size style', ({ size }) => {
    const { container } = renderWithTheme(<HiddenTextArea themeSize={size} />);

    expect(container.firstChild).toMatchSnapshot();
  });
});