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

describe('<TextoDesenfoque />', () => {
  it('renders the full phrase across all segments', () => {
    const { container } = render(
      <TextoDesenfoque
        segments={[{ text: 'Tu negocio no necesita' }, { text: 'más esfuerzo.', className: 'text-dorado' }]}
      />,
    );
    expect(container.textContent).toBe('Tu negocio no necesita más esfuerzo.');
  });

  it('joins words with a plain space, not a stray non-breaking space', () => {
    const { container } = render(<TextoDesenfoque segments={[{ text: 'Uno dos tres' }]} />);
    expect(container.textContent).toBe('Uno dos tres');
    expect(container.textContent).not.toMatch(/ /);
  });

  it('applies each segment\'s className to its own words only', () => {
    const { container } = render(
      <TextoDesenfoque segments={[{ text: 'texto plano' }, { text: 'texto dorado', className: 'text-dorado' }]} />,
    );
    const goldWords = Array.from(container.querySelectorAll('.text-dorado')).map((el) => el.textContent?.trim());
    expect(goldWords).toEqual(['texto', 'dorado']);
  });
});