import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react';
import { Dropdown } from './index';
import 'jest-styled-components';

it('snapshot - padrão', () => {
   function Component(): any {
      return (
         <Dropdown
            options={[
               {
                  name: <b>Eren Yeager</b>,
                  value: 'yeager',
               },
               {
                  name: <b>Eren Krueger</b>,
                  value: 'kruger',
               },
            ]}
            onClick={() => {}}
         >
            <button className="btn btn-dark" type="button" data-testid="button">
               DropMenu
            </button>
         </Dropdown>
      );
   }

   const { container } = render(<Component />);

   expect(container.firstChild).toMatchSnapshot();

   // Abrir popup
   fireEvent.click(screen.getByTestId('button'));

   expect(screen.getByTestId('dropmenu-popup')).not.toBeUndefined();
   expect(container.firstChild).toMatchSnapshot();
});

it('clicar na opção', () => {
   const onClick = jest.fn();
   const options = [
      {
         name: <b>Eren Yeager</b>,
         value: 'yeager',
      },
      {
         name: <b>Eren Krueger</b>,
         value: 'kruger',
      },
   ];
   function Component(): any {
      return (
         <Dropdown options={options} onClick={onClick}>
            <button className="btn btn-dark" type="button" data-testid="button">
               DropMenu
            </button>
         </Dropdown>
      );
   }

   render(<Component />);

   // Escolher segunda opção
   fireEvent.click(screen.getByTestId('button'));
   fireEvent.click(screen.getByTestId('dropmenu-menu-1'));

   expect(onClick).toHaveBeenCalledWith(options[1]);
});
