import React from 'react';
import { cleanup, fireEvent } from '@testing-library/react';

import testWrapper from '../helpers/testWrapper';
import SelectBox from '../components/SelectBox';

describe('SelectBox component', () => {
  afterEach(cleanup);

  const options = [
    {
      key: 1,
      content: 'option 1',
      child: 1,
    },
    {
      key: 2,
      content: 'option 2',
      child: 2,
    },
  ];

  test('default value', () => {
    const { getAllByTestId } = testWrapper(<SelectBox options={options} />);
    const ele = getAllByTestId('selected')[0].querySelector(
      'div',
    ) as HTMLDivElement;

    expect(ele.textContent).toBe('option 1');
  });

  test('open list', () => {
    const { container } = testWrapper(<SelectBox options={options} />);

    fireEvent.mouseDown(
      container.querySelector('[data-testid="selected"]') as HTMLElement,
    );

    expect(container.querySelectorAll('span')[2].textContent).toBe('option 2');
  });

  test('use input box', () => {
    const { container } = testWrapper(<SelectBox options={options} useInput />);
    const inputNode = container.querySelector('input') as HTMLInputElement;

    expect(inputNode.value).toBe('option 1');
  });
});