import { cleanup } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';
import { Avatar } from './avatar';

afterEach(cleanup);

describe('<Avatar />', () => {
  it(`Should render with initials(tag p)`, () => {
    const initials = 'SK';
    const { queryByText } = render(<Avatar initials={initials} />);
    const initialsEl = queryByText(initials);
    expect(initialsEl?.innerHTML).toBe(initials);
  });

  it(`Should render as "not verified"`, () => {
    const { container } = render(<Avatar emailVerified={false} color="#546491" />);
    const iconEl = container.getElementsByTagName('svg');
    expect(iconEl).toBeTruthy();
  });

  it(`Should render avatar with src`, () => {
    const src = 'https://cdn.iconscout.com/icon/free/png-256/avatar-366-456318.png';
    const { container } = render(<Avatar initials="SK" src={src} />);
    const imgEl = container.querySelector('img');
    expect(imgEl?.src).toBe(src);
    expect(imgEl).not.toBeNull();
  });

  it(`Should render avatar with icon`, () => {
    const src = 'https://cdn.iconscout.com/icon/free/png-256/avatar-366-456318.png';
    const { container } = render(<Avatar icon={{ src }} />);
    const iconEl = container.getElementsByTagName('svg');
    expect(iconEl).toBeTruthy();
  });

  it(`Should render custom size avatar`, () => {
    const { baseElement } = render(<Avatar customSize={88} />);
    expect(baseElement).toBeTruthy();
  });
});