import { fireEvent, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import {Tooltip} from "../../../../../src/pages/VisProgPage/visualProgrammingUI/components/NodeComponents.tsx";
import {renderWithSidebar} from "../../../../test-utils/test-utils.tsx";

describe('Tooltip component test', () => {
  afterEach(() => {
    jest.clearAllMocks();
  });

  it('renders and shows tooltip content on hover', () => {
    renderWithSidebar(
      <Tooltip nodeType="phase">
        <div>?</div>
      </Tooltip>
    );

    const trigger = screen.getByText('?');

    // initially hidden
    expect(
      screen.queryByText('Phase tooltip text')
    ).not.toBeInTheDocument();

    // hover shows tooltip
    fireEvent.mouseOver(trigger);

    expect(screen.getByText('phase')).toBeInTheDocument();
    expect(
      screen.getByText('A phase is a single stage of the program, during a phase Pepper will behave in accordance with any connected norms, goals and triggers')
    ).toBeInTheDocument();

    // rendered via portal
    expect(
      document.body.contains(
        screen.getByText('A phase is a single stage of the program, during a phase Pepper will behave in accordance with any connected norms, goals and triggers')
      )
    ).toBe(true);
  });
});