import React, { useEffect, useRef, useState } from 'react';
import { render, fireEvent, waitFor, screen, cleanup } from '@testing-library/react';
import { Dropdown } from '.';
import 'jest-styled-components';

it('snapshot - padrão', () => {
   function Component(): any {
      return (
         <Dropdown
            menu={[
               {
                  name: <b>First</b>,
                  onClick: () => {},
               },
               {
                  name: <b>First2</b>,
                  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', (done) => {
   function Component(): any {
      return (
         <Dropdown
            menu={[
               {
                  name: <b>First</b>,
                  onClick: () => {},
               },
               {
                  name: <b>First2</b>,
                  onClick: () => done(),
               },
            ]}
         >
            <button className="btn btn-dark" type="button" data-testid="button">
               DropMenu
            </button>
         </Dropdown>
      );
   }

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

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