import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import Tooltip from '.';

describe('Tooltip Component', () => {
  test('render tooltip', async () => {
    const { container, getByText } = render(
      <Tooltip content="test content" direction="top" delay={0}>
        Test Children
      </Tooltip>
    );
    expect(container).toBeTruthy();

    expect(getByText('Test Children')).toBeTruthy();

    fireEvent.mouseEnter(screen.getByText('Test Children'));
    await waitFor(() => screen.getByText('test content'));

    fireEvent.mouseLeave(screen.getByText('Test Children'));
    const isVisible = container.querySelector('.tooltip');
    expect(isVisible.classList.contains('active')).toBe(false);
  });
  test('render tooltip on mobile', async () => {
    const { container, getByText } = render(
      <Tooltip content="test content" direction="top" delay={0}>
        Test Children
      </Tooltip>
    );
    expect(container).toBeTruthy();
    expect(getByText('Test Children')).toBeTruthy();

    fireEvent.click(screen.getByText('Test Children'));
    await waitFor(() => screen.getByText('test content'));
  });
  test('render tooltip with different direction', async () => {
    const { container, getByText } = render(
      <Tooltip content="test content" direction="bottom" delay={0}>
        Test Children
      </Tooltip>
    );
    expect(container).toBeTruthy();
    expect(getByText('Test Children')).toBeTruthy();

    fireEvent.click(screen.getByText('Test Children'));
    await waitFor(() => {
      screen.getByText('test content');
      expect(container.querySelector('.tooltip')).toBeTruthy();
      expect(container.querySelector('.tooltip')).toHaveClass('bottom');
    });
  });
});
