import React from 'react';
import { fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { labelsMock } from 'lib/test/mocks/labels';
import { SHOW_ALL_LABEL_NAME } from 'src/components/headerLabelPicker/labelSearchDropdown';
import * as orchardLabels from 'src/data/queries/orchardLabels/orchardLabels';
import HeaderLabelPicker from '../headerLabelPicker';

describe('<HeaderLabelPicker>', () => {
    const renderComponent = () => renderInAppContext(<HeaderLabelPicker />);

    beforeEach(() => {
        jest.spyOn(orchardLabels, 'useOrchardLabels').mockReturnValue(
            labelsMock
        );
    });

    afterEach(() => {
        jest.restoreAllMocks();
    });

    test('component is being rendered successfully', () => {
        const { container } = renderComponent();

        const component = container.querySelector(
            '.HeaderLabelPicker .LabelSearchDropdown'
        );
        expect(component).toBeTruthy();
    });

    test('labels are being fetched successfully', () => {
        const { container } = renderComponent();

        const labelSelect = container.querySelector(
            '.LabelSearchDropdown input'
        );

        if (labelSelect) fireEvent.mouseDown(labelSelect);

        const options = container.querySelectorAll(
            '.LabelSearchDropdown .Select__menu .Select__option'
        );
        expect(options).toHaveLength(3);

        expect(options[0].textContent).toEqual(SHOW_ALL_LABEL_NAME);
    });
});