import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import TsQuery from './TsQuery';

const onChangeMock = jest.fn();

const defaultProps = {
  active: [],
  device: 'desktop',
  onChange: onChangeMock,
};

describe('TsQuery', () => {
  afterEach(() => {
    jest.resetAllMocks();
  });

  it('creates snapshot', () => {
    const { asFragment } = render(<TsQuery {...defaultProps} />);

    expect(asFragment()).toMatchSnapshot();
  });

  describe('Render', () => {
    it('renders component', () => {
      render(<TsQuery {...defaultProps} />);

      expect(screen.getByText('Category')).toBeInTheDocument();
      expect(screen.getAllByRole('checkbox')).toHaveLength(10);
    });

    it('renders with some checked options', () => {
      const props = {
        ...defaultProps,
        active: ['database', 'monitoring'],
      };
      render(<TsQuery {...props} />);

      const checkboxes = screen.getAllByRole('checkbox');
      expect(checkboxes).toHaveLength(10);
      expect(screen.getByLabelText('Database')).toBeInTheDocument();
      expect(checkboxes[0]).toBeChecked();
      expect(screen.getByLabelText('Integration and Delivery')).toBeInTheDocument();
      expect(checkboxes[1]).not.toBeChecked();
      expect(screen.getByLabelText('Logging and Tracing')).toBeInTheDocument();
      expect(checkboxes[2]).not.toBeChecked();
      expect(screen.getByLabelText('Machine learning')).toBeInTheDocument();
      expect(checkboxes[3]).not.toBeChecked();
      expect(screen.getByLabelText('Monitoring')).toBeInTheDocument();
      expect(checkboxes[4]).toBeChecked();
      expect(screen.getByLabelText('Networking')).toBeInTheDocument();
      expect(checkboxes[5]).not.toBeChecked();
      expect(screen.getByLabelText('Security')).toBeInTheDocument();
      expect(checkboxes[6]).not.toBeChecked();
      expect(screen.getByLabelText('Storage')).toBeInTheDocument();
      expect(checkboxes[7]).not.toBeChecked();
      expect(screen.getByLabelText('Streaming and Messaging')).toBeInTheDocument();
      expect(checkboxes[8]).not.toBeChecked();
      expect(screen.getByLabelText('Web applications')).toBeInTheDocument();
      expect(checkboxes[9]).not.toBeChecked();
    });

    it('calls on change event', async () => {
      render(<TsQuery {...defaultProps} />);
      const opt1 = screen.getByLabelText('Database');
      await userEvent.click(opt1);

      await waitFor(() => expect(onChangeMock).toHaveBeenCalledTimes(1));
    });
  });
});
