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 +
+
+
+ Toggle tooltip +
+
+
+
+ top +
+
+
+ 15 +
+
+ toprightbottomlefttoprightbottom +
+
+
+ 9999 +
+

+ enableFlip: true +

+

+ Append to class name: undefined +

`;