IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-21 16:38:03 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana UI: Fix behaviour regression on Tooltip component (#70682)

Browse Source
This commit is contained in:
Laura Fernández 2023-06-27 13:20:19 +02:00 committed by GitHub
parent 21ac224c45
commit 1cdc139f28
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
View File

@ -1,4 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React, { MutableRefObject } from 'react';
import { Tooltip } from './Tooltip';
@ -38,4 +39,35 @@ describe('Tooltip', () => {
expect(refObj.current).not.toBeNull();
});
it('to be shown on hover and be dismissable by pressing Esc key when show is undefined', async () => {
render(
<Tooltip content="Tooltip content">
<span>On the page</span>
</Tooltip>
);
await userEvent.hover(screen.getByText('On the page'));
expect(await screen.findByText('Tooltip content')).toBeInTheDocument();
await userEvent.keyboard('{Escape}');
expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument();
});
it('is always visible when show prop is true', async () => {
render(
<Tooltip content="Tooltip content" show={true}>
<span>On the page</span>
</Tooltip>
);
await userEvent.hover(screen.getByText('On the page'));
expect(screen.getByText('Tooltip content')).toBeInTheDocument();
await userEvent.unhover(screen.getByText('On the page'));
expect(screen.getByText('Tooltip content')).toBeInTheDocument();
});
it('is never visible when show prop is false', async () => {
render(
<Tooltip content="Tooltip content" show={false}>
<span>On the page</span>
</Tooltip>
);
await userEvent.hover(screen.getByText('On the page'));
expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument();
});
});

2
packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
View File

@ -42,7 +42,7 @@ export const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(
}, [controlledVisible]);
const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible, update } = usePopperTooltip({
visible: controlledVisible,
visible: show ?? controlledVisible,
placement: placement,
interactive: interactive,
delayHide: interactive ? 100 : 0,