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

describe('UiInput', () => {
  test('renders input with placeholder', () => {
    const placeholder = 'Input Placeholder';
    const { getByPlaceholderText } = render(UiInput, {
      props: {
        placeholder,
      },
    });
    expect(getByPlaceholderText(placeholder)).toBeInTheDocument();
  });

  test('renders input normally', () => {
    const { getByRole } = render(UiInput);
    expect(getByRole('textbox')).toBeEnabled();
  });

  test('renders input disabled', () => {
    const { getByRole } = render(UiInput, {
      props: {
        disabled: true,
      },
    });
    expect(getByRole('textbox')).toBeDisabled();
  });

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