@engie-group/fluid-design-system-react/src/components/tooltip/test/Tooltip.test.jsx

Fluid Design System React

import { NJTooltip as Source } from '../NJTooltip';
import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import { NJTooltip as Library } from '../../../../lib/index';

describe.each([
  { Tag: Source, description: 'sources' },
  { Tag: Library, description: 'global library' }
])('using $description', ({ Tag }) => {
  it('renders correctly', () => {
    const { asFragment } = render(
      <Tag text="Hey" className="testClass">
        <button>Show toooltip</button>
      </Tag>
    );
    expect(asFragment()).toMatchSnapshot();
  });

  it('should display tooltip on mouse enter', () => {
    // Mocking Math.random for consistent tooltip ID
    const randomMock = vi.spyOn(Math, 'random').mockReturnValue(1);

    const { asFragment } = render(
      <Tag text="Hey" data-testid={'tooltip'}>
        <button>Show toooltip</button>
      </Tag>
    );
    const tooltip = screen.getByTestId('tooltip');
    fireEvent.mouseEnter(tooltip);
    randomMock.mockRestore();
    expect(asFragment()).toMatchSnapshot();
  });
});