import { fireEvent, isInaccessible } from '@testing-library/react';
import * as React from 'react';
import { render } from '@testing-library/react';
import Popover from '.';

window.requestAnimationFrame = () => {};

describe('<Popover />', () => {
  it('can be used uncontrolled', () => {
    const { getByRole, getByText } = render(
      <Popover target={<span />}>
        <div>123</div>
        <div>456</div>
      </Popover>,
    );

    expect(() => getByText('123')).toThrow();

    fireEvent.click(getByRole('button'));

    expect(isInaccessible(getByText('123'))).toBe(false);
  });

  it('can be controlled', () => {
    const fn = jest.fn();
    const { getByText, getByRole } = render(
      <Popover target={<span />} shown onToggle={fn}>
        <div>123</div>
        <div>456</div>
      </Popover>,
    );

    expect(isInaccessible(getByText('123'))).toBe(false);

    fireEvent.click(getByRole('button'));

    expect(fn).toHaveBeenCalledWith(false);
  });

  it('closes when clicked outside', () => {
    const fn = jest.fn();
    const { getByText } = render(
      <>
        <span>Im outside</span>
        <Popover target={<span />} shown onToggle={fn}>
          <div>123</div>
          <div>456</div>
        </Popover>
      </>,
    );

    fireEvent.click(getByText('Im outside'));

    expect(fn).toHaveBeenCalledWith(false);
  });
});