import React from 'react';
import {render} from '@shared/testingLibrary';

import {AvatarGroup, AVATAR_GROUP_LIST_LIMIT} from './index';

const mockList = [
  {id: 1, name: 'Jane Smith', url: 'https://example.com/jane.png'},
  {id: 2, name: 'Robert Johnson', url: 'https://example.com/robert.png'},
  {id: 3, name: 'Emily Davis', url: 'https://example.com/emily.png'},
  {id: 4, name: 'Michael Brown', url: 'https://example.com/michael.png'},
  {id: 5, name: 'Sarah Wilson', url: 'https://example.com/sarah.png'},
];

describe('AvatarGroup component', () => {
  it('shows moreItem when list exceeds listLimit', () => {
    const {getByText} = render(<AvatarGroup list={mockList} />);

    expect(
      getByText(`+${mockList.length - AVATAR_GROUP_LIST_LIMIT}`),
    ).toBeTruthy();
  });

  it('does not show moreItem when list does not exceed listLimit', () => {
    const limitedList = mockList.slice(0, AVATAR_GROUP_LIST_LIMIT);

    const {queryByText} = render(<AvatarGroup list={limitedList} />);

    expect(
      queryByText(`+${mockList.length - AVATAR_GROUP_LIST_LIMIT}`),
    ).toBeNull();
  });
});
