import { Avatar } from '../avatar';
import { cleanup, fireEvent } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';
import AvatarGroup from './avatar-group';
import fill from 'lodash/fill';
import uniqueId from 'lodash/uniqueId';
import { AvatarGroupProps } from './types';

const max = 6;

const Component = (props: AvatarGroupProps) => (
  <AvatarGroup max={max} {...props}>
    {fill(new Array(10), <Avatar key={uniqueId()} initials="JK" />).map(i => ({
      ...i,
      key: uniqueId()
    }))}
  </AvatarGroup>
);

afterEach(cleanup);

describe('<AvatarGroup />', () => {
  it('should render successfully', () => {
    const { baseElement } = render(<AvatarGroup />);
    expect(baseElement).toBeTruthy();
  });

  it('should count hidden avatars and display the number', () => {
    const { getByText } = render(<Component />);

    expect(getByText(/\+5/i).textContent).toBe('+5');
  });

  it('should fire click event when counter click callback provided', () => {
    const mockCallback = jest.fn();
    const { getByText } = render(<Component onCounterClick={mockCallback} />);

    fireEvent(getByText(/\+5/i), new MouseEvent('click', { bubbles: true }));
    expect(mockCallback).toHaveBeenCalledTimes(1);
  });
});