import React from 'react';
import userEvent from '@testing-library/user-event';

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

describe('rendering', () => {
  it('renders avatar, text box, submit button and custom actions', () => {
    const onChange = jest.fn();

    const {
      getByAltText,
      getByDisplayValue,
      getByTestId,
      getByText,
    } = renderWithTheme(
      <Editor
        avatar="url_to_avatar"
        onChange={onChange}
        value="Comment content"
        actions={<Button text="Attach file" />}
      />
    );

    expect(getByAltText('comment-avatar')).toBeInTheDocument();
    expect(getByDisplayValue('Comment content')).toBeInTheDocument();
    expect(getByTestId('submit-comment-btn')).toBeInTheDocument();
    expect(getByText('Attach file')).toBeInTheDocument();
  });
});

describe('interactions', () => {
  it('allows to change comment content and submit', () => {
    const onChange = jest.fn();
    const onSubmit = jest.fn();

    const { getByDisplayValue, getByTestId } = renderWithTheme(
      <Editor onChange={onChange} value="Comment content" onSubmit={onSubmit} />
    );

    userEvent.type(getByDisplayValue('Comment content'), 'New');
    expect(onChange).toHaveBeenCalledTimes(3);

    userEvent.click(getByTestId('submit-comment-btn'));
    expect(onSubmit).toHaveBeenCalledTimes(1);
  });
});