import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { MustacheEditor } from './MustacheEditor';

describe('MustacheEditor', () => {
  it('renders the initial value', () => {
    render(
      <MustacheEditor
        value="Hello {{rule.name}}"
        onChange={() => {}}
        kind="ROUTE_METRIC"
        label="Title template"
      />,
    );
    expect(screen.getByText(/Hello/)).toBeInTheDocument();
  });

  it('renders a textbox and does not call onChange before user interaction', () => {
    const onChange = vi.fn();
    render(
      <MustacheEditor
        value=""
        onChange={onChange}
        kind="ROUTE_METRIC"
        label="Title template"
      />,
    );
    const editor = screen.getByRole('textbox', { name: 'Title template' });
    expect(editor).toBeInTheDocument();
    // CM6 fires onChange via transactions, not DOM input events; without a real
    // user interaction the callback must remain untouched.
    expect(onChange).not.toHaveBeenCalled();
  });
});