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

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

describe('RichTextEditor code node', () => {
  it('can replace an existing paragraph to a quote with clicking a dropdown item', async () => {
    const onChange = vi.fn();

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

    const user = userEvent.setup();
    await user.click(screen.getByTestId('toggle-block-format'));
    await user.click(screen.getByTestId('toggle-block-format-quote'));

    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenLastCalledWith([
      {
        type: 'quote',
        kind: 'block',
        textContent: 'Simon says: hey there',
      },
    ] as CrystallizeRichText);
  });
});
