import assert from 'assert';
import React from 'react';
import configureMockStore from 'redux-mock-store';
import { fireEvent } from '@testing-library/react';
import sinon from 'sinon';
import { renderWithProvider } from '../../../lib/render-helpers';
import { Dropdown } from '../../../../ui/app/components/app/dropdowns/components/dropdown';

describe('Dropdown components', function () {
  const mockState = {
    metamask: {},
  };

  const props = {
    isOpen: true,
    zIndex: 11,
    onClickOutside: sinon.spy(),
    style: {
      position: 'absolute',
      right: 0,
      top: '36px',
    },
    innerStyle: {},
  };

  it('invokes click handler when item clicked', function () {
    const store = configureMockStore()(mockState);

    const onClickSpy = sinon.spy();

    const { getByText } = renderWithProvider(
      <Dropdown {...props}>
        <li onClick={onClickSpy}>Item 1</li>
        <li onClick={onClickSpy}>Item 2</li>
      </Dropdown>,
      store,
    );

    const item1 = getByText(/Item 1/u);
    fireEvent.click(item1);

    assert.ok(onClickSpy.calledOnce);
  });
});