import { Menu, MenuItem } from './menu'
import { fireEvent, render, screen } from '@testing-library/react'
import { ThemeProvider } from 'styled-components'
import { theme } from './theme'

describe('<Menu />', () => {
  const defaultProps = {
    anchorEl: document.createElement('div'),
    open: true,
  }

  it('should render the children', async () => {
    const mockHandleClose = jest.fn()
    render(
      <ThemeProvider theme={theme}>
        <Menu {...defaultProps} onClose={mockHandleClose}>
          <MenuItem data-testid="inside">Menu Item</MenuItem>
        </Menu>
      </ThemeProvider>
    )
    expect(await screen.findByTestId('inside')).toBeInTheDocument()
  })

  it('should only call onClose when clicking outside of the menu', async () => {
    const mockHandleClose = jest.fn()
    render(
      <ThemeProvider theme={theme}>
        <div data-testid="outside">outside</div>
        <Menu {...defaultProps} onClose={mockHandleClose}>
          <MenuItem data-testid="inside">Menu Item</MenuItem>
        </Menu>
      </ThemeProvider>
    )

    const inside = await screen.findByTestId('inside')
    const outside = await screen.findByTestId('outside')

    expect(inside).toBeInTheDocument()
    expect(outside).toBeInTheDocument()

    fireEvent.click(inside)
    expect(mockHandleClose).not.toHaveBeenCalled()

    fireEvent.click(outside)
    expect(mockHandleClose).toHaveBeenCalled()
  })
})