import React from 'react';

import '@testing-library/jest-dom';
import { render } from '@testing-library/react';

import { SimpleListItem } from './SimpleListItem';
import { THEME } from '../../constants';

import styles from './simple-list-item.scss';

describe('SimpleListItem', () => {
  test('render a label text with default props', () => {
    const childText = 'test';
    const { container } = render(<SimpleListItem label={childText} />);
    const span = container.querySelector('span');
    expect(span).toHaveTextContent(childText);
  });

  test('properly generates class names for all themes', () => {
    for (const themeName of Object.values(THEME)) {
      const { container } = render(
        <SimpleListItem
          label="Test"
          theme={themeName}
        />,
      );
      const root = container.querySelector('div');
      const themeClassName = styles[`simple-list-item--${themeName}`];
      expect(themeClassName).not.toBeUndefined();
      expect(root).toHaveClass(themeClassName);
    }
  });

  test('shows action component on item if onActionClick callback is provided', () => {
    const onActionClick = (): void => {};
    const { container } = render(
      <SimpleListItem
        label="Test"
        onActionClick={onActionClick}
      />,
    );
    const action = container.querySelector(`.${styles['MuiListItemSecondaryAction-root']}`);

    expect(action).not.toBeNull();
  });

  test('hides action component if onActionClick callback is not provided', () => {
    const { container } = render(<SimpleListItem label="Test" />);
    const action = container.querySelector(`.${styles['MuiListItemSecondaryAction-root']}`);

    expect(action).toBeNull();
  });

  test('is adds custom className if given', () => {
    const customClassName = 'some-class-name';
    const { container } = render(
      <SimpleListItem
        label="Test"
        className={customClassName}
      />,
    );
    const root = container.querySelector('div');
    expect(root).toHaveClass(customClassName);
  });
});