1 files changed, 126 insertions, 0 deletions
diff --git a/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx
new file mode 100644
index 00000000000..8b448d17521
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx
@@ -0,0 +1,126 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { screen } from '@testing-library/react';
+import { render } from '../../helpers/testUtils';
+import { FCProps } from '../../types/misc';
+import Tooltip, { TooltipInner } from '../Tooltip';
+
+jest.mock('react-dom', () => {
+  const reactDom = jest.requireActual('react-dom');
+  return { ...reactDom, findDOMNode: jest.fn().mockReturnValue(undefined) };
+});
+
+describe('TooltipInner', () => {
+  it('should open & close', async () => {
+    const onShow = jest.fn();
+    const onHide = jest.fn();
+    const { user } = setupWithProps({ onHide, onShow });
+
+    await user.hover(screen.getByRole('note'));
+    expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+    expect(onShow).toHaveBeenCalled();
+
+    await user.unhover(screen.getByRole('note'));
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+    expect(onHide).toHaveBeenCalled();
+  });
+
+  it('should not shadow children pointer events', async () => {
+    const onShow = jest.fn();
+    const onHide = jest.fn();
+    const onPointerEnter = jest.fn();
+    const onPointerLeave = jest.fn();
+    const { user } = setupWithProps(
+      { onHide, onShow },
+      <div onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave} role="note" />
+    );
+
+    await user.hover(screen.getByRole('note'));
+    expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+    expect(onShow).toHaveBeenCalled();
+    expect(onPointerEnter).toHaveBeenCalled();
+
+    await user.unhover(screen.getByRole('note'));
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+    expect(onHide).toHaveBeenCalled();
+    expect(onPointerLeave).toHaveBeenCalled();
+  });
+
+  it('should not open when mouse goes away quickly', async () => {
+    const { user } = setupWithProps();
+
+    await user.hover(screen.getByRole('note'));
+    await user.unhover(screen.getByRole('note'));
+
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+
+  it('should position the tooltip correctly', async () => {
+    const onShow = jest.fn();
+    const onHide = jest.fn();
+    const { user } = setupWithProps({ onHide, onShow });
+
+    await user.hover(screen.getByRole('note'));
+    expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+    expect(screen.getByRole('tooltip')).toHaveClass('bottom');
+  });
+
+  function setupWithProps(
+    props: Partial<TooltipInner['props']> = {},
+    children = <div role="note" />
+  ) {
+    return render(
+      <TooltipInner mouseLeaveDelay={0} overlay={<span id="overlay" />} {...props}>
+        {children}
+      </TooltipInner>
+    );
+  }
+});
+
+describe('Tooltip', () => {
+  it('should not render tooltip without overlay', async () => {
+    const { user } = setupWithProps({ overlay: undefined });
+    await user.hover(screen.getByRole('note'));
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+
+  it('should not render undefined tooltips', async () => {
+    const { user } = setupWithProps({ overlay: undefined, visible: true });
+    await user.hover(screen.getByRole('note'));
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+
+  it('should not render empty tooltips', async () => {
+    const { user } = setupWithProps({ overlay: '', visible: true });
+    await user.hover(screen.getByRole('note'));
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+
+  function setupWithProps(
+    props: Partial<FCProps<typeof Tooltip>> = {},
+    children = <div role="note" />
+  ) {
+    return render(
+      <Tooltip overlay={<span id="overlay" />} {...props}>
+        {children}
+      </Tooltip>
+    );
+  }
+});