import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { Option } from '../../Filters.model';
import { OptionsFilter } from './OptionsFilter';

const options: Option[] = [
  {
    label: 'option 1',
    value: 'value 1',
  },
  {
    label: 'option 2',
    value: 'value 2',
  },
];

const spy = vi.fn();

describe('OptionsFilter', () => {
  it('Empty options array for options param will not render any options to select', () => {
    const { container } = render(<OptionsFilter options={[]} onSelect={spy} />);
    expect(container.querySelectorAll('.option')).toHaveLength(0);
  });

  it('Provided options for filter are rendered', () => {
    const { container } = render(
      <OptionsFilter options={options} onSelect={spy} />,
    );
    expect(container.querySelectorAll('.option')).toHaveLength(2);
  });

  it('selected option on filter is poped when click on it', () => {
    const { container } = render(
      <OptionsFilter options={options} onSelect={spy} />,
    );
    const selectableOption = container.querySelector('.option') as HTMLElement;
    fireEvent.click(selectableOption);
    expect(spy).toHaveBeenCalledWith(options[0].value);
  });
});
