import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { RichTextEditor } from '../rich-text-editor';

describe('RichTextEditor onChange behaves like expected', () => {
  it('will fire exactly 1 onChange if a single character was entered', async () => {
    const onChange = vi.fn();

    render(
      <RichTextEditor
        initialData={[
          {
            type: 'paragraph',
            kind: 'block',
            textContent: 'Hi',
          },
        ]}
        onChange={onChange}
      />,
    );

    expect(onChange).toHaveBeenCalledTimes(0);

    const user = userEvent.setup();
    await user.type(screen.getByRole('textbox'), '!');

    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith([
      {
        type: 'paragraph',
        kind: 'block',
        textContent: 'Hi!',
      },
    ]);
  });
});
