import { Freeze } from '@transferwise/icons';

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

import AccordionItem from './AccordionItem';

describe('AccordionItem', () => {
  const props = {
    title: 'This is title number one',
    content: 'Lauri Ipsum has been the industry standard dummy text ever since the 1500s.',
    open: false,
    id: 'test-accordion',
    onClick: jest.fn(),
  };

  describe('icons', () => {
    it('renders the icon if passed', () => {
      render(<AccordionItem {...props} icon={<span>mock icon</span>} />);

      expect(screen.getByText('mock icon')).toBeInTheDocument();
    });

    it('will always render icons at 24px', () => {
      const { container } = render(<AccordionItem {...props} icon={<Freeze size={16} />} />);

      // eslint-disable-next-line testing-library/no-container
      expect(container.querySelector('.tw-icon-freeze svg')).toHaveAttribute('width', '24');
    });
  });

  describe('onClick', () => {
    it('calls onClick when item is clicked', async () => {
      const onClick = jest.fn();

      render(<AccordionItem {...props} onClick={onClick} />);

      await userEvent.click(screen.getByRole('button'));

      expect(onClick).toHaveBeenCalledTimes(1);
    });
  });
});
