import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Select from '.';

describe('Select Component', () => {
  test('render with label and Id', () => {
    const { container, getByText } = render(
      <Select
        label="test label"
        id="test_id"
        options={[
          <option key={1} value="Yes">
            Yes
          </option>,
          <option key={2} value="No">
            No
          </option>,
        ]}
      />
    );
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('select')).toHaveLength(1);
    expect(getByText('test label')).toBeTruthy();
    expect(container.querySelector('select').getAttribute('id')).toEqual('test_id');
  });

  test('render with change functions', () => {
    const handleChange = jest.fn();

    const { container } = render(
      <Select
        id="test_id"
        onChangeFunc={handleChange}
        options={[
          <option key={1} value="Yes">
            Yes
          </option>,
          <option key={2} value="No">
            No
          </option>,
        ]}
      />
    );

    expect(container).toBeTruthy();
    fireEvent.change(container.querySelector('select'), { target: { value: 2 } });
    expect(handleChange).toHaveBeenCalled();
  });
});
afterEach(() => {
  cleanup();
});
