import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';

const Example = ({ showArrow }: { showArrow?: boolean } = {}) => (
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger>Save</TooltipTrigger>
      <TooltipContent showArrow={showArrow}>Saves without closing</TooltipContent>
    </Tooltip>
  </TooltipProvider>
);

describe('Tooltip', () => {
  it('stays hidden until the trigger is used', () => {
    render(<Example />);
    expect(screen.queryByText('Saves without closing')).not.toBeInTheDocument();
  });

  it('opens on keyboard focus, not just hover', async () => {
    render(<Example />);

    await userEvent.tab();

    expect(await screen.findByRole('tooltip')).toHaveTextContent('Saves without closing');
  });

  it('opens on hover', async () => {
    render(<Example />);

    await userEvent.hover(screen.getByText('Save'));

    expect(await screen.findByRole('tooltip')).toBeInTheDocument();
  });

  /*
   * CBAR makes the arrow a switch on its Tooltip. Radix renders it as an <svg>
   * inside the content, so its presence is the only thing to assert — the
   * bubble itself renders either way.
   */
  it('draws the arrow by default and drops it on request', async () => {
    const { unmount } = render(<Example />);
    await userEvent.tab();
    expect((await screen.findByRole('tooltip')).querySelector('svg')).toBeInTheDocument();
    unmount();

    render(<Example showArrow={false} />);
    await userEvent.tab();
    expect((await screen.findByRole('tooltip')).querySelector('svg')).not.toBeInTheDocument();
  });
});