pdf-reader-web/__test__/selectBox.test.tsx

/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-undef */
import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';

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

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

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

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

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

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

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

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

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

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