diff --git a/src/renderer/components/fields/Tooltip.test.tsx b/src/renderer/components/fields/Tooltip.test.tsx index b6b759e8e..b06e5abb0 100644 --- a/src/renderer/components/fields/Tooltip.test.tsx +++ b/src/renderer/components/fields/Tooltip.test.tsx @@ -13,18 +13,33 @@ describe('renderer/components/fields/Tooltip.tsx', () => { it('should render', () => { renderWithAppContext(); - expect(screen.getByTestId('tooltip-test')).toBeInTheDocument(); + expect(screen.getByTestId('tooltip-icon-test')).toBeInTheDocument(); + expect(screen.queryByText(props.tooltip as string)).not.toBeInTheDocument(); + }); + + it('should toggle (show/hide) tooltip on clicking tooltip icon', async () => { + renderWithAppContext(); + + const tooltipIconElement = screen.getByTestId('tooltip-icon-test'); + + await userEvent.click(tooltipIconElement); + expect(screen.queryByText(props.tooltip as string)).toBeInTheDocument(); + + await userEvent.click(tooltipIconElement); + expect(screen.queryByText(props.tooltip as string)).not.toBeInTheDocument(); }); - it('should display on mouse enter / leave', async () => { + it('should hide tooltip contents on leave', async () => { renderWithAppContext(); - const tooltipElement = screen.getByTestId('tooltip-test'); + const tooltipIconElement = screen.getByTestId('tooltip-icon-test'); - await userEvent.hover(tooltipElement); + await userEvent.click(tooltipIconElement); expect(screen.queryByText(props.tooltip as string)).toBeInTheDocument(); - await userEvent.unhover(tooltipElement); + const tooltipContentElement = screen.getByTestId('tooltip-content-test'); + + await userEvent.unhover(tooltipContentElement); expect(screen.queryByText(props.tooltip as string)).not.toBeInTheDocument(); }); }); diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/fields/Tooltip.tsx index 3312dd468..fc6ed15f0 100644 --- a/src/renderer/components/fields/Tooltip.tsx +++ b/src/renderer/components/fields/Tooltip.tsx @@ -21,10 +21,9 @@ export const Tooltip: FC = (props: TooltipProps) => {