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

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

describe('RichTextEditor code node', () => {
  it('can add a code block to an existing paragraph text', async () => {
    const onChange = vi.fn();

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

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

    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenLastCalledWith([
      {
        kind: 'block',
        type: 'preformatted',
        children: [
          {
            type: 'code',
            kind: 'block',
            textContent: 'const aVariable = 42;',
            metadata: { language: 'javascript' },
          },
        ],
      },
    ]);
  });
});
