diff --git a/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx b/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx
index ea1e31910aa..197bca2f41c 100644
--- a/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx
+++ b/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx
@@ -1,11 +1,181 @@
import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { Tooltip } from '../Tooltip';
+import { TooltipArrow } from "../TooltipArrow";
+import { TooltipContent } from "../TooltipContent";
+import userEvent from '@testing-library/user-event';
+
+jest.mock('../../../helpers/Popper/Popper', () => ({
+ Popper: ({ trigger, enableFlip, appendTo, distance, flipBehavior, isVisible, placement, popper, zIndex, ...props }) => (
+
+
{trigger}
+
{isVisible && popper}
+
{placement}
+
{enableFlip}
+
{distance}
+
{flipBehavior}
+
{appendTo}
+
{zIndex}
+
{`enableFlip: ${enableFlip}`}
+
Append to class name: {appendTo && `${appendTo.className}`}
+
+ ),
+ getOpacityTransition: () => {}
+}));
+
+/** Testing tooltip content */
+
+test('tooltip content renders', () => {
+ render(
+ Test
+ }
+ data-testid='Tooltip'
+ />
+ );
+
+ expect(screen.getByTestId('Tooltip')).toBeVisible();
+});
+
+test('renders pf-c-tooltip__content class', () => {
+ render(
+ Test
+ }
+ />
+ );
+
+ const tooltip = screen.getByLabelText('test-label');
+
+ expect(tooltip).toHaveClass('pf-c-tooltip__content');
+});
+
+test('renders custom class', () => {
+ render(
+ Test
+ }
+ />
+ );
+
+ const tooltip = screen.getByLabelText('test-label');
+
+ expect(tooltip).toHaveClass('custom-classname');
+});
+
+test('renders with children', () => {
+ render(
+ Test
+ }
+ />
+ );
+
+ expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('renders tooltip content with default alignment', () => {
+ render(
+ Test
+ }
+ />
+ );
+
+ expect(screen.getByLabelText('test-label')).not.toHaveClass('pf-m-text-align-left');
+});
+
+test('renders tooltip content with left alignment', () => {
+ render(
+ Test
+ }
+ />
+ );
+
+ expect(screen.getByLabelText('test-label')).toHaveClass('pf-m-text-align-left');
+});
+
+test('renders with inherited element props spread to the component', () => {
+ render(
+
+ Test
+
+ );
+
+ const tooltip = screen.getByText('Test');
+
+ expect(tooltip).toHaveAccessibleName('test-label');
+});
+
+/** Testing tooltip arrow */
+
+test('tooltip arrow renders', () => {
+ const { asFragment } = render(
+
+ );
+
+ expect(asFragment()).toMatchSnapshot();
+});
+
+test('renders pf-c-tooltip__arrow class', () => {
+ render(
+
+ );
+
+ const tooltip = screen.getByLabelText('test-label');
+
+ expect(tooltip).toHaveClass('pf-c-tooltip__arrow');
+});
+
+test('renders custom class', () => {
+ render(
+
+ );
+
+ const tooltip = screen.getByLabelText('test-label');
+
+ expect(tooltip).toHaveClass('custom-classname');
+});
+
+test('renders with inherited element props spread to the component', () => {
+ render(
+
+ Test
+
+ );
+
+ const tooltip = screen.getByText('Test');
+
+ expect(tooltip).toHaveAccessibleName('test-label');
+});
+
+/** Testing remaining tooltip props */
test('tooltip renders', () => {
const { asFragment } = render(
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
@@ -17,3 +187,252 @@ test('tooltip renders', () => {
);
expect(asFragment()).toMatchSnapshot();
});
+
+test('renders tooltip content when isVisible', async () => {
+ render(
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+
+ }
+ >
+ Toggle tooltip
+
+ );
+
+ const tooltip = await screen.findByText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.");
+
+ expect(tooltip).toBeVisible();
+});
+
+test('does not render tooltip content by default', () => {
+ render(
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+
+ }
+ >
+ Toggle tooltip
+
+ );
+
+ const tooltip = screen.queryByText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.");
+
+ expect(tooltip).not.toBeInTheDocument();
+});
+
+test('renders tooltip position when isVisible', () => {
+ render(
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+
+ }
+ >
+ Toggle tooltip
+
+ );
+
+ const tooltip = screen.getByTestId("placement");
+ expect(tooltip).toHaveTextContent("top");
+});
+
+test('passes Popper enableFlip set to true', async () => {
+ render(
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+
+ }
+ >
+ Toggle tooltip
+
+ );
+
+ const input = await screen.findByText('enableFlip: true');
+
+ expect(input).toBeVisible();
+});
+
+test('renders default classname pf-c-tooltip when isVisible', async () => {
+ render(
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+
+ }
+ >
+ Toggle tooltip
+
+ );
+
+ const tooltip = await screen.findByLabelText("test-label");
+ expect(tooltip).toHaveClass("pf-c-tooltip");
+});
+
+test('renders custom classname when isVisible', async () => {
+ render(
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+
+ }
+ >
+ Toggle tooltip
+
+ );
+
+ const tooltip = await screen.findByLabelText("test-label");
+ expect(tooltip).toHaveClass("custom-class");
+});
+
+// entrydelay test
+
+// exitdelay test
+
+// appendto test
+
+
+test('renders zIndex styling when isVisible', () => {
+ render(
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+
+ }
+ >
+ Toggle tooltip
+
+ );
+
+ const input = screen.getByTestId('zIndex');
+
+ expect(input).toHaveTextContent('9999');
+});
+
+// maxwidth
+
+test('renders default distance when isVisible', () => {
+ render(
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+
+ }
+ >
+ Toggle tooltip
+
+ );
+
+ const input = screen.getByTestId('distance');
+
+ expect(input).toHaveTextContent('15');
+});
+
+// aria
+
+test('renders default flipBehavior when isVisible', () => {
+ render(
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+
+ }
+ >
+ Toggle tooltip
+
+ );
+
+ const input = screen.getByTestId('flipBehavior');
+
+ expect(input).toHaveTextContent('toprightbottomlefttoprightbottom');
+});
+
+// id
+
+test('renders children', async () => {
+ render(
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+
+ }
+ >
+ Toggle tooltip
+
+ );
+
+ const user = screen.getByText("Toggle tooltip");
+ expect(user).toBeVisible();
+});
+
+// test('renders animationDuration styling', async () => {
+// render(
+//
+// Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+//
+// }
+// >
+// Toggle tooltip
+//
+// );
+
+// const user = screen.getByText("Toggle tooltip");
+// userEvent.hover(user);
+
+// const tooltip = await screen.findByLabelText("test-label");
+// const style = window.getComputedStyle(tooltip);
+// expect(style.transition).toBe("opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11)");
+// });
+
+// reference
+
+// aria-live
+
+
+// appendTo is passed straight to popper
+
+// aria - has assertions against what the accessible name is
+// test against trigger prop for popper!!!
+// maybe just have popper render trigger with custom data test id and have assertions based on that and the accessible name
+
+// id - same thing w aria prop AND make sure it's getting passed to the proper place
+// not rly a good rtl to test for IDs -> have it render what trigger returns and make assertions based on accessible name -> test aria prop and id prop
+// select using data test-id bc content is a div
+
+// reference is straight to popper
+// but also note: aria-live uses reference -> might have to use toHave attribute
+
diff --git a/packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap b/packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap
index 210e96b48ce..0e557df1dc8 100644
--- a/packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap
+++ b/packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap
@@ -1,9 +1,60 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`tooltip arrow renders 1`] = `
+
+
+
+`;
+
exports[`tooltip renders 1`] = `
-
- Toggle tooltip
+
+
+
+
+ top
+
+
+
+ 15
+
+
+ toprightbottomlefttoprightbottom
+
+
+
+ 9999
+
+
+ enableFlip: true
+
+
+ Append to class name: undefined
+
`;