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

import renderWithTheme from '../../../testUtils/renderWithTheme';

import SuffixIcon from '../SuffixIcon';

const onChange = jest.fn();

describe('rendering', () => {
  it('renders only arrow down icon', () => {
    const { getByTestId, queryByTestId } = renderWithTheme(
      <SuffixIcon open={false} />
    );

    expect(queryByTestId('loading-icon')).not.toBeInTheDocument();
    expect(queryByTestId('remove-icon')).not.toBeInTheDocument();
    expect(getByTestId('arrow-icon').className).toContain(
      'hero-icon-arrow-down'
    );
  });

  it('renders only arrow up icon', () => {
    const { getByTestId, queryByTestId } = renderWithTheme(<SuffixIcon open />);

    expect(queryByTestId('loading-icon')).not.toBeInTheDocument();
    expect(queryByTestId('remove-icon')).not.toBeInTheDocument();
    expect(getByTestId('arrow-icon').className).toContain('hero-icon-arrow-up');
  });

  it('renders only loading and arrow icons', () => {
    const { getByTestId, queryByTestId } = renderWithTheme(
      <SuffixIcon loading open={false} />
    );

    expect(getByTestId('loading-icon')).toBeInTheDocument();
    expect(getByTestId('arrow-icon')).toBeInTheDocument();
    expect(queryByTestId('remove-icon')).not.toBeInTheDocument();
  });

  it('renders only remove icon', () => {
    const { getByTestId, queryByTestId } = renderWithTheme(
      <SuffixIcon open onChange={onChange} removeShown />
    );

    expect(queryByTestId('loading-icon')).not.toBeInTheDocument();
    expect(queryByTestId('arrow-icon')).not.toBeInTheDocument();
    expect(getByTestId('remove-icon')).toBeInTheDocument();
  });

  it('renders only loading and remove icon', () => {
    const { getByTestId, queryByTestId } = renderWithTheme(
      <SuffixIcon loading open onChange={onChange} removeShown />
    );

    expect(getByTestId('loading-icon')).toBeInTheDocument();
    expect(queryByTestId('arrow-icon')).not.toBeInTheDocument();
    expect(getByTestId('remove-icon')).toBeInTheDocument();
  });
});

describe('interactions', () => {
  it('allows to remove selected item', () => {
    const { getByTestId } = renderWithTheme(
      <SuffixIcon open onChange={onChange} removeShown />
    );
    userEvent.click(getByTestId('remove-icon'));

    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith(undefined);
  });
});