import React from 'react';
import userEvent from '@testing-library/user-event';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import MenuItem from '../MenuItem';

describe('rendering', () => {
  it('shows icon, text and text element of menu item', () => {
    const { getByText } = renderWithTheme(
      <MenuItem
        text="Menu Item"
        icon="user"
        textElement={<p>Right text element</p>}
      />
    );

    expect(getByText('Menu Item')).toBeInTheDocument();
    expect(getByText('Right text element')).toBeInTheDocument();
  });
});

describe('interaction', () => {
  it('calls onClick when not disabled', () => {
    const onClick = jest.fn();
    const { getByText } = renderWithTheme(
      <MenuItem text="Menu Item" onClick={onClick} />
    );

    userEvent.click(getByText('Menu Item'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('does not call onClick when disabled', () => {
    const onClick = jest.fn();
    const { getByText } = renderWithTheme(
      <MenuItem text="Menu Item" disabled onClick={onClick} />
    );

    expect(() => userEvent.click(getByText('Menu Item'))).toThrowError(
      'unable to click element as it has or inherits pointer-events set to "none".'
    );
  });
});