diff --git a/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx index 3c21de56481..c01022d93cb 100644 --- a/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx +++ b/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx @@ -22,7 +22,11 @@ test('renders dropdown', () => { }); test('passes children', () => { - render( toggle(toggleRef)}>{dropdownChildren}); + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); expect(screen.getByText('Dropdown children')).toBeVisible(); }); @@ -112,7 +116,7 @@ test('passes zIndex to popper', () => { test('does not pass isOpen to popper by default', () => { render( toggle(toggleRef)}>{dropdownChildren}); - expect(screen.getByText('isOpen: undefined')).toBeVisible(); + expect(screen.getByText('isVisible: undefined')).toBeVisible(); }); test('passes isOpen to popper', () => { @@ -122,7 +126,7 @@ test('passes isOpen to popper', () => { ); - expect(screen.getByText('isOpen: true')).toBeVisible(); + expect(screen.getByText('isVisible: true')).toBeVisible(); }); /* no default tests for callback props @@ -134,7 +138,7 @@ test('passes onSelect callback', async () => { const onSelect = jest.fn(); render( - toggle(toggleRef)}> + toggle(toggleRef)}> {dropdownChildren} ); diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap index 902d054c70b..c2da5ee3693 100644 --- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap +++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap @@ -2,40 +2,62 @@ exports[`match snapshot 1`] = ` -
+
-
+
- Dropdown children +
+ Dropdown children +
+
+ Mock item +
+

+ isPlain: true +

+

+ isScrollable: true +

+

+ minWidth: undefined +

-
- Mock item -

- isPlain: true + zIndex: 9999 +

+

+ isVisible: true +

+

+ enableFlip: undefined

- isScrollable: true + placement: undefined +

+

+ appendTo: undefined +

+

+ distance: undefined +

+

+ flipBehavior: undefined

minWidth: undefined

-
-

- zIndex: 9999 -

-

- isOpen: true -

-
diff --git a/packages/react-core/src/components/Tooltip/__tests__/Generated/TooltipArrow.test.tsx b/packages/react-core/src/components/Tooltip/__tests__/Generated/TooltipArrow.test.tsx deleted file mode 100644 index f287f2e83a6..00000000000 --- a/packages/react-core/src/components/Tooltip/__tests__/Generated/TooltipArrow.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { TooltipArrow } from '../../TooltipArrow'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('TooltipArrow should match snapshot (auto-generated)', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Tooltip/__tests__/Generated/TooltipContent.test.tsx b/packages/react-core/src/components/Tooltip/__tests__/Generated/TooltipContent.test.tsx deleted file mode 100644 index 7eb9dee9bc8..00000000000 --- a/packages/react-core/src/components/Tooltip/__tests__/Generated/TooltipContent.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { TooltipContent } from '../../TooltipContent'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('TooltipContent should match snapshot (auto-generated)', () => { - const { asFragment } = render( - ReactNode
} isLeftAligned={true} /> - ); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Tooltip/__tests__/Generated/__snapshots__/TooltipArrow.test.tsx.snap b/packages/react-core/src/components/Tooltip/__tests__/Generated/__snapshots__/TooltipArrow.test.tsx.snap deleted file mode 100644 index be054814faa..00000000000 --- a/packages/react-core/src/components/Tooltip/__tests__/Generated/__snapshots__/TooltipArrow.test.tsx.snap +++ /dev/null @@ -1,9 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TooltipArrow should match snapshot (auto-generated) 1`] = ` - -
- -`; diff --git a/packages/react-core/src/components/Tooltip/__tests__/Generated/__snapshots__/TooltipContent.test.tsx.snap b/packages/react-core/src/components/Tooltip/__tests__/Generated/__snapshots__/TooltipContent.test.tsx.snap deleted file mode 100644 index f4aa189e4f9..00000000000 --- a/packages/react-core/src/components/Tooltip/__tests__/Generated/__snapshots__/TooltipContent.test.tsx.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TooltipContent should match snapshot (auto-generated) 1`] = ` - -
-
- ReactNode -
-
-
-`; 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 5b8ff267fe1..d090f6ca5b9 100644 --- a/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx +++ b/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx @@ -1,43 +1,206 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; +import React from 'react'; +import { render, screen } from '@testing-library/react'; import { Tooltip } from '../Tooltip'; +import userEvent from '@testing-library/user-event'; +import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip'; -test('tooltip renders', () => { - const ref = React.createRef(); - const { asFragment } = render( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. -
- } - > -
Toggle tooltip
+jest.mock('../../../helpers/Popper/Popper'); + +test('Renders with class name pf-v5-c-tooltip by default', async () => { + render(); + + const tooltip = await screen.findByRole('tooltip'); + expect(tooltip).toHaveClass(styles.tooltip); +}); + +test('Renders with custom class names provided via prop', async () => { + render(); + + const tooltip = await screen.findByRole('tooltip'); + expect(tooltip).toHaveClass('test-class'); +}); + +test('Renders with aria-live of off by default when triggerRef is not passed', async () => { + render(); + + const tooltip = await screen.findByRole('tooltip'); + expect(tooltip).toHaveAttribute('aria-live', 'off'); +}); + +test('Renders with aria-live of polite by default when triggerRef is passed', async () => { + const triggerRef = React.createRef(); + render(); + + const tooltip = await screen.findByRole('tooltip'); + expect(tooltip).toHaveAttribute('aria-live', 'polite'); +}); + +test('Renders with value passed to aria-live prop', async () => { + render(); + + const tooltip = await screen.findByRole('tooltip'); + expect(tooltip).toHaveAttribute('aria-live', 'polite'); +}); + +test('Renders with value passed to id prop', async () => { + render(); + + const tooltip = await screen.findByRole('tooltip'); + expect(tooltip).toHaveAttribute('id', 'custom-id'); +}); + +test('Renders with maxWidth styling applied when maxWidth is passed', async () => { + render(); + + const tooltip = await screen.findByRole('tooltip'); + expect(tooltip).toHaveStyle('max-width: 100px'); +}); + +test('Renders with aria-describedby on trigger by default', async () => { + render( + + + + ); + + await screen.findByRole('tooltip'); + expect(screen.getByRole('button')).toHaveAccessibleDescription('Test content'); +}); + +test('Renders with aria-labelledby on trigger when aria="labelledby" is passed', async () => { + render( + + ); - expect(asFragment()).toMatchSnapshot(); -}); - -test('tooltip renders in strict mode', () => { - const consoleError = jest.spyOn(console, 'error'); - const ref = React.createRef(); - const { asFragment } = render( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. -
- } - > -
Toggle tooltip
+ + await screen.findByRole('tooltip'); + expect(screen.getByRole('button')).toHaveAccessibleName('Test content'); +}); + +test('Renders without aria-labelledby or aria-describedby on trigger when aria="none" is passed', async () => { + render( + + + + ); + + await screen.findByRole('tooltip'); + expect(screen.getByRole('button')).not.toHaveAccessibleName('Test content'); + expect(screen.getByRole('button')).not.toHaveAccessibleDescription('Test content'); +}); + +test('Does not call onTooltipHidden before tooltip is hidden', async () => { + const onTooltipHiddenMock = jest.fn(); + const user = userEvent.setup(); + + const TooltipCallback = () => { + const [isVisible, setIsVisible] = React.useState(false); + + return ( + + - + ); + }; + render(); + + await user.click(screen.getByRole('button')); + await screen.findByRole('tooltip'); + expect(onTooltipHiddenMock).not.toHaveBeenCalled(); +}); + +test('Calls onTooltipHidden when tooltip is hidden', async () => { + const onTooltipHiddenMock = jest.fn(); + const user = userEvent.setup(); + + const TooltipCallback = () => { + const [isVisible, setIsVisible] = React.useState(true); + + return ( + + + + ); + }; + render(); + + await screen.findByRole('tooltip'); + await user.click(screen.getByRole('button')); + await screen.findByText('isVisible: false'); + expect(onTooltipHiddenMock).toHaveBeenCalled(); +}); + +test('Does not pass isVisible to Popper by default', async () => { + render(); + + const contentPassedToPopper = await screen.findByText('isVisible: false'); + expect(contentPassedToPopper).toBeVisible(); +}); + +test('Passes isVisible to Popper', async () => { + render(); + + const contentPassedToPopper = await screen.findByText('isVisible: true'); + expect(contentPassedToPopper).toBeVisible(); +}); + +test('Passes zIndex to Popper', async () => { + render(); + + const contentPassedToPopper = await screen.findByText('zIndex: 10'); + expect(contentPassedToPopper).toBeVisible(); +}); + +test('Passes enableFlip to Popper', async () => { + render(); + + const contentPassedToPopper = await screen.findByText('enableFlip: true'); + expect(contentPassedToPopper).toBeVisible(); +}); + +test('Passes position as placement to Popper', async () => { + render(); + + const contentPassedToPopper = await screen.findByText('placement: left-start'); + expect(contentPassedToPopper).toBeVisible(); +}); + +test('Passes appendTo to Popper', async () => { + render( document.body} content="Test content" />); + + const contentPassedToPopper = await screen.findByText('appendTo: () => document.body'); + expect(contentPassedToPopper).toBeVisible(); +}); + +test('Passes distance to Popper', async () => { + render(); + + const contentPassedToPopper = await screen.findByText('distance: 5'); + expect(contentPassedToPopper).toBeVisible(); +}); + +test('Passes flipBehavior to Popper', async () => { + render(); + + const contentPassedToPopper = await screen.findByText('flipBehavior: flip'); + expect(contentPassedToPopper).toBeVisible(); +}); + +test('Passes minWidth to Popper', async () => { + render(); + + const contentPassedToPopper = await screen.findByText('minWidth: 100px'); + expect(contentPassedToPopper).toBeVisible(); +}); + +test('Matches snapshot', async () => { + render( + + + ); - expect(consoleError).not.toHaveBeenCalled(); - expect(asFragment()).toMatchSnapshot(); + + const tooltip = await screen.findByRole('tooltip'); + expect(tooltip).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Tooltip/__tests__/TooltipArrow.test.tsx b/packages/react-core/src/components/Tooltip/__tests__/TooltipArrow.test.tsx new file mode 100644 index 00000000000..8854a2dbe9f --- /dev/null +++ b/packages/react-core/src/components/Tooltip/__tests__/TooltipArrow.test.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { TooltipArrow } from '../TooltipArrow'; +import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip'; + +test('Renders without children', () => { + render(); + + expect(screen.getByTestId('tooltipArrow')).toBeVisible(); +}); + +test('Renders with class name pf-v5-c-tooltip__arrow by default', () => { + render(); + + expect(screen.getByTestId('tooltipArrow')).toHaveClass(styles.tooltipArrow); +}); + +test('Renders with custom class names provided via prop', () => { + render(); + + expect(screen.getByTestId('tooltipArrow')).toHaveClass('test-class'); +}); + +test('Matches the snapshot', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/packages/react-core/src/components/Tooltip/__tests__/TooltipContent.test.tsx b/packages/react-core/src/components/Tooltip/__tests__/TooltipContent.test.tsx new file mode 100644 index 00000000000..8a80a3e61f3 --- /dev/null +++ b/packages/react-core/src/components/Tooltip/__tests__/TooltipContent.test.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { TooltipContent } from '../TooltipContent'; +import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip'; + +test('Renders with children', () => { + render(Test content); + + expect(screen.getByText('Test content')).toBeVisible(); +}); + +test('Renders with class name pf-v5-c-tooltip__content by default', () => { + render(Test content); + + expect(screen.getByText('Test content')).toHaveClass(styles.tooltipContent); +}); + +test('Renders with custom class names provided via prop', () => { + render(Test content); + + expect(screen.getByText('Test content')).toHaveClass('test-class'); +}); + +test('Does not render with class pf-m-text-align-left when isLeftAligned is not passed', () => { + render(Test content); + + expect(screen.getByText('Test content')).not.toHaveClass('pf-m-text-align-left'); +}); + +test('Renders with class pf-m-text-align-left when isLeftAligned is passed', () => { + render(Test content); + + expect(screen.getByText('Test content')).toHaveClass('pf-m-text-align-left'); +}); + +test('Matches the snapshot', () => { + const { asFragment } = render(Test content); + expect(asFragment()).toMatchSnapshot(); +}); 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 14c149bf298..ff3491e7aef 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,17 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`tooltip renders 1`] = ` - -
- Toggle tooltip +exports[`Matches snapshot 1`] = ` +
- + Tooltip attached via selector ref
} - triggerRef={() => document.getElementById('tooltip-selector')} + id="tooltip-selector-content" + content={
Tooltip content attached via selector ref
} + triggerRef={() => document.getElementById('tooltip-selector-trigger')} />
+
+ Tooltip content with click trigger
}> + +
+
+
+ Tooltip content with custom delay
} + > + + + +
+ Tooltip content with animationDuration
} + > + + + ); }