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

const par = {
  n: 1,
  name: 'Crecer',
  situacion: 'El siguiente salto no tiene mapa.',
  respuesta: 'Me sumerjo hasta entender tu empresa desde dentro.',
};

describe('<ParDialogo />', () => {
  it('renders both voices of the exchange', () => {
    render(<ul><ParDialogo {...par} /></ul>);
    expect(screen.getByText(/El siguiente salto no tiene mapa/)).toBeInTheDocument();
    expect(screen.getByText(/Me sumerjo hasta entender tu empresa desde dentro/)).toBeInTheDocument();
  });

  it('attributes the answer to creeer, not to the reader', () => {
    render(<ul><ParDialogo {...par} /></ul>);
    // Without a speaker label the answer reads as more description of the
    // problem. The wordmark is that label — and <Wordmark /> is the only thing
    // allowed to draw cre≡er, never hand-typed in the JSX.
    expect(screen.getByLabelText('creeer')).toBeInTheDocument();
  });

  it('labels the situation with its inflection point', () => {
    render(<ul><ParDialogo {...par} /></ul>);
    expect(screen.getByText(/01 · Crecer/)).toBeInTheDocument();
  });

  it('tells the two voices apart by more than colour', () => {
    const { container } = render(<ul><ParDialogo {...par} /></ul>);
    // A reader who cannot separate gold from navy still has the speaker label,
    // the column, and the rule hanging off each block. Colour alone would fail
    // the spec's accessibility criterion.
    const bloques = container.querySelectorAll('li > div');
    expect(bloques).toHaveLength(2);
    bloques.forEach((b) => expect(b.className).toMatch(/border-l-2/));
  });

  it('is a list item, so the section can mount six of them as a list', () => {
    render(<ul><ParDialogo {...par} /></ul>);
    expect(screen.getAllByRole('listitem')).toHaveLength(1);
  });
});