diff --git a/src/utils/InfoTooltip.tsx b/src/utils/InfoTooltip.tsx
index 2070c76e..15ecae62 100644
--- a/src/utils/InfoTooltip.tsx
+++ b/src/utils/InfoTooltip.tsx
@@ -5,7 +5,7 @@ import { UncontrolledTooltip } from 'reactstrap';
import { Placement } from '@popperjs/core';
import { mutableRefToElementRef } from './helpers/components';
-type InfoTooltipProps = PropsWithChildren<{
+export type InfoTooltipProps = PropsWithChildren<{
className?: string;
placement: Placement;
}>;
diff --git a/test/utils/InfoTooltip.test.tsx b/test/utils/InfoTooltip.test.tsx
index efbe3af3..661e6bf0 100644
--- a/test/utils/InfoTooltip.test.tsx
+++ b/test/utils/InfoTooltip.test.tsx
@@ -1,30 +1,40 @@
-import { shallow } from 'enzyme';
-import { UncontrolledTooltip } from 'reactstrap';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import { Placement } from '@popperjs/core';
-import { InfoTooltip } from '../../src/utils/InfoTooltip';
+import { InfoTooltip, InfoTooltipProps } from '../../src/utils/InfoTooltip';
describe('', () => {
+ const setUp = (props: Partial = {}) => ({
+ user: userEvent.setup(),
+ ...render(),
+ });
+
it.each([
[undefined],
['foo'],
['bar'],
])('renders expected className on span', (className) => {
- const wrapper = shallow();
- const span = wrapper.find('span');
+ const { container } = setUp({ className });
- expect(span.prop('className')).toEqual(className ?? '');
+ if (className) {
+ expect(container.firstChild).toHaveClass(className);
+ } else {
+ expect(container.firstChild).toHaveAttribute('class', '');
+ }
});
it.each([
- [],
- ['Foo'],
- ['Hello'],
- [['One', 'Two', ]],
- ])('passes children down to the nested tooltip component', (children) => {
- const wrapper = shallow({children});
- const tooltip = wrapper.find(UncontrolledTooltip);
+ [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 });
- expect(tooltip.prop('children')).toEqual(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([
@@ -32,10 +42,11 @@ describe('', () => {
['left' as Placement],
['top' as Placement],
['bottom' as Placement],
- ])('places tooltip where requested', (placement) => {
- const wrapper = shallow();
- const tooltip = wrapper.find(UncontrolledTooltip);
+ ])('places tooltip where requested', async (placement) => {
+ const { container, user } = setUp({ placement });
- expect(tooltip.prop('placement')).toEqual(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);
});
});