import { render } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { describe, expect, test } from 'vitest';
import UiTextarea from '../UiTextarea.vue';

describe('UiTextarea', () => {
  test('renders enabled by default with placeholder', () => {
    const placeholder = 'Enter text';
    const { getByRole, getByPlaceholderText } = render(UiTextarea, {
      props: {
        name: 'test-textarea',
        placeholder,
      },
    });
    expect(getByRole('textbox')).toBeEnabled();
    expect(getByPlaceholderText(placeholder)).toBeInTheDocument();
  });

  test('renders disabled when disabled prop is true', () => {
    const { getByRole } = render(UiTextarea, {
      props: {
        name: 'test-textarea',
        disabled: true,
      },
    });
    expect(getByRole('textbox')).toBeDisabled();
  });

  test('emits update:modelValue on user input', async () => {
    const testValue = 'Hello';
    const { getByRole, emitted } = render(UiTextarea, {
      props: {
        name: 'test-textarea',
      },
    });
    await userEvent.type(getByRole('textbox'), testValue);
    const emittedModelValue = emitted('update:modelValue') as string[][];
    expect(emittedModelValue[emittedModelValue.length - 1][0]).toMatch(
      testValue,
    );
  });
});
