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

describe('<Disciplinas />', () => {
  it('renders the 3 disciplines', () => {
    render(<Disciplinas />);
    expect(screen.getByText('Comunicación')).toBeInTheDocument();
    expect(screen.getByText('Digital')).toBeInTheDocument();
    expect(screen.getByText('Experiencias')).toBeInTheDocument();
  });
  it('renders disciplines in a semantic list (ul/li) for a11y', () => {
    const { container } = render(<Disciplinas />);
    const list = container.querySelector('ul');
    expect(list).not.toBeNull();
    const items = list?.querySelectorAll('li');
    expect(items?.length).toBe(3);
  });

  it('lights the strand of the discipline being pointed at', () => {
    const { container } = render(<Disciplinas />);
    const tarjetas = container.querySelectorAll('ul > li');
    expect(tarjetas).toHaveLength(3);

    // Before anything is pointed at, the drawing is neutral.
    const hebrasDoradas = () =>
      Array.from(container.querySelectorAll('[data-hebra]')).filter((h) =>
        (h.getAttribute('class') ?? '').includes('text-dorado'),
      );
    expect(hebrasDoradas()).toHaveLength(0);

    // Pointing at "Digital", the second card, has to light the second strand
    // and nothing else. This wiring is the whole change: without it the three
    // cards and the drawing beside them are unrelated objects on a page.
    fireEvent.pointerEnter(tarjetas[1]);
    expect(hebrasDoradas().map((h) => h.getAttribute('data-hebra'))).toEqual(['1']);

    fireEvent.pointerLeave(tarjetas[1]);
    expect(hebrasDoradas()).toHaveLength(0);
  });
});