import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../../theme';
import InitialsAvatar from './InitialsAvatar';

describe('<InitialsAvatar/>', () => {
  const wrap = (ui: React.ReactNode) => render(<ThemeProvider>{ui}</ThemeProvider>);

  it('renders initials from the first two words of the name', () => {
    wrap(<InitialsAvatar name="مریم رضایی" />);
    expect(screen.getByText('مر')).toBeInTheDocument();
  });

  it('renders a single-word name as one initial', () => {
    wrap(<InitialsAvatar name="مریم" />);
    expect(screen.getByText('م')).toBeInTheDocument();
  });

  it('is hidden from assistive tech (decorative next to a visible name)', () => {
    wrap(<InitialsAvatar name="مریم رضایی" />);
    expect(screen.getByText('مر')).toHaveAttribute('aria-hidden', 'true');
  });

  it('picks the same color index for the same name every render', () => {
    const { container: first } = render(
      <ThemeProvider>
        <InitialsAvatar name="سارا محمدی" />
      </ThemeProvider>,
    );
    const { container: second } = render(
      <ThemeProvider>
        <InitialsAvatar name="سارا محمدی" />
      </ThemeProvider>,
    );
    const bg = (el: HTMLElement) => el.querySelector('.MuiAvatar-root')?.getAttribute('style');
    expect(bg(first.firstChild as HTMLElement)).toEqual(bg(second.firstChild as HTMLElement));
  });
});