import { screen, waitFor } from '@testing-library/react'; import { Placement } from '@popperjs/core'; import { InfoTooltip, InfoTooltipProps } from '../../src/utils/InfoTooltip'; import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const setUp = (props: Partial = {}) => renderWithEvents( , ); it.each([ [undefined], ['foo'], ['bar'], ])('renders expected className on span', (className) => { const { container } = setUp({ className }); if (className) { expect(container.firstChild).toHaveClass(className); } else { expect(container.firstChild).toHaveAttribute('class', ''); } }); it.each([ [foo, 'foo'], ['Foo', 'Foo'], ['Hello', 'Hello'], [['One', 'Two', ], 'OneTwo'], ])('passes children down to the nested tooltip component', async (children, expectedContent) => { const { container, user } = setUp({ children }); container.firstElementChild && await user.hover(container.firstElementChild); await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument()); screen.debug(screen.getByRole('tooltip')); expect(screen.getByRole('tooltip')).toHaveTextContent(expectedContent); }); it.each([ ['right' as Placement], ['left' as Placement], ['top' as Placement], ['bottom' as Placement], ])('places tooltip where requested', async (placement) => { const { container, user } = setUp({ placement }); container.firstElementChild && await user.hover(container.firstElementChild); await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument()); expect(screen.getByRole('tooltip').parentNode).toHaveAttribute('data-popper-placement', placement); }); });