import { Size } from '../common';
import { render, screen } from '../test-utils';

import avatarColorTestCases from './colors/avatarColorTestCases.json';

import Avatar, { AvatarType } from '.';

describe('Avatar', () => {
  it('renders a medium sized thumbnail Avatar with NO outline', () => {
    render(
      <Avatar size={Size.MEDIUM}>
        <span role="img" aria-label="Person with sunglasses emoji">
          😎
        </span>
      </Avatar>,
    );

    expect(screen.getByText('😎')?.parentElement?.parentElement).toHaveClass(
      'tw-avatar tw-avatar--thumbnail tw-avatar--48',
    );
  });

  it('renders a small sized emoji Avatar with outline', () => {
    render(
      <Avatar type={AvatarType.EMOJI} size={Size.SMALL} outlined>
        <span role="img" aria-label="Money bag emoji">
          💰
        </span>
      </Avatar>,
    );

    expect(screen.getByText('💰')?.parentElement?.parentElement).toHaveClass(
      'tw-avatar tw-avatar--emoji tw-avatar--24 tw-avatar--outlined',
    );
  });

  describe('branded avatar colors', () => {
    it.each(avatarColorTestCases)(
      'for seed of $key return background color of `$color.token`',
      (item: { key: string | number; color: { hex: string; token: string } }) => {
        render(<Avatar backgroundColorSeed={item.key.toString()}>JS</Avatar>);

        expect(screen.getByText('JS')).toHaveStyle(`background-color: var(${item.color.token})`);
      },
    );
  });

  it('adds aria-label to component if it is passed in', () => {
    render(
      <Avatar size={Size.MEDIUM} aria-label="Japanese flag avatar">
        <img src="https://wise.com/web-art/assets/flags/jpy.svg" alt="" />
      </Avatar>,
    );

    expect(screen.getByLabelText('Japanese flag avatar')).toBeInTheDocument();
  });
});