diff --git a/src/utils/InfoTooltip.tsx b/src/utils/InfoTooltip.tsx index f204fd14..c7cffd25 100644 --- a/src/utils/InfoTooltip.tsx +++ b/src/utils/InfoTooltip.tsx @@ -10,16 +10,14 @@ interface InfoTooltipProps { } export const InfoTooltip: FC = ({ className = '', placement, children }) => { - const ref = useRef(); + const ref = useRef(); + const refCallback = (el: HTMLSpanElement) => { + ref.current = el; + }; return ( <> - { - ref.current = el; - }} - > + ref.current) as any} placement={placement}>{children} diff --git a/test/utils/InfoTooltip.test.tsx b/test/utils/InfoTooltip.test.tsx new file mode 100644 index 00000000..32881ae6 --- /dev/null +++ b/test/utils/InfoTooltip.test.tsx @@ -0,0 +1,41 @@ +import { shallow } from 'enzyme'; +import { UncontrolledTooltip } from 'reactstrap'; +import { InfoTooltip } from '../../src/utils/InfoTooltip'; +import Popper from 'popper.js'; + +describe('', () => { + it.each([ + [ undefined ], + [ 'foo' ], + [ 'bar' ], + ])('renders expected className on span', (className) => { + const wrapper = shallow(); + const span = wrapper.find('span'); + + expect(span.prop('className')).toEqual(className ?? ''); + }); + + it.each([ + [ ], + [ 'Foo' ], + [ 'Hello' ], + [[ 'One', 'Two', ]], + ])('passes children down to the nested tooltip component', (children) => { + const wrapper = shallow({children}); + const tooltip = wrapper.find(UncontrolledTooltip); + + expect(tooltip.prop('children')).toEqual(children); + }); + + it.each([ + [ 'right' as Popper.Placement ], + [ 'left' as Popper.Placement ], + [ 'top' as Popper.Placement ], + [ 'bottom' as Popper.Placement ], + ])('places tooltip where requested', (placement) => { + const wrapper = shallow(); + const tooltip = wrapper.find(UncontrolledTooltip); + + expect(tooltip.prop('placement')).toEqual(placement); + }); +});